Navigate

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.

• 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
  
  • Tip: Boolean
  • Requirement: Optional
  • Description: This option determines whether the page that will be opened after the current page is closed will trigger the actions that should run automatically at the start of that page.
  • 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.

The user fills out a product purchase form and is redirected to the “Thank you” page when they complete the purchase.

1. 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.

2. 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.

‍

• 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.