search string side menu

Low-code designer > Set up interfaces > Widget types > Element layout / Modal window

Modal window

Modal window is a widget that opens a window for working with app items in ELMA365. There are two types of modal windows:

  • Default modal window. It is added to all the app forms by default and displays app item pages, for example, the creation page;
  • Child modal window. It is added to forms manually and is triggered by a certain action or condition.

Let's take a closer look at both of them.
 

Default modal window

The default modal window is built into all the app forms and cannot be deleted. It opens the forms for creating, editing, or viewing an app item.

In its settings you can change how the Sidebar is displayed. To do that, click on any free space on the modeling canvas. The Modal window label appears in the top-right corner. Click on the gear icon to open the settings.

main_modal

 

Main tab

main_modal_settings

Use the Show sidebar option to show or hide the side panel on the form. Alternatively, you can bind this field to a context variable so that the sidebar is shown only with a specific variable value. To do that, click right_panel_3 and select the variable from the context. To learn more, see System widget settings.

 

Events and System tabs

The settings on these tabs are similar for all the widgets. They allow setting up the widget's visibility, behavior on hover, etc. To learn more, see System widget settings.

To complete settings up the widget, click Save.

To make the changes available to users, click Save and Publish in the designer's toolbar.

Child modal window

This widget opens a second modal window over the default one when a certain action takes place, for example, the user clicks a button.

To place the widget on the form, drag it from the right pane of the interface designer to the modeling canvas, or click +Widget. You can learn more in Form template. Then manage the settings in the provided window.

modal_child_settings

  • Header. Enter the header that will be displayed in the window. You can bind this field with a String variable created on the Context tab in the interface designer. To do that, first click right_panel_3 , then click <Not defined> and select the variable from the list. Its value will be displayed in the modal header;
  • Show sidebar. Enable this option to show the right-side panel on the form. Click right_panel_3 to bind the field with a Yes/No switch variable and show or hide the side panel according to the variable's value;
  • Size*. Select the size of the modal window;
  • Show window. Check this option if you want the modal window to be shown on the form by default. Click right_panel_3 to bind the field with a Yes/No switch variable and show or hide modal window according to the variable's value.

 

Events and System tabs

The settings on these tabs are similar for all widgets. They are used to show or hide the widgets on forms, manage access, etc. To learn more, see System widget settings.

To finish the set up, click Save. To make the changes available to users, click Save and Publish in the top toolbar of the interface designer.

Example

In the example below, the Modal window widget is used to quickly open the file upload form. When a user hovers over the corresponding field, a pop-up for file upload appears.

ModW 2

form_menu_card.html navigator.html

Found a typo? Highlight the text, press ctrl + enter and notify us