This tutorial teaches you how to create and manage pages in your mobile application, and how to set up navigation between them for a seamless user experience.

What You'll Learn

By the end of this tutorial, you'll know how to:

Create and organize multiple pages
Set up different navigation patterns
Use navigation actions and gestures
Build a complete navigation flow

Prerequisites

Before starting:

Complete the "Creating Your First Mobile App" tutorial
Have a mobile app project with at least one page
Understand basic card and element concepts

Step 1: Understanding Mobile Pages

1.1 What is a Page?

A page in mobile apps is a full-screen view that contains cards and elements:

┌─────────────────────────────────────────────────────────────┐
│                       MOBILE PAGE                            │
├─────────────────────────────────────────────────────────────┤
│                                                              │
│   ┌─────────────────────────────────────────────────────┐  │
│   │                    Status Bar                        │  │
│   ├─────────────────────────────────────────────────────┤  │
│   │                    Header/Nav                        │  │
│   ├─────────────────────────────────────────────────────┤  │
│   │                                                      │  │
│   │                                                      │  │
│   │                   Content Area                       │  │
│   │                     (Cards)                          │  │
│   │                                                      │  │
│   │                                                      │  │
│   ├─────────────────────────────────────────────────────┤  │
│   │                   Tab Bar (optional)                 │  │
│   └─────────────────────────────────────────────────────┘  │
│                                                              │
└─────────────────────────────────────────────────────────────┘

1.2 Page Types

Type	Description	Use Case
Content Page	Standard scrollable page	Main content, forms
Modal Page	Overlay that slides up	Quick actions, confirmations
Tab Page	Page within a tab bar	Main navigation sections

Step 2: Creating Pages

2.1 Add a New Page

In the left panel, find the Pages section
Click "+ Add Page"
Enter a page name
Select page type (if options available)
Click Create

2.2 Organize Your Pages

Create a logical page structure:

App Pages
├── Home (default/start page)
├── Dashboard
├── Profile
├── Settings
└── About

2.3 Set the Start Page

Find your Home page
Right-click or use the menu
Select "Set as Start Page"
This page loads first when the app opens

The most common navigation pattern:

Add a Button to your page
Select the button
Open Events/Actions
Configure:
- Event: On Tap
- Action: Navigate to Page
- Target: Select destination page

Use card links for navigation items:

Add a Card Link element
Configure the link target
The entire area becomes tappable

Navigate forward and back:

Home → Details → Edit
  ↑       ↑       │
  └───────┴───────┘
      (Back)

Configuration:

Forward: Navigate to Page action
Back: Navigate Back action (or system back)

Switch between main sections:

┌────────────────────────────────────────┐
│              Content Area               │
├──────────┬──────────┬──────────────────┤
│   Home   │  Search  │    Profile       │
│    ●     │    ○     │      ○           │
└──────────┴──────────┴──────────────────┘

Setup:

Create a tab bar element
Add tab items for each section
Configure each tab's target page

Side menu that slides in:

┌─────┬─────────────────────┐
│     │                     │
│Menu │    Content Area     │
│     │                     │
│Home │                     │
│     │                     │
│Sett-│                     │
│ings │                     │
└─────┴─────────────────────┘

Setup:

Add a drawer/menu element
Configure menu items
Each item navigates to a page

5.1 Navigate to Page

Go to a specific page:

Action: Navigate to Page
Target: Profile Page
Transition: Slide Left (default)

5.2 Navigate Back

Return to the previous page:

Action: Navigate Back
(Returns to wherever user came from)

5.3 Navigate to Home

Jump to the start page:

Action: Navigate to Home
(Clears navigation stack, goes to start page)

5.4 Replace Page

Navigate without adding to history:

Action: Replace Page
Target: Dashboard
(User can't go "back" to replaced page)

Step 6: Passing Data Between Pages

6.1 Using Variables

Set a variable before navigating:

Action 1: Set Variable
  Variable: selectedItemId
  Value: [item.id]

Action 2: Navigate to Page
  Target: Details Page

6.2 Reading Data on Target Page

On the destination page:

Element binding: {selectedItemId}
(Element displays the passed value)

7.1 Navigate Based on Conditions

IF user.isLoggedIn == true
  THEN Navigate to Dashboard
  ELSE Navigate to Login

IF user.role == "admin"
  THEN Navigate to Admin Panel
ELSE IF user.role == "user"
  THEN Navigate to User Dashboard
ELSE
  Navigate to Guest View

8.1 Configure Header

Set up the page header:

Element	Purpose
Back Button	Return to previous page
Title	Current page name
Action Button	Page-specific action

8.2 Custom Header Actions

Add buttons to the header:

Select the page
Open header settings
Add action buttons (save, edit, share)
Configure their actions

9.1 Example: E-commerce Flow

Home Page
├── [Browse Products] → Product List
│                        ├── [Product Tap] → Product Details
│                        │                   ├── [Add to Cart] → Cart
│                        │                   └── [Back] → Product List
│                        └── [Back] → Home
├── [View Cart] → Cart Page
│                 ├── [Checkout] → Checkout
│                 └── [Back] → Home
└── [Profile] → Profile Page

9.2 Implement the Flow

Create all pages
Add navigation buttons/links
Configure each action
Test the complete flow

10.1 Test Each Path

Walk through every navigation path:

[ ] Home to each destination
[ ] Back navigation works
[ ] Tab switches work
[ ] Deep navigation chains work

10.2 Test Edge Cases

What if user rapidly taps?
Does back button work correctly?
Are there any dead ends?

Best Practices

Keep navigation simple - Users should always know where they are
Consistent back behavior - Back should always go to previous page
Clear visual indicators - Show which tab/section is active
Limit navigation depth - Try to stay within 3-4 levels deep
Provide escape routes - Users should easily get back to home
Test on device - Navigation feels different on actual phones

Common Patterns

Master-Detail

List Page (Master) ──tap item──→ Detail Page
                    ←──back────

Wizard/Step Flow

Step 1 ──next──→ Step 2 ──next──→ Step 3 ──submit──→ Confirmation
   ←──back──        ←──back──

Authentication Flow

App Start
    │
    ├── If logged in → Dashboard
    │
    └── If not logged in → Login
                            ├── [Login Success] → Dashboard
                            └── [Sign Up] → Registration → Dashboard

Troubleshooting

Verify the action is configured correctly
Check target page exists
Test in preview mode

Back Button Issues

Ensure navigation stack isn't cleared
Check for "replace" actions that remove history

Pages Loading Slowly

Optimize page content
Reduce number of elements
Check for large images

Check if you're using "replace" vs "navigate"
Verify variables persist correctly

Questions?

If you have any questions, please don't hesitate to contact us. Alternatively, you can submit an issue on this platform.

Useful Links:

Creating Your First Mobile App - https://help.acenji.com/#/./create-native-mobile-app/tutorials/creating-your-first-mobile-app/index Cards - https://help.acenji.com/#/./create-native-mobile-app/tutorials/cards/index Card Link Element - https://help.acenji.com/#/./create-native-mobile-app/tutorials/cards/elements/card-link/index

Floating Design Panel

Element Section

Events Tab

Tile Section

Tile Templates

Tile Instances

Page Section

Settings

Group Session

User Data

Add a Gate

Tutorial: Pages and Navigation ​

What You'll Learn ​

Prerequisites ​

Step 1: Understanding Mobile Pages ​

1.1 What is a Page? ​

1.2 Page Types ​

Step 2: Creating Pages ​

2.1 Add a New Page ​

2.2 Organize Your Pages ​

2.3 Set the Start Page ​

Step 3: Basic Navigation ​

3.1 Button Navigation ​

3.2 Card Link Navigation ​

Step 4: Navigation Patterns ​

4.1 Stack Navigation (Push/Pop) ​

4.2 Tab Navigation ​

4.3 Drawer Navigation ​

Step 5: Navigation Actions ​

5.1 Navigate to Page ​

5.2 Navigate Back ​

5.3 Navigate to Home ​

5.4 Replace Page ​

Step 6: Passing Data Between Pages ​

6.1 Using Variables ​

6.2 Reading Data on Target Page ​

Step 7: Conditional Navigation ​

7.1 Navigate Based on Conditions ​

7.2 Role-Based Navigation ​

Step 8: Navigation Header ​

8.1 Configure Header ​

8.2 Custom Header Actions ​

Step 9: Building a Navigation Flow ​

9.1 Example: E-commerce Flow ​

9.2 Implement the Flow ​

Step 10: Testing Navigation ​

10.1 Test Each Path ​

10.2 Test Edge Cases ​

Best Practices ​

Common Patterns ​

Master-Detail ​

Wizard/Step Flow ​

Authentication Flow ​

Troubleshooting ​

Navigation Not Working ​

Back Button Issues ​

Pages Loading Slowly ​

Lost Navigation State ​

Questions? ​

Useful Links: ​

Was this article helpful? ​

Tutorial: Pages and Navigation

What You'll Learn

Prerequisites

Step 1: Understanding Mobile Pages

1.1 What is a Page?

1.2 Page Types

Step 2: Creating Pages

2.1 Add a New Page

2.2 Organize Your Pages

2.3 Set the Start Page

Step 3: Basic Navigation

3.1 Button Navigation

3.2 Card Link Navigation

Step 4: Navigation Patterns

4.1 Stack Navigation (Push/Pop)

4.2 Tab Navigation

4.3 Drawer Navigation

Step 5: Navigation Actions