Props displaying

Данный раздел описывает конфигурацию работы встроенного веб приложения Blank.

В зависимости от типа отображения поля, его вид может характеризовать определённый набор свойств. Кроме того, существует набор свойств, применимый к каждому типу отображения. Далее приведены общие свойства, а так же свойства, характерные для каждого типа отображения, т.е. свойства display.

Типы отображения полей

• action;
• autocomplete;
• checkbox;
• checkList;
• code;
• codeEditor;
• colorPicker;
• datePicker;
• dateRange;
• filePicker;
• html;
• masked;
• none;
• numberInput;
• objectList;
• password;
• react;
• searchBox;
• select;
• text;
• textArea;
• textInput;
• virtualRefList.

Общие свойства

сlassName

Дополнительный CSS класс для отображения поля.

disabled

Условие недоступности редактирования поля текущего элемента в пользовательском интерфейсе (строка). В условии доступны объекты $item (текущий объект) и $user (пользователь, работающий с объектом).

disableOrder

Флаг, определяющий запрет сортировки по полю при типе отображения Store table (bool).

formGroup

Идентификатор группы для отображения поля (строка). Группы определяются в Store свойстве formGroups.

formOrder

Число, определяющее место отображения поля на форме (int). Может быть отрицательным. Чем больше значение данного свойства, тем дальше будет распологаться поле на форме.

formTab

Идентификатор табы для отображения поля (строка). Табы определяются в Store свойстве formTabs.

hidden

Условие, при выполнении которого поле будет скрыто с формы (строка). В условии доступны объекты $item (текущий объект) и $user (пользователь, работающий с объектом).

label

Заголовок поля на форме. При рендеринге, обрабатывается через handlebars. В шаблоне можно использовать хелпер $i18n, $item, $user.

labelClassName

Определяет дополнительный CSS класс для заголовка поля.

sortable

Флаг определяющий возможность сортировки по полю при типе отображения Store table (bool).

sortBy

Поле, по которому будет производиться сортировка вместо текущего поля при типе отображения Store table (строка).

style

Дополнительные CSS стили для отображения поля (JavaScript Object).

tooltip

Подсказка по заполнению поля (строка). Отображается в виде иконки вопросительного знака рядом с заголовком поля. При наведении, показывается текст подсказки. При рендеринге, обрабатывается через handlebars. В шаблоне можно использовать хелпер $i18n, $item, $user.

action

Автоматически устанавливаемый тип отображения для полей типа action. Не требует указания.

Свойства

actions

Массив объектов с описанием Actions, определённых в текущем Store. Используется для размещения кнопок запуска Actions на форме в интерфейсе клиента. Может переопределять некоторые свойства конкретных отображаемых Action.

actions: [
     // Здесь мы указываем, что нужно поместить кнопку вызова Action copy
    { _id: "copy" },

    // Здесь мы дополнительно переопределяем свойство label
    { _id: "move", label: "Перенести" },
]

autocomplete

Текстовое поле ввода с автодополнением.

Свойства

disableCustomInput

Запрет ввода значений не определённых свойством options (bool). Если установлено в true, то можно будет вводить только определённые значения.

options

Определяет возможные варианты значений поля (массив значений или объектов). Для определения в пользовательском интерфейсе отображения названий значений отличных от самих значений, следует передавать массив объектов следующего вида:

{
    value: 1, // значение соответствующего типа
    label: "Номер один", // название значения, отображаемое в пользовательском интерфейсе
}

checkbox

Поле с флажком в виде галочки. Не имеет собственных свойств.

checkList

Поле в виде списка флажков с возможностью выбора нескольких значений.

Свойства

options

Определяет возможные варианты значений поля (массив значений или объектов). Для определения в пользовательском интерфейсе отображения названий значений отличных от самих значений, следует передавать массив объектов следующего вида:

{
    value: 1, // значение соответствующего типа
    label: "Номер один", // название значения, отображаемое в пользовательском интерфейсе
}

code

Отображение моноширинным шрифтом в виде нередактируемого текста с сохранением исходного форматирования.

codeEditor

Отображение редактора кода. Не имеет собственных свойств.

colorPicker

Поле для выбора цвета из определённого набора.

Свойства

disableCustomInput

Запрет ввода значений не определённых свойством options (bool). Если установлено в true, то можно будет только выбрать из определённых значений цвета.

options

Определяет возможные варианты значений поля (массив значений или объектов). Для определения в пользовательском интерфейсе отображения названий значений отличных от самих значений, следует передавать массив объектов следующего вида:

{
    value: 1, // значение соответствующего типа
    label: "Номер один", // название значения, отображаемое в пользовательском интерфейсе
}

datePicker

Поле для выбора даты. Отображается в виде текстового поле с маской даты и с выпадающим календарём.

Свойства

format

Формат отображения даты в соответствии с синтаксисом Moment.js (строка).

dateRange

Поле для выбора диапазона дат. Отображается в виде текстового поле с маской даты и с выпадающим большим календарём.

Свойства

format

Формат отображения даты в соответствии с синтаксисом Moment.js (строка).

filePicker

Поля выбора файла для последующей отправки на сервер.

Свойства

accept

Определяет типы файлов допустимых для загрузки (строка). Формат соответствует атрибуту accept HTML тэга input.

html

Отображение значения поля по определённому в свойстве html шаблону. Шаблон обрабатывается через handlebars.

Свойства

html

Шаблон для отображения (строка). В шаблоне доступны: хелпер $i18n, $item (текущий объект) и $user (пользователь, работающий с объектом).

noSanitize

Флаг определящий безопасное содержимое сгенерированного представления (bool). Если установлен в true, то не будет производиться его очистка от небезопасных элементов.

masked

Текстовое поле ввода данных по маске, определённой в свойстве mask.

Свойства

mask

Определение маски ввода строки (строка или объект). Для определения собственного сообщения о несовпадении вводимой строки с определённой маской, следует описать свойство в виде объекта.

Для определения доступных символов для маски следует использовать следующие обозначения:

• | — любая цифра;
• § — любая буква;
• ~ — любой символ;
• _ — пустой символ.

{
    value: "| (|||) |||-||-||", // значение маски. Например здесь ввод телефона в виде 7 (1234) 567-89-00
    message: "Неправильно набран номер", // сообщение, которое будет выведено при несоответствии данных маске
}

none

Поле не будет отображено на форме.

numberInput

Поле ввода числовых значений. В зависимости от значения свойства type поля, допускается ввод только целочисленных int, либо значений с плавающей запятой float.

objectList

Автоматически устанавливаемый тип отображения для полей типа objectList. Не требует указания.

Свойства

addLabel

Текстом для кнопки добавления нового элемента в список (строка). При рендеринге, строка обрабатывается через handlebars. В шаблоне доступны: хелпер $i18n, $item (текущий объект) и $user (пользователь, работающий с объектом).

password

Поле ввода текста, при этом вводимые символы скрыты за звездочками.

react

Отображение поля с помощью кастомного компонента ReactJS, определённого в свойстве loadComponent.

Свойства

loadComponent

Код компонента React.JS для отображения поля (строка).

searchBox

Поле поиска и ввода объектов из Store, определённой в свойстве store;

Свойства

extraQuery

Дополнительный запрос в формате MongoDB Query, который будет добавлен через логическое И при поиске объектов в Store, определённом в свойстве store.

searchBy

Поле или поля по которым следует производить поиск объектов (строка или массив строк).

selectedTemplate

Handlebars шаблон для отображения выбранных элементов.

select

Поле выбора одного из нескольких вариантов, определённых в свойстве options.

Свойства

options

Определяет возможные варианты значений поля (массив значений или объектов). Для определения в пользовательском интерфейсе отображения названий значений отличных от самих значений, следует передавать массив объектов следующего вида:

{
    value: 1, // значение соответствующего типа
    label: "Номер один", // название значения, отображаемое в пользовательском интерфейсе
}

text

Отображение поля в виде текста. Не имеет собственных свойств.

textArea

Текстовое поле ввода с возможностью ввода нескольких строк текста.

Свойства

placeholder

Текстовая подсказка, отображаемаю в поле ввода при отсутствии значения. При рендеринге, строка обрабатывается через handlebars. В шаблоне доступны: хелпер $i18n, $item (текущий объект) и $user (пользователь, работающий с объектом).

textInput

Текстовое поле ввода.

Свойства

pattern

Регулярное выражение для проверки вводимого значения (строка или объект). Имеется возможность переопределения текста ошибки ввода значения поля. Для этого следует использовать объект вида:

{
    expression: "^\d+$", // регулярное выражение в виде строки.
    message: "Нужно ввести хотя бы одну цифру", // Текст ошибки для отображения в пользовательском интерфейсе.
}

placeholder

Текстовая подсказка, отображаемаю в поле ввода при отсутствии значения. При рендеринге, строка обрабатывается через handlebars. В шаблоне доступны: хелпер $i18n, $item (текущий объект) и $user (пользователь, работающий с объектом).

virtualRefList

Автоматически устанавливаемый тип отображения для полей типа virtualRefList. Отображается в виде таблицы связанных объектов. Не требует указания.

В зависимости от характера связи, следует указать либо foreignKey при непосредственном хранении ссылки на объект в связанных объектах, либо query, если связь более сложная.

Свойства

foreignKey

Определяет поле с type:ref в Store из свойства store, содержащее ссылку на текущее Store по которому будет делаться выборка данных для отображения.

tableColumns

Описание столбцов отображаемой таблицы. Настраивается аналогично tableColumns в Store.

query

Запрос в формате MongoDB Query, который будет использован для поиска объектов в Store, определённом в свойстве store.