Cards - Creating a Selection List with the List Component

[Monique Tickle]

The list component can be used in cards to create a different style of selection that lists out each of the specified elements.
Follow the below steps to create a selectable listing.

1. Drag a list component into the card editor.
2. Open the “Instructions” property.
   1. Click the plus button to add a dimension. This dimension will be the dimension that contains the elements that are desired to be selected from.
   2. Click on the pencil icon to open the set editor. Add the desired elements accordingly and save changes.
3. Either place a container or a button within the list. For this example we will use buttons.
   • These components serve the same function effectively by making use of the “Set Context” or “Set Variables” properties, but the difference between them is the styling options. A container provides more styling options as the text component needs to be dragged in and is separate. A button is the simpler option.
4. Open the “Text” property of the button through the calculator icon.
5. Set the button text to the ELEMENT of the dimension selected in the List set editor. (e.x. ELEMENT(”Department”).
6. Open the “Set Context” property of the button through the calculator icon.
7. Set the dimension selected in the List set editor to the ELEMENT context. Follow the below structure:
   • “[Dimension Name]=”&ELEMENT(”Dimension Name”)
8. See working example below:
   • “Department=”&ELEMENT(”Department”)

At this point you have a functional list where clicking each button will set the context to the element that was clicked on. It is recommended to utilize other component properties to style the list as desired.

Top tips for Styling

• Use the “Set Variables” component to have a variable which tracks which element is selected. This can be used in a conditional colour formula on the button background colour or text colour property so the button can display the selected element in a different formula.
  • Example variable formula:
    • "active="&ELEMENT("Department")
  • Example colour formula:
    • IF( ELEMENT("Department") = VARIABLE("active") , "#000" , "#f0f0f0" )
• Wrap the list in a container, set the height property to a static pixel value and the overflow-y property to scroll on the container. This makes your list scrollable if the number of elements is lengthy.
• Try different options on the List “List Type” property to rearrange the elements