Атрибуты тегов
При создании виджета с помощью Simple-тегов, используйте приведенные ниже атрибуты для настройки его функциональности.
Когда виджет реализован, все значения атрибутов тега передаются в виде строки независимо от типа атрибута; на этапе обработки значение атрибута применяется в соответствии с указанным типом.
Типы атрибутов
Атрибуты виджетов разделяются на два типа:
- атрибуты конфигураций, которые определяют форму виджетов.
- атрибуты событий, которые используются при настройке действий пользователя на виджете.
Атрибуты конфигураций
Атрибут | Тип | Описание | Тег |
---|---|---|---|
alignRight | Boolean | Установите значение true, чтобы выровнять текст по правому краю. | <durationinput> |
beginDate | String | Укажите минимальное значение даты в поле. | <date> <datetime> |
buttonType | String | Укажите стиль отображения кнопок. | <button> |
canExcludeAll | Boolean | Установите значение true, чтобы сделать возможным оставить поле без выбранных элем ентов. | <multiselect> |
canRead | Boolean | Установите для атрибута значение false, чтобы сделать указанную таблицу недоступной. | <list> <reference> |
canCreate | Boolean | Установите значение true, чтобы добавить кнопку , позволяющую создать новую запись. | <list> <reference> |
categoryDescription | String | Укажите поле таблицы, которое содержит описание категорий. | <category> <categoryFlat> |
categoryIcon | String | Укажите колонку таблицы, которая содержит иконки категорий. | <category> <categoryFlat> |
categorySubject | String | Укажите поле таблицы, которое содержит заголовки категорий. | <category> <categoryFlat> |
childDepth | Integer | Укажите глубину дочерней категории. | <sidemenu> |
choiceConditionName | String | Определите колонки, содержащие данные типа Choice, чтобы указать опции выбора в условии. | <listitems> |
class | String | Добавьте название классов, для которых стили заданы в поле CSS виджета. Определите значение атрибута в поле виджета Шаблон. Затем, опишите его в поле CSS. | Все Simple-теги, кроме общих тегов <activityFeed> <attachment> <durationinput> <rem> <remform> и портальных тегов <breadcrumbs> <sidemenu> |
condition | String | Задайте условие. Это аналог ссылочного ограничителя в агентском интерфейса. | <list> <reference> <report> <listitems> <previewList> |
config | String | Настройте ленту активности. Опишите объект в формате JSON. | <activityFeed> |
date | String | Укажите колонку, которая содержит информацию о дате и времени создания используемого элемента. | <categoryFlat> |
dateColumn | String | Укажите колонку таблицы, содержащую даты, относящиеся к элементам списка. | <previewList> |
dateConditionName | String | Определите колонки, содержащие данные типа Date или Date/Time, если необходимо указать временные периоды в условии. | <listitems> |
disabled | Boolean | Укажите значение true, чтобы сделать кнопку неактивной. В этом случае на кнопку нельзя нажать. | <button> |
displayColumnNumber | Integer | Укажите номер колонки, по клику на которую открывается запись. | <listitems> |
doClose | Function | Укажите, какую функцию необходимо выполнить при закрытии модального окна или меню. | <modal> <dropdownMenu> |
elementCount | String | Укажите количество элементов на странице. По умолчанию значение атрибута равно 5. | <previewList> |
endDate | String | Укажите максимально возможное значение даты в поле. | <date> <datetime> |
events | String | Укажите, какие действия необходимо выполнить после того, как выбран один из преднастроенных шаблонов:
| <dropdownMenu> |
exclude | Array | Укажите параметры, которые не нужно отображать. | <durationinput> |
fixedCondition | String | Укажите условие, применяемое к списку. в отличие от условия, заданного атрибутом condition, это условие является фиксированным и не может быть удалено, его можно дополнить с помощью уточнений. Логика работы атрибута схожа с фиксированным ссылочным ограничителем. | <listitems> |
hint | String | Задайте текстовую подсказку кнопке. | <button> |
includeCategories | Integer | Установите значение 1, чтобы добавить категории в боковое меню. | <sidemenu> |
includeItems | Integer | Установите значение 1, чтобы добавить элементы в боковое меню. | <sidemenu> |
isAlwaysOpen | Boolean | Установите значение true, чтобы сделать ленту активности всегда открытой. В этом случае шеврон на форме виджета будет отсутствовать, а ленту нельзя будет свернуть. | <activityFeed> |
isFixed | Boolean | Установите значение true, чтобы отключить возможность изменять значение условия. | <list> <reference> |
isFullScreenMode | Boolean | Установите для атрибута значение true, чтобы при открытии на мобильном устройстве, модальное окно отображалось на весь экран. | <modal> |
isMandatory | Boolean | Установите значение true, чтобы сделать поле обязательным. | Общие Simple-теги, кроме <activityFeed> <attachment> <button> <duration> <durationinput> <modal> <multiselect> <rem> <remform> <report> |
isPortal | Boolean | Установите значение true, чтобы чтобы придать тегу портальное поведение и стили. | <rem> <remform> |
isRegistration | Boolean | Установите значение true, чтобы сделать регистрацию доступной для новых пользователей сервисного портала. По умолчанию значение атрибута false и только существующие пользователи могут авторизоваться. | <authfull> |
isRememberMe | Boolean | Укажите значение true, чтобы учетные данные пользователя сохранялись на компьютере. | <authfull> |
isResetPassword | Boolean | Установите значение true, чтобы добавить ссылку для восстановления пароля на форму виджета. | <authfull> |
isShow | Boolean | Установите значение true, чтобы разрешить отображение меню или модального окна. | <modal> <dropdownMenu> |
isSwitchLang | Boolean | Установите значение атрибута false, чтобы пользователи не могли менять язык интерфейса, и он отобржался только на языке системы. | <authfull> |
isTreeShown | Boolean | Установите для этого атрибута значение true, чтобы сгруппировать результаты поиска и отобразить дерево группировки результатов. | <results> |
isUserScripts/userScripts | Boolean | Установите значение false, чтобы отключить выполнение клиентских скриптов. | <Form> <rem> <remform> |
isVisible | Boolean | Установите значение false, чтобы скрыть тег. Значение по умолчанию true. | Общие Simple-теги, кроме <activityFeed> <attachment> <button> <durationinput> <Form> <modal> <multiselect> <rem> <remform> <report> |
itemDescription | String | Укажите поле таблицы, которое содержит описание элементов. | <category> <categoryFlat> |
itemIcon | String | Укажите колонку таблицы, которая содержит иконки элементов. | <category> <categoryFlat> |
itemPage | String | Укажите путь к странице в структуре портала. | <listitems> <results> <search> |
itemSubject | String | Укажите поле таблицы, которое содержит заголовки элементов. | <category> <categoryFlat> |
itemView | String | Укажите название представления, определяющего внешний вид элемента. | <listitems> <previewList> <results> <search> |
label | String | Укажите текстовый заголовок для поля, описывающий его содержание. | Общие Simple-теги, кроме <activityFeed> <attachment> <button> <durationinput> <Form> <modal> <multiselect> <rem> <remform> <report> <select> |
listView/view | String | Укажите, какое представления списка необходимо использовать. Обратите внимание, что сначала необходимо создать это представление в таблице Списки (sys_ui_list). | <listitems> <previewList> |
logo | String | Укажите абсолютный путь для логотипа, который отображается на странице авторизации. | <authfull> |
maxValue | Integer | Укажите максимальное значение в миллисекундах. | <durationinput> |
model | String | Этот атрибут связывается с объектом данных клиентского контроллера. Когда данные модели меняются, они автоматически переносятся в клиентский контроллер. | Общие Simple-теги и портальный тег <dropdownMenu>, кроме общих тегов <activityFeed> <attachment> <button> <conditions> <durationinput> <Form> <modal> <rem> <remform> <report> |
modelId | String | Используйте этот атрибут, чтобы указать ID расширенной модели записи, для отображения ее атрибутов. | <rem> <remfrom> |
name | String | Задайте название формы или карточки. | <Form> <remfrom> <card> |
nodeId | String | Укажите ID узла портала. | <category> <categoryFlat> |
options | Array | Задайте название формы или карточки. | <select> <multiselect> |
parentsDepth | Integer | Укажите глубину родительской категории. | <sidemenu> |
placeholder | String | Добавьте подсказку для текстового поля. | <date> <datetime> <select> <string> <textarea> <search> |
preview | String | Укажите колонку, которая содержит информацию, отображаемую при предпросмотре карточки. | <categoryFlat> |
profileUrl | String | Укажите путь к секции сервисного портала, содержащей страницу профиля текущего пользователя. Если указано, элемент Профиль доступен в пользовательском меню. В остальных случаях данный элемент будет недоступен и пользователь не сможет открыть свой профиль. | <authheader> |
quantity | Integer | Укажите максимальное количество результатов поиска на странице. | <results> |
radioButtonsMode | Boolean | Установите для атрибута значение true, чтобы варианты выбора отображались в виде переключателей. В остальных случаях используется стандартный раскрывающийся список. | <select> |
readOnly/isReadOnly | Boolean | Установите значение true, чтобы сделать поля доступными только для чтения. | Общие Simple-теги, кроме <activityFeed> <button> <durationinput> <Form> <modal> <rem> <remform> <report> |
recordId | String | Используйте этот атрибут, чтобы указать ID записи, использующей расширенную модель записи (REM). Также необходимо указать таблицу (атрибут tableName). | <rem> <remform> <IndicatePresence> |
redirectTo | String | Укажите путь, чтобы перенаправить пользователя на сервисный портал после успешной авторизации. | <authfull> |
reportId | String | Укажите ID отчета для просмотра. | <report> |
save | Sting | Добавьте на форму кнопку сохранения, добавив на нее необходимый текст. Используйте этот атрибут, когда по каким-либо причинам невозможно использовать UI-действия (значение атрибута uiActions false). | <Form> |
saveButtonCaption | String | Введите текст, который будет отображаться на кнопке Сохранить. | <remform> |
searchUrl | String | Укажите URL путь, определяющий, на какую страницу будет перенаправлен пользователь после нажатия на кнопку Поиск. | <search> |
searchQuery | String | Укажите начальное значение поисковой строки. | <search> |
searchQuery | String | Добавьте строку поиска для осуществления поисковых запросов и отображения результатов. | <results> |
showTitle | Boolean | Чтобы отобразить название, установить значение атрибута true. | <search> |
size | String | Укажите размер поисковой строки. Доступные значения:
| <search> |
size | String | Выберите размеры выпадающего меню из предложенных преднастроенных опций:
| <dropdownMenu> |
shortDescription | String | Добавьте краткое описание карточки. | <card> |
stateColumn | String | Укажите колонку таблицы, в которой содержится список статусов элемента. | <previewList> |
style | String | Задайте настройки отображения элементов тега (размер, шрифт, цвет и другое), используя синтаксис CSS. | Общие Simple-теги, кроме <activityFeed> <attachment> <button> <durationinput> <Form> |
subjectColumn | String | Укажите колонку таблицы, содержащую темы элементов списка. | <previewList> |
svg/img | String | Укажите код SVG файла с заранее декодированным изображением или ссылку на изображение. | <button> <card> |
sysId | String | Укажите ID записи таблицы, указанной в параметре tableName. Если тег <activityFeed> указан рядом с тегом <Form>, значение атрибута заполнится автоматически значением из соответствующего атрибута тега <Form>. | <activityFeed> <Form> |
tableId | String | Укажите ID таблицы, на которую ссылается тег. | <conditions> |
tableName | String | Укажите название таблицы, на которую ссылается тег. | <activityFeed> <attachment> <conditions> <Form> <IndicatePresence> <list> <reference> <rem> <remform> <listitems> <previewList> |
title | String | Укажите заголовок модального окна или поиска. | <modal> <search> |
titleHide | Boolean | Установите значение атрибута true, чтобы отобразить заголовок формы. | <Form> |
top | Integer | Определите количество первых совпадений, которое будет отображаться в подсказке поиска. | <search> |
transparent | Boolean | Установите значение true, чтобы изменить стиль списка и сделать его фон прозрачным. | <previewList> |
tsGroupId | String | Введите ID группы поиска, чтобы определить область поис ка. | <results> <search> |
UiActions | Boolean | Установите значение true, чтобы сделать возможным использование UI-действий. В противном случае их использование будет запрещено (кроме кнопки Сохранить, определенной атрибутом save). | <Form> |
url | String | Укажите URL страницы для этой карточки. | <card> |
user | String | Укажите колонку, которая содержит информацию о создателе используемого элемента. | <categoryFlat> |
useSourceUrl | Boolean | Установите значение true, чтобы сохранить исходный URL после перенаправления, если пользователь ранее еще не авторизовался. Значение по умолчанию false. Значение true атрибута useSourceUrl выше по приоритету, чем значение атрибута redirectTo. | <authfull> |
value | String (Array для тега <list>) | Укажите значение поля по умолчанию. | Общие Simple-теги, кроме <activityFeed> <attachment> <button> <Form> <modal> <multiselect> <reference> <rem> <remform> |
values | Array | Укажите значение поля по умолчанию. | <multiselect> |
view | String | Укажите название вида формы таблицы, например, По умолчанию. | <Form> |
wrap | Boolean | Установите значение true, чтобы активировать быстрый просмотр. | <previewList> |
Атрибуты, связанные с событием
event-change
Укажите действия, которые необходимо выполнить при событии изменения.
<string
model="data.lastname"
event-change="s_widget_custom.updateFullname();">
</string>
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=";(( ) => {
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>