# Navigate To

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: `support@company.com`
* 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}}&bcc=admin@company.com`
* Subject: `Project Update - {{record.project_name}}`

***

#### Report Issue

**Scenario**: Pre-fill bug report email

**Navigation Configuration:**

* Type: Email
* Email: `bugs@company.com`
* 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: `+1-800-555-0911`

***

#### 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: `+1-800-555-0199,,,{{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: `+1-555-123-4567`
* Remove spaces and special characters: `+15551234567`
* 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