Build multi-page apps
For large or complex applications, it may be helpful to divide your Uiflow application into multiple subpages with unique URLS. Follow this tutorial to build a simple multi-page app.
This tutorial is divided into three sections:
You can easily add pages from the Pages section to create a multi-page app.
To add a page to your application:
- 1.From the Design or Logic view, navigate to the Explorer panel.
- 2.From the Pages section, click the page icon to add a new page. A new page appears under your current page(s).
- 3.In the Properties panel, configure your page as needed.
You may need to delete a page from your multi-page app.
To delete a page in your Uiflow application:
- 1.From the Design or Logic view, navigate to the Explorer panel.
- 2.From the Pages section, right-click the page you want to delete.
- 3.Click Delete or press the delete key.
- 4.Click Confirm to delete the page.
Now that you know how to add and delete pages, it's important to learn how to create links so your app users can navigate between pages.
This section uses the Job Board template app in Uiflow as an example. It changes the link for the Log in button from navigating to the Home page to navigating to the User Page.
To add a link to a page:
- 1.From the Design view, select the page you want to link to in the Pages section.
- 2.Copy the page URL from the Properties panel.
- 3.Select the page where you want to add the link.
- 4.Click the location you want to place the link. In the example below, the location is the Button component.
- 5.Switch to the Logic view and double-click on the Main Body Content Logic Group.
- 6.Double-click on the Login Container Logic Group.
- 7.Double-click on the Button Container Logic Group
- 8.Click the Go To Page component. This component enables you to navigate users to other pages in your app. To add this component to your application, search for
go toin the Logic Libraries panel and drag the Go to Page component onto your app.
- 9.Click the Actions icon on the quick selection menu of the Go to Page component.
- 10.Paste the slug into the page field under Call. This specifies where the link directs the user.
- 11.Connect the onClick node to the call node of the Go To Page component.
- 12.(Optional) To test the link, click the link in the Preview panel. This should navigate you to the page you specified in the Call page field.
Congratulations! Now you know how to build a simple multi-page app.