The Navigate action is used in the Kuika platform to direct users to a specific page, form or module. With this action, fast and user-friendly transitions between different screens within the application can be provided. Usually after user interactions, the user is directed to a specific target screen.
Technical Specifications
Screen Orientation: Allows routing between different pages.
Orientation Types: The screen can be opened on the current page, in a new tab, as a modal window or as a drawer.
Page Launch Actions: Allows automatic execution of actions that should be triggered when the target page is closed.
Web and Mobile Compatibility: Works on both web and mobile platforms.
Navigate Action Application Steps
Adding Navigate Action to the Project
Login to Kuika platform and select the project you will work on from the Apps screen.
Open the Properties panel by selecting the relevant element in theUI Design module.
Click on the+ ADD ACTION drop-down menu.
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.
Usage Scenario: Routing After Purchase
The user fills out a product purchase form and is redirected to the “Thank you” page when they complete the purchase.
Adding an Action to the Purchase Form Button
Enter the UI Design module.
Go to the Elements panel on the left side.
Drag and drop the Button element.
Enter the text "Create Purchase Request ” under the Label heading in the Properties panel.
Then switch to the Screens Panel.
Select the New Screen option from the+ icon.
Name the screen “Thank You Page” from the modal that opens.
Then go back to the home page.
Select the Buy button and add OnClick→ Navigation → Navigate action from the + ADD ACTION menu.
Configuring the Navigate Action
To Screen: Select the Thank You Page screen.
Open As: Set to Modal. The user stays on the same page but sees the completion.
Modal Width/Height: Set 500 px width, 300 px height.
Closable: Turn on the switch (so the user can close the modal if they want).
Execute Page Init Actions After Closed: Close the switch (no extra action will be taken when closed).
This way the user can see the thank you message after making a payment. When the modal is closed the user stays on the product list screen. If the user wants to be redirected to the order detail when the screen is closed, a second Navigate action can be added.
Navigate Action Advanced Customizations
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.
