Navigate To

Navigate to pages, URLs, emails, and phone numbers using action buttons

The "Navigate To" action allows users to navigate to different destinations when they click an action button. You can navigate to pages within your app, external URLs, email addresses (mailto), or phone numbers (tel).

Navigation Types

The Navigate To action supports four destination types:

1. Page - Navigate to another page within your Noloco app

2. URL - Navigate to an external website or web application

3. Email - Open the user's email client with a pre-filled recipient (mailto:)

4. Phone - Open the phone dialer with a pre-filled number (tel:)

When to Use Navigate To

Use the Navigate To action when you want to:

• Guide users through workflows: Direct users to the next step in a process

• Create custom navigation: Add context-specific shortcuts to other pages

• Open external resources: Link to documentation, support sites, or partner tools

• Initiate communication: Start emails or phone calls with pre-filled information

• Build multi-step wizards: Chain navigation with other actions for guided experiences

Setting Up a Navigate To Action

Step 1: Create the Action Button

1. In build mode, navigate to the record page where you want the button

2. Click the "+" button in the Action Buttons section

3. Click the edit icon to configure the button

Step 2: Configure Button Appearance

• Button Text: Clear label for the destination (e.g., "View Dashboard", "Contact Support", "Visit Website")

• Appearance: Choose based on importance (Default, Success, Warning, Danger)

• Icon: Add relevant icon (arrow, external link, envelope, phone, etc.)

• Button Tooltip: Explain where the user will go

• Type: Choose "One click" for instant navigation or "Modal" for confirmation

Step 3: Configure the Navigation

What Should Happen: Select Navigate to

Choose your destination type and configure:

Navigation Type 1: Page

Navigate to another page within your Noloco app.

Configuration:

• Destination Type: Page

• Select Page: Choose from your app's pages

• Pass Context: Optionally pass the current record's context

Common Use Cases

Navigate to Related Record

Scenario: View a customer's details from an order page

Button Configuration:

• Button Text: "View Customer"

• Icon: User icon

• Type: One click

Navigation Configuration:

• Type: Page

• Page: Customers (record page)

• UUID: This record → Customer -> UUID

---

Go to Dashboard After Action

Scenario: Return to dashboard after completing a form

Multi-step Action:

1. Update record: Save form data

2. Navigate to: Dashboard page

---

Context-Aware Navigation

Scenario: Navigate to different pages based on record status

Button 1 (shows when Status = "Draft"):

• Button Text: "Continue Editing"

• Navigate to: Edit Form page

Button 2 (shows when Status = "Submitted"):

• Button Text: "View Details"

• Navigate to: Read-only Detail page

Use visibility rules to show the appropriate button.

---

Navigation Type 2: URL

Navigate to an external website or web application.

Configuration:

• Destination Type: URL

• URL: Enter the full URL (including https://)

• Dynamic URLs: Use field values with {{record.field_name}}

Common Use Cases

Static External Link

Scenario: Link to company documentation

Button Configuration:

• Button Text: "View Documentation"

• Icon: External link icon

• Tooltip: "Opens in new tab"

Navigation Configuration:

• Type: URL

• URL: https://docs.company.com/getting-started

---

Dynamic URL with Record Data

Scenario: Open a customer's profile in external CRM

Button Configuration:

• Button Text: "Open in Salesforce"

• Icon: External link icon

Navigation Configuration:

• Type: URL

• URL: https://company.salesforce.com/{{record.salesforce_id}}

---

Open Report with Filters

Scenario: Link to analytics dashboard filtered for specific customer

Navigation Configuration:

• Type: URL

• URL: https://analytics.company.com/reports?customer={{record.customer_id}}&date={{record.order_date}}

---

Video Call Links

Scenario: Join a video conference from a meeting record

Navigation Configuration:

• Type: URL

• URL: {{record.meeting_url}}

Useful for Zoom, Google Meet, Teams links stored in your records.

---

Navigation Type 3: Email

Open the user's default email client with pre-filled recipient address.

Configuration:

• Destination Type: Email

• Email Address: Static email or dynamic field {{record.email}}

• Subject (optional): Pre-fill email subject

• Body (optional): Pre-fill email body

Common Use Cases

Contact Support

Scenario: Email support team with current record details

Button Configuration:

• Button Text: "Email Support"

• Icon: Envelope icon

• Appearance: Default

Navigation Configuration:

• Type: Email

• Email: [email protected]

• Subject: Support Request - Order {{record.order_number}}

• Body:

Hello Support Team,

I need assistance with Order #{{record.order_number}}.

Order Details:
- Customer: {{record.customer.name}}
- Date: {{record.order_date}}
- Status: {{record.status}}

Please help me with: [describe your issue here]

Thank you!

---

Email Customer

Scenario: Contact a customer directly from their record

Button Configuration:

• Button Text: "Email Customer"

• Icon: Envelope icon

Navigation Configuration:

• Type: Email

• Email: {{record.email}}

• Subject: Regarding your account with {{user.company_name}}

---

Email with CC and BCC

Scenario: Send email with multiple recipients

Navigation Configuration:

• Type: Email

• Email: {{record.primary_contact.email}}?cc={{record.secondary_contact.email}}&[email protected]

• Subject: Project Update - {{record.project_name}}

---

Report Issue

Scenario: Pre-fill bug report email

Navigation Configuration:

• Type: Email

• Email: [email protected]

• Subject: Bug Report: {{record.feature_name}}

• Body:

Bug Report

Feature: {{record.feature_name}}
Reported by: {{user.name}} ({{user.email}})
Date: {{today}}

Description:
[Describe the issue]

Steps to Reproduce:
1.
2.
3.

Expected Result:
[What should happen]

Actual Result:
[What actually happened]

---

Navigation Type 4: Phone

Open the phone dialer with a pre-filled phone number (particularly useful on mobile devices).

Configuration:

• Destination Type: Phone

• Phone Number: Static number or dynamic field {{record.phone}}

Common Use Cases

Call Customer

Scenario: Initiate a phone call to a customer

Button Configuration:

• Button Text: "Call Customer"

• Icon: Phone icon

• Appearance: Success

Navigation Configuration:

• Type: Phone

• Phone: {{record.phone_number}}

---

Emergency Contact

Scenario: Quick dial for emergency situations

Button Configuration:

• Button Text: "Call Emergency Line"

• Icon: Phone icon

• Appearance: Danger

Navigation Configuration:

• Type: Phone

• Phone: [phone]

---

International Numbers

Scenario: Call with country code

Navigation Configuration:

• Type: Phone

• Phone: +{{record.country_code}}{{record.phone_number}}

Example: +44{{record.phone}} for UK numbers

---

Support Hotline with Extension

Scenario: Call support with extension

Navigation Configuration:

• Type: Phone

• Phone: [phone],,,{{record.support_extension}}

The commas create pauses before dialing the extension.

---

Advanced Use Cases

Multi-Step Navigation Workflows

Save and Navigate

Scenario: Update a record, then navigate to a summary page

Step 1 - Update Record:

• Update Status to "Completed"

• Update Completed Date to Today

Step 2 - Navigate:

• Navigate to: Completed Tasks page

---

Conditional Navigation

Scenario: Navigate to different pages based on outcome

Option 1: Use multiple buttons with visibility rules

• Button 1 (shows when amount > 1000): Navigate to "Approval Required" page

• Button 2 (shows when amount ≤ 1000): Navigate to "Auto-Approved" page

Option 2: Use workflows to update a "Next Page" field, then navigate to {{record.next_page}}

---

Navigation with Confirmation

Use Modal type when navigation is significant:

Button Configuration:

• Type: Modal

• Modal Title: "Leave this page?"

• Modal Description: "You have unsaved changes. Are you sure you want to leave?"

• Confirm Button Text: "Yes, Leave"

Navigation Configuration:

• Navigate to: Different page

---

External Tool Integration

Open in Google Maps

Navigation Configuration:

• Type: URL

• URL: https://www.google.com/maps/search/?api=1&query={{record.latitude}},{{record.longitude}}

Or with address:

• URL: https://www.google.com/maps/search/?api=1&query={{record.street_address}},{{record.city}},{{record.state}}

---

Open in LinkedIn

Navigation Configuration:

• Type: URL

• URL: https://www.linkedin.com/in/{{record.linkedin_username}}

---

Schedule Calendar Event

Navigation Configuration:

• Type: URL

• URL: https://calendar.google.com/calendar/render?action=TEMPLATE&text={{record.event_name}}&dates={{record.start_date}}/{{record.end_date}}&details={{record.description}}

---

Dynamic Navigation Examples

Navigate Based on Field Value

Store URLs in your records and navigate to them:

Record Field: external_url = "https://example.com/resource/123"

Navigation Configuration:

• Type: URL

• URL: {{record.external_url}}

---

Navigate to User-Specific Page

Navigation Configuration:

• Type: Page

• Page: User Profile

• Context: Logged in User

---

Deep Linking Within App

Navigation Configuration:

• Type: Page

• Page: Customers

• Pass context: {{record.customer.id}}

This opens the specific customer detail page.

---

Best Practices

Button Text and Icons

• ✅ Use clear, action-oriented text ("View Details", "Email Customer", "Call Support")

• ✅ Add icons that match the action type (arrow for pages, external link for URLs, envelope for email, phone for calls)

• ✅ Use tooltips to provide additional context

URL Navigation

• ✅ Always include https:// for external URLs

• ✅ Test dynamic URLs with various record values

• ✅ URL-encode special characters in dynamic parameters

• ✅ Use external link icon to indicate navigation leaves the app

Email and Phone

• ✅ Test on mobile devices (email and phone work best on mobile)

• ✅ Keep pre-filled email bodies concise

• ✅ Format phone numbers consistently with country codes

• ✅ Provide context in email subjects

Modal Confirmations

• ✅ Use modals for navigation that leaves important work

• ✅ Use modals for external URLs users might not expect

• ❌ Don't use modals for routine, expected navigation

Troubleshooting

Navigation Doesn't Work

Issue: Button doesn't navigate

Solutions:

• Check that the destination page/URL exists

• Verify dynamic field values are populated (not empty)

• Test the URL manually by pasting it in a browser

• Check browser pop-up blocker settings

• Ensure user has permission to access the destination page

---

External URLs Blocked

Issue: Browser blocks external navigation

Solutions:

• URLs must start with https:// or http://

• Some browsers block pop-ups - add exception for your Noloco domain

• Check if corporate firewall blocks the destination

• Test in incognito mode to rule out extensions

---

Email Client Doesn't Open

Issue: Email action does nothing

Solutions:

• User needs a default email client configured

• On mobile, ensure email app is installed

• Email addresses must be valid format

• Very long pre-filled bodies may not work - keep concise

• Some browsers require user interaction before opening email clients

---

Phone Dialer Doesn't Open

Issue: Phone action doesn't work

Solutions:

• Phone links work best on mobile devices

• Phone number format should include country code: [phone]

• Remove spaces and special characters: [phone]

• Desktop browsers may not have phone dialing capability

---

Dynamic Values Don't Populate

Issue: {{record.field}} shows as literal text

Solutions:

• Verify field name is spelled correctly (case-sensitive)

• Check that the field exists on the current record

• For related fields, use: {{record.relationship.field}}

• Ensure the field has a value (not empty)

---

Context Not Passed to Destination

Issue: Navigating to a page but record context is lost

Solutions:

• Ensure you've selected "Pass Context" option

• Verify the destination page accepts that record type

• Check that relationship fields are properly configured

• Use URL parameters as fallback: navigate to URL with ?recordId={{record.id}}

---

Mobile Considerations

Mobile-Optimized Navigation

• Email and Phone actions work great on mobile

• External URLs open in mobile browsers

• Test that modals display properly on small screens

• Consider separate buttons for mobile/desktop (using device type visibility rules)

Touch-Friendly Design

• Make buttons large enough for touch targets (44x44px minimum)

• Use clear, tappable button text

• Avoid placing multiple navigation buttons too close together

Security Considerations

External URLs

• ⚠️ Be cautious with user-generated URLs

• ⚠️ Validate URL fields to prevent malicious links

• ⚠️ Consider warning users before navigating to external sites

• ⚠️ Use HTTPS URLs whenever possible

Email and Data Exposure

• ⚠️ Don't include sensitive data in email subjects (visible in logs)

• ⚠️ Be careful with PII in pre-filled email bodies

• ⚠️ Remember email clients may sync emails to cloud services

Permissions

• Set visibility rules to control who can navigate where

• Use table permissions to restrict access to destination pages

• Hide navigation to admin pages from regular users