FormList

form-list

The FormList component is used to display the rows of a Priority form as a list, using Ionic lists. Ionic sliding, avatar and thumbnail lists are available as well, by defining additional options for each item in the list.

Jump to the FormList API

Basic List

The FormList component should be used with a Form object returned from a ‘startForm’ method of the formService (startParentForm for a parent form or startSubform for a subform).

The rows displayed in the list are the form rows retrieved by the getRows method of the formService. They should be passed to the component as an array (despite being retrieved as an object). Use the objToArray for the object to array conversion.

To both start a form and retrieve its rows, use the startFormAndGetRows method.

import { FormService, Form } from 'priority-ionic';

export class ... {

  form: Form = {};

  constructor(private formService: FormService) {}

  init() {
    this.formService.startFormAndGetRows('CUSTOMERS', 'company_name').then((form: Form) => {
      this.form = form;
    });
  }
}

Set the Form and Items input properties of the form-list.

<form-list
     [Form]="form"
     [Items]="form.rows | objToIterable">
</form-list>


Card List

The default display of the list is as the normal Ionic item-list. To display each item as a card, add the card attribute to the form-list component.

<form-list
     card
     [Form]="form"
     [Items]="form.rows | objToIterable">
</form-list>


More Lists

Sliding List

To add sliding buttons to the list items use the ItemOptions input of the FormList. for more info see the FormItem docs.

Avatar List

To display an avatar list define the avatar property in the ColumnsOptions input. for more info see the FormItem docs. You can set a list as an avatar list or thumbnail list, but not both.

Thumbnail List

To display a thumbnail list define the thumbnail property in the ColumnsOptions input. for more info see the FormItem docs. You can set a list as an avatar list or thumbnail list, but not both.


Display Columns

By default no columns will be displayed in the form-list items. To display certain row columns, configure the form columns to be displayed in each item with the ColumnsOptions input property.

For example, to display the name and email of in the customers list, add these ColumnsOptions to the form-list component.

For more information of how to customize the data displayed for each item, see FormItem.

<form-list
     [Form]="form"
     [Items]="form.rows | objToIterable"
     [ColumnsOptions]="{'CUSTDES': {isShow: true}, 'EMAIL': {isShow: true}}">
</form-list>


Sort Items

To sort the items displayed in the list, set the Sort input property to an object with the column name by which to sort. To define the sort direction, add the direction property (1 ascending, -1 descending).

For more information about the sort object see the FormList API.

<form-list
     [Form]="form"
     [Items]="form.rows | objToIterable"
     [Sort]="{column: 'CURDATE', direction: -1}">
</form-list>


Filter Items

Use the Filter input property to add a filter to the items displayed in the list.

Note: This filter is only applied to the items set in the Items input, i.e. rows already retrieved locally. It is not applied at the form level when retrieving additional rows.

For more information about defining filters see the FormList API.

<form-list
     [Form]="form"
     [Items]="form.rows | objToIterable"
     [Filter]="[{column: 'CUSTDES', value: 'abc', type: 'startsWith'}]">
</form-list>


FormList API


Attributes

Attr Description
card A card list. Each item is displayed as a card.


Input Attributes

Attr Type Description
type string Display type of the list. Possible values are: “default” (default) or “card”.
inline boolean Display type of the columns’ titles in the item. If true (default), the column’s title and value will be displayed in a single line. If false, the column’s title will be displayed with the value directly beneath it.


Input Properties

Name Type Description
Form Form The form object of the list to display.
Items Row[] The form rows to display (as an array).
ColumnsOptions ColumnsOptions Any additional display options that could be defined for each column of the form.
ItemOptions ItemOptions Any additional options that the FormItem could take, will be passed to each item.
Sort any A sort-by column to apply to the displayed items. The sort object contains the following properties: column the column name and direction the sort direction (1 for ascending order and -1 for descending).
Filter any[] A filter to apply to the displayed items. The filter is an array of objects with the following properties defined: column the column name, value the column’s value and type the filter type, one of [equals, includes, startsWith]. All the filter objects in the array are applied with an or operator between.
Subforms string[] An array of subform names that will be displayed in each item - when it is expanded.