Every property of any component is displayed on the BackOffice website as property name on the left, and property input area rendered on the right. In the custom Property Editor code this is implemented by declaring properties to get/set property editor specific values, as well as overriding base methods that get the supported types, parse the value, and render the input field. For example, TextPropertyEditor class found in Seeems.Framework, actually represents the text area as an input field in BackOffice. HtmlPropertyEditor class is a similar example but with different input rendering.
By closley examining the code of Render(Control container) {...} method declared in the base Property Editor class, we will see that is how it actually instantiates the graphical display of component’s property in the BackOffice. Every property is shown as:
- Label containing PropertyName and FieldName, and
- Input part where the property value itself is presented.
The HTML code for the label and input type added to the BackOffice website through our own CustomPropertyEditor type will look something like the code snippet below, as seen in the BackOffice.
HTML label and input elements as inspected on the BackOffice default page
The Render method calls two other methods: RenderCaption and RenderInput, in that way completing the graphical display of component properties. The former method is used to display the Label with the PropertyName in the BackOffice, with "ClickForInfo" tooltip alongside, that displays the component’s property description. RenderInput method is used for displaying the actual property input field.