Adding Navigate Action to the Project

1. Login to Kuika platform and select the project you will work on from the Apps screen.
2. Open the Properties panel by selecting the relevant element in theUI Design module.
3. Click on the+ ADD ACTION drop-down menu.

4. Select a suitable trigger action (event) such as Initial Actions, OnClick, OnBlur → Navigation → Navigate.

Configuring the Navigate Action

In the drop-down menu, you can configure the following fields:

• To Screen
  
  • Tip: String
  • Necessity Yes
  • Description: The name of the target screen to which the user will be directed.
  • Input: Enter the screen name text, for example, “OrderDetailsScreen”. This field can be primarily used to import data from data sources such as Action Result. Other sources such as Method Input, Current, Screen Input, Fixed or Component can also be used. These categories can be defined by selecting them via Symbol Picker .

• Open As
  
  • Type: Enum
  • Necessity Yes
  • Description: Specifies how to open the screen (only one option must be selected).
  • Input: For example,
    
    • “Current Page”
    • “New Tab”
    • “Drawer”
    • “Modal”
    • Data can be imported into this field primarily from data sources such as Action Result. Different sources such as Method Input, Current, Screen Input, Fixed or Component can also be used. These categories can be defined by selecting them via Symbol Picker.

• Current Page
  
  • Tip: Boolean
  • Necessity Yes
  • Description: Should the selected screen open on top of the current page?
  • Input: For example, true or false.This field can be primarily used to pass data from data sources such as Action Result. Other sources such as Method Input, Current, Screen Input, Fixed or Component can also be used. These categories can be defined by selecting them via Symbol Picker.

• New Tab
  
  • Tip: Boolean
  • Necessity Yes
  • Description: Should the redirect open in a new tab?
  • Input: For example, true or false. Data can be imported into this field primarily from data sources such as Action Result. Other sources such as Method Input, Current, Screen Input, Fixed or Component can also be used. These categories can be defined by selecting them via Symbol Picker.

• Drawer
  
  • Tip: Boolean
  • Necessity Yes
  • Description: Should the screen open as a side panel (drawer)?
  • Input: For example, true or false. This field can primarily receive data from data sources such as Action Result. Other sources such as Method Input, Current, Screen Input, Fixed or Component can also be used. These categories can be defined by selecting them via Symbol Picker.

• Modal
  
  • Tip: Boolean
  • Necessity Yes
  • Description: Should the screen open as a modal (popup)?
  • Input: For example, true or false. Data can be passed to this field primarily from data sources such as Action Result. Other sources such as Method Input, Current, Screen Input, Fixed or Component can also be used. These categories can be defined by selecting them via Symbol Picker.
• FloatPanel
  
  • Type: Boolean
  • Mandatory: Yes
  • Description: Should the screen be opened as a float panel (a panel that floats on the page)?
  • Input: For example, true or false. Data can be transferred to this field primarily from data sources such as Action Result. In addition, different sources such as Method Input, Current, Screen Input, Fixed or Component can be used. These categories can be defined by selecting them from the Symbol Picker.
• Placement
  
  • Tip: String
  • Requirement: Optional
  • Description: Drawer's location.
  • Input: For example,
    
    • “Top”
    • “Right.”
    • “Bottom.”
    • “Left”
    • Data can be imported into this field primarily from data sources such as Action Result. Different sources such as Method Input, Current, Screen Input, Fixed or Component can also be used. These categories can be defined by selecting them via Symbol Picker.

• Width
  
  • Tip: String
  • Requirement: Optional
  • Description: Drawer or modal width.
  • Input: For example, values such as “400px”, “80%”, “60vw”, etc. This field is primarily used to import data from data sources such as Action Result. Other sources such as Method Input, Current, Screen Input, Fixed or Component can also be used. These categories can be defined by selecting them via Symbol Picker.

• Height
  
  • Tip: String
  • Requirement: Optional
  • Description: Drawer or modal height.
  • Input: For example, values such as “300px”, “90%”, “70vh” can be entered. This field is primarily used to import data from data sources such as Action Result. Other sources such as Method Input, Current, Screen Input, Fixed or Component can also be used. These categories can be defined by selecting them via Symbol Picker.

• Closable
  
  • Tip: Boolean
  • Requirement: Optional
  • Description: Indicates whether the modal window can be closed by the user.
  • Input: For example, true or false. This field can be primarily used to import data from data sources such as Action Result. Other sources such as Method Input, Current, Screen Input, Fixed or Component can also be used. These categories can be defined by selecting them via Symbol Picker.

• Execute Page Init Actions After Closed (Boolean): Determines whether the initialisation actions of the redirected page are executed when the page opened with Navigate is closed.
  
  • true: Initialisation actions are executed after the page is closed.
  • false: No initialisation actions are executed after the page is closed.
  • If this parameter is false, the ‘Disable Smart Execute Page Init’ setting has no effect.
• Disable Smart Execute Page Init (Boolean): Applies when Execute Page Init Actions After Closed = true. Only available in web applications.
  
  • false: The init action does not run when returning to the page unless a backend request was made on the redirected page.
  • true: The init action runs in all cases when returning to the page, regardless of whether a backend request was made on the redirected page.
  • This setting is only meaningful when Execute Page Init Actions After Closed = true.

All parameters can be taken from Action Result, Method Input, Current, Screen Input, Fixed or Component sources. These sources can be accessed and linked via Symbol Picker.

Scenario: The user places an order for a product. When the transaction is complete, a modal screen with a thank you message opens.

Configuration Steps:

1. Add a Button element in the UI Design module → Label it ‘Buy’.
2. +ADD ACTION → OnClick → Select Navigate.
3. To Screen: ThankYouPage
4. Open As: Modal
5. Width / Height: “500px” / ‘300px’
6. Closable: true
7. Execute Page Init Actions After Closed: false

The user remains in the current list when the modal screen closes. If additional redirection is desired, a second Navigate action can be defined.

Navigate Action Configuration

Required Parameters

• To Screen (String): The name of the target screen to redirect to. Example: ‘ThankYouPage’
• Open As: Specifies how the screen should be opened. One of the following options must be selected:
  
  • Current Page: The target screen is loaded in place of the page currently open in the browser window or within the application. In other words, the page changes completely.
  • New Tab: The target screen opens in a new browser tab. The user can view the new page in a separate tab without closing the current page.
  • Drawer: The target screen opens as a panel that slides in from the side of the screen within the application. It is typically used for side menus or additional options.
  • Modal: The target screen is displayed as a pop-up window that slides over the current screen and captures focus. The user cannot interact with the main screen until the modal is closed.
  • Float Panel: The target screen opens as a small window that can move freely on the page and is usually movable by the user. Similar to Modal, but provides a more flexible appearance.
    
    • HideCloseButton: When this feature is enabled, the close (X) button on the Float Panel is hidden. This allows the panel's closing behavior to be entirely determined by actions specified by the developer (e.g., clicking a button or an external area).

Optional Parameters

• Placement (String): Specifies the direction from which the drawer screen will open. Example: ‘Right’
• Width (String): The width of the drawer or modal window. Example: “400px” or ‘80%’
• Height (String): The height of the drawer or modal window. Example: ‘300px’ or ‘90%’
• Closable (Boolean): Determines whether the modal window can be closed by the user. Example: true
• Execute Page Init Actions After Closed (Boolean): Determines whether the initialisation actions of the redirected page are executed when the page opened with Navigate is closed.
  
  • true: Initialisation actions are executed after the page is closed.
  • false: No initialisation actions are executed after the page is closed.
  • If this parameter is false, the ‘Disable Smart Execute Page Init’ setting has no effect.
• Disable Smart Execute Page Init (Boolean): Applies when Execute Page Init Actions After Closed = true.
  
  • false: The init action does not run when returning to the page unless a backend request was made on the redirected page.
  • true: The init action runs in all cases when returning to the page, regardless of whether a backend request was made on the redirected page.
  • This setting is only meaningful when Execute Page Init Actions After Closed = true.

All parameters can be taken from Action Result, Method Input, Current, Screen Input, Fixed or Component sources. These sources can be accessed and linked via Symbol Picker.

• Dynamic Redirection: Redirection to different pages can be made according to the user's role, status or data entered in the form.
• Data Transfer: Data can be moved from one screen to another using Screen Input with the Navigate action.
• Page Launch Actions: Certain actions (e.g. data query) can be started automatically when a new page is loaded.
• Drawer & Modal Controls: Size, position and behavior can be customized on pages that will be opened as drawer or modal.

Technical Risks and Precautions

• Invalid Screen Name: Error occurs if the screen to be forwarded to has been deleted or is undefined. Make sure the screen name is valid.
• Unauthorized Access: The redirected screen may be unauthorized by the user. Access should be managed with authorization controls.
• Data Losses: Necessary input bindings should be done correctly to avoid data loss when switching between screens.

The Navigate action allows users to have an intuitive and guided experience within the application. While facilitating the transition between different screens, it also plays a critical role in data transfer and creating user-specific workflows. Modal is a powerful tool that enhances the user experience in Kuika projects with flexible navigation options such as Drawer, new tab or on the same page.