Using AngularJS directives in Sitecore edit mode

It is quite a standard approach that you can see in many CMS project now – designs, UX, and HTML is done upfront or way in advance in comparison with CMS development. You might think now about Agile and say that all done almost simultaneously within one iteration, but even in this case, you would need to have HTML done before it would be converted into your Sitecore rendering.

In addition to that, there is a huge shift towards front-end technologies which affect Sitecore projects as well. Being a big advocate of a full stack developers that are knowledgeable enough in both Sitecore and front-end technologies used, I still see a lot of cases when Sitecore and front-end code are done by different developers with completely different skill sets.

CONTEXT

All of the above creates a problem of integration of deliverables and maintenance from Sitecore and front-end developers during a project timeline:

  • double work of updating HTML and Sitecore views
  • update HTML directly in rendering or in HTML repository and ask Sitecore developer to add his changes
  • sometimes work even done in separate repositories which make versioning and branching look like “mission impossible”
  • testability of a front-end code isn’t great and not always make sense if errors might be introduced during copying of HTML to renderings.

To address those issues there should be a better way of front-end code integration into Sitecore.

Continue reading “Using AngularJS directives in Sitecore edit mode”

Using AngularJS directives in Sitecore edit mode

Render wrapper around components in Experience Editor (aka Page Editor)

Context

When you working in Experience Editor (previously Page Editor) it is quite difficult to understand hierarchy of controls and their relation one to each other, moreover it is not always clear where your control ends and placeholder starts.
Why not to add some wrappers around controls? Lets see how we can do this.

Continue reading “Render wrapper around components in Experience Editor (aka Page Editor)”

Render wrapper around components in Experience Editor (aka Page Editor)