How to Use UI Actions in Noca App Builder
UI Logic
Control what happens on the page based on what your users do
UI logic is how you decide what happens inside your app when a user does something. Hide or show a field based on input, decide where a button takes someone, and control how users move between pages. In this example, we wire the Continue button on a two-page onboarding form to send the user to page 2 in the same tab, and we pass the ID from page 1 along with it.
Watch & Learn
Follow these steps to wire up UI logic:
Steps:
1
Toggle UI logic
- Open your project and go to the Preview tab
- Click UI Logic in the top toolbar
2
Add a flow to a trigger
- Noca lists the triggers on the page, like on-click Continue and on-click Processing
- Click the + sign next to the action you want a flow to trigger
3
Start from the UI node
- Noca opens the flow with a UI node
- That is how Noca knows this is a UI flow and not a backend flow
4
Add a UI action
- Add a node and open the UI Logic tab
- You can show, hide, set value, reset value, enable, disable, make mandatory or optional, send a message, redirect, or map a component
- For this example we pick Redirect
5
Point the redirect at a page in your app
- Choose External to type a URL or pull it from a project parameter, or Application to send the user to a page in your project
- We pick Application, choose our app, then select the second page
6
Set where the redirect opens
- Click Insert node, then set the target
- Choose same tab, new tab, modal, parent frame, top frame, or window
- We keep it in the same tab
7
Pass a parameter to the next page
- Choose a parameter from your project to carry over, like the ID we worked with on page 1
- It comes through already mapped, so you can use it on page 2 of the app
-
8
Go live and save to your app
- Click Go Live, then confirm to publish the flow
- Go back to the App Builder and save so the change commits to the app
9
Test it in the preview
- Open the preview and click Continue
- The app moves to the second page in the same tab, and you can switch the target to a modal or new tab whenever you want
Back to top