Flexberry Objectlistview

Используемые компоненты и настройки списков в приложениях с использованием технологии Flexberry Ember, экспорт, удаление элементов

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

Для добавления контрола на страницу, можно воспользоваться шаблоном (ниже представлен шаблон для добавления на списковую форму):

{{flexberry-objectlistview
  componentName = "ordersObjectListView"
  modelController = this
  modelName = "order"
  modelProjection = modelProjection
  content = model

  createNewButton = true
  refreshButton = true
  defaultSortingButton = true
  showDeleteButtonInRow = true
  colsConfigButton = true

  sorting = computedSorting
  orderable = true
  sortByColumn = (action "sortByColumn")
  addColumnToSorting = (action "addColumnToSorting")
  action = "rowClick"

  pages = pages
  perPageValue = perPageValue
  perPageValues = perPageValues
  hasPreviousPage = hasPreviousPage
  hasNextPage = hasNextPage
  previousPage = (action "previousPage")
  gotoPage = (action "gotoPage")
  nextPage = (action "nextPage")
}}

Note: Синтаксис вида addColumnToSorting=(action "addColumnToSorting") определяет, что используется ember closure action. Если требуемое действие не определено, то при вызове соответствующей функциональности в консоли браузера появится ошибка.

Если на форме используются дополнительные события, в шаблон может быть передано как имя события

{{flexberry-objectlistview
...
action="customActionName"
}}

так и собственно само событие:

{{flexberry-objectlistview
...
action=customActionName
}}

Список компонентов flexberry-ojectlistview

Наименование компонента	Краткое описание компонента
`componentName`	Имя компонента. Должно быть уникальное в пределах однойстраницы.
`modelController`	Текущий контроллер страницы.
`modelName`	Имя текущей модели (список каких объектов отображается).
`modelProjection`	Текущее используемое представление.
`content`	Отображаемые в контроле данные.
`createNewButton`	Флаг, определяющий, отображать ли кнопку создания на панели управления.
`refreshButton`	Флаг, определяющий, отображать ли кнопку обновления на панели управления.
`defaultSortingButton`	Флаг, определяющий, отображать ли кнопку установки сортировки по умолчанию.
`deleteButton`	Флаг, определяющий, отображать ли кнопку удаления на панели управления.
`showCheckBoxInRow`	Флаг, определяющий, отображать ли чекбоксы для выделения записей в каждой строчке.
`showDeleteButtonInRow`	Флаг, определяющий, отображать ли кнопку удаления строки в каждой строчке.
`showDeleteMenuItemInRow`	Флаг, определяющий, отображать ли пункт контекстного, меню мобильного шаблона f-olv, “Удалить запись”.
`showEditMenuItemInRow`	Флаг, определяющий, отображать ли пункт контекстного, меню мобильного шаблона f-olv, “Редактировать запись”.
`rowClickable`	Флаг, определяющий, следует ли обрабатывать нажатие на строчку.
`action`	Действие, выполняемое при нажатии на строчку.
`orderable`	Флаг, определяющий, возможно ли производить сортировку по столбцам в компоненте.
`sorting`	Метод определения текущей сортировки.
`sortByColumn`	Действие (`action`) контроллера, которое должно быть выполнено для сортировки по столбцу.
`addColumnToSorting`	Действие (`action`) контроллера, которое должно быть выполнено для добавления сортировки по столбцу.
`pages`	Метод определения доступных страниц для отображения в пейджинге.
`perPageValue`	Метод определения текущей настройки, где указано, по сколько записей отображается на странице.
`perPageValues`	Массив, определяющий, по сколько записей на странице можно отображать.
`hasPreviousPage`	Флаг, определяющий, есть ли у текущей страницы предшествующая.
`hasNextPage`	Флаг, определяющий, есть ли у текущей страницы последующая.
`previousPage`	Метод для перехода на предыдущую страницу.
`gotoPage`	Метод для перехода на заданную страницу.
`nextPage`	Метод для перехода на следующую страницу.
`editFormRoute`	Задаёт имя роута формы редактирования, в котором будет открываться модель.
`singleColumnHeaderTitle`	Заголовок для мобильного представления компонента, вместо названий колонок. Если не задан или равен “”, то шапка таблицы в компоненте скрывается.
`colsConfigButton`	Флаг (`true`/`false`) включающий/выключающий отображение кнопок пользовательских настроек.

Значения по умолчанию:

action: 'rowClick',
createNewButton: false,
refreshButton: false,
defaultSortingButton: true,
orderable: false,
rowClickable: true,
showCheckBoxInRow: false,
showDeleteButtonInRow: false,
showDeleteMenuItemInRow: false,
showEditMenuItemInRow: true
colsConfigButton - true

Настройка списков

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

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

Экспорт в Excel

Технология Ember Flexberry предоставляет возможность экспорта списков. Для того чтобы экспорт стал доступен в приложении, необходимо осуществить настройки на бакэнде.

В шаблоне непосредственно формы должно быть указано

{{flexberry-objectlistview
...
exportExcelButton=true

Настройки экспорта можно сохранять, задав наименование. Также можно изменять наименование столбцов для экспорта.

Удаление элементов списка

Для удаления элементов списка используется метод beforeDeleteRecord. Метод поддерживает асинхронный режим, то есть можно возвращать promises в качестве значения результата.

Удаление всех выделенных элементов

Для настройки одновременного удаления всех выделенных элементов списка нужно в контроллере прописать событие beforeDeleteAllRecords:

import ListFormController from './list-form';

export default ListFormController.extend({
  actions: {
    beforeDeleteAllRecords(modelName, data) {
      if (modelName === 'application-user') {
        data.cancel = false;
      }
    }
  }
});

и указать его в шаблоне списка:

{{flexberry-objectlistview
  ...
  beforeDeleteAllRecords=(action 'beforeDeleteAllRecords')
  ...
}}

Проверка списков перед удалением элементов

При работе со списком есть возможность возвращать promise через return в теле обработчика beforeDeleteRecord, то есть можно реализовать асинхронную логику. Если сделать return <промис>- тогда операция удаления будет вызываться после того, как будет выполнен promise . Если он выполнение будет прервано, то удаление выполнено не будет.

Отображение ошибок списка

Если список содержит ошибки, то будет отображена форма с указанием ошибки:

при загрузке списка с ошибкой в первый раз будет отображен шаблон error.hbs
в контроллере есть список ранее загруженных объектов - ошибка будет показана через компонент.

Изменить это на прикладном уровне можно с помощью метода onModelLoadingRejected в роуте.

Ограничения списков

Особенности настройки ограничений на списках описаны в статье Инструменты ограничения списка.

Изменение ширины столбцов

Изменение ширины столбцов для списка и детейлов на форме редактирования осуществляется по общим принципам.

Для того чтобы включить/отключить изменение шири ны столбцов, необходимо задать у контрола в шаблоне свойство allowColumnResize (для обычных приложений это свойство по умолчанию имеет значение true, для мобильных - false.

Note: Не смотря на то, что для мобильных приложений изменение ширины столбцов доступно, включать данный флаг для данного типа приложений не рекомендуется.

Если плагин инициализировался правильно, то после загрузки контрола при наведении курсора на границу между столбцами курсор меняет свой внешний вид и появляется возможность изменять ширину столбцов.

Возможно запретить изменение размеров отдельных столбцов, используя начальные настройки отображаемых столбцов в свойстве columnWidths.

Сервис настроек пользователя

Если cервис настроек пользователя включён, то при загрузке спискового контрола вычитывается сохранённая настройка ширины столбцов, а при изменении ширины столбцов - настройка сохраняется.