Опции¶
Опции - предназначены для установки дополнительных параметров атрибута. Интерпретация настроек выполняется конкретной специфической реализацией модуля.
На данный момент в модуле registry
поддерживаются следующие настройки:
"options": {
"cssClasses": ["class1", "class2"],
"cssStyles": {
"background-color": "#FF0000"
},
"template": "some-custom-template"
}
cssClasses
- классы css, которые нужно применить к полю (в стандартном шаблоне)cssStyles
- css стили, которые нужно применить к полю (в стандартном шаблоне)template
- имя шаблона, который будет использован для отрисовки поля. Будет выполнен поиск ejs-шаблона с таким именем в стандартной теме, а в директориях, указанных в настройке templates модуля.
В кастомном шаблоне доступны все переменные, передаваемые в стандартные шаблоны атрибутов:
item
- объект, отображаемый формойprop
- свойство объекта, представляемое полем (если есть)field
- мета-объект поляid
- идентификатор поля, сформированный по стандартному алгоритму
Сортировка - "reorderable": true
¶
Применимо для атрибутов типа «Коллекция». Определяет возможность сортировки элементов коллекции стрелками вверх и вниз, меняет порядковые номера между двумя элементами коллекции.
"options": {
"reorderable": true`
}
Подключение шаблона библиотеки template
¶
Подключение кастомного шаблона атрибута¶
Указываем значение пути к шаблону - располагаются в папке проекта .\templates\registry\
. Пример для шаблона ниже ./templates/registry/attrs/project/stateView.ejs
"options": {
"template": "attrs/project/stateView"
}
Шаблону передается элемент item
с основными командами ${item.getItemId()}
:
- получения значения элемента
item.property('stage').getValue()
, - идентификатора
item.getItemId()
- имени класса
item.getClassName()
Элемент объектаprop
- имени (кода) свойства
prop.getName()
- вычислении значения атрибута (если формула)
prop.evaluate()
- значения атрибута
prop.getValue()
- ссылки на класс
prop.meta.refClass
Также передаются пути модуля ${module}
для подключения шаблонов , например <% stylesheet(
${module}/app-static/css/styles.css) -%>
Подключение для коллекции иерархии treegrid
¶
"options": {
"template": "treegrid/collection",
"reorderable": true,
"treegrid": {
"width": "auto,100,100,100,100,0",
"align": "left, center,center,center,center, left",
"sort": "str, date, date, date, date, int",
"enableAutoWidth": false,
"paging": {
"size": 20
}
}
}
Представление в списке объектов для цветных иконок¶
По тому же принципу, что и в мете представлений создания/редактирования, можно задавать переопределяющие шаблоны для меты представлений списков для каждой колонки:
...
"options":{
"template": "templateDir/name"
}
...
Подключение для цифровых полей слайдера/бегунка slider¶
"options": {
"template": "slider",
"slider": {
"skin": "dhx_skyblue"
}
}
Подключение для целочисленных полей бегунка range
¶
Задается в представлении для свойства "options"
:
...
"tags": null,
"options": {
"template": "range"
}
...
Подключение для коллекций функционала создания объектов не заходя на форму inplace¶
"options": {
"inplaceInsertion": true,
"inplaceInsertionClass": "className@namespace"
}
Пример "options"
атрибута «Таблиц໶
{
"caption": "Таблица",
"type": 3,
"property": "table",
"size": 2,
"maskName": null,
"mask": null,
"mode": 3,
"fields": [],
"columns": [],
"actions": null,
"commands": null,
"orderNumber": 50,
"required": false,
"visibility": null,
"enablement": null,
"obligation": null,
"readonly": false,
"selectionPaginated": true,
"validators": null,
"hint": "",
"historyDisplayMode": 0,
"tags": null,
"options": {
"inplaceInsertion": true
},
"selConditions": [],
"selSorting": []
}
"inplaceInsertionClass"
указываем в том случае, если при создании объекта нужно выбирать класс (если есть наследники).
Настройка расположения заголовка атрибута над значением.¶
"options": {
"cssClasses": ["top-label"]
}
Настройка поля атрибута на всю длину строки (без наименования).¶
"options": {
"cssClasses": ["no-label"]
}
Настройка стилей применяемых к контейнеру, в котором содержится поле ввода с названием.¶
"options": {
"cssStyles": {
"max-width": "30%",
"padding": "25px"
}
}
Настройка параметров колонок таблицы для атрибута типа «Коллекция»¶
По умолчанию колонка даты имеет ширину 110 пикселей и выравнивание по центру.
Возможные опции атрибута:
"options": {
"template": "treegrid/collection",
"treegrid": {
"width": "150,auto,200",
"align": "center,left,center",
"sort": "str, str, str",
"enableAutoWidth": false,
"paging": {
"size": 20
}
}
}
Настройка CSS полей через tags
и options
¶
Можно настраивать CSS поля либо через tags
, либо через options
. В регистри есть соответствующие стандартные css-классы с нужным поведением: nolabel, toplabel, fill.
Для атрибута в мете представлений css-классы назначаются так:
В свойстве options
:¶
"options": {
"cssClasses": ["toplabel", "fill"]
}
В свойстве tags
(обратная совместимость)¶
"tags": ["css-class:nolabel", "css-class:fill"]
Помимо классов можно напрямую задавать и стили (они будут применены только к контейнеру).
Задаем стили для атрибута в мете представлений:
В свойстве options
:¶
"options": {
"cssStyles": {
"max-width": "30%",
"padding": "25px"
}
}
В свойстве tags
:¶
"tags": ["css:min-width:10%", "css:background-color:green"]
Описание выше относится только к стандартным шаблонам полей из стандартной темы оформления.