Конфигурация набора элементов для выпадающих списков

Источник данных

Набор элементов и для меню, и для выпадающих списков устанавливается с помощью опции source. В опцию передается объект, который реализует интерфейс ISource для доступа к данным.

С помощью опции keyProperty определяется уникальный идентификатор (ключевое поле) элемента.

Из демо-примера к Controls/dropdown:Button:

protected _beforeMount() {
   this._viewSource = new Memory({
      keyProperty: 'id',
      data: [
         { id: 1, title: 'Revision' },
         { id: 2, title: 'Newsletter' },
         { id: 3, title: 'Order' }
      ];
   });
}

<Controls.dropdown:Button source="{{_viewSource}}" displayProperty="title" keyProperty="id"/>

Примечание. Шаблон отображения элемента по умолчанию выводит значение из поля title, поэтому в источнике данных должно быть одноименное поле. Вы можете изменить имя данного поля на другое с помощью опции displayProperty.

Иерархия

Рис. 3. Иерархия в выпадающем списке.

Корректное отображение иерархии в меню и в списках устанавливается с помощью опций:

• parentProperty — название поля, которое хранит идентификатор родительской записи; значение null — запись расположена в корне иерархии;
• nodeProperty — название поля, в котором хранится информация о типе записи (true — узел, null или false — лист).

Подробнее о различиях каждого типа записей можно прочитать в статье Типы отношений в таблицах БД.

Из демо-примера к контролу Controls/dropdown:Input:

_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:Input
   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 — шаблон в конце списка.