Chapter 4 - Interactions & navigation

In this chapter, you’ll learn how to create multi-page navigation in your app using interactive components. This includes creating a new page and setting up a button that, when clicked, navigates the user to that new page.

5 min

What You’ll Learn

  • How to create a new page in your project.
  • How to add a button that users can click to trigger navigation.
  • How to use the FlowButton logic to handle actions behind the scenes.
  • How to configure the “Navigate” action component to link to your desired page.

Overview of the Process

  1. Create a New Page
  2. In your project, add a new page where you’d like users to be redirected.
  3. Add a Button to Your Existing Page
  4. Drag and drop a Button component onto your main screen. This will act as the navigation trigger.
  5. Use the FlowButton Tab
  6. When the button is added, a new FlowButton tab will appear (e.g., flowButton1).
  7. Configure Navigation Logic
    • Go to the FlowButton tab.
    • Drag and drop the “Navigate” component from the Actions section.
    • Configure it to point to the new page you created.
  8. Preview Your App
    • Click Preview.
    • Try clicking the button — it should now redirect you to the new page smoothly.