Low-Code Designer > Setting up interfaces > Widget types > Element Layout / Drop-down menu

Drop-down menu

The drop-down menu widget is a button on a page or a form that opens a drop-down menu when clicked.  Each menu option is handled by a separate script.

To configure the widget, drag it from the side panel to the creation form or use the +Widget button. After that, the widget settings window will open. It contains the following options:

Main Tab

drop-down-menu-1

  • Show content in designer. Enable this option to display the menu items on the creation form.
  • Position*. Specify the drop-down menu position relative to the button
  • Window size*. Specify the size of the menu.

System Tab

System settings are the same for all the widgets. They are used to configure a widget’s visibility and access to its data, define what happens, when the user moves or hovers the pointer over a widget area, etc. Find out more in the System widget settings article.

To finish the configuration, click Save.

 

Drop-Down Menu Items

 

When the widget configuration is completed, you need to add items that will be displayed in the drop-down menu.  To do this, click +Add item.

drop-down-menu-2

The window with the following settings will appear:

 

  • Name*. Enter the item name.
  • Event on click. Specify the event that happens when the user clicks the menu item, for example, the status of app item changes. To implement this logic, you need to add a corresponding script. Enter the script name and click Open. On the Script tab, type the script code. Find out more in the Scripts article.

You can also rename the button or change its settings. To do this, click the gear icon above the button’s name.

To finish the widget configuration, click Publish.

Use case

In the following example, the Drop-down menu widget is added to the view form of the Orders app. The default button name is changed to Apply Discount. We added a script to each menu item. It recalculates the price of the order when a user selects the required discount and clicks the Apply Discount button. The new price is then displayed in the Discount Price field.

drop-down-menu-3