Flexberry Documentation
FlexberryObjectlistviewComponent Class
addon/components/olv-pagination.js:3
Component to pagination of object list view.
Item Index
Methods
- _clearSelectedRecords
- _conjuctPredicates
- _createQueryBuilder
- _getRowByKey
- _setActiveRow
- _swapRecordElementsById
- _valueChanged
- actions.addColumnToSorting
- actions.applyFilters
- actions.availableHierarchicalMode
- actions.createNewByPrototype
- actions.customButtonAction
- actions.customButtonInRowAction
- actions.filterByAnyMatch
- actions.gotoPage
- actions.loadRecords
- actions.nextPage
- actions.objectListViewRowClick
- actions.perPageClick
- actions.previousPage
- actions.resetFilters
- actions.searchPageButtonAction
- actions.sendMenuItemAction
- actions.sortByColumn
- actions.switchExpandMode
- actions.switchHierarchicalMode
- actions.toggleStateFilters
- beforeDeleteAllRecords
- beforeDeleteRecord
- configurateTag
- confirmDeleteRow
- confirmDeleteRows
- didRender
- getTargetObjectByCondition.
- init
- initProperty
Properties
- _availableHierarchicalMode
- _hierarchicalAttribute
- _loadRecords
- _pages
- _saveHierarchicalAttribute
- _showFilters
- _switchExpandMode
- _switchHierarchicalMode
- action
- allowColumnResize
- appConfig
- appConfigSettings
- appConfigSettingsPath
- availableCollExpandMode
- bottomPagination
- buttonClass
- cellComponent
- colsConfigButton
- columnsResizeMode
- columnsWidthAutoresize
- componentForFilter
- componentForFilterByCondition
- componentMode
- componentName
- conditionsByType
- content
- createNewButton
- currentController
- currentIntervalRecords
- customButtons
- customButtonsInRow
- customProperties
- customTableClass
- customToolbarComponents
- data-test-component
- ddlFilterSettings
- defaultLeftPadding
- defaultSortingButton
- defaultTagConfig
- deleteButton
- disableHierarchicalMode
- dynamicProperties
- editFormRoute
- editInModal
- enableFilters
- eventsBus
- exportExcelButton
- filterButton
- filterByAllWords
- filterByAnyWord
- filterProjectionName
- filterText
- fixedHeader
- formLoadTimeTracker
- hasNextPage
- hasPreviousPage
- hierarchicalIndent
- hierarchyAttribute
- hierarchyByAttribute
- hierarchyPaging
- inExpandMode
- inHierarchicalMode
- isParentRecordPropertyName
- isUseVoiceTyping
- lookupComponentName
- menuInRowAdditionalItems
- minAutoColumnWidth
- modelName
- modelProjection
- objectlistviewEventsService
- onEditForm
- orderable
- overflowedComponents
- pages
- perPageValue
- perPageValues
- placeholder
- readonly
- readonlyAttr
- recordsTotalCount
- refreshButton
- relatedModel
- removeData
- required
- rowClickable
- searchPageButtonReadonly
- searchPageValue
- selectedRecord
- showAsteriskInRow
- showCheckBoxInRow
- showDeleteButtonInRow
- showDeleteMenuItemInRow
- showEditButtonInRow
- showEditMenuItemInRow
- showFiltersInModal
- showPrototypeButtonInRow
- showPrototypeMenuItemInRow
- showShowingEntries
- showValidationMessages
- sorting
- store
- tableStriped
- useRowByRowLoading
- useRowByRowLoadingProgress
- useSidePageMode
Methods
_clearSelectedRecords
()
private
Clear selected records on all pages. This method should be removed when we will ask user about actions with selected records.
_conjuctPredicates
-
limitPredicate -
autocompletePredicate -
lookupAdditionalLimitFunction
Concatenates predicates.
Parameters:
-
limitPredicateBasePredicateThe first predicate to concatenate.
-
autocompletePredicateBasePredicateThe second predicate to concatenate.
-
lookupAdditionalLimitFunctionFunctionFunction return BasePredicate to concatenate.
Returns:
Concatenation of two predicates.
_createQueryBuilder
-
store -
modelName -
projection -
order
Creates an instance of the Builder class with selection and sorting specified in the component parameters.
Returns:
_getRowByKey
()
private
Get the row by key.
_setActiveRow
-
row
Set the active row.
Parameters:
-
rowObjectTable row, which must become active.
_swapRecordElementsById
-
activeElementId -
currentElementId
Swap element in records by id.
_valueChanged
()
private
It observes changes in from, to, value.
actions.addColumnToSorting
-
column
Handles action from object-list-view when no handler for this component is defined.
Parameters:
-
columnObjectColumn to add sorting by
actions.applyFilters
-
filters
Dummy action handlers, overloaded in LimitedController.
Parameters:
-
filtersArrayFilters.
actions.availableHierarchicalMode
-
hierarchicalAttribute
Set availability hierarchical mode, and save the attribute name in controller.
Parameters:
-
hierarchicalAttributeStringAttribute name to hierarchy building.
actions.createNewByPrototype
-
prototypeId
This action is called when user click on menu in row.
actions.customButtonAction
-
actionName
Handler to get user button's actions and send action to corresponding controllers's handler.
Parameters:
-
actionNameStringThe name of action
actions.customButtonInRowAction
-
actionName -
model
Handler to get user button's in rows actions and send action to corresponding controllers's handler.
actions.filterByAnyMatch
-
The
Handles action from object-list-view when no handler for this component is defined.
Parameters:
-
TheStringpattern to filter objects
actions.gotoPage
-
action -
pageNumber
Handles action from object-list-view when no handler for this component is defined.
Parameters:
-
actionActionAction go to page.
-
pageNumberNumberNumber of page to go to.
actions.loadRecords
-
Primary -
Instance -
Property -
Flag
Redirects the call to controller.
Parameters:
-
PrimaryStringkey.
-
InstanceObjectListViewRowComponent -
PropertyStringname.
-
FlagBooleanindicates that this is the first download of data.
actions.nextPage
-
action
Handles action from object-list-view when no handler for this component is defined.
Parameters:
-
actionActionAction next page.
actions.objectListViewRowClick
-
record -
options
Handles action from row click (action is handled at route so it can't be closure action now).
actions.perPageClick
-
perPageValue
Called when click on perPage.
Parameters:
-
perPageValueStringSelected perPage value.
actions.previousPage
-
action
Handles action from object-list-view when no handler for this component is defined.
Parameters:
-
actionActionAction previous page.
actions.resetFilters
-
action
Dummy action handlers, overloaded in LimitedController.
Parameters:
-
actionActionAction reset filters.
actions.searchPageButtonAction
-
action
Action search and open page.
Parameters:
-
actionFunctionThe
goToPageaction from controller.
actions.sendMenuItemAction
-
actionName -
record
Send action with actionName into controller.
actions.sortByColumn
-
column
Handles action from object-list-view when no handler for this component is defined.
Parameters:
-
columnObjectColumn to sort by
actions.switchExpandMode
()
Called controller action to switch in collapse/expand mode.
actions.switchHierarchicalMode
()
Called controller action to switch in hierarchical mode.
actions.toggleStateFilters
()
Show/hide filters.
beforeDeleteAllRecords
-
modelName -
data
Hook that executes before deleting all records on all pages.
Parameters:
Example:
<!-- app/templates/employees.hbs -->
{{flexberry-objectlistview
...
beforeDeleteAllRecords=(action 'beforeDeleteAllRecords')
...
}}
// app/controllers/employees.js
import ListFormController from './list-form';
export default ListFormController.extend({
actions: {
beforeDeleteAllRecords(modelName, data) {
if (modelName === 'application-user') {
data.cancel = true;
}
}
}
});
beforeDeleteRecord
-
record -
data
Hook that executes before deleting the record.
Parameters:
Example:
<!-- app/templates/employees.hbs -->
{{flexberry-objectlistview
...
beforeDeleteRecord=(action 'beforeDeleteRecord')
...
}}
// app/controllers/employees.js
import ListFormController from './list-form';
export default ListFormController.extend({
actions: {
beforeDeleteRecord(record, data) {
if (record.get('myProperty')) {
data.cancel = true;
}
}
}
});
configurateTag
-
tagConfig -
record
Hook for configurate tag.
Example:
<!-- app/templates/employees.hbs -->
{{flexberry-multiple-lookup
...
configurateTag=(action "configurateTag")
...
}}
// app/controllers/employees.js
import ListFormController from './list-form';
export default ListFormController.extend({
actions: {
configurateTag(tagConfig, record) {
set(tagConfig, 'canBeDeleted', false);
if (record === this.get('myFavoriteRecord')) {
set(tagConfig, 'canBeSelected', false);
set(tagConfig, 'customClass', 'my-fav-record');
}
}
}
});
confirmDeleteRow
-
record
Hook that can be used to confirm delete row.
Parameters:
-
recordDS.ModelThe record to be deleted.
Returns:
Example:
// app/controllers/example.js
...
actions: {
...
confirmDeleteRow(record) {
return new Promise((resolve, reject) => {
this.showConfirmDialg({
title: Delete an object with the ID '${record.get('id')}'?,
onApprove: resolve,
onDeny: reject,
});
});
}
...
}
...
<!-- app/templates/example.hbs -->
{{flexberry-objectlistview
...
confirmDeleteRow=(action "confirmDeleteRow")
...
}}
confirmDeleteRows
()
Boolean | Promise
Hook that can be used to confirm delete rows.
Returns:
Example:
// app/controllers/example.js
...
actions: {
...
confirmDeleteRows() {
return new Promise((resolve, reject) => {
this.showConfirmDialg({
title: 'Delete all selected records?',
onApprove: resolve,
onDeny: reject,
});
});
}
...
}
...
<!-- app/templates/example.hbs -->
{{flexberry-objectlistview
...
confirmDeleteRows=(action "confirmDeleteRows")
...
}}
didRender
()
Called after a component has been rendered, both on initial render and in subsequent rerenders. More info.
getTargetObjectByCondition.
-
condition
Returns that 'targetObject' (from 'targetObject's hierarchy) which satisfies a given condition.
let controller = this.getTargetObjectByCondition((targetObject) => {
return targetObject instanceof Controller;
});
Parameters:
-
conditionFunctionCallback-function, which will be called for each 'targetObject' in 'targetObject's hierarchy, until callback return true for one of them.
Returns:
Target object which satisfies a given condition or null.
init
()
An overridable method called when objects are instantiated. For more information see FlexberryBaseComponent/init:method of FlexberryBaseComponent.
initProperty
-
options
Initializes component's property with recpect to following priority: 1 - template-defined parameters, 2 - applicaion configuration-defined parameters (JSON from ./config/environment by path defined in 'appConfigSettingsPath' property), 3 - component-defined defaults. Note! It is important to be declared as undefined for those component properties, which will be initialized through 'initProperty' call.
// ./config/environment.js.
module.exports = function(environment) {
var ENV = {
APP: {
components: {
myComponent: {
myComponentProperty: 'myComponentProperty config-defined default value',
}
}
}
};
return ENV;
};
// /components/my-component.js
import FlexberryBaseComponent from 'ember-flexberry/flexberry-base-component';
export default FlexberryBaseComponent.extend({
appConfigSettingsPath: 'APP.components.myComponent',
myComponentProperty: undefined,
init() {
this._super.apply(this, arguments);
this.initProperty({ propertyName: 'myComponentProperty', defaultValue: 'myComponentProperty default value' });
}
});
Properties
_availableHierarchicalMode
Boolean
private
Flag indicate when available the hierarchical mode.
Default: false
_loadRecords
String
private
Store the action name at controller for loading records.
Default: 'loadRecords'
_saveHierarchicalAttribute
String
private
Store the action name at controller for save the hierarchical attribute name.
Default: 'saveHierarchicalAttribute'
_switchExpandMode
String
private
Store the action name at controller for switch to the collapse/expand mode.
Default: 'switchExpandMode'
_switchHierarchicalMode
String
private
Store the action name at controller for switch to the hierarchical mode.
Default: 'switchHierarchicalMode'
allowColumnResize
Boolean
Flag: indicates whether allow to resize columns (if true) or not (if false).
Default: true
appConfigSettings
Object
Component settings object from application configuration (part of JSON from ./config/environment.js). Part of appConfig related to appConfigSettingsPath.
Default: null
appConfigSettingsPath
String
Path to component's settings in application configuration (JSON from ./config/environment.js).
Default: 'APP.components.flexberryObjectlistview'
availableCollExpandMode
Boolean
private
Flag indicate when available the collapse/expand all hierarchies mode.
Default: false
cellComponent
Object
Default cell component that will be used to display values in columns cells.
Sub-properties:
colsConfigButton
Boolean
Flag indicates whether to show colsConfigButton button at toolbar.
Default: false
columnsResizeMode
String
It is used to set how the resize method works. Values: 'fit', 'flex', 'overflow'
Default: 'overflow'
columnsWidthAutoresize
Boolean
Indicates whether or not autoresize columns for fit the page width.
Default: false
componentForFilter
Function
The function (action) to customize the component used in the filters, will be called when the component is initialized.
The function must return an object with the following properties:
name- string with the component name.propertiesobject with the properties of the component, passed to the component viadynamicProperties.
The function is called with three parameters:
type- string with the attribute type.relation- indicates that the attribute is a relation.attribute- object with the attribute description.
componentForFilterByCondition
Function
The function (action) to customize the component used in the filters, will be called when the component is initialized and each time the condition is changed.
The function must return an object with the following properties:
name- string with the component name.propertiesobject with the properties of the component, passed to the component viadynamicProperties.
The function is called with three parameters:
newCondition- string with the new condition.oldCondition- string with the old condition.type- string with the attribute type.
componentMode
String
It indicates current component mode.
Available values:
listform - simple list form and after row selection it has to be opened corresponding edit form;
lookupform - component is placed on lookup form and after row selection current lookup form has to be closed.
Default: 'listform'
componentName
String
The name of the component. Initially, it was used to store user settings for the component. Now used for different purposes.
conditionsByType
Function
The function (action) for setting the available filtering conditions, will be called when the component is initialized.
The function must return a set of valid values for the flexberry-dropdown component and is called with two parameters:
type- string with the attribute type.attribute- object with the attribute description.
currentController
Controller
Current controller.
Default: null
customButtons
Array
Array of custom user buttons.
Example:
{
buttonName: '...', // Button displayed name.
buttonAction: '...', // Action that is called from controller on this button click (it has to be registered at component).
buttonClasses: '...', // Css classes for button.
buttonTitle: '...', // Button title.
iconClasses: '', // Css classes for icon. Remember to add the icon class here, and for the button tag, through the buttonClasses property, if necessary.
disabled: true, // The state of the button is disabled if true or enabled if false.
}
Example of how to add user buttons:
- it has to be defined computed property at corresponding controller (name of property is not fixed).
import Ember from 'ember';
import ListFormController from 'ember-flexberry/controllers/list-form';
export default ListFormController.extend({
...
customButtonsMethod: computed('i18n.locale', function() {
let i18n = this.get('i18n');
return [{
buttonName: i18n.t('forms.components-examples.flexberry-objectlistview.toolbar-custom-buttons-example.custom-button-name'),
buttonAction: 'userButtonActionTest',
buttonClasses: 'test-click-button'
}];
})
});
- it has to be defined set as 'buttonAction' methods.
import Ember from 'ember';
import ListFormController from 'ember-flexberry/controllers/list-form';
export default ListFormController.extend({
...
clickCounter: 1,
messageForUser: undefined,
actions: {
userButtonActionTest: function() {
let i18n = this.get('i18n');
let clickCounter = this.get('clickCounter');
this.set('clickCounter', clickCounter + 1);
this.set('messageForUser',
i18n.t('forms.components-examples.flexberry-objectlistview.toolbar-custom-buttons-example.custom-message').string +
' ' + clickCounter);
}
}
});
- defined methods and computed property have to be registered at component.
{{flexberry-objectlistview
...
customButtons=customButtonsMethod
userButtonActionTest=(action "userButtonActionTest")
}}
customButtonsInRow
Array
Array of custom buttons of special structures [{ buttonName: ..., buttonAction: ..., buttonClasses: ... }, {...}, ...].
Example:
{
buttonName: '...', // Button displayed name.
buttonAction: '...', // Action that is called from controller on this button click (it has to be registered at component).
buttonClasses: '...', // Css classes for button.
buttonIcon: '...', // Button icon
buttonTitle: '...' // Button title.
}
customToolbarComponents
Array
Custom components in the toolbar.
Example:
[
{
name: '...', // Component name.
properties: {...} // Component properties.
},
...
]
Example of how to add custom components:
- it has to be defined computed property at corresponding controller.
import Ember from 'ember';
import ListFormController from 'ember-flexberry/controllers/list-form';
export default ListFormController.extend({
...
customToolbarComponents: computed('dropdownValue', function() {
return [{
name: 'flexberry-dropdown',
properties: {
items: this.get('dropdownItems'),
value: this.get('dropdownValue'),
onChange: this.get('onChange').bind(this)
}
}];
})
});
- in the controller, you must specify the
onChangemethod.
import Ember from 'ember';
import ListFormController from 'ember-flexberry/controllers/list-form';
export default ListFormController.extend({
...
dropdownValue: null,
dropdownItems: null,
onChange: function(value) {
this.set('dropdownValue', value);
},
});
- the
customToolbarComponentsproperty must be specified in the list template.
{{flexberry-objectlistview
...
customToolbarComponents=customToolbarComponents
}}
data-test-component
String
Using ember-test-selectors, creates [data-test-component=flexberry-objectlistview] selector for this component.
Default: 'flexberry-objectlistview'
ddlFilterSettings
Array
Settings for filters with a dropdown list of values.
Example:
ddlFilterSettings: computed(function () { return [{ modelName: 'ember-flexberry-dummy-suggestion-type', projectionName: 'SuggestionTypeL', propName: 'name', bindingPath: 'type' }] })
defaultSortingButton
Boolean
Flag indicates whether to show button fo default sorting set.
Default: true
dynamicProperties
Object
Component dynamic properties ({ componentPropertyName: value }). Used when component renders dynamically with ember {{component}} helper: {{component 'my-component' value=value dynamicProperties=myConponentProperties}}. In the end of component initialization its properties values will be replaced with values from this object.
Default: null
editInModal
Boolean
private
Flag indicate when edit form must be open in modal window.
Default: false
eventsBus
Evented
Interface for communication between object-list-view and flexberry-objectlistview.
exportExcelButton
Boolean
Flag indicates whether to show exportExcelButton button at toolbar.
Default: false
filterByAllWords
Boolean
If this option is enabled, search query will be split by words, search will be on lines that contain each of search query word.
Default: false
filterByAnyWord
Boolean
If this option is enabled, search query will be split by words, search will be on lines that contain any word of search query.
Default: false
filterProjectionName
String
Name of model projection which should be used for filtering throught search-element on toolbar. Filtering is processed only by properties defined in this projection.
Default: undefined
fixedHeader
Boolean
Flag indicates whether to fix the table head (if true) or not (if false).
Default: false
hierarchyByAttribute
String
Set the attribute name to hierarchy build. If specified, will attempt to build on this attribute hierarchy.
hierarchyPaging
Boolean
Flag indicate when component in hierarchycal mode has paging.
Default: false
isParentRecordPropertyName
String
The name of a property in the model that determines whether any record is the parent of other records.
If a property value with this name is defined (not undefined), the button to display child records will be shown immediately, and the records will be loaded only when the button is clicked.
Default: 'isParentRecord'
lookupComponentName
String
The name of the flexberry-lookup component for which the flexberry-objectlistview component is used.
minAutoColumnWidth
Number
Minimum column width, if width isn't defined in userSettings.
Default: 150
modelProjection
Object
Model projection which should be used to display given content.
Default: null
objectlistviewEventsService
Service
Service that triggers objectlistview events.
orderable
Boolean
Flag indicates whether ordering by clicking on column headers is allowed.
Default: false
overflowedComponents
Array
List of component names, which can overflow table cell.
Default: A(['flexberry-dropdown', 'flexberry-lookup'])
placeholder
String
Text to be displayed in table body, if content is not defined or empty.
Default: t('components.flexberry-objectlistview.placeholder')
readonlyAttr
String | Undefined
Readonly HTML attribute following to the readonly query param. According to the W3C standard, returns 'readonly' if readonly is true and undefined otherwise.
showAsteriskInRow
Boolean
Flag indicates whether to show asterisk icon in first column of every changed row.
Default: false
showCheckBoxInRow
Boolean
Flag indicates whether to show checkbox in first column of every row.
Default: false
showDeleteButtonInRow
Boolean
Flag indicates whether to show delete button in first column of every row.
Default: false
showDeleteMenuItemInRow
Boolean
Flag indicates whether to show dropdown menu with delete menu item, in last column of every row.
Default: false
showEditButtonInRow
Boolean
Flag indicates whether to show edit button in first column of every row.
Default: false
showEditMenuItemInRow
Boolean
Flag indicates whether to show dropdown menu with edit menu item, in last column of every row.
Default: false
showPrototypeButtonInRow
Boolean
Flag indicates whether to show prototype button in first column of every row.
Default: false
showPrototypeMenuItemInRow
Boolean
Flag indicates whether to show dropdown menu with prototype menu item, in last column of every row.
Default: false
showValidationMessages
Boolean
Flag: indicates whether to show validation messages in every row or not.
Default: false
store
Service
Ember data store.
useRowByRowLoadingProgress
Boolean
Flag indicates whether to use bottom row by row loading progress while rows in loading state.
Default: false
useSidePageMode
Boolean
The value of the useSidePageMode property for the modal windows used by this component.
It can be configured through the configuration file (config/environment.js).
Default: false