Sidebar automation

The sidebars in form editor follows the element type, and by using some name convention you can automate element property display and updating.

Update values on element when changed in sidebar

The code for setting is triggered by class="s-value-change" that is hooked up to the method this.stylefieldchanged. This then use the id to find the type side bar and what it can change. Default when no special handling is to set the class given by value and remove all other classes that can be set by either the select or a list of divs. If it is a select, all options are removed from class before the new value is set. When a list of div, the data-valuetoset value or if none set the text in the div stripped is used.

Set values when selecting a element

When selecting a element the method this.selectelement is called with the selected element and the element type as parameters. This updates the sidebar values corresponding the the element and shows the correct sidebars based on element type and subtype. For field you also get the table field name when setting up the sidebar.

The element naming convention for automatically set and get

The name for the element is id="s-elementtype-where-what-who-postfix-name". Element types are the same as for data-elementtype. Supported now is label, button, field, block, record and form. What is usually outer when manipulating the element with data-enementtype or the element type when doing the inner element set. The what element is usually style, class or name. The who and postfix are used mainly by style to  set tell what style we are manipulating. Name is just for the programmer to remember what the field is for. All elements not used after what can be skipped if there is no need for it.

Example of common id names used and what they set

ID	What it will set or get
s-label-outer-style-top-px	This set or get the top position in a absolute position element form the style in the outer element. Ex. style="position:absolute;width:400px;left:600px;top:450px;" will set 450 in the side bar.
s-field-field-class-size	This will manipulate the inner field element of type input, select or textarea and find the matching class in the select or list. Ex. the input field can gave the classes form-control-sm for small, nothing for default and form-control-lg for large. This is presented for the user as a select. On getting the value from the element, it will make a list of all options and match the classes with the element. On change it do it the other way around and removed all classes from the options and set the one selected.
s-field-field-name	Read and update the id of the inner field element