List and Instance primitives

List view

Overview

The list view consists of a number of primitives that work together:

  • listModel defines how the list is retrieved
  • listView transforms the raw data of the listModel into a viewModel
  • paging defines controls for the list paging

ListModel

The standard list model uses a finder to find the elements for the list. The finder can be defined to be a findAll or any other finder.

Input:

  • searchMethod finder to be used by the listModel, wrap in an observable to change it dynamically
  • searchDetails parameters for the finder

Options:

  • pageSize the page-size, defaults to 7
  • reloadOn a trigger that causes the list to reload
  • sorting a sorting viewModel that contains a list of all the sort-fields
var ListModel = require('nsx/list/standard-paged-list');
var PersonFinders = require('euRent/person/person-finders');
//...
var options = {/*...*/};
var searchMethod = PersonFinders.findByName;
var searchDetails = { name: /*...*/ };

var listModel = ListModel.createPagedListModel({
  searchMethod: searchMethod,
  searchDetails: searchDetails
}, options);

The listModel exports the following:

  • page list of info-objects that defines the current page
  • pageNb current page-number
  • numberOfPages total number of pages
  • gotoPage allows other widgets to select a different page, which triggers an update

ListView

The listView wraps the info-objects to add functionality related to the GUI.

  • selection triggers to select/deselect etc.
  • links triggers that register when the user clicks on a link
var Page = require('nsx/page-component');
var ListView = require('nsx/list/standard-list-view');
//...
var listView = ListView.makeListView({
  page: listModel.page
});

Page.definePageSegment({
  selector: "#list",
  view: "...",
  viewModel: listView
});

Paging

var Page = require('nsx/page-component');
var Pagination = require('nsx/paging/standard-pagination');
//...
var listModel = /*...*/;
var pagination = Pagination.definePagination({
  pageNb: listModel.pageNb,
  numberOfPages: listModel.numberOfPages,
  gotoPage: listModel.gotoPage,
  totalNumberOfItems: listModel.totalNumberOfItems
});

Page.definePageSegment({
  selector: "#paging",
  view: "...",
  viewModel: pagination
});

Instance View

View

To show the details projection or any other projection of an instance, the following steps need to be taken:

  • DataRef’s are transformed into the correct projection with a projector.
  • The projection is then transformed into a viewModel through the InstanceView widget.
  • This viewModel can be injected into a page-segment.
var Projector = require('euRent/person/person-projector');
var InstanceView = require('euRent/person/person-instance-view');

var projector = Projector.defineProjector(dataRef, {
  projection: "details"
});
var viewModel = InstanceView.defineInstanceView({details: projector.projection});

Page.definePageSegment({
  selector: "#details",
  view: "...",
  viewModel: viewModel
});

Forms

To create a form, you can use the instance-form.

  • data The data with which the form will be filled in. This can be used to provide default values or the current state of a selected element.
  • fields A list of field configurations that define the fields used in the form. This is used to build the form viewModel.
  • layoutConfig A configuration object that can be used to disable/hide fields.

    E.g. { name: { hidden: true }, enteredOn: { disabled: true} } hides the ‘name’ field and disables the ‘enteredOn’ field

var InstanceForm = require('<component>/<element>-instance-form');
// ...
var form = InstanceForm.defineForm({
  data: /* data */,
  fields: /* fields */
  layoutConfig: /* layoutConfig */
}, {
  resetOn: /* trigger */
});

// The form is placed within a popup.
// This could also be replaced with a page-segment definition
Popup.definePopup({
  view: "<component>/<element>-form",
  viewModel: form,
  title: /* title */,
  trigger: /* trigger */
}, {
  onConfirm: form.submit, // submit the form when the confirm button is pressed
  closeOn: form.success // close the popup when the edit action was successful
});