Check documentation for the latest version of dhtmlxSuite User Interface DHTMLX Docs

User Interface

Form designer by default looks like this:


The same as the parent designer, it contains 4 parts:

1) Workspace - the working space. While you're adding or deleting elements, altering their properties, all the changes are being presented there.

2) Controls pane - a list of available controls. Right from here you can add controls to form.

3) Properties pane - displays properties of the selected control and provides editable text fields for editing the properties.

Top bar contains 2 tabs:

  • Properties - allows changing common properties of the currently selected control.
  • Globals - allows affecting all the controls placed on the workspace.

4) Toolbar - provides functionality for locating controls and saving/cancelling the created configuration.

Contains 4 buttons:

  • designer/alignment_button.png - allows aligning selected control(s);
  • designer/distance_button.png - allows setting the same distance between several selected controls;
  • designer/delete_button.png - enables deleting a control;
  • designer/close_button.png - closes the window. Doesn't save the made changes;
  • designer/save_button.png - enables saving the current configuration and moving it to the workspace of the main (parent) designer.
Back to top