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

Pop-up menu

The Pop-up widget consists of two elements: a modal window that displays data and a button. The window opens when a user clicks the button. The content of the window is easily modified with additional widgets.

 

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

popup-1

  • Show content in designer. Enable this option to see the list of items on the creation form.
  • Position*. Specify the popup position relative to the button.
  • Window size*. Specify the popup menu size.

 

System Tab

 

System settings are the same for all the widgets. They are used to configure widget visibility and access to its data, define what happens, when the user hovers the mouse over the widget, etc.

Find out more in the System widget settings article.

To finish the configuration, click Save.

 

Popup Content

 

When the widget configuration is completed, you need to add a widget that will be displayed in the popup window. To do this, click +Add widget. The window with the following settings will appear:

 

popup-3

 

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 Pop-up widget is added to the Clients app form. The widget’s button name is changed to Order History. The modal window contains the Associated items widget linked to the Orders app.

 

When a user clicks the Order History button, the pop-up menu displays all the orders for this client. From this list, you can open the page of any of the client’s orders.

 

popup-4