setting up the control panel, custom buttons, tools, work with objects on the list, lock individual cells, hierarchical list of computable properties

Lists for different systems require different, often customized, approach. For these purposes, in the component Flexberry Objectlistview has implemented a number of mechanisms, allowing to nastraivat as the control panel and individual lines, cells, or appearance.

configure the control panel for lists

Control panel (toolbar) Flexberry Objectlistview based on technological control olv-toolbar.

The configuration of the control panel occurs via the component Flexberry Objectlistview.

Button create a new record


{{flexberry-objectlistview
  createNewButton = true
}}

createNewButton - a flag that determines whether to display the button to create on the control panel.

refresh Button


{{flexberry-objectlistview
  refreshButton = true
}}

refreshButton - a flag that determines whether to display the refresh button on the control panel.

Button delete the selected records

{{flexberry-objectlistview
  componentName = "..."
  deleteButton = true
  showCheckBoxInRow = true
  ...
}}

In order to start to function the delete button selected records, you must define the following properties:

  • componentName is the name of the control (used to identify the component parts of control that communicate through the place). For example, the values for the list of records of type “employee” can specify “employeesFlexberryObjectListView”.
  • deleteButton - a flag that determines whether to display the delete button on the control panel.
  • showCheckBoxInRow - a flag that determines whether to display the checkbox in the row

Deleting information is sent to the server to save the changes.

Custom buttons for lists

Embedding custom buttons to the toolbar list

Embedded buttons in the controller form, we need to determine a number of properties:

{
    buttonName: '...', // Displayed name of the button. 
    buttonAction: '...', // Action called by the controller when this button is clicked (should be specified in the template). 
    buttonClasses: '...', // Css class of the button. 
    buttonTitle: '...' // Signature. 
}

If you want to add a few buttons, then their properties are set in the array:

[{ buttonName: ..., buttonAction: ..., buttonClasses: ... }, {...}, ...]

To add to the toolbar list custom button in the controller you need to define a method customButtonsMethod. For example:

import Ember from 'ember';
import ListFormController from 'ember-flexberry/controllers/list-form';

export default ListFormController.extend({
...
customButtonsMethod: Ember.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'
        }];
    })
});

Further, in the controller, you need to specify the event buttonAction

...
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);
    }
}
});

Certain methods and properties should be listed in the template list:

{{flexberry-objectlistview
...
customButtons=customButtonsMethod
userButtonActionTest='userButtonActionTest'
}}

Embedding custom buttons to the rows list

Custom buttons for the strings in the list are created on a similar principle. Event, as for the buttons in the toolbar can be set to a string. For example:

...
actions: {
    userButtonInRowActionTest(model) {
      this.set('modelFromClickedRow', model);
    },
});

Button custom settings

When the value of the attribute colsConfigButton=true on the control panel displays control buttons custom settings.

{{flexberry-objectlistview
  componentName = "..."
  colsConfigButton=true
  ...
}}

Details about the functionality of custom settings can be found in the article Service user settings.

Add custom buttons to the control panel

On the control panel, you can add buttons that implement custom logic. To add a custom button, perform the following steps:

1.In the relevant application controller to define a calculated property with an arbitrary name, for example, сustomButtons, which returns an array of structs of the form:

{
 buttonName: '...',
 buttonAction: '...',
 buttonClasses: '...',
 disabled: true,
}
  • buttonName - the name of the button on the user interface. If passed a null value, the button name is ‘UserButton’.
  • buttonAction - the name of the action (action), which will be called by the button (when the action is used sendAction, so the handler can be defined as in controller and the corresponding roat). If passed null, then the browser console displays error message. It is advisable to call actions with the prefix “userButtonAction” so you don’t accidentally grind a property of the control when this action.
  • buttonClasses classes that you want to add to the new custom button.
  • disabled - Boolean property, responsible for the state of the button if true the button is inactive, otherwise active.

2.In the application controller (or roat) to define an event handler whose name was specified in buttonAction.

3.In the template the appropriate form of the component flexberry-objectlistview to define properties:


{{flexberry-objectlistview
  // ... 
  customButtons=customButtons  
  userButtonAction1='userButtonAction1'
  userButtonAction2='userButtonAction2'
  // ... 
  userButtonActionN='userButtonActionN'
}}
  • customButtons - defining the property, where you can take an array.
  • userButtonAction1, userButtonAction2, … userButtonActionN - check action defined in a property buttonAction (without a “registration” action can not be called and Ember will not give error messages).

Example of using custom buttons in the list

For example, you want to add a custom button that, when clicked, will display a message to the user.

1.In page template to set the title in a variable “header”.

<h3 class="ui header">Страница с пользовательскими кнопками</h3>
<div class="row">
  {{flexberry-objectlistview
    // ... 
    customButtons=customButtons
    userButtonAction1='userButtonAction1'
    userButtonAction2='userButtonAction2'
    // ... 
    userButtonActionN='userButtonActionN'
  }}
</div>
<div class="row">{{messageForUser}}</div>

2.In the controller to determine the required variables, set the localizable property of the computable “customButtons”, which will return an array of descriptions of the custom buttons (in this case, one button) and the action “userButtonActionTest”, which will handle the click on the button.

import Ember from 'ember';
import ListFormController from 'ember-flexberry/controllers/list-form';

export default ListFormController.extend({
  /** 
Property to count user clicks on a button. 

@property clickCounter 
@type Number 
@default 1 
*/
  clickCounter: 1,

  /** 
Property to show message after user click on user button. 

@property messageForUser 
@type String 
*/
  messageForUser: undefined,

  /** 
Property to form an array of special structures of custom user buttons. 

@property customButtons 
@type Array 
*/
  customButtons: Ember.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: 'my-test-user-button test-click-button'
    }];
  }),

  actions: {
    /** 
Handler for user click on custom button. 

@method userButtonActionTest 
*/
    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);
    }
  }
});

3.In the template to specify a property to get custom buttons, and zaregistrovat a custom action.

<h3>{{header}}</h3>

<div class="row">
  {{flexberry-objectlistview
    // ... 
    customButtons=customButtons
    userButtonActionTest='userButtonActionTest'
  }}
</div>

Tools work with objects on the lists

Button “Mark all on current page”, “select all on all pages” and “Set default sort” are activated together with checkbox in the rows parameter showCheckBoxInRow.

  • “Mark all on current page” - selects all objects on cranite, adds the marked objects in slectRecords.
  • “Select all on all pages” - activates the parameter allSeclect, removal treatment when activated, this parameter is implemented in accordance with the requirements of a specific application in action delete() component.
  • “Set default sort” - sets the sorting and the number of pages by default.

configuring a hierarchical list

If the list is hierarchical (the object has a reference to itself), the hierarchy for the list is set by default.

If the hierarchy for the list you want to disable, then in the template you should register disableHierarchicalMode = true.

If in the model there are two or more links themselves (which might be hierarchy), then you need to specify the name of the по which should be иерархия: hierarchyByAttribute = propertyName.

Locking individual cells in a list

List there is a possibility to lock individual safe Deposit box to open edit, while leaving active-click on the line.

For this to disable click on line you want to override the transition to the edit form using a parameter (params):

params.goToEditForm = false;

Then call the _super.

In the processor settings click on the row there:

  • the entry that was clicked
  • column which is clicked (it has a property name column header on the form cellComponent this column)
  • the index of the pressed column.

These settings are used to disable click handling on the line under certain conditions (i.e. when clicking on certain cells).

For example:

actions: {
    objectListViewRowClick(record, params) {
      if (params.column && params.column.cellComponent.componentName === 'flexberry-file' && params.originalEvent.target.tagName.toLowerCase() !== 'td') {
        params.goToEditForm = false;
      }

      this._super(...arguments);
    }

Read more in the application code dummy.

Computable properties in getCellComponent

To create a computed property need to controllers, getCellComponent add property computedProperties: { thisController: this }:

getCellComponent(attr, bindingPath, model) {
   let cellComponent = this._super(...arguments);
   if (attr.kind === 'belongsTo') {
     cellComponent.componentProperties = {
       choose: 'showLookupDialog',
       remove: 'removeLookupValue',
       displayAttributeName: 'name',
       required: true,
       relationName: 'author',
       projection: 'ApplicationUserL',
       autocomplete: true,
       computedProperties: { thisController: this },
       readonly: false,
      };
   }

   return cellComponent;
 },

Thus in the property computedProperties the current controller and will be this of dynamic-properties with all your observer-AMI. Now to change any of the properties strimage component is sufficient to change the value in computedProperties:

checkboxValue: false,

lookupReadonly: Ember.observer('checkboxValue', function() {
  if (!Ember.isNone(this.get('computedProperties.dynamicProperties.readonly'))) {
    if (this.get('checkboxValue')) {
      this.set('computedProperties.dynamicProperties.readonly', true);
    } else {
      this.set('computedProperties.dynamicProperties.readonly', false);
    }
  }

  return this.get('checkboxValue');
}),
Переведено сервисом «Яндекс.Переводчик» http://translate.yandex.ru