EditListPage Component Reference

Related documents

• Component Overview
• Component Reference
• Built-in Components
• Template Markup Language (TML) Reference
• ListSelector Component Reference
• Page Component Reference
• ListPage Component Reference

Table of Contents

• Introduction
• Attributes
• Instance methods
  • Inherited methods
• Children
• DOM element properties
• Styling

Introduction

Syntax

tml`
	<EditListPage sVar=myDataSelectorInputSv>
		...
	</EditListPage>
`

On wide devices or windows, the EditListPage component displays a scrollable, editable list (an EditListSelector component) on the left and an area for the list item content on the right. The selection in the list controls the values displayed in the content area. On narrow devices (Nav style: slide), the list and content are two separate pages with navigation elements to move back and forth.

The EditListPage component renders a Page. On wide devices, the Page contains an EditListSelector component and a separate <div> the EditListPage children that form the content area. On narrow devices, Page contains either the EditListSelector component or the content area depending on which is currently being displayed.

The EditListPage component requires a sVar attribute which must have a Data selector input state variable.

The EditListPage component is similar to the ListPage component but it uses an EditListSelector component instead of a ListSelector component. This provides a user-editable single-level list instead of a non-editable single or two-level accordion list.

Attributes

• Standard properties (optional)
  The EditListPage component accepts the standard attributes.
• onAdd (optional)
  A callback function that will be invoked when a new item is requested to be added to the list. The function has no arguments and should do the following:
  • Add a new entry to the sVar state variable's options.
  • Initialize the data state variables associated with the sVar state variable.
  • Call the sVar state variable's updateOptionData() method if any data has changed from the previously selected option.
    The function can do the above asynchronously. For example, it can first ask the user for confirmation or rely on the initialization of the data state variables to eventually update the sVar state variable by relying on page Model computation functions.
• onDelete (optional)
  A callback function that will be invoked when a list item is is requested to be deleted. The function has one argument containing the value of the option to be deleted. It should delete the option associated with the value from the sVar state variable and set a new selected option, if required. If no options are left, it should do what's required.
• onSort (optional)
  A callback function that will be invoked when the list's 'Sort' button is pressed. The function has no arguments and should sort the sVar state variable's options in a standard order. If not present or falsey, the 'Sort' button is not shown.
• showClickThru (optional)
  A Boolean that controls the behavior on narrow devices where either the item list or data is shown, but not both. If true, the selected list item shows a '>' at the end, and a second click will be required to show the data. If false, selecting a list item will show the data immediately. Setting showClickThru to true allows the user to browse and click before editing the data.
• sVar (required)
  A dataSelectorInput state variable or state variable ID that contains the list options and data.
• title (optional)
  The string that will be displayed in the List header bar as the list title.

Instance methods

These methods are intended to be used by parent components to dynamically change the properties of the rendered components without re-rendering.

Inherited methods

• Component methods

Children

All template children are included as the Page component children. If any child is a PageCol component, then all children must be PageCol components.

DOM element properties

• On wide devices, the EditListPage component will render a Page component containing an EditListSelector component and a <div> for the content area.
• On narrow devices, the EditListPage component will render a Page component containing either an EditListSelector component or a <div> for the content area with a header bar <div> for navigation back to the list.
• A device is considered to be narrow when the value of sv.nav_style is 'slide'. Otherwise, it is considered to be wide.
• The content area <div> contain the EditListPage component's children.
• The content area <div> will have a CSS class name with the string listPage_contents.

Styling

By default:

• On wide devices the EditListSelector component will appear to the left of the content area.
• The content area will be transparent and vertically scrollable.