Dropdown

An interactive list that triggers an action based on a selected room, user, or custom option.

A dropdown element lets users pick a room, user, or custom option and execute an ACTION based on the picked item. This can be really useful for choosing a room to navigate into or setting up the target of your action button.

In this example, we'll show you how to set up a simple navigation dropdown that allows a user to preview a room before navigating to it. To get started, add two new TEXT elements (with the text shown in the screenshot: "Choose your room" and "Click on the room to go there"), a Dropdown element, and a ROOM PREVIEW element to your room:

14481448

Now edit the Action property of the Dropdown:

814814

This action will be run whenever the user modifies the dropdown selection. In this case, let's have the action switch the room that is being previewed. To do that, first pick the ROOM PREVIEW as your target element and set the Room to Preview property:

15321532

Then click on the property value icon to switch it "element reference" mode:

4444

Then pick your Dropdown element and pick the Selected Value property:

10761076

You final action should look like this:

26262626

Hit Done and that's it. Now, when a user changes the selection, the ROOM PREVIEW will update and they can click on the preview to navigate to the room.

Custom Options

Sometimes, it can be useful to create custom options for your dropdown. For example, you might want to have some choices that sets the text on another element in the room.

To add custom options, change the Option Type property under the Element category to Custom:

576576

Then find the Custom Options property, also under the Element category:

612612

Click on the icon and you can start adding your options here. If you want the value of an option to be different than the text displayed in the selection, you can use the pipe character "|" to split the text from the value.

For this example, we can imagine we are creating a phone number directory. Add three options via the dialog:

  • Andrew|111-111-1111
  • Aletta|222-222-2222
  • Walt|333-333-3333
392392

Hit the Save button and now edit the Action to set the Text of another Text Element to the Selected Value of this Dropdown:

25702570

Now when the user picks an option, it'll display the phone number in the other TEXT element.


What’s Next

Curious what else you can do with Dropdown elements? Check out some of our demo workspaces, chat with our creators in the discord, or head over to the community forums to ask!

Did this page help you?