MODLR

Adding Selections ​

Selectable components in cards enable quick changes to context or variables based on the user's selection.

In this guide we will go over the simple steps to adding selectables to a card and utilising their functionality.

There are two primary methods to adding instructions, and two primary interaction utilies that will be covered.

INFO

The instruction method and interaction utilities are not limited to using one of each and can be combined. This means both instruction methods can be used at once, and both interaction utilities can be used at once.*

Selectable Instruction Methods

  • Dimension Element Instructions
  • Custom List Instructions

Selectable Interaction Utilities

  • Update Context
  • Update Variables

Once the list component has been dragged into the card, see below for instructions on how to utilise the list.

Selectable Instruction Methods ​

1. Dimension Element Instructions ​

This section reviews how to add dimension elements in a selectable.

  1. In the card editor, Click on the "Components" button to open the left component sidebar.

  2. Under the "Layout" section, click and drag the "Selectable" component into the card editor panel.

  3. Open the Instructions property under the Interactivity section by clicking on the set editor icon.

  4. Click on the "Add Item" button on the bottom left to add a row for instructions. Click on the blue plus button in the first row to add a dimension. Choose from the dropdown, and click "Select" to confirm the selection.

  5. Click on the pencil icon next to the dimension name to add dimension instructions. The elements selected here will define what is shown in the dropdown.

    TIP

    Choose elements from the left panel of the Popup. They can be added to set instructions by double-clicking on individual elements, or right clicking on an element for a dropdown menu of more methods to quickly add elements.

  6. Once done, save the instructions using the blue "Save" button and save the Instructions property by clicking the blue "Save" button again on the set editor popup.

2. Custom List Instructions ​

  1. Open the Custom List property under the Interactivity section by clicking on the list editor icon.

  2. Click the "Add Item" button. A new row will appear.

  3. Type directly into the new row box the name of the new item, or click on the pi icon to write a formula that determines the item name.

    The "Add Item" button can be used as many times as desired to add new items. To delete items, click on the trash can to the right of the desired row to delete.

  4. Save items by clicking the blue "Save" button.

Selectable Interaction Utilities ​

1. Update Context ​

To make the selectable update context, all that is required to do is the below:

  1. Change the Update Context property under the Interactivity section to "Yes"

  2. Ensure the Dimension property under the Interactivity section is filled out with a dimension that is present in the Context Panel.

  3. Ensure elements of the dropdown (custom list inclusive) are present in the defined Dimension.

If these steps are accurately completed, selecting an item from the dropdown will change the defined dimension element in the Context Panel.

2. Update Variable ​

To make the selectable update context, all that is required to do is the below:

  1. Change the Update Variable property under the Interactivity section to "Yes"

  2. Ensure the Variable property under the Interactivity section is filled out with the name of the variable.

If these steps are accurately completed, selecting an item from the dropdown will change the value of the defined variable.

Making Buttons change Variables ​

Button components can be used to quickly update variables.

This is specifically done through the Set Variables property under the Interactivity section. See below methods for setting variables using this property:

1. Variable Setting - Basic ​

The method for setting a variable within this property simply follows the below formula: [variable name]=[value]

A working example would be as follows: timevar=2022

2. Variable Setting - Multiple Variables ​

To set multiple variables with the same button, follow the above formula and concatenate with "&". The formula would be as below, and as many variables as desired can be concatenated in this way: [variable name]=[value]&[variable name 2]=[value2]

A working example would be as follows: timevar=2022&scenvar=Budget

3. Variable Setting - Dynamic ​

The variable can also be set dynamically through the button rather than strictly through static values. By clicking the pi icon on the property, the property editor opens. ELEMENT() values, VARIABLE() values and more are able to be parsed in through this editor.

The formula changes a bit in the regard that sections must be surrounded by double quotes and concatenated with the & symbol when joining on aforementioned dynamic portions (such as ELEMENT() and VARIABLE()). Setting the context of a single dimension would follow the below structure (using ELEMENT() as an example): "[variable name]="&ELEMENT("Element Name")

A working example would be as follows: "timevar="&ELEMENT("Time")

4. Variable Setting - Dynamic Multiple Variables ​

Multiple variables can be set dynamically using a similar concatenation structure shown in the "Multiple Variables" section, adjusted slightly to fit the formatting required in the property editor shown in the "Dynamic" section.

The concatenation requires the "&" symbol, however this needs to be wrapped in double quotes alongside the ampersands outside of quotes that concatenate your dynamic values into the formula. As many variables as desired can be concatenated onto the formula following this structure (using ELEMENT() as an example):

"[variable name]="&ELEMENT("variable name")&"&[variable name 2]="&ELEMENT("variable name 2")

A working example would be as follows: "timevar="&ELEMENT("Time")&"&scenvar="&ELEMENT("Scenario")

Copyright © 2025 MODLR