(function openLouie() { let louie = document.getElementById("Dropdown-Toggle-14"); louie.classList = "host-toggle w-dropdown-toggle w--open"; console.log(louie); })();

Actions are activities where we describe what the app should do. Navigation actions are the most commonly used action types.

You can switch between screens in your app with navigation actions and make screen function as popup or drawer.

With the properties panel, actions can be added to the screen and its elements. Select the item you want to add an action to. The action list opens with the Add Action button. You can search directly or navigate through the list.

The navigate action under Navigation contains multiple methods.

The screen that will open;

  • In the new browser tab,
  • In the new browser window,
  • In an open tab
  • As a Drawer (from the left, right, top or bottom edge)
  • Or you can set it to open in the middle of the screen as a pop-up.


Opens the screen determined by To Screen/URL in the browser tab where it is located. Mostly, this method is used to navigate between screens.

After the open screen is closed, the execution of the actions of the page that will be opened is open. Actions that you have added as Screen Input, including the listing or form screens of the next screen, start working in this way. In rare cases, you can turn it off.

Considering that the open screen is a form screen, some elements/fields may have validation requirements. You can disable these verification triggers.


Unlike the Current Page option, it opens the screen to be opened in a new tab in the browser. This can be used in operations such as additional information, PDF export, where it is not desired to exit the screen that is open at the first stage.

Other options are the same as Current Page.


Unlike the Current Page option, the targeted screen opens in a new browser window. You can use it on screens such as PDF report display, summary display on form screens.


It is the opening method that allows the screen to be opened by sliding inward from any edge, left, right, top or bottom.

You can choose the opening direction with the placement. As for the frequently used methods;

  • Web/Mobile left menu (Left edge)
  • Web summary area (bottom edge)
  • Web/Mobile form screen (Right edge)
  • Mobile menu list (bottom edge)
  • Display of short details such as mobile notification (bottom edge) can be used in areas.

You can adjust the width and height of the drawer to open. In the measurements here;

  • Vh : viewport height
  • Vw : viewport width
  • Px : you can use full width/height in pixels.

Again, it can be ensured that the actions defined on the new screen to be opened are executed on the screen opened with the drawer, or that validation triggers are made or not.

The screens that are opened as Drawers are opened on the screen that is open in the first stage.


It is the method of opening the screen by centering the screen horizontally / vertically. They are opened on the screen with the first stage open, as in the Drawer.

In the modal, as in the Drawer, measurement units in vh, vw and px and width/height values ​​can be given.

Close icon can be automatically added to the upper right corner of the pop-up opened with Closable.

It can be ensured that the actions defined on the new screen to be opened are executed on the screen opened with the drawer, or that validation triggers are made or not.

After making the navigation action settings, add it to the selected element with the Create button.

Navigate context menu


You can copy/paste the action attached to an element (if it has the same type of data/category properties) to a different element.


If the result of the action is successful, you can show a notification in the lower right corner of the screen. You can use this feature in cases where both the working status of the actions and the application user need to be informed (product information has been successfully saved).


You can add different types of conditions so that the action can be performed. In particular, conditions can be added, such as running as soon as a form field is filled or when the logged-in application user is authenticated.


It is ensured that the selected action is removed from the relevant screen/element. It can be undo with the undo button or macOS: CMD + Z / Win: Ctrl + Z shortcuts.

Simplicity Meets High Performance

Free edition subscription
Keep your work
No credit card required to try