In order to use the Editorial Comments feature for custom property fields, the property field needs to implement the ISideButtonMixin and call initSideButtonMixin() in its constructor. This mixin enables the component to render a floating button in its top right corner. The property field also needs to make use of the PropertyFieldPlugin as shown in the example below:

<local:CustomField sideButtonVerticalAdjustment="{10}"
                   sideButtonHorizontalAdjustment="{20}"
                   sideButtonRenderToFunction="{
                     function(host:Component):Element {
                       return host['bodyEl'];
                     }
                   }">
  <local:plugins>
    <editor:PropertyFieldPlugin propertyName="description"/>
  </local:plugins>
</local:CustomField>

As shown in the example, CustomField implements the ISideButtonMixin and now provides a variety of properties to render the button correctly. You can define offsets to change the position or provide a function that specifies where the button should be rendered in the component hierarchy. You could also disable the button by setting sideButtonDisabled to true;

Note

The title of a comment thread in the FeedbackHub depends on the property name, set in the corresponding PropertyFieldPlugin. These titles are localized just like in the document form. This means, you will have to provide a localization in the form <CapType>_<PropertyName>_text in BluePrintDocumentTypes.properties. (e.g. CMChannel_title_text)

If no localization is given, the key will be displayed as a fallback. Also, if the property field label is hidden by a surrounding PropertyFieldGroup, the comment thread will automatically use the title of the PropertyFieldGroup as the label of the comment thread.