Walkthrough: Adding a customized editor rendering

By default, Document Publisher users can edit the content of text and image frames. You can customize the Document Publisher editing options by adding object renderings to the Sitecore.Odg.config file, for example, by adding an object rendering for shapes.

To add an object:

Because the new item requires additional rendering that are not defined in existing data templates, you need to create a new template.

To create a template for the new Z-Index rendering:

Now you can add the control that enables Document Publisher users to change the Z-Index field of content items. The rendering template is saved in Sitecore/client/Your Apps/…. in the core database. Add the control and attach the template that you created earlier to get the Item ID you need for your config file.

To add the control:

The following is an example of the javascript code that is referenced in the template. You need to write this code before you create the template.

For example:

define(["sitecore"], function (_sc) {
   var zIndexEdit = _sc.Definitions.App.extend({
     initialized: function () {
       this.set("item", null);
       this.on("change:item", this.loadItem, this);
       this.ZIndexTextBox.on("change:text", this.changeValue, this);     },
     loadItem: function () {
       var item = this.get("item");
       if (item != null) {
         this.originalZIndex = item["Z-Index"];
         this.ZIndexTextBox.set("text", item["Z-Index"]);       }     },
     changeValue: function () {
       if (!this.isValidInteger(this.ZIndexTextBox.get("text"))) {
         $("[data-sc-id=ZIndexTextBox]").css("border-color", "red");       }
       else {
         $("[data-sc-id=ZIndexTextBox]").css("border-color", "");       }
       var item = this.get("item");
       if (item["Z-Index"] != this.ZIndexTextBox.get("text")) {
         item["Z-Index"] = this.ZIndexTextBox.get("text");       }
     },
     isValidInteger: function (value) {
       var regEx = /^\d+$/;
       return (regEx.test(value));     },
     hasChanges: function () {
       var item = this.get("item");
       if (this.originalZIndex != item["Z-Index"]) {
         return true;       }
       return false;     },
     isValid: function () {
       var item = this.get("item");
       if (!this.isValidInteger(item["Z-Index"])) {
         return false;       }
         return true;     },
      acceptChanges: function () {
         var item = this.get("item");
         this.originalZIndex = item["Z-Index"];     },
   });
   return zIndexEdit; });

Now you have gathered all the information that you need to change the Sitecore.Odg.config file. If you only want to add the possibility to edit the Z-Index of the shape P_Rectangle, you add ZIndexRendering id ({23DEAD5B-8A42-4432-A9F6-FBE28BF14980}) to the additionalRenderings attribute of the P_Rectangle key:

<type key="P_Rectangle" renderingId="{CC74880A-49B7-474F-9E2B-69A05413FA87}" dataRenderingId="" additionalRenderings="{23DEAD5B-8A42-4432-A9F6-FBE28BF14980}"/> 

As you can see, the Document Publisher user now has the possibility to change the size, position, and depth of the rectangle on the page.

You can also add the additional rendering to the other keys. You can add as many renderings as you like in the additionalRenderings attribute. Make sure the list of rendering IDs is separated by “|”. In the example below, the Attributes Edit and the Z-Index rendering have been added for text frames.

<type key="P_TextFrame" renderingId="{CD8E4F2F-A6A4-4DEC-9406-39DE5C4E9C1F}" dataRenderingId="{405DF344-671F-4EC3-AA07-6EFD0E39FD42}" additionalRenderings="{CC74880A-49B7-474F-9E2B-69A05413FA87}|{23DEAD5B-8A42-4432-A9F6-FBE28BF14980}"/>

These additional renderings allow Document Publisher users to change not only the content (the dataRenderingID), but also the size and position (the first additional rendering) and the depth (the second additional rendering) for text frames.