Kullanıcı Kılavuzu

Navigate

Navigate

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

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

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

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

Other Related Content

No items found.

Glossary

No items found.

Alt Başlıklar