"Screen form constructor" tab

You can switch to the tab "Screen form constructor" either by clicking the button "Create screen form" or by opening the selected screen form by clicking its name in the table "My screen forms".

The "Screen form constructor" tab displays the created and editable screen forms.

Above the workspace of the screen form constructor there is a line with panels of buttons for controlling the screen form and quick action buttons.

When you hover the cursor over a button, a tooltip with the button name appears.

Screen form control bar

The screen form control panel contains the following buttons:

1. "Preview" button - is intended for previewing the ready screen form.
   
   
   
   
2. "Publish" button - is used to publish the finished screen form.
   
   
   
3. "Edit" button - is used to edit the screen form.
   
4. "Close" button - if you click the "Close" button, the editor tab is closed and the "My screen forms" tab is opened. The created form is automatically saved.

Quick action bar buttons

The following quick action bar buttons are provided:

Screen form elements panel

Below the Quick actions panel along the entire left edge of the workspace is a panel with screen form elements.

The table shows the purpose of the screen form elements.

The elements are grayed out when you point and select them.

Screen form element options panel

Along the right edge, when you add a form element, the Options panel for screen elements opens, which contains fields for entering text, values, and element placement coordinates.

Workspace of the screen form editor

The main part of the page is occupied by the working field of the screen form editor. The field can contain elements from the panel with screen form elements. Elements can be added by dragging with the left mouse button clicked.

When adding a screen form element, the following typical sequence of operations is performed:

1. Select a screen form element from the element panel on the left side of the window by dragging and dropping the screen form element with the computer mouse.
2. In the right part of the interface, the "Parameters" window opens, where the workflow designer can customize the screen form element.
3. Filling in the fields of the screen form element parameters, thereby editing the look, shape and filling of the screen form element.
4. Move to select the next screen form element.

"Button" element

When adding the "Button" screen form element, the following typical sequence of operations is performed:

1. When you transfer the "Button" element from the element block and place it into the form, the Button element parameters window opens on the right side of the interface.
2. Selecting a variable in the "Name" field associated with this button.
3. Setting the width of the button through the checkbox.
4. Selecting the button type from the dropdown list.
5. Using the checkbox, selecting whether to color the entire button or only its border.
6. Switching to the selection of another element.

"Text block" element

When placing an element of the screen form, the following typical sequence of operations is performed:

1. When you transfer from the element block and place the "Text block" element into the form, the "Text block" element parameters window opens in the right part of the interface.
2. Filling the "Text" field with a text message up to 500 symbols.
3. Choice of font format (normal, bold, underline, italic).
4. Selecting the font size.
5. Choice of text alignment (left, right, center).
6. Setting the object class.
7. Switching to the selection of another element.

"Text field" element

When placing an element of the screen form, the following typical sequence of operations is performed:

1. When you transfer from the element block and place the "Text field" element into the form, the "Text field" element parameters window opens on the right side of the interface.
2. Entering the variable name in the "Variable name" field. Using the variable of the screen form you can substitute it as an input value that will be displayed in this element or used in the results of work with the screen form.
3. Enter a name in the "Name" field.
4. Select a variable type (string, number) from the dropdown list.
5. Entering a hint in the "Hint" field.
6. If necessary, you can make the field mandatory via the workflow designer checkbox.

7. Selecting the position of the label (top, left).

8. Setting the default value if necessary.

9. Adjusting the block size and the position of the "Title" relative to the text field.

10. Setting the number of displayed strings, if necessary.

11. Setting the field property (editable, read-only).

12. Setting the object class, if it is necessary to change the block style.

13. Switching to the selection of another element.

"Checkbox" element

When placing an element of the screen form, the following typical sequence of operations is performed:

1. When you transfer from the element block and place the "Checkbox" element into the form, the "Checkbox" element parameters window opens in the right part of the interface.
2. Entering the variable name in the "Variable name" field. Using the variable of the screen form you can substitute it as an input value that will be displayed in this element or used in the results of work with the screen form.
3. Enter a name in the "Name" field.
4. Setting the size.
5. Selecting the default value (yes, no).
6. Selecting the checkbox property (edited, read-only).
7. Setting the object class, if it is necessary to change the block style.
8. Switching to the selection of another element.

"Table" element

When placing an element of the screen form, the following typical sequence of operations is performed:

1. When you transfer from the element block and place the "Table" element into the form, the "Table" element parameters window opens on the right side of the interface.
2. Entering the variable name in the "Variable name" field. Using the variable of the screen form you can substitute it as an input value that will be displayed in this element or used in the results of work with the screen form.
3. Enter the name of the variable in the "Name" field.
4. If necessary, select "View data only".
5. Entering parameters for building a table, specifying the number of columns and rows.
6. Setting the flooding, type and font size of the table header.
7. Setting for each column of the table its header and width.
8. Entering the object class, if necessary.
9. Switch to the selection of another element.

"Radio button" element

When placing an element of the screen form, the following typical sequence of operations is performed:

1. When you transfer from the element block and place the "Radio button" element into the form, the "Radio button" element parameters window opens in the right part of the interface.
2. Entering the variable name in the "Variable name" field. Using the variable of the screen form you can substitute it as an input value that will be displayed in this element or used in the results of work with the screen form.
3. Enter a name in the "Group name" field.
4. Setting the label position (on top, left).
5. Customizing the width of the group name and buttons.
6. Customizing radio button properties (editable, read-only).
7. Entering the default selection feature of the current radio button through the checkbox, if necessary.
8. Entering the object class if necessary.
9. Adding/removing a radio button to a group (icons "+" and "Trash").
10. The possibility to customize each radio button of the group by analogy with the customization of the first radio button.
11. Switch to the selection of another element.

"Dropdown list" element

When placing an element of the screen form, the following typical sequence of operations is performed:

1. When you transfer from the element block and place the "Dropdown list" element into the form, the parameters window of the "Dropdown list" element opens in the right part of the interface.
2. Entering the variable name in the "Variable name" field. Using the variable of the screen form you can substitute it as an input value that will be displayed in this element or used in the results of work with the screen form.
3. Enter a name in the "Name" field.
4. Setting the position of the title (on top, left).
5. Setting the "Name width" value.
6. Setting the "Dropdown list width" value to indicate the width of the field with the drop-down list.
7. Listing the values in the "List" section that will be displayed in the dropdown list on the screen form. Adding a new value by entering text in the field and clicking the "+" button. Using the "Trash" button you can delete an unnecessary value.
8. Entering the object class, if necessary.
9. Switch to the selection of another element.

"Upload attachment" element

When placing a screen form element, the following typical sequence of operations is performed:

1. Transfer from the element block and place the "Upload attachment" element into the form.
2. Enter a variable name in the "Variable name" field. Using a screen form variable, you can substitute it as an input value that will be displayed in this element or used in the results of work with the screen form.
3. Enter a value in the "Name" field to display the name of the Upload Attachment field.
4. Customize the label position (on top, left).
5. Setting the "Title width" value.
6. Setting the "Input field width" value.
7. Entering file format types on the ".format" form or selecting the desired ones from the list in the "Accepted file formats" field to limit the file formats that users can attach as an attachment to the screen form.
8. Entering an object class if necessary.
9. Switch to placing a new item.

"Link" element

When placing a screen form element, the following typical sequence of operations is performed:

1. Transferring from the element block and placing the "Link" element into the form.
2. Entering a variable name in the "Variable name" field. Using a screen form variable, you can substitute it as an input value that will be displayed in this element or used in the screen form results.
3. Enter the name of the attachment in the "Name" field.
4. Setting the label position (on top, left).
5. Customizing the "Title width" value.
6. Setting the "Input field width" value.
7. Entering a link value in the "Link text" field.
8. Entering the object class, if necessary.
9. Switching to placement of a new element.

"Calendar" element

When placing an element of the screen form, the following typical sequence of operations is performed:

1. Transferring from the block of elements and placing the "Calendar" element into the form.
2. The window of parameters of the Calendar element opens in the right part of the interface.
3. Entering the variable name in the "Variable name" field. Using the variable of the screen form you can substitute it as an input value that will be displayed in this element or used in the results of work with the screen form.
4. Enter the name of the calendar in the "Name" field.
5. Setting the label position (on top, left).
6. Customizing the Title Width value.
7. Setting the "Input field width" value.
8. Selecting a date format from the dropdown list.
9. Setting the calendar property (editable, read-only).
10. Entering the object class, if necessary.
11. Switching to placement of a new element.

"Image" element

When placing a screen form element, the following typical sequence of operations is performed:

1. Transferring from the element block and placing the "Image" element into the form.
2. The Image element parameters window opens in the right part of the interface.
3. Entering the variable name in the "Variable name" field.
4. Setting the width size if necessary.
5. Setting the height size if necessary.
6. Entering the object class, if necessary.
7. Switching to placement of a new element.

"Columns" element

When you add a "Columns" screen form element, the following typical sequence of operations is performed:

1. The workflow designer selects the "Columns" block in the function block panel
2. The workflow designer clicks the "Columns" block with the LMB and moves the block to the workspace of the screen form.
3. The right side of the screen displays the settings panel of the "Columns" block placed on the screen form.
4. You can add a column, make adjustments to the size of columns, ways of elements placement in these columns (top center, center, bottom center), line style (solid, dashed, dotted), line width.
5. Customizing the "Columns" block.
6. Finish the "Columns" block customization by clicking the "Close" button.
7. The "Columns" block is closed.

The Columns element in the simplest case is two paired rectangles.

The screen form parameters are used in the workflow to transfer data to the screen form and to retrieve data from the screen form in workflow steps.

This is how the structure of the screen form is created.

Each of the screen form elements, except for the "Columns" block, has both input and output parameters, which are filled in directly in the process designer when building the workflow project task chain.

To the right of the workspace is a panel for setting the properties of the tool to be customized. The properties panel of the tool to be customized can be closed by clicking on the "X" icon located in the upper right corner of the tool. After all toolbars are closed, the entire form customization panel becomes visible.

Example of setting properties for the "Columns" element

By clicking on the "Add column" button, a new column can be added. Clicking the "+" button to the right of the column number reveals a detailed list of settings related to the selected column

You can specify how many percent the selected column will occupy, as well as its stroke and width.

Column element placement and line style can be customized using the corresponding dropdown lists.

The "-" and "Trash" buttons located to the right of the column number are used to "collapse" the column settings and delete it, respectively.

To increase the flexibility of customization of some screen form elements (for example, text field, block with text, etc.), you can set the style class of the screen form element, which allows you to associate this screen form element with the style design, which is specified in the settings of screen form parameters in the js or css code field. For this purpose, an optional parameter "Class" is introduced, in the value of which it is allowed to specify several classes at once, separating them by a space.

To structure the arrangement of elements on the form, it is recommended to place them in the rectangles of the "Columns" tool.

You can check out the link:
 

• Examples of working with the "Screen form constructor" tab