List¶

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 Skuid page is displayed via a Page Include (in another section of the grid).

Add a List component to the page, then:

• Ensure that the List is accessing the correct model and name the List (if desired). (Basic tab)
• Determine what items display on the list by clicking Add fields on the component.
• Choose whether to include a search box. (Search 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 include:

• Header
  • the List’s title
  • a search box
• Footer
  • an indicator of which set of rows are showing

The component’s header and footer can be hidden using properties in the Basic tab.

Add items to a list¶

The power of the List component is in the items you choose to place on that List. Skuid gives you a lot of options from the Add fields drop down menu on the List component.

Add (or more) of the following List items to customize the List display.

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

Note

HTML formatting is not supported.

• 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 App Composer. 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.

Properties¶