При создании виджета с помощью Simple-тегов, используйте приведенные ниже атрибуты для настройки его функциональности.
Когда виджет реализован, все значения атрибутов тега передаются в виде строки независимо от типа атрибута; на этапе обработки значение атрибута применяется в соответствии с указанным типом.
Типы атрибутов
Атрибуты виджетов разделяются на два типа:
- атрибуты конфигураций, которые определяют форму виджетов.
- атрибуты событий, которые используются при настройке действий пользователя на виджете.
Атрибуты конфигураций
Атрибут | Тип | Описание | Тег |
---|---|---|---|
alignRight | Boolean | Установите значение true, чтобы выровнять текст по правому краю. | |
beginDate | String | Укажите минимальное значение даты в поле. beginDate <datetime model="data.dueDate" label="data.dueDateTitle" isMandatory="true" beginDate="{data.beginDate}" endDate="{data.endDate}"></datetime> Серверный скрипт const nowDate = new SimpleDateTime(); data.beginDate = nowDate.getDate(); nowDate.addDays(3); data.endDate = nowDate.getDate(); | |
buttonType | String | Укажите стиль отображения кнопок. Неактивные кнопки окрашены в серый. Цвета кнопок:
Используйте следующие типы кнопок вместе с заданным атрибутом svg:
buttonType <button class="btn" event-click="window.s_widget_custom.forceUpdate();" buttonType="destructive"> Обновить </button> | <button> |
canExcludeAll | Boolean | Установите значение true, чтобы сделать возможным оставить поле без выбранных элементов. values <multiselect model="data.values" canExcludeAll="true" values='["1", "2"]' options='[{"database_value":"1","display_value":"Первый"},{"database_value":"2","display_value":"Второй"}]'></multiselect> | <multiselect> |
canRead | Boolean | Установите для атрибута значение false, чтобы сделать указанную таблицу недоступной. | |
canCreate | Boolean | Установите значение true, чтобы добавить кнопку | |
categoryDescription | String | Укажите поле таблицы, которое содержит описание категорий. | |
categoryIcon | String | Укажите колонку таблицы, которая содержит иконки категорий. | |
categorySubject | String | Укажите поле таблицы, которое содержит заголовки категорий. | |
childDepth | Integer | Укажите глубину дочерней категории. | |
choiceConditionName | String | Определите колонки, содержащие данные типа Choice, чтобы указать опции выбора в условии. | |
class | String | Добавьте название классов, для которых стили заданы в поле CSS виджета. Определите значение атрибута в поле виджета Шаблон. Затем, опишите его в поле CSS. Шаблон <button id="addBtn" class="button disable" event-click="window.s_widget_custom.addParticipants()"> {data.createCABbuttonTitle} </button>
CSS Expand source
.button { font-weight: 600; font-size: 14px; color: #fff; display: inline-block; vertical-align: top; text-align: center; border-radius: 4px; padding: 0 14px; line-height: 30px; letter-spacing: 0.2px; background-color: #0f8af9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; height: 32px; } .button.disable { cursor: not-allowed; pointer-events: none; color: #c0c0c0; background-color: #ffffff; } | Все Simple-теги, кроме общих тегов и портальных тегов |
condition | String | Задайте условие. Это аналог ссылочного ограничителя в агентском интерфейса. condition <reference isFixed="true" condition="{data.condition}" label="{data.instanceTitle}" tableName="sys_cmdb_ci_instance" model="data.instance" event-change="s_widget_custom.instanceSelected();"> </reference> Серверный скрипт if (!!input.tableName && !!input.caller) { data.condition = `owned_by=${input.caller}^ORDERBYDESCsys_created_at`; } | |
config | String | Настройте ленту активности. Опишите объект в формате JSON. Определите следующие параметры:
| |
date | String | Укажите колонку, которая содержит информацию о дате и времени создания используемого элемента. | |
dateColumn | String | Укажите колонку таблицы, содержащую даты, относящиеся к элементам списка. | |
dateConditionName | String | Определите колонки, содержащие данные типа Date или Date/Time, если необходимо указать временные периоды в условии. | |
disabled | Boolean | Укажите значение true, чтобы сделать кнопку неактивной. В этом случае на кнопку нельзя нажать. | |
displayColumnNumber | Integer | Укажите номер колонки, по клику на которую открывается запись. | |
doClose | Function | Укажите, какую функцию необходимо выполнить при закрытии модального окна или меню. doClose <modal isShow="{data.isShow}" doClose="window.s_widget_custom.countClosing();"> </modal> Клиентский скрипт window.s_widget_custom.countClosing = function () { window.closeCount = window.closeCount + 1 || 1 s_widget.setFieldValue('isShow', false); } | |
elementCount | String | Укажите количество элементов на странице. По умолчанию значение атрибута равно 5. | |
endDate | String | Укажите максимально возможное значение даты в поле. beginDate <datetime model="data.dueDate" label="data.dueDateTitle" isMandatory="true" isVisible="true" beginDate="{data.beginDate}" endDate="{data.endDate}"></datetime> Серверный скрипт const nowDate = new SimpleDateTime(); data.beginDate = nowDate.getDate(); nowDate.addDays(3); data.endDate = nowDate.getDate(); | |
events | String | Укажите, какие действия необходимо выполнить после того, как выбран один из преднастроенных шаблонов:
| |
exclude | Array | Укажите параметры, которые не нужно отображать. exclude <durationinput value='{data.duration1}' exclude='["days","seconds"]' alignRight='true' onChange="s_widget_custom.onChange1(arguments[0]);"></durationinput> <durationinput value='{data.duration2}' exclude='["days","seconds"]' alignRight='true' onChange="s_widget_custom.onChange2(arguments[0]);"></durationinput> | |
fixedCondition | String | Укажите условие, применяемое к списку. в отличие от условия, заданного атрибутом condition, это условие является фиксированным и не может быть удалено, его можно дополнить с помощью уточнений. Логика работы атрибута схожа с фиксированным ссылочным ограничителем. | |
hint | String | Задайте текстовую подсказку кнопке. | |
includeCategories | Integer | Установите значение 1, чтобы добавить категории в боковое меню. | <sidemenu> |
includeItems | Integer | Установите значение 1, чтобы добавить элементы в боковое меню. | <sidemenu> |
isAlwaysOpen | Boolean | Установите значение true, чтобы сделать ленту активности всегда открытой. В этом случае шеврон | |
isFixed | Boolean | Установите значение true, чтобы отключить возможность изменять значение условия. isFixed <reference isFixed="true" isMandatory="true" condition="(state!=10)" label="Инцидент" model="data.incident_id" tableName="itsm_incident"> </reference> | |
isFullScreenMode | Boolean | Установите для атрибута значение true, чтобы при открытии на мобильном устройстве, модальное окно отображалось на весь экран. | |
isMandatory | Boolean | Установите значение true, чтобы сделать поле обязательным. isMandatory <select model="data.reason" label="{data.reasonTitle}" options='[{ "database_value": "", "display_value": "--Нет--" }, {"database_value": "defect", "display_value": "Дефект"}, {"database_value": "low_test_coverage", "display_value": "Низкое тестовое покрытие"}, {"database_value": "other", "display_value": "Другое"}]' value='{"database_value": ""}' isMandatory="true"> </select> | Общие Simple-теги, кроме |
isPortal | Boolean | Установите значение true, чтобы чтобы придать тегу портальное поведение и стили. | |
isRegistration | Boolean | Установите значение true, чтобы сделать регистрацию доступной для новых пользователей сервисного портала. По умолчанию значение атрибута false и только существующие пользователи могут авторизоваться. | |
isRememberMe | Boolean | Укажите значение true, чтобы учетные данные пользователя сохранялись на компьютере. | |
isResetPassword | Boolean | Установите значение true, чтобы добавить ссылку для восстановления пароля на форму виджета. | |
isShow | Boolean | Установите значение true, чтобы разрешить отображение меню или модального окна. isShow <modal model="data.modal" title="{data.modalTitle}" isShow="{data.isShow}"> </modal> | |
isSwitchLang | Boolean | Установите значение атрибута false, чтобы пользователи не могли менять язык интерфейса, и он отобржался только на языке системы. | |
isTreeShown | Boolean | Установите для этого атрибута значение true, чтобы сгруппировать результаты поиска и отобразить дерево группировки результатов. | |
isUserScripts/userScripts | Boolean | Установите значение false, чтобы отключить выполнение клиентских скриптов. | |
isVisible | Boolean | Установите значение false, чтобы скрыть тег. Значение по умолчанию true. isVisible <string model="data.additionalComment" isVisible="{data.showComment}"> </string> | Общие Simple-теги, кроме |
itemDescription | String | Укажите поле таблицы, которое содержит описание элементов. | |
itemIcon | String | Укажите колонку таблицы, которая содержит иконки элементов. | |
itemPage | String | Укажите путь к странице в структуре портала. Пример: itemPage="page" возвращает URL страницы элемента, со словом "page". Весь путь имеет следующий вид: https://your_instance_url/page?searchQuery https://your_instance_url/your_portal/page | |
itemSubject | String | Укажите поле таблицы, которое содержит заголовки элементов. | |
itemView | String | Укажите название представления, определяющего внешний вид элемента. | |
label | String | Укажите текстовый заголовок для поля, описывающий его содержание. label <textarea model="data.name" label="Наименование"> </textarea> | Общие Simple-теги, кроме |
listView/view | String | Укажите, какое представления списка необходимо использовать. Обратите внимание, что сначала необходимо создать это представление в таблице Списки (sys_ui_list). | |
logo | String | Укажите абсолютный путь для логотипа, который отображается на странице авторизации. Пример: https://example.com/logo.png | |
maxValue | Integer | Укажите максимальное значение в миллисекундах. | |
model | String | Этот атрибут связывается объект данных клиентского контроллера. Когда данные модели меняются, они автоматически переносятся в клиентский контроллер. model <textarea model="data.name" label="Наименование"> </textarea> | Общие Simple-теги и портальный тег <dropdownMenu>, кроме общих тегов |
modelId | String | Используйте этот атрибут, чтобы указать ID расширенной модели записи, для отображения ее атрибутов. | |
name | String | Задайте название формы или карточки. | |
nodeId | String | Укажите ID узла портала. | |
options | Array | Укажите опции, доступные для выбора. Используйте форматирование CodeMirror JSON, чтобы создать необходимые опции. options <select model="data.reason" label="{data.reasonTitle}" options='[{ "database_value": "", "display_value": "--Нет--" }, {"database_value": "defect", "display_value": "Дефект"}, {"database_value": "low_test_coverage", "display_value": "Низкое тестовое покрытие"}, {"database_value": "other", "display_value": "Другое"}]' value='{"database_value": ""}'> </select> | |
parentsDepth | Integer | Укажите глубину родительской категории. | |
placeholder | String | Добавьте подсказку для текстового поля. placeholder <textarea model="data.name" label="Наименование" placeholder="{data.namePlaceholderText}"> </textarea> | |
preview | String | Укажите колонку, которая содержит информацию, отображаемую при предпросмотре карточки. | |
profileUrl | String | Укажите путь к секции сервисного портала, содержащую страницу профиля текущего пользователя. Если указано, элемент Профиль доступен в пользовательском меню. В остальных случаях данный элемент будет недоступен и пользователь не сможет открыть свой профиль. | |
quantity | Integer | Укажите максимальное количество результатов поиска на странице. | |
radioButtonsMode | Boolean | Установите для атрибута значение true, чтобы варианты выбора отображались в виде переключателей. В остальных случаях используется стандартный раскрывающийся список. | |
readOnly/isReadOnly | Boolean | Установите значение true, чтобы сделать поля доступными только для чтения. <select model="data.state" label="{data.stateTitle}" options='[ {"database_value": "registered", "display_value": "Зарегистрировано"}, {"database_value": "open", "display_value": "Открыто"}, {"database_value": "in_progress", "display_value": "В работе"}]' value='{"database_value": ""}' readOnly="true"> </select> | Общие Simple-теги, кроме |
recordId | String | Используйте этот атрибут, чтобы указать ID записи, использующей расширенную модель записи (REM). Также необходимо указать таблицу (атрибут tableName). Ниже приведен пример для Simple-тега <rem>. recordId <rem modelId="{data.model_id}" tableName="{data.table_name}" recordId ="{data.record_id}" /> | |
redirectTo | String | Укажите путь, чтобы перенаправить пользователя на сервисный портал после успешной авторизации. | |
reportId | String | Укажите ID отчета для просмотра. reportId <report reportid="{data.monthBarReportId}" condition="(group.nameLIKEdesk^state=active)" /> | |
save | Sting | Добавьте на форму кнопку сохранения, добавив на нее необходимый текст. Используйте этот атрибут, когда по каким-либо причинам невозможно использовать UI-действия (значение атрибута uiActions false). | <Form> |
saveButtonCaption | String | Введите текст, который будет отображаться на кнопке Сохранить. saveButtonCaption <remform modelId="{data.model_id}" isPortal="true" tableName="rem_table" saveButtonCaption="Сохранить" /> | <remform> |
searchUrl | String | Укажите URL путь, определяющий, на какую страницу будет перенаправлен пользователь после нажатия на кнопку Поиск. | <search> |
searchQuery | String | Укажите начальное значение поисковой строки. | |
searchQuery | String | Добавьте строку поиска для осуществления поисковых запросов и отображения результатов. | |
showTitle | Boolean | Чтобы отобразить название, установить значение атрибута true. | |
size | String | Укажите размер поисковой строки. Доступные значения:
| |
size | String | Выберите размеры выпадающего меню из предложенных преднастроенных опций:
| |
shortDescription | String | Добавьте краткое описание карточки. | |
stateColumn | String | Укажите колонку таблицы, в которой содержится список статусов элемента. | |
style | String | Задайте настройки отображения элементов тега (размер, шрифт, цвет и другое ), используя синтаксис CSS. style <textarea model="data.notes" label="Заметки" style="height: 328px; width: 100%; padding: 32px 64px 40px 64px;"> </textarea> | Общие Simple-теги, кроме |
subjectColumn | String | Укажите колонку таблицы, содержащую темы элементов списка. | |
svg/img | String | Укажите код SVG файла с заранее декодированным изображением или ссылку на изображение. | |
sysId | String | Укажите ID записи таблицы, указанной в параметре tableName. Если тег <activityFeed> указан рядом с тегом <Form>, то значение атрибута заполнится автоматически значением из соответствующего атрибута тега <Form>. | |
tableId | String | Укажите ID таблицы, на который ссылается тег. | |
tableName | String | Укажите название таблицы, на которую ссылается тег. tableName <reference isFixed="true" isMandatory="true" condition="(state!=10)" label="Инцидент" model="data.incident_id" tableName="itsm_incident"> </reference> | |
title | String | Укажите заголовок модального окна или поиска. title <modal title="{data.modalTitle}" isShow="{data.isShow}" </modal> | |
titleHide | Boolean | Установите значение атрибута true, чтобы отобразить заголовок формы. | |
top | Integer | Определите количество первых совпадений, которое будет отображаться в подсказке поиска. | |
transparent | Boolean | Установите значение true, чтобы изменить стиль списка и сделать его фон прозрачным. | |
tsGroupId | String | Введите ID группы поиска, чтобы определить область поиска. | |
UiActions | Boolean | Установите значение true, чтобы сделать возможным использование UI-действий. В противном случае их использование будет запрещено (кроме кнопки Сохранить, определенной атрибутом save). | |
url | String | Укажите URL страницы для этой карточки. | |
user | String | Укажите колонку, которая содержит информацию о создателе используемого элемента. | |
useSourceUrl | Boolean | Установите значение true, чтобы сохранить исходный URL после перенаправления, если пользователь ранее еще не авторизовался. Значение по умолчанию false. Значение true атрибута useSourceUrl выше по приоритету, чем значение атрибута redirectTo. | |
value | String (Array для тега <list>) | Укажите значение поля по умолчанию. value <checkbox model="data.locked_out" label="{data.lockedOutLabel}" value="true"> </checkbox> List <list label="Конфигурационная единица" model="data.element" tableName="cmdb" isMandatory="true" condition="{data.condition}" value='[{"database_value":"1","display_value":"Первая"},{"database_value":"2","display_value":"Вторая"}]'></list> | Общие Simple-теги, кроме |
values | Array | Укажите значение поля по умолчанию. values <multiselect model="data.values" canExcludeAll="true" values='["1", "2"]' options='[{"database_value":"1","display_value":"Первый"},{"database_value":"2","display_value":"Второй"}]'></multiselect> | |
view | String | Укажите название вида формы таблицы, например, По умолчанию. | |
wrap | Boolean | Установите значение true, чтобы активировать быстрый просмотр. |
Атрибуты, связанные с событием
Атрибут | Описание |
---|---|
event-change | Укажите действия, которые необходимо выполнить при событии изменения. event-change <string model="data.lastname" event-change="s_widget_custom.updateFullname();"> </string> |
event-click | Укажите действия, которые необходимо выполнить при событии нажатия. event-click <button event-click="window.s_widget_custom.close();"> {data.closeTitle} </button> |
onChange | Укажите, какую функцию необходимо вызвать при смене значения. Укажите в значении атрибута пользовательский метод s_widget_custom, созданный в клиентском скрипте. Атрибут применем к тегам <durationinput>и <search> вместо event-change. |
Ввод и вывод данных виджета
Клиентский контроллер содержит следующие компоненты:
- Шаблон определяет форму виджета и его отображение в формате HTML. Конечные пользователи могут вводить новые данные, а также взаимодействовать с ними.
- Клиентский скрипт представляет собой скрипт в формате JS на стороне клиента. Скрипт получает данные со стороны сервера, обрабатывает их и передает в шаблон виджета. Также клиентский скрипт передает введенные данные в серверный скрипт.
В шаблонах виджета используйте поля ввода данных для передачи значений в виджет для любых целей. Клиентский скрипт использует объект data для доступа к данным, полученных от сервера. После того, как клиентский скрипт обработал данные, вызовите метод s_widget.serverUpdate() для отправки данных в серверный контроллер. При вызове этого метода объект data на стороне сервера автоматически перезаписывает объект data клиентского контроллера.
Поля ввода и вывода
Поля ввода являются элементами виджета. Вы можете управлять введенными данными согласно вашим целям.
Ниже приведен пример кода для добавления в поле данных при помощи атрибута model. При обновлении данных на стороне клиента, это значение передается в заголовок <h1>
.
<string model="data.input"> </string> <h1> {data.input} </h1>
Используйте текстовое поле <string>
для ввода данных. Заголовок <h1>
является динамическим и отображает этот текст как объект {data.input}
.
Вывод множества данных
В приведенных ниже примерах описывается, как поместить значения в два поля и вывести их объединенное значение в формате «заголовок h1» двумя разными способами.
Пример 1
<string model="data.lastname" event-change=";(( ) => { const lastname = s_widget.getFieldValue('lastname') || ''; const firstname = s_widget.getFieldValue('firstname') || ''; s_widget.setFieldValue('fullname', lastname + ' ' + firstname) } )();"> </string> <string model="data.firstname" event-change=";( () => { const lastname = s_widget.getFieldValue('lastname') || ''; const firstname = s_widget.getFieldValue('firstname') || ''; s_widget.setFieldValue('fullname', lastname + ' ' + firstname) })();"> </string> <h1>{data.fullname}</h1>
Пример 2
;(() => { window.s_widget_custom = window.s_widget_custom || {}; window.s_widget_custom.updateFullname = function() { const lastname = s_widget.getFieldValue('lastname') || ''; const firstname = s_widget.getFieldValue('firstname') || ''; s_widget.setFieldValue ('fullname2', lastname + ' ' + firstname) } } )();
<string model="data.lastname" event-change="s_widget_custom.updateFullname();"> </string> <string model="data.firstname" event-change="s_widget_custom.updateFullname();"> </string> <h1>{data.fullname2}</h1>
- No labels