Step‑by‑Step Guide to Building a Custom Dropdown Component

Step 1: Build the dropdown container

Create a rectangle, name it "Please select". Set the border color to #DCDEE2, corner radius to 4, and left padding to 6. Define two hover/selected states where the border color changes to #57A3F3. Set the displayed text to "Please select" with text color #C5C8CE.

Add a down‑arrow icon (size 8 × 5) next to the rectangle.

Group the rectangle and the icon and rename the group to "Dropdown Combo".

Step 2: Create the option list

Create a rectangle to serve as the options container. Set its border color to #E8EAEC and corner radius to 2.

Inside the container, add a border‑less rectangle for a single option. Configure its hover fill to #F3F3F3. Attach a click interaction that:

Marks the option as selected.

Updates the text of the Dropdown Combo rectangle to the option’s rich‑text value using the placeholder [[This.Text]].

Duplicate this option rectangle for each choice, then convert the set of option rectangles into a selection group. Finally, combine the option group with the container rectangle. Add a hide action to the container so that clicking any option collapses the entire option panel.

Step 3: Interaction logic (show/hide and visual feedback)

Set the Dropdown Combo group to be hidden by default.

When the user clicks the Dropdown Combo, show the options container.

Attach a "OnShow" event to the options container that:

Changes the border color of the Dropdown Combo to #57A3F3 (blue).

Rotates the arrow icon (e.g., 180°) to indicate an expanded state.

Add a mouse‑out event on the options container: if the container is visible and no option has been selected, moving the cursor outside the dropdown area automatically hides the container.

After the component is complete, select all its elements (Ctrl + A) and convert the whole group into a **dynamic panel**. This encapsulates the dropdown into a single reusable widget, simplifying placement on other pages.