Insert new element<br>

This document will give you some hints of where to find the code doing the form editing. The code for handling form edit is located in tools/js/dataeaseformedit.js.

Type of element selection

This is done by the this.selectelementtype method and triggered by "t-element-type" class that should sit on the outside of your element or select. When using a element you need to supply an id with 4 parts and for a select you need an id with 3 parts. The parts will be t for prefix type to indicate we are selecting a element type, then the type of element and if you are a toolbar icon and not a select, you add the subtype as well.

Ex. for select id="t-type-field" and then the select will give you the type of field

Ex. for just a element id="t-type-field-choice" will give you a field of type choice

Ex. for switching to select element mode id="t-type-select". This will deselect any element type and switch to select elements in the form mode.

Element selected for insert

You need a type, a subtype and a style to be able to select a template for inserting into the form. When using a 3 part id, the subtype comes from the option in a select, when using an id with 4 parts, the subtype is given by the last part of the id. If using a 5 part id you can also get the default style from the id. If not, the style "default" will be selected. The user can then select other styles from any items in side menu with class="s-style-selectable" set.

The subtype can also trigger extra data for the sidebar menu. The template for the element is in the format id="t-elementtype-subtype-style". If there is no template, we use the default template and add the style after insert. The sidebar menu for styles and setting are added by id="s-type" for the shared data and id="s-type-subtype" for the extra data. This we probably have to extend to merge in elements to get the logical order later on.

Ex. for all labels except for image you get id="s-label" for shared and id="s-label-label" for the rest

Ex. for images you get id="s-label" for shared and id="s-label-image" for the image part.

Inside the sidebar menu, a subgroup might have a list of styles for subgroup. This is added in a list named id="s-type-subtype-tochange-stylelist" with elements that tell what the change should be by their ids.

Ex. when the outer element have id="s-label-outer-class-stylelist" and the s-style-selectable is set on the inner element, a class will be set based on either the text value of the list element or the value of data-valuetoset

Types supported

label	All elements the are static on a page on their own. This can be text, headers or images. The limitation for these label elements are that they do not have data. They can be connected to a field by for="fieldname" and used for labels that you can click on to get to the field  but except that they are static.
field	This are any element that are connected to table data delivered from the server. A element like this will trigger a tdf element for editing data type and derivation. Can be all supported data types like text, numstring, integer, fixed, float, time, date, money, bool, choice or memo.
button	Any element doing gui actions or calling to the server with data or requesting information. Can be action (from dataeaseconnect.js that saves data etc to server), links or custom buttons just doing gui only actions.
block	This is elements put together of other elements or base elements like record, form or subform. It can also be structural page data like rows, columns, menus, carousels etc.
record	This is a subform with it's own settings for table or whether it is table view (multi) or single record (single). A inserted subform can not be main as there is only one in a form and that is created with the form.

Element selection or add element

The code for either add a new element to the form or select an existing one go trough the same function named this.elementclicked. Here what is happening depend if a tool for insert is selected or the selector tool has been clicked to clear all other tools.

There are two routes here determined by the result of this.checkforinsertaction, if there is no tools selected, the element under hit will be selected instead in this.selectelement.

Style and class change from sidebar

There are two scenarios you do changes to an element from the sidebar settings, when selected a element for insert and when selecting a element in the form. In both cases, all changes done go trough this.dostylefieldchanged that is a value change element set on all elements in the sidebar that use auto update. In the other direction most of the interaction for loading values will go by the this.setdefaultsidedefs that will use the id of the element in the sidebar to read values for the element.