История страницы

...

The screen form control panel contains the following buttons:

1. The "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 press click the "Close" button, the editor tab is closed and the "My screen forms" tab is opened. The created form is automatically saved.

...

The following quick action bar buttons are provided:

Панель элементов экранной формы

Под панелью быстрых действий вдоль всего левого края рабочей области располагается панель с элементами экранной формы.

Image Removed

В таблице приведено назначение элементов экранной формы.

...

...

Элемент «Блок с текстом» – предназначен для размещения на экранной форме текстовых полей

...

...

...

Элемент «Кнопка» – предназначен для последующего ветвления вариантов выполнения. Название кнопки используется в качестве названия логической переменной. У нее есть обязательное поле для заполнения «Значение при подтверждении»

...

...

...

Элемент «Текстовое поле» – предназначен для размещения на экранной форме текстовых значений, таких, как заголовки и прочие наименования, уведомления и оповещения, которые не меняются впоследствии при работе с экранной формой в процессе выполнения экземпляров процессов, в которых присутствует данная форма

...

...

...

Элемент «Чекбокс» – предназначен для выбора каких-либо значений из представленных Дизайнеру процесса в экранной форме, одного или нескольких, результатом которого будет следующее действие с экранной формой или с задачей в целом, в зависимости от выбора пользователя и состава самой экранной формы. То есть при помощи чекбоксов можно создать условия выбора нескольких родственных или взаимосвязанных значений, либо не выбирать совсем, что тоже будет приводить к выполнению определённого действия в работе экземпляра процесса

...

...

...

Элемент «Таблица» – предназначен для размещения таблицы на экранной форме

...

...

...

Элемент «Радиокнопка» – предназначен для выбора какого-то одно значения из нескольких представленных. Значения могут быть как родственными, так и противоположными. Но, при использовании данного элемента, всегда существует условие выбора какого-либо значения, в отличие от чекбокса, где можно не выбирать ни одного элемента

...

...

...

Элемент «Выпадающий список» – предназначен для выбора данных, в рамках выполнения экземпляра процесса. Элементы процесса самостоятельно вписываются в список

...

...

...

Элемент «Загрузить вложение» – предназначен для прикрепления каких-либо либо файлов пользователя из локального хранилища, требуемых в процессе выполнения экранной формы в рамках работы экземпляра процесса

...

...

...

Элемент «Ссылка» – предназначен для скачивания прикреплённого к экранной форме вложения

...

...

...

Элемент «Календарь» – предназначен для быстрого выбора пользователем, при необходимости, даты или временного интервала. Таким образом у пользователя экранной формы нет необходимости выбирать формат даты, после указания ее в календаре, он будет выбран автоматически

...

...

...

Элемент «Колонки» – предназначен для позиционирования и группировки элементов экранной формы

...

...

...

Элемент «Изображение» – предназначен для размещения изображения

...

Screen form elements panel

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

Image Added

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.

Image Added

"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.

Image Added

"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.

Image Added

"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.

Image Added

"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.

Image Added

"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.

Image Added

"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.

Image Added

"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.

Image Added

"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.

Image Added

"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 Added

"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.

Image Added

"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.

Image Added

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.

Image Added

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

Image Added

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.

Image Added

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

Image Added

Image Added

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

Image Added

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.

Image Added

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:
 

При наведении и выборе элементы выделяются серым цветом.

Панель параметров элементов экранной формы

Вдоль правого края при добавлении элемента экранной формы открывается панель параметров для элементов экранной формы, которая содержит поля для ввода текста, значений и координат размещения элемента.

Рабочее поле редактора экранных форм

Основную часть страницы занимает рабочее поле редактора экранных форм. На поле могут располагаться элементы из панели с элементами экранной формы. Элементы могут добавляться перетаскиванием с зажатой левой кнопкой мыши.

При добавлении элемента экранной формы выполняется следующая типовая последовательность операций:

1. Выбор элемента экранной формы из панели элементов, расположенной слева в окне, перетаскиванием элемента экранной формы, при помощи компьютерной мыши.
2. В правой части интерфейса открывается окно «Параметры», где дизайнер процесса может настроить элемент экранной формы.
3. Заполнение  полей параметров элемента экранной формы, тем самым редактируя вид, форму и наполнение элемента экранной формы.
4. Переход к выбору следующего элемента экранной формы.

Элемент «Кнопка» 

При добавлении элемента экранной формы  "Кнопка" выполняется следующая типовая последовательность операций:

1. Перенос из блока элементов и размещение в форму элемент "Кнопка", в правой части интерфейса открывается окно параметров элемента "Кнопка".
2. Выбор переменной в поле «Название», ассоциированной с данной кнопкой.
3. Настройка через чекбокс ширины кнопки.
4. Выбор типа кнопки из выпадающего списка.
5. Выбор через чекбокс выделение цветом всей кнопки или только ее обводки.
6. Переход к выбору другого элемента.

Image Removed

Элемент «Блок с текстом» 

При размещении элемента экранной формы выполняется следующая типовая последовательность операций:

1. Перенос из блока элементов и размещение  в форму элемента «Блок с текстом», в правой части интерфейса открывается окно параметров элемента «Блок с текстом».
2. Заполнение поля «Текст» текстовым сообщением до 500 символов.
3. Выбор формата написания шрифта (нормальный, жирный, наклонный, подчеркнутый).
4. Выбор размера шрифта.
5. Выбор расположения текста (слева, справа, по центру).
6. Настройка класса объекта.
7. Переход к выбору другого элемента.

Image Removed

Элемент «Текстовое поле» 

При размещении элемента экранной формы выполняется следующая типовая последовательность операций:

1. Перенос из блока элементов и размещение  в форму элемента «Текстовое поле», в правой части интерфейса открывается окно параметров элемента «Текстовое поле».
2. Ввод в поле «Имя переменной» имени переменной. Используя переменную экранной формы можно подставить ее в качестве входного значение, которое будет отображаться в этом элементе или использоваться в результатах работы с экранной формой.
3. Ввод названия в поле «Название».
4. Выбор типа переменной (строка, число) в выпадающем списке.
5. Ввод подсказки в поле «Подсказка».
6. При необходимости через чекбокс дизайнер процесса можно сделать поле обязательным для заполнения.
7. Выбор положения названия (сверху, слева).
8. Установка при необходимости значения по умолчанию.
9. Корректировка размеров блока и расположения «Названия» относительно текстового поля.
10. Установка при необходимости количества отображаемых строк.
11. Установка свойства поля (редактируемое, для чтения).
12. Настройка класса объекта, если необходимо поменять стиль блока.
13. Переход к выбору другого элемента.

Image Removed

Элемент «Чек-бокс» 
При размещении элемента экранной формы выполняется следующая типовая последовательность операций:

1. Перенос из блока элементов и размещение  в форму элемента  «Чекбокс»,  в правой части интерфейса открывается окно параметров элемента «Чекбокс.
2. Ввод в поле «Имя переменной» имени переменной. Используя переменную экранной формы можно подставить ее в качестве входного значение, которое будет отображаться в этом элементе или использоваться в результатах работы с экранной формой.
3. Ввод наименования в поле «Название».
4. Установка размера.
5. Выбор значения по умолчанию (да, нет).
6. Выбор свойства чекбокса (редактируемый, для чтения).
7. Настройка класса объекта, если необходимо поменять стиль блока.
8. Переход к выбору другого элемента.

Image Removed

Элемент «Таблица»  
При размещении элемента экранной формы выполняется следующая типовая последовательность операций:

1. Перенос из блока элементов и размещение  в форму элемента "Таблица",  в правой части интерфейса открывается окно параметров элемента "Таблица".
2. Ввод в поле «Имя переменной» имени переменной. Используя переменную экранной формы можно подставить ее в качестве входного значение, которое будет отображаться в этом элементе или использоваться в результатах работы с экранной формой.
3. Ввод названия переменной в поле «Название».
4. Выбор при необходимости через чекбокс значение «Только просматривать данные.
5. Ввод параметров для построения таблицы, с указанием числа колонок и строк.
6. Настройка заливки, типа и размера шрифта заголовка таблицы.
7. Настройка для каждой колонки таблицы ее заголовка и ширины.
8. Ввод при необходимости класса объекта.
9. Переход к выбору другого элемента.

Image Removed

Элемент «Радиокнопка» 
При размещении элемента экранной формы выполняется следующая типовая последовательность операций:

1. Перенос из блока элементов и размещение  в форму элемента  «Радиокнопка»,  в правой части интерфейса открывается окно параметров элемента «Радиокнопка».
2. Ввод в поле «Имя переменной» имени переменной. Используя переменную экранной формы можно подставить ее в качестве входного значение, которое будет отображаться в этом элементе или использоваться в результатах работы с экранной формой.
3. Ввод наименования в поле «Название группы».
4. Настройка положения названия (сверху, слева).
5. Настройка значения ширины названия группы и кнопок.
6. Настройка свойств радиокнопки (редактируемая, для чтения).
7. Ввод при необходимости через чекбокс признака выбора текущей радиокнопки по умолчанию.
8. Ввод при необходимости класса объекта.
9. Добавление/удаление радиокнопки в группу (иконки «+» и «Корзина»).
10. Наличие возможности настройки каждой радиокнопки группы по аналогии с настройкой первой радиокнопки.
11. Переход к выбору другого элемента.

Image Removed

Элемент «Выпадающий список» 
При размещении элемента экранной формы выполняется следующая типовая последовательность операций:

1. Перенос из блока элементов и размещение  в форму элемента «Выпадающий список», в правой части интерфейса открывается окно параметров элемента «Выпадающий список».
2. Ввод в поле «Имя переменной» имени переменной. Используя переменную экранной формы можно подставить ее в качестве входного значение, которое будет отображаться в этом элементе или использоваться в результатах работы с экранной формой.
3. Ввод названия в поле «Название».
4. Настройка положения названия (сверху, слева).
5. Настройка значения «Ширина названия».
6. Настройка значения «Ширина выпадающего списка» для обозначения ширины поля с выпадающим списком.
7. Перечисление значений в разделе «Список», которые будут выводиться в выпадающем списке на экранной форме. Добавление нового значения, вводом текста в поле и нажав на кнопку «+». При помощи кнопки «Корзина» можно удалить лишнее значение.
8. Ввод при необходимости класса объекта.
9. Переход к выбору другого элемента.

Image Removed

Элемент «Загрузить вложение» 
При размещении элемента экранной формы выполняется следующая типовая последовательность операций:

1. Перенос из блока элементов и размещение  в форму элемента  «Загрузить вложение».
2. Ввод в поле «Имя переменной» имени переменной. Используя переменную экранной формы можно подставить ее в качестве входного значение, которое будет отображаться в этом элементе или использоваться в результатах работы с экранной формой.
3. Ввод в поле «Название» значения для отображения названия поля «Загрузить вложение».
4. Настройка положения названия (сверху, слева).
5. Настройка значения «Ширина названия».
6. Настройка значения «Ширина поля для ввода».
7. Ввод типов форматов файлов по форме «.формат» или выбор нужных из списка в поле «Формат принимаемых файлов», чтобы ограничить форматы файлов, которые пользователи смогут прикрепить в качестве вложения к экранной форме.
8. Ввод при необходимости класса объекта.
9. Переход к размещению нового элемента.

Image Removed

Элемент «Ссылка»
При размещении элемента экранной формы выполняется следующая типовая последовательность операций:

1. Перенос из блока элементов и размещение  в форму элемента «Ссылка».
2. Ввод в поле «Имя переменной» имени переменной. Используя переменную экранной формы можно подставить ее в качестве входного значение, которое будет отображаться в этом элементе или использоваться в результатах работы с экранной формой.
3. Ввод в поле «Название» названия вложения.
4. Настройка положения названия (сверху, слева).
5. Настройка значения «Ширина названия».
6. Настройка значения «Ширина поля для ввода».
7. Ввод значения  ссылки в поле «Текст ссылки».
8. Ввод при необходимости класса объекта.
9. Переход к размещению нового элемента.

Image Removed

Элемент «Календарь» 
При размещении элемента экранной формы выполняется следующая типовая последовательность операций:

1. Перенос из блока элементов и размещение  в форму элемента «Календарь».
2. в правой части интерфейса открывается окно параметров элемента «Календарь».
3. Ввод в поле «Имя переменной» имени переменной. Используя переменную экранной формы можно подставить ее в качестве входного значение, которое будет отображаться в этом элементе или использоваться в результатах работы с экранной формой.
4. Ввод наименования календаря в поле «Название».
5. Настройка положения названия (сверху, слева).
6. Настройка значения «Ширина названия».
7. Настройка значения «Ширина поля для ввода».
8. Выбор из выпадающего списка формата представления даты.
9. Настройка свойства календаря (редактируемый, для чтения).
10. Ввод при необходимости класса объекта.
11. Переход к размещению нового элемента.

Image Removed

Элемент «Изображение» 

При размещении элемента экранной формы выполняется следующая типовая последовательность операций:

1. Перенос из блока элементов и размещение  в форму элемента  «Изображение».
2. В правой части интерфейса открывается окно параметров элемента «Изображение».
3. Ввод имени переменной в поле «Имя переменной».
4. Настройка при необходимости размера ширины.
5. Настройка при необходимости размера высоты.
6. Ввод при необходимости класса объекта.
7. Переход к размещению нового элемента.

Image Removed

Элемент «Колонки» 

При добавлении элемента экранной формы «Колонки» выполняется следующая типовая последовательность операций:

1. Дизайнер процесса выбирает в панели функциональных блоков блок «Колонки»
2. Дизайнер процесса зажимает левой клавишей мыши блок «Колонки» и переносит блок на рабочую область экранной формы.
3. В правой части экрана отображается  панель настроек блока «Колонки», размещённого на экранной форме.
4. Добавление колонки, внесение корректировок размеров колонок, способов размещения элементов в данных колонках (сверху посередине, в центре, снизу посередине), стиль линии (сплошная, пунктир, точка), ширина линии.
5. Настройка блока «Колонки».
6. Завершение настройки блока "Колонки" нажатием кнопки «Закрыть».
7. Блок «Колонки» закрывается.

Image Removed

Элемент «Колонки» в простейшем случае представляет собой два парных прямоугольника.

Параметры экранной формы используются в процессе для передачи данных в экранную форму и для получения данных из экранной формы в шагах процесса.
Таким образом создается структура экранной формы. 

Каждый из элементов экранной формы, кроме блока «Колонки», имеют как входные параметры, так и выходные, которые заполняются уже непосредственно в конструкторе процессов, при выстраивании цепочки задач проекта процесса. 

Image Removed

Справа от рабочего поля размещается панель задания свойств настраиваемого инструмента. Панель свойств настраиваемого инструмента может быть закрыта нажатием на расположенный в ее правом верхнем углу значок «Х». После закрытия всех панелей инструментов становится видна панель настройки формы в целом.

Пример задания свойств для элемента "Колонки" 

Image Removed

Нажав на кнопку «Добавить колонку», можно добавить новую колонку. Нажав на кнопку «+» справа от номера колонки, можно «Раскрыть подробный список настроек, связанных с выбранной колонкой.

Можно указать сколько процентов будет занимать выбранная колонка, также обводку и ее ширину.

Image Removed

Размещение элементов колонки и стиль линии могут быть настроены с помощью соответствующих выпадающих списков.

Image Removed

Image Removed

Для «свертывания» настроек колонки и ее удаления используются соответственно кнопки «–» и «Корзина», расположенные справа от номера колонки.

Image Removed

Для повышения гибкости настроек некоторых элементов экранной формы (например, текстовое поле, блок с текстом и др.) поддерживается задание стилевого класса элемента экранной формы, что позволяет связать данный элемент экранной формы со стилевым оформлением, который прописывается в настройках параметров экранной формы в поле кода js или css. Для этого вводится необязательный параметр «Класс», в значении которого допускается указывать сразу несколько классов, разделяя их между собой пробелом.

Image Removed

Для структурирования расположения элементов на форме рекомендуется размещать их в прямоугольники инструмента «Колонки».

По ссылке можно посмотреть 

...