Конфигурация набора элементов для выпадающих списков
Источник данных
Набор элементов для меню, кнопки с меню и выпадающих списков устанавливается с помощью опции source.
// TypeScript
protected _beforeMount() {
this._viewSource = new Memory({
keyProperty: 'id',
data: [
{ id: 1, title: 'Revision' },
{ id: 2, title: 'Newsletter' },
{ id: 3, title: 'Order' }
];
});
}
<!-- WML -->
<Controls.dropdown:Button
source="{{_viewSource}}" />
С помощью опции keyProperty определяется уникальный идентификатор (ключевое поле) элемента.
<!-- WML -->
<Controls.dropdown:Button
source="{{_viewSource}}"
keyProperty="id" />
Шаблон отображения элемента по умолчанию выводит значение из поля title, поэтому в источнике данных должно быть одноименное поле. Вы можете изменить имя данного поля на другое с помощью опции displayProperty.
<!-- WML -->
<Controls.dropdown:Button
source="{{_viewSource}}"
keyProperty="id"
displayProperty="title" />
Иерархия
Рис. 3. Иерархия в выпадающем списке.
Корректное отображение иерархии в меню и в списках устанавливается с помощью опций:
- parentProperty — название поля, которое хранит идентификатор родительской записи; значение
null
— запись расположена в корне иерархии; - nodeProperty — название поля, в котором хранится информация о типе записи (
true
— узел,null
илиfalse
— лист).
Подробнее о различиях каждого типа записей можно прочитать в статье Типы отношений в таблицах БД.
Из демо-примера к контролу Controls/dropdown:Selector
:
_beforeMount: function() {
this._hierarchySource = new Memory({
keyProperty: 'id',
data: [
{id: 1, title: 'Task in development', parent: null, '@parent': false},
{id: 2, title: 'Error in development', parent: null, '@parent': false},
{id: 3, title: 'Application', parent: null, '@parent': false},
{id: 4, title: 'Assignment', parent: null, '@parent': true},
{id: 5, title: 'Approval', parent: null, '@parent': false},
{id: 6, title: 'Working out', parent: null, '@parent': false},
{id: 7, title: 'Assignment for accounting', parent: 4, '@parent': false},
{id: 8, title: 'Assignment for delivery', parent: 4, '@parent': false},
{id: 9, title: 'Assignment for logisticians', parent: 4, '@parent': false}
];
}),
...
},
<Controls.dropdown:Selector
keyProperty="id"
parentProperty="parent"
nodeProperty="@parent"
source="{{_createMemory(_hierarchySource)}}"/>
Для отображения описанной в стандарте иерархии с подпунктами прикладной разработчик должен задать собственный шаблон.
Рис. 4. Иерархия с подпунктами в выпадающем списке.
Скроллирование в выпадающем списке
При большом количестве пунктов в меню есть возможность ограничить его высоту для корректного отображения. В этом случае в меню появляется скролл.
Рис. 5. Скроллирование в выпадающем списке.
Ограничить высоту можно, использовав опцию dropdownClassName. Опция даёт возможность установить свой класс на выпадающий список. Таким образом, если установленная высота ограничит реальную высоту меню, с учетом всех его пунктов, у выпадающего списка появится полоса прокрутки.
Из демо-примера к Controls/dropdown:Button
:
<Controls.dropdown:Button
dropdownClassName="ControlsDemo-ButtonsMenu__scroll"
source="{{_scrollItems}}" />
.ControlsDemo-ButtonsMenu__scroll {
max-height: 250px;
}
Группировка в меню
Группировка позволяет разделить пункты логически.
Рис. 6. Группировка в меню.
Для настройки группировки требуются опции:
groupProperty — в опции задается имя поля, в котором хранится идентификатор группировки;
Из демо-примера к
Controls/dropdown:Button
:<Controls.dropdown:Button source="{{_groupTextItems}}" groupProperty="group" keyProperty="id" />
_beforeMount: function(options) { this._groupTextItems = new Memory({ data: [ { id: 1, title: 'Project', group: 'Select' }, { id: 2, title: 'Work plan', group: 'Select' }, { id: 3, title: 'Task', group: 'Select' }, { id: 4, title: 'Merge request', group: 'Create' }, { id: 5, title: 'Meeting', group: 'Create' }, { id: 6, title: 'Video meeting', group: 'Create' } ], keyProperty: 'id' }); }
groupTemplate — в опцию передается шаблон, отображающий разделитель групп. В качестве шаблона рекомендуется использовать базовый шаблон группировки
wml!Controls/Dropdown/resources/template/defaultGroupTemplate
.По умолчанию базовый шаблон отображает только разделитель. Можно изменить отображение, установив параметры:
showText
— устанавливает отображение названия группы, название группы будет взято из свойстваgroup
;textAlign
— устанавливает выравнивание названия группы;contentTemplate
— переопределяет контент.
Из демо-примера к
Controls/dropdown:Button
:<Controls.dropdown:Button source="{{_groupTextItems}}" groupProperty="group" keyProperty="id" > <ws:groupTemplate> <ws:partial template="Controls/dropdown:GroupTemplate" showText="{{true}}"/> </ws:groupTemplate> </Controls.dropdown:Button>
Скрытая группа
Кроме того, можно настроить так называемую "скрытую группу". Элементы "скрытой группы" будут выводиться в начале списка, а сама группа отображаться без заголовка. Для определения элемента в "скрытую группу" необходимо передать константу view.hiddenGroup в поле записи, где хранится идентификатор группы.
import {view} from 'Controls/Constants';
import {Memory} from 'Types/source';
this._menuSource = new Memory({
keyProperty: 'id',
data: [
{
id: '1',
title: 'Запись 1',
parent: null,
menuGroupProperty: 'group1'
},
{
id: '4',
title: 'Запись 4',
parent: '1',
'@parent': false,
menuGroupProperty: 'group1'
},
{
id: '5',
title: 'Запись 5',
parent: '4',
'@parent': false,
menuGroupProperty: view.hiddenGroup
},
...
]
});
<Controls.dropdown:Button groupProperty="menuGroupProperty">
</Controls.dropdown:Button>
Поле с идентификатором группы задаётся с помощью опции groupProperty.
Дополнительные пункты меню
Дополнительные элементы конфигурируются с помощью опции additionalProperty
и дополнительного свойства additional
в объекте конфигурации элементов меню.
Пример описания объекта конфигурации дополнительных элементов меню:
_menuAddItems: new Memory({
keyProperty: 'id',
data: [
{
id: '1',
title: 'Запись 1',
parent: null,
'@parent': true
},
{
id: '4',
title: 'Запись 4',
parent: '1',
'@parent': false,
additional: true
},
{
id: '5',
title: 'Запись 5',
parent: '4',
'@parent': false,
additional: true
},
...
]
})
Пример конфигурации кнопки:
<Controls.dropdown:Button
source="{{_groupTextItems}}"
additionalProperty="additional"
keyProperty="id"
/>
При наличии дополнительных элементов, внизу меню появляется кнопка, которая позволяет их отобразить. Клик по кнопке разворачивает меню полностью.
Рис. 7. Дополнительные пункты в меню.
Отображение истории выбора
Блок с историей выбора отображается вверху выпадающих списков.
Рис. 8. Меню с тремя последними действиями пользователя.
Описание стандарта можно посмотреть в разделе Меню с историей.
Для отображения истории ввода в блоке автодополнения необходимо задать в опции historyId уникальный идентификатор для хранения истории ввода:
<Controls.dropdown:Button
name="showAllButtonField"
historyId="myMenuHistory"
... >
...
</Controls.dropdown:Button>
Опция задействует сервис истории ввода; при её включении активируется сохранение истории ввода в виде массива индентификаторов в сервисе истории.
При использовании источника данных SbisService необходимо на БЛ вызвать хэлпер HistoryRecentListCall, который сформирует историю. В поле будет передан фильтр с параметром _historyIds - массивом идентификаторов истории. Подробнее читайте здесь.
Шаблон отображения элемента
По умолчанию для отображения элементов выпадающего списка используется базовый шаблон Controls/dropdown:ItemTemplate.
В следующем примере показано, как менять параметры базового шаблона:
<Controls.dropdown:Button source="{{_source)}}">
<ws:itemTemplate>
<ws:partial template="Controls/dropdown:ItemTemplate" multiLine="{{true}}">
<ws:contentTemplate>
<div class="demo-menu__item">
<div class="demo-title">{{contentTemplate.itemData.item.get('title')}}</div>
</div>
</ws:contentTemplate>
<ws:additionalTextTemplate>
<div class="demo-comment">{{contentTemplate.itemData.item.get('comment')}}</div>
</ws:additionalTextTemplate>
</ws:partial>
</ws:itemTemplate>
</Controls.dropdown:Button>
this._source = new Memory ({
data: [
{
id: 1,
title: 'Discussion',
comment: 'Create a discussion to find out the views of other group members on this issue'
},
{
id: 2,
title: 'Idea/suggestion',
comment: 'Offer your idea, which others can not only discuss, but also evaluate.
The best ideas will not go unnoticed and will be realized'
},
{
id: 3,
title: 'Problem',
comment: 'Do you have a problem? Tell about it and experts will help to find its solution'
}
],
keyProperty: 'id'
});
Изменяя параметры базового шаблона можно создавать пользовательский. Для определения пользовательского шаблона отображения элемента предоставляется две опции:
- itemTemplate — устанавливает общий шаблон для всех элементов.
- itemTemplateProperty — устанавливает название поля записи, содержащее имя шаблона. С помощью этой настройки отдельным элементам можно задать собственный шаблон отображения.
Таким образом, выстраивается следующий порядок использования шаблонов:
- если задано значение в
itemTemplateProperty
, все элементы меню, в конфигурации которых присутствует соответствующее свойство, будут отрисованы по оригинальному шаблону; - элементы меню, для которых не указан оригинальный шаблон, будут отрисованы по общему шаблону, указанному в
itemTemplate
; - если в
itemTemplate
шаблон не задан, элементы меню будут отрисованы по базовому шаблонуControls/dropdown:ItemTemplate
.
Шаблоны, отображающиеся над/под элементами выпадающего списка
Для меню и всплывающих списков можно добавить дополнительные шаблоны, которые будут отрисовывать требуемый контент в начале и в конце списка.
Рис. 9. Шаблоны над элементами списка и под элементами списка.
Шаблоны задаются опциями:
- headerTemplate — шаблон в начале списка,
- footerTemplate — шаблон в конце списка.