Виджеты
Тип метаданных
widget
Библиотека компонентов
http://n2oapp.net/framework/config/schema/widget-5.0
Базовые свойства
Атрибуты
Наименование | Тип | Описание | Значение по умолчанию |
---|---|---|---|
id | Строка | Идентификатор виджета внутри страницы | Генерируется по индексу wgt[idx] |
ref-id | Ссылка | Ссылка на родительский файл виджета | |
src | Строка | React компонент виджета | Для каждого виджета своя реализация по умолчанию. Для <widget> атрибут об язательный. |
class | CSS класс | Класс компонента виджета | |
style | CSS свойство | Стиль компонента виджета | |
datasource | Ссылка на источник данных | Идентификатор источника данных для виджета | |
fetch-on-init | true false | Получение данных при инициализации | |
fetch-on-visibility | true false | Получение данных при появлении по условию видимости | |
visible | true false | Видимость виджета | |
auto-focus | true false | Автоматическая установка фокуса на виджете | false |
Настройки
# Автоматическая установка фокуса на виджете
n2o.api.widget.auto_focus=false
Простые виджеты
<calendar>
Виджет Календарь.
Атрибуты
Наименование | Тип | Описание | Значение по умолчанию | Обязательность |
---|---|---|---|---|
height | Строка | Высота календаря. Доступные единицы измерения: px , em , rem . При указании числа оно будет приведено к px | ||
default-date | Строка | Стартовая дата календаря (по умолчанию текущая) | ||
default-view | day week workWeek month agenda | Вид отображения календаря по умолчанию | month | |
views | Строка | Список используемых видов отображения в календаре (через запятую) | ! | |
min-time | Строка | Минимальное отображаемое время | ||
max-time | Строка | Максимальное отображаемое время | ||
mark-days-off | true false | Подсветка выходных дней | true | |
selectable | true false | Включает возможность добавлять события в календарь | true | |
step | Число | Шаг при создании события (в минутах) | 30 | |
timeslot-count | Число | Количество слотов на раздел | 2 | |
title-field-id | Строка | Поле выборки, отвечающее за заголовок события | ! | |
tooltip-field-id | Строка | Поле выборки, отвечающее за данные тултипа события | ! | |
start-field-id | Строка | Поле выборки, отвечающее за дату начала события | ! | |
end-field-id | Строка | Поле выборки, отвечающее за дату завершения события | ! | |
cell-color-field-id | Строка | Поле выборки, отвечающее за цвет ячейки события | ! | |
disabled-field-id | Строка | Поле выборки, отвечающее за блокирование события для выбора | ! |
Настройки
#Количество событий в календаре (число)
n2o.api.widget.calendar.size=50
#Вид календаря по умолчанию
n2o.api.widget.calendar.view=month
#Подсветка выходных дней
n2o.api.widget.calendar.mark_days_off=true
#Включает возможность добавлять события в календарь
n2o.api.widget.calendar.selectable=true
#Шаг при создании события в минутах
n2o.api.widget.calendar.step=30
#Количество слотов на раздел
n2o.api.widget.calendar.time_slot_count=2
Тело
<resources> - Ресурсы календаря
<action-on-select-slot> - Действие на добавление события в календаре html
<action-on-select-event> - Действие на клик по событию
<formats> - Форматы дат и времени
<dependencies> - Зависимости виджета
<datasource> - Встроенный источник данных виджета
<toolbar> - Меню управляющих кнопок виджета
<actions> - Встроенные действия
Пример
<calendar
height="500px" default-view="month" views="month,day,agenda"
min-time="08:00:00" max-time="20:00:00"
title-field-id = "title" tooltip-field-id = "tooltip"
start-field-id = "start" end-field-id = "end" cell-color-field-id = "color"
disabled-field-id = "disabled">
<resources>...</resources>
<action-on-select-slot>...</action-on-select-slot>
<action-on-select-event>...</action-on-select-event>
<formats>...</formats>
</calendar>
<resources>
Ресурсы календаря.
Ресурсы используются для возможности разбиения календаря
на о пределенные сущности (бронирование переговорных комнат и т.д.).
Артибуты
Наименование | Тип | Описание |
---|---|---|
value-field-id | Строка | Поле выборки, отвечающее за маппинг ресурсов |
Тело
<resource> - Ресурс календаря
Пример
<resources value-field-id="resourceId">
...
</resources>
<resource>
Ресурс календаря.
Атрибуты
Наименование | Тип | Описание | Обязательность |
---|---|---|---|
id | Строка | Идентификатор ресурса | ! |
title | Строка | Имя ресурса | ! |
Пример
<resource id="1" title="Meeting room"/>
<action-on-select-slot>
Действие на добавление события в календаре.
Тело
Ссылка на Обработчик действия
<action-on-select-event>
Действие на клик по событию.
Тело
Ссылка на Обработчик действия
<formats>
Форматы дат и времени.
Тело
<format> - Формат дат и времени
<format>
Формат даты и времени.
Атрибуты
Наименование | Тип | Описание | Обязательность |
---|---|---|---|
id | dateFormat dayFormat weekdayFormat timeGutterFormat monthHeaderFormat dayRangeHeaderFormat dayHeaderFormat agendaHeaderFormat selectRangeFormat agendaDateFormat agendaTimeFormat agendaTimeRangeFormat eventTimeRangeFormat eventTimeRangeStartFormat eventTimeRangeEndFormat | Тип формата. Список всех возможных форматов | ! |
value | Строка | Значение формата | ! |
Пример
<format id="dayFormat" value="dd"/>
<chart>
Виджет График.
Атрибуты
Наименование | Тип | Описание |
---|---|---|
width | Строка | Ширина графика. Доступные единицы измерения: px . При указании числа оно будет приведено к px |
height | Строка | Высота графика. Доступные единицы измерения: px . При указании числа оно будет приведено к px |
Тело
<areas> - Диаграмма-область
<bars> - Гистограмма
<lines> - Линейный график
<pie> - Круговая диаграмма
<dependencies> - Зависимости виджета
<datasource> - Встроенный источник данных виджета
<toolbar> - Меню управляющих кнопок виджета
<actions> - Встроенные действия
Пример
<chart width="600px" height="400px" datasource="ds1">
<areas>
<area>...</area>
</areas>
</chart>
<form>
Виджет Форма.
Атрибуты
Наименование | Тип | Описание | Знач ение по умолчанию |
---|---|---|---|
mode | one-model two-models | Режим работы формы. Возможные значения: one-model - одна модель редактируется и отправляется. two-models - 2х модельный режим (при первой загрузке данные копируются в модель resolve и edit. При редактировании формы меняется модель edit.) | one-model |
unsaved-data-prompt | true false | Показать предупреждение о наличии несохраненных данных. | false |
Настройки
#Показать предупреждение о наличии несохраненных данных в форме
n2o.api.widget.form.unsaved_data_prompt=false
#Количество записей в форме (число)
n2o.api.widget.form.size=1
Тело
<fields> - Поля формы
<dependencies> - Зависимости виджета
<datasource> - Встроенный источник данных виджета
<toolbar> - Меню управляющих кнопок виджета
<actions> - Встроенные действия
Пример
<?xml version='1.0' encoding='UTF-8'?>
<form xmlns="http://n2oapp.net/framework/config/schema/widget-5.0"
name="Моя форма"
object-id="myObject">
<fields>...</fields>
<toolbar>...</toolbar>
</form>
<html>
HTML виджет. Виджет, отображающий HTML содержимое.
Тело
<content> - Контент для отображения html
<content>
Контент для отображения html.
Атрибуты
Наименование | Тип | Описание |
---|---|---|
url | Строка | URL адрес HTML страницы. Если не задан, необходимо задать содержимое в теле. |
Пример
<html>
<content url="index.html"/>
</html>
Пример
<html>
<content>
<![CDATA[
<div class='test'><p>Hello</p></div>
]]>
</content>
</html>
<widget>
Настраиваемый виджет.
Атрибуты
Наименование | Тип | Описание |
---|---|---|
src | Строка | React компонент виджета |
Через расширенные свойства можно указать дополнительные свойства виджета.
Тело
Произвольные элементы и атрибуты.
Пример
<?xml version='1.0' encoding='UTF-8'?>
<widget src="MyWidget"
ext:prop1="value1"
ext:prop2="value2">
</widget>