How to Redirect to a Modal in Noca Apps
Redirect to a modal in your Noca app
Open a second page as a pop-up, layered over the first
Sometimes you want a second page to open on top of the first one instead of replacing it. A pop-up, layered right over what the user was already looking at. In Noca you get that by adding a redirect and setting it to open as a modal. This guide walks through it on a two-page onboarding app. Page one collects personal details, page two collects company details. When someone clicks Continue on page one, page two opens as a modal over it. Here is how to set it up.
Watch & Learn
Follow these steps to redirect to a modal in your Noca app:
Steps:
1
Set up an app with two pages
- Build an app with at least two pages
- In this example, page one collects personal details and page two collects company details
- The goal is to send the user from the first page to the second, and open the second as a modal
2
Open UI Logic in the canvas
- Open your app in the App Builder
- Click UI Logic in the top toolbar to open the logic panel
3
Add a flow for the Continue click
- Decide what happens when someone clicks Continue on the personal details page
- Click Add new Flow to start a flow on that click
- The flow opens with a UI node ready for the next step
4
Add a redirect node
- Add a new node to the flow and keep it set to Manual
- Type redirect, pick the Redirect node, then insert it
5
Choose an application redirect to the second page
- Under Select a Redirect, choose Application (pick External if you are sending people to another site)
- Choose the app you are building, then select the second page as the target (CompanyDetailsPage in this example)
6
Set the target to a modal
- Open the Target dropdown
- Choose Modal so the page opens layered over the current one instead of replacing it
7
Pass a parameter to the second page
- Click Add Parameter to carry a value from the first page across to the second
- Set the parameter name, then drag the value you want from the URL Parameters or the page inputs (this example passes id)
-
8
Click go live to deploy the flow
- Click go live to push the flow into your project
- The version goes live and your redirect logic is now active
9
Save and keep the changes
- Back in the App Builder, click Save to commit the new flow
- When asked, click Keep to lock in the changes
10
Preview and test the modal
- Open the preview of your site
- Click Continue and the second page opens as a modal, right over the first
-
Back to top