Create a List View Nexus Component Styling

Create a List View Classic Styling

A List view is referenced by the board so that it can load the data. DesignStudio provides tools to add components to enhance this view.

When you are working in the Nexus Component Styling version of this view, the View Header Component that inserts a section header organizing and visually separating content areas. replaces the App Bar at the top of the canvas.

You can also create a List view by copying a view.

After you create a List view, update it using the following components:

• List View Settings: Enable export options, comments and share buttons Component that displays a button giving users access to Share Links for generating direct URLs., and add associated views.

• Map Configuration: Configure the map settings for the List view.

• Status Indicators: Define how icons and colors display for fields on boards to indicate a record’s status.

• Table Fields: Update field configurations for List views.

To create a List view

1. In the Board Gallery, locate the board for which you want to create a List view, and then click Design.

2. On the upper right, click Create > List View. The List View Configuration page opens.

3. Enter the following information, and then click Next.

   List View configuration fields

   Field	Description	Procedure
   Use Nexus Component Styling	Indicates which type of components will be used on this view.	To use the Nexus Component Styling for components, select the Use Nexus Component Styling checkbox. To use components from DesignStudio 2.5 and earlier, also called Classic Styling, leave the checkbox unselected.
   Add to View Tab Group	Adds a tab to the top of the board that lets you switch between board views.	To add a tab, select the checkbox. See Add Tabs to Switch Between Views.
   List View Name	The name for the List view.	Enter a name.
   Associated Input View	The Input view that is associated with this List view.	Select from the list of available Input views.
   Associated Details View	The Details view that is associated with this List view.	Select from the list of available Details views.
   Associated Delete View	The Delete view that is associated with this List view.	Select from the list of available Delete views.
   Associated History View	The History view associated with this List view. See Create a History View Nexus Component Styling for details. This drop-down only displays if you are using Nexus Component Styling.	Select a History view.
   Slide Out Width	Sets the width of the slide-out panel that opens in WebEOC when users access Input, Details, and History views from the List view.	Select an option: Partial Fullscreen
   Row Count	The number of records that appear on each page.	Enter a number or use the arrows to select a number. Use 0 to display all of the records.
   Order By	The column/field that will be used to sort the records.	Select a placeholder from the list.
   Direction	How the records will be sorted.	Select either Ascending or Descending.

4. Click Next. The Card Table Configuration page opens. Configure these settings:

   1. Select the Has standard Last Updated column checkbox to insert the Last Updated system field automatically for each row.

   2. Select the Has Card Table Status Indicator checkbox to enable a color and icon indicator on each row on the List view based on a status field value.
      

      This status indicator Visual element using color and icon to display a record's status on a list view based on its value. displays at the row level.
      
      You can also configure field-level status indicators. See Status Indicators Component Nexus Component Styling for details.
      If you select this checkbox, continue this configuration by:

      1. In the Status Field Name for row status indicator drop-down, select the field on the board that contains the value for the status.

      2. In the WebEOC List Name for status indicator color field, either:

         1. Select the name of the WebEOC list that stores the color for these status indicators, and that has been imported into this board.

            The Icons for row Status Indicator section updates with the options in this WebEOC list.

         2. Click the + sign to import any list available from the WebEOC instance associated with your publish profile Configuration that deploys boards and forms to one or more WebEOC environments in a named sequence of steps. that stores the color for all status indicators.

         iii. In the Label for row status indicator field, enter the tooltip text for the row status indicator's hover tooltip.

         This value is optional. If you do not complete it, the tooltip text displays the internal status name.

      3. In the Icons for row status indicator section, a list of statuses and their assigned icons displays. You can add a new status indicator icon by clicking +Add New and entering the status value. Edit a status name or icon by clicking the pencil icon. then clicking the checkmark.

      4. In the Default Icon Name for Status Indicator field, click the icon to select a different icon or retain the default help icon.

         This icon displays when a record does not have a valid status value. For example, the help icon displays by default if a record contains the value Finished in the Operational Status field when Finished is not a valid status, Completed is. In this case, a help icon displays to indicate this unmapped status value.

         After you save this list, you can update this configuration using the Status Indicators component.

5. Click Next.

6. On the Field Configuration page, from the Field List, drag all the components you created in your board that you want to display in your List view into the Selected Fields area.

7. In the Label field, update the field name if needed,

8. Turn the Desktop toggle on or off, depending on whether this field should display in a desktop view.

9. Turn the Map toggle on or off, depending on whether a collapsible embedded map Map component for List views supporting 2D or 3D display that collapses or expands with a configurable default state. should be included for the field.

10. Turn the Badge toggle on or off, depending on whether that field should display a text color that matches the associated WebEOC list for that field.

    This toggle is only available for status indicator fields.

11. Turn the Mobile toggle on or off, depending on whether the field should display in the mobile view.

12. Click Submit.