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):
{{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")
}}
addColumnToSorting=(action "addColumnToSorting") determines that closure is used ember action. If the requested action is not defined, then the call to the appropriate functionality in the browser console you will see error.If the form is used for more events in the template can be passed as the event name
{{flexberry-objectlistview
...
action="customActionName"
}}
and in fact the event itself:
{{flexberry-objectlistview
...
action=customActionName
}}
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
{{flexberry-objectlistview
...
exportExcelButton=true
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:
{{flexberry-objectlistview
...
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.