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

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.

Configuring 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.

Creating a new entry based on


{{flexberry-objectlistview
  showPrototypeButtonInRow = true
  showPrototypeMenuItemInRow = true
}}

showPrototypeButtonInRow - a flag that determines whether to display the button to create on the basis of the line.

showPrototypeMenuItemInRow - a flag that determines whether to display the button to create on the basis of the menu line.

You also need to specify the representation that will create a copy.

1.You can specify a view for a specific form - to new the router to set the prototypeProjection (view name string)

2.You can specify the view for the copy default for the entire model - the right model to set a property prototypeProjection (view name string)

The refresh button


{{flexberry-objectlistview
  refreshButton = true
}}

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

The delete button 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 in the corresponding the rout). 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 the rout) 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).

An 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

Component {{flexberry-objectlistview}} has the ability to display a list of objects in a hierarchical mode.

If the object has a reference to itself, a list of such objects is hierarchical. If the object has only one link above the list of objects is displayed, a button for switching the list in a hierarchical mode.

If the object has more than one link to itself to display the list in hierarchical mode, you must specify in the property hierarchyByAttribute, the name of the attribute that will build the hierarchy.


{{flexberry-objectlistview
  ...
  hierarchyByAttribute="parent"
  ...
}}

If you want to disable the ability to display the list in hierarchical mode, you need a property disableHierarchicalMode be set to true.


{{flexberry-objectlistview
  ...
  disableHierarchicalMode=true
  ...
}}

When displaying the object list in a hierarchical mode, for each object, a separate query is run to verify the presence of the child objects. To get rid of unnecessary requests, implement object attribute to determine whether the object has child objects. This will allow you to instantly display button to view the child objects, and load them only when the button is clicked by the user.

This attribute may not be stored, and to determine the presence of child objects using a query expression for the data service. In the model for the client application, this can be a simple Boolean attribute.

[NotStored]
[DataServiceExpression(typeof(SQLDataService), "SELECT COUNT(*) > 0 FROM MyObject WHERE MyObject.Parent = StormMainObjectKey")]
public bool IsParentRecord
{
    get => fIsParentRecord;
    set => fIsParentRecord = value;
}

isParentRecord: DS.attr('boolean'),

If the attribute is called IsParentRecord, it is used by default in the component, otherwise the property isParentRecordPropertyName to specify the name of this attribute.


{{flexberry-objectlistview
  ...
  isParentRecordPropertyName="hasChildren"
  ...
}}

Don’t forget to add this attribute to the view which is used to load the object list, it can be hidden.

An example of a component that displays a list of objects in a hierarchical mode:

Locking individual cells in a list

On the list there is a possibility to lock individual safe Deposit box to open the object 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.

Circumcision text in the cells along the length of the

Ability to crop the text in the cells for a given length. When you hover over a cell a tooltip shows the total value of the cell text. This is done through setting a standard component of the cells in getCellComponent:

  getCellComponent: function(attr, bindingPath, model) {
    let cellComponent = {
      componentName: 'object-list-view-cell',
      componentProperties: {
        maxTextLength: 10,
        cutBySpaces: false,
        displayMemberPath: Ember.get(attr, 'options.displayMemberPath')
      }
    };

    return cellComponent;
  }
Property Description
maxTextLength Specifies the maximum number of characters in a cell.
cutBySpaces Determines how the circumcision of the text (false - exactly-to-length, true - according to the last space).
displayMemberPath Necessary if the cell value is the object. Specifies the path to display in the cell properties.

Computable properties in getCellComponent

To create a computed property need to controllers in 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');
}),