Used components and configuration lists in applications using the technology Flexberry Ember, export, delete items

The main purpose of flexberry-ojectlistview – view the list of available objects with the possibility of subsequent open and edit (in the built-paging control that allows you to view the data portion).

To add a control to the page, you can use the template (see below for a template to add to list form):

  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")

If the form is used for more events in the template can be passed as the event name


and in fact the event itself:


The list of components flexberry-ojectlistview

The component name description
componentName the name of the component. Must be unique within the same page.
modelController Current page controller.
modelName Name of the current model (a list of which objects are displayed).
modelProjection Current used view.
content Displayed in the control data.
createNewButton Flag that determines whether to display the button to create on control panel.
refreshButton Flag that determines whether to display the refresh button on the control panel.
defaultSortingButton Flag that determines whether to display button for setting the default sort.
deleteButton Flag that determines whether to display the delete button on the control panel.
showCheckBoxInRow Flag that determines whether to display checkboxes for selection of records in each line.
showDeleteButtonInRow Flag that determines whether to display the delete button of the row in each line.
showDeleteMenuItemInRow Flag that determines whether to display the item in the context menu mobile template f-olv, “Delete record”.
showEditMenuItemInRow Flag that determines whether to display the item in the context menu mobile template f-olv, “Edit record”.
rowClickable Flag that determines whether to treat depression is on the line.
action Action to perform when clicking the line.
orderable Flag that determines whether to sort by columns in the component.
sorting Method of determining the current sorting.
sortByColumn Action (action) of the controller that should be executed to sort by column.
addColumnToSorting Action (action) of the controller that should be executed to add a sort by column.
pages Method for the determination of available pages to display in the paging.
perPageValue Method definitions for the current setting, which indicates the number of records displayed on the page.
perPageValues Array defining the number of records per page can be displayed.
hasPreviousPage Flag that determines whether the current page is the last.
hasNextPage Flag that determines whether the current page later.
previousPage Method to move to the previous page.
gotoPage Method to move on a given page.
nextPage Method to move to the next page.
editFormRoute Specifies the name of the route edit form, which will open the model.
singleColumnHeaderTitle Header for mobile view component, instead of column names. If not specified or equal to “” then the header of the table in the component is hidden.
colsConfigButton Flag (true/false) enable/disable the display of buttons in the user settings.
bottomPagination Flag that determines whether to display pagination bottom/up (true/false).

Default values:

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

Customize lists

Part of Flexberry Objectlistview control includes a control panel that you can customize and add custom buttons.

Control panel, likes buttons in rows, might be supplemented with custom buttons that implement the necessary functions to work with list. Described in detail in Settings list.

Export to Excel

Technology Ember Flexberry provides the ability to export lists. To export became available in the app, you need to implement settings backend.

In the template directly form must be specified


Export settings can be saved by specifying a name. You can also change the name of the exported columns.

Deleting list items

To remove items from the list method is used beforeDeleteRecord. The method supports asynchronous mode, it is possible to return promise as the value of the result.

Deleting all selected items

To configure simultaneous removal of all selected list items you need in the controller to register event beforeDeleteAllRecords:

import ListFormController from './list-form';

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

and specify it in the template list:

  beforeDeleteAllRecords=(action 'beforeDeleteAllRecords')

Check list before removing items

When working with the list can return a promise using return in the handler’s body beforeDeleteRecord, it is possible to implement asynchronous logic. If you do return < promise > then the delete operation will be called after promise is fulfilled. If he will be terminated, the deletion will fail.

Display of error list

If the list contains errors, it will display indicating the error:

  • when loading a list with an error the first time you will see a pattern error.hbs;
  • the controller has a list of previously downloaded items, error will be shown through the component.

To change this in the application layer by using the method onModelLoadingRejected in the router.

Limitations of lists

Features to configure the limits on the lists described in the article Tools limit the list.

Change the width of columns

Change column widths for list and datalow on the edit form is implemented according to General principles.

To enable/disable changing of width HN of the columns, you must specify the control in the template property allowColumnResize (for normal applications this property has a default value true for mobile – false.

If the plugin was initialized correctly, after you download the control when you hover over the border between columns, the cursor changes its appearance and you can change the width of columns.

It is possible to prevent resizing of individual columns using the initial configuration of columns to display in the property columnWidths.

Service user settings

If service user settings is enabled, when loading the list control to read the saved setting width of columns, and changing column width – the setting is saved.

Переведено сервисом «Яндекс.Переводчик»