ItemInput

item-input

The ItemInput component is used for editing a single row of a Priority form. Input elements are displayed for each column of the form row along with a label displaying the column’s title.

Different columns types are handled by displaying matching input types, such as a date-time input for date fields and a toggle input for boolean fields.

The ItemInput component performs updates and validations for all user input. Validation is performed according to the field type and length in Priority, and displays meaningful validation errors if they are encountered. Changes in the field value fire the FormService’s updateField method with the field value to be updated. Field updates returned from the server are automatically reflected in the view. Finally, all updates can be saved to the form row using the saveRow method of the FormService.

Jump to the ItemInput API…

• Contents
• Basic Usage
• Display Columns
• Columns Options
• Item Options
• Styling
• ItemInput API

Basic Usage

The ItemInput component should be used with a Form object returned from a startForm method of the formService.

The Item is either a single row of the form rows retrieved by the getRows method, or a new row returned by the newRow method. Both are instance members of the formService. The item should be set to the activeRow of the form using the setActiveRow method.

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

export class ... {

  form: Form = {};
  item: any = {};

  constructor(private formService: FormService) {}

  init() {
    // initialize the form and retrieve its rows.
    this.formService.startFormAndGetRows('CUSTOMERS', 'company_name').then((form: Form) => {
      this.form = form;
    });
  }

  editRow(rowIndex) {
    // set the form's active row according to the selected row index
    this.formService.setActiveRow(this.form,rowIndex).then((activeRow) => {
        // assign the active row to the displayed item
        this.item = activeRow;
      });
    });
  }
}

Set the Form and Item input properties of the item-input.

<item-input
     [Form]="form"
     [Item]="item">
</item-input>

Display Columns

By default no columns are displayed in the item-input. To display the row’s columns, configure the form columns that should be displayed with the ColumnsOptions input property.

For each column add an entry to the ColumnsOptions where the key is the column’s name and the value is the ColumnOptions object.

To display the column’s value set isShow to true. By default the column’s title will be displayed. You can specify a different title with the title property. Set pos to a relative number to define the column’s position in the item.

let ordersColumnsOptions: ColumnsOptions = {
    // show the order number
    'ORDNAME': {
      isShow: true,
      pos: 1
    }
    // show the order status with an overridden title
    'ORDSTATUSDES': {
      isShow: true,
      pos: 2,
      title: 'Status'
    }
  }

Then set the ColumnsOptions input property.

<form-item
   [Form]="form"
   [Item]="item"
   [ColumnsOptions]="ordersColumnsOptions">
</form-item>

Columns Options

There are more column options that can be set in the ColumnOptions to enhance how the inputs are displayed.

Icons

To display an icon for the column, set the icon property with an Ionic icon name.

Click

To add a click functionality to a specific column, set the click property with a handler function that receives the click $event, the column and the item as parameters. You must also specify an icon for this column, as the click event is attached to the icon element and ignores the input element.

let ordersColumnsOptions: ColumnsOptions = {
    // click on the arrow icon will open a select list with available statuses.
    'ORDSTATUSDES': {
      isShow: true,
      pos: 2,
      title: 'Status',
      icon: 'arrow-down',
      click: ($event,column,item) => {
        // functionality for opening the choose list
      }
  }

Styling

You can add custom styling to each column input.

A CSS class with the same name as the column name is added to the container element of each displayed column.

Use this CSS Class to specify different styling for each input displayed in the item.

ItemInput API

Input Properties

Output Events