List

A data component, the List displays a roster of record items, which can be formatted in a template using merge syntax to control how the items render. This component allows end users to employ on-click actions from the List items to launch actions in other components on the page.

Using the List component

While typically employed with the Action Framework to update Page Includes on the page, the List can be used for a variety of purposes.

One common use case for this component is to put a List in a Responsive Grid section that lists records by name. When a name is selected, data from a different Nintex Apps page is displayed via a Page Include (in another section of the grid).

Note:  The content below assumes you have a Nintex Apps page and at least one working model.

Add a List component to the page, then:

  • Ensure that the List is accessing the correct model and name the List ( if desired ). ( General tab)
  • Determine what items display on the list by clicking Add fields on the component.
  • Choose whether to include a search box. ( Search tab)
  • Give end users the ability to sort records based on field values. ( Sort tab)
  • Add Interactions that allow users to launch action when they select a List item.

Every List includes a header and a footer. These sections can include:

  • Header
    • the List's title
    • a search box
    • a button for opening a sort builder
    • filters
    • mass action buttons
  • Footer
    • an indicator of which set of rows are showing

The component's header and footer can be hidden using properties in the General tab.

Add items to a List

The power of the List component is in the items you choose to place on that List. Nintex Apps gives you a lot of options from the Add feature and Add fields dropdown menus on the List component.

Customize the List display with any of the items from the Add features dropdown menu.

  • Row Actions: Record-level actions represented by row buttons that use a record on the component as the context.
  • Mass Actions: Enables the ability to select one or more records. Each selected row becomes context for the mass action.
  • List filter: Add filters to the header of the List component.

Customize the List display with any of the items from the Add fields dropdown menu.

  • Model fields: Displays a field's name on the list.
  • Template: Allows builders to add multiple field names (along with punctuation or symbols such as "+") and display on the List.
  • Avatar: Displays a small "avatar" image on the List.
  • Icon: Displays an icon on the list.
  • Image: Displays an image on the list.

When multiple items are added to the List, they are displayed in the order they appear in the Page Designer. To change the order, drag and drop the item by clicking on the Item's column header.

In addition to adding multiple items to the List, you can also add fields to any item creating a "column" within the List:

  • From the item's column header, click Add fields.

Add Button Group

From the Add fields dropdown in a column, add a button group directly into the List component.

When you add buttons to the List component, these buttons have their own properties. All List button properties are the same as those for Ink Button Set buttons.

Configure List items

Configure the item's properties (including formatting a Template or selecting the image source for Avatars, Icons, and Images) by clicking the Item's name to open the Field properties pane.

Configure the layout of individual item columns in the List by clicking the item's column header to open the Column properties pane.

Component actions

Component actions are available using Run component action.

Properties

Component properties

When you add a List to the page, there are several properties you can modify:

Nested elements

When you add items to a List, there are several properties you can modify: