Атрибуты тегов

При создании виджета с помощью 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	Укажите, какие действия необходимо выполнить после того, как выбран один из преднастроенных шаблонов: click context mouseOver	<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	Укажите размер поисковой строки. Доступные значения: lg (большая) sm (маленькая)	<search>
size	String	Выберите размеры выпадающего меню из предложенных преднастроенных опций: low (224px) large (464px)	<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

Укажите действия, которые необходимо выполнить при событии изменения.

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.

Ввод и вывод данных виджета

Клиентский контроллер содержит следующие компоненты:

1. Шаблон определяет форму виджета и его отображение в формате HTML. Конечные пользователи могут вводить новые данные, а также взаимодействовать с ними.
2. Клиентский скрипт представляет собой скрипт в формате JS на стороне клиента. Скрипт получает данные со стороны сервера, обрабатывает их и передает в шаблон виджета. Также клиентский скрипт передает введенные данные в серверный скрипт.

В шаблонах виджета используйте поля ввода данных для передачи значений в виджет для любых целей. Клиентский скрипт использует объект data для доступа к данным, полученных от сервера. После того, как клиентский скрипт обработал данные, вызовите метод s_widget.serverUpdate() для отправки данных в серверный контроллер. При вызове этого метода объект data на стороне сервера автоматически перезаписывает объект data клиентского контроллера.

Поля ввода и вывода

---

Поля ввода являются элементами виджета. Вы можете управлять введенными данными согласно вашим целям.

Ниже приведен пример кода для добавления в поле данных при помощи атрибута model. При обновлении данных на стороне клиента, это значение передается в заголовок <h1>.

HTML

<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

Client script

;(() => {
    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>