Actions
Navigate Modal Screen

navigateModalScreen

navigateModalScreen action enables users to open a specific screen or page as a modal overlay, creating a temporary and focused view to capture user input or display additional content without losing context of the main app flow.

Properties

PropertyTypeDescription
namestringEnter the Name or ID of your screen
inputsobjectSpecify the key/value pairs to pass into the next Screen
onModalDismissactionExecute an Action when the modal screen is dismissed

properties-options

PropertyTypeDescription
closeToastsbooleanDetermines whether toasts (temporary messages) should be closed automatically. Default is true.

Note: To close the modal from within the modal screen, just call the navigateBack action

Example

View:
  title: "Action: navigateModalScreen"
  styles:
    scrollableView: true
 
  body:
    Column:
      styles: { gap: 16, padding: 24 }
      children:
        - Markdown:
            text: You can open new screen on above the main screen using action `navigateModalScreen`
        - Button:
            label: Show Modal
            onTap:
              navigateModalScreen:
                name: Actions & events
        - Markdown:
            text: You can navigateModalScreen from code blocks using `ensemble.navigateModalScreen('ScreenName');`.
        - Button:
            label: Show Modal Using Code
            onTap:
              executeCode:
                body: |
                  //@code
 
                  // no inputs
                  ensemble.navigateModalScreen('Actions & events');
                  //with inputs
                  //ensemble.navigateModalScreen({name: 'Actions & events',inputs:{input1: 'abc', input2: 'ced'}} );

You can try complete example here (opens in a new tab)