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