Constructing View URLs in Next-Gen Apps

What you'll learn:

• How Knack.getBaseUrl() works and what it returns
• When to use this method in your custom code
• How to construct view-level URLs for redirects and navigation
• How this method differs from Classic's legacy helpers
• Best practices for building dynamic links

Overview

Knack.getBaseUrl() is a JavaScript helper that returns your Next-Gen app's base URL. Use this method when you need to programmatically create links to views or trigger navigation.

This method is particularly useful for:

• Creating dynamic redirects based on user actions or data
• Building navigation links in custom elements
• Constructing URLs for buttons or automated workflows
• Integrating with third-party services that need your app's URL

Note: If you're building for Next-Gen Apps, use Knack.getBaseUrl(). If you're working with Classic apps, use the legacy helpers Knack.url_base and Knack.hash_id instead. We recommend migrating to Next-Gen to access updated helper methods and improved routing.

What It Returns

Knack.getBaseUrl() returns a string containing your app's base URL—the root address where your app is hosted. This is the starting point for any view-level links you want to create.

Return Value Format

https://yourapp.knack.com

The method returns your app's domain and path, without trailing slashes or view-specific routes. You'll combine this with your view keys to create complete URLs.

Basic Usage

Always wrap your code in Knack.ready() to ensure Knack is fully loaded before you try to access the method:

Knack.ready().then(async () => {
  const baseUrl = Knack.getBaseUrl();
  console.log('App base URL is: ', baseUrl);
});

That's all you need to get your app's base URL. See the use cases below for practical implementations.

Common Use Cases

1. Redirect Users After Form Submission

Navigate to a success view after a user completes an action:

Knack.ready().then(async () => {
  Knack.on('page:render', ({ page }) => {
    // Listen for form submission
    Knack.on('view.record_form.submit', (data) => {
      const baseUrl = Knack.getBaseUrl();
      const successUrl = `${baseUrl}/view_456`; // Success view
      window.location.href = successUrl;
    });
  });
});

2. Combine with Record IDs

Use Knack.getBaseUrl() alongside Knack.getCurrentRecordId() to create URLs for specific records:

Knack.ready().then(async () => {
  Knack.on('page:render', ({ page }) => {
    const baseUrl = Knack.getBaseUrl();
    const recordId = Knack.getCurrentRecordId(); // Get current record
    
    // Build a URL to an edit view for this record
    const editUrl = `${baseUrl}/view_999?record=${recordId}`;
    console.log('Edit URL: ', editUrl);
  });
});

Comparing Next-Gen and Classic Helpers

If you're coming from Classic to Next-Gen, here's how the methods compare:

Key Differences:

• Next-Gen uses path-based routing instead of hash-based URLs.
• Method names are more descriptive: getBaseUrl() and getCurrentRecordId() are clearer than url_base and hash_id.
• Improved consistency: Both Next-Gen helpers follow a consistent naming pattern (get + description).

Troubleshooting

The Method Returns Undefined

Problem: Knack.getBaseUrl() is returning undefined.

Solution: Make sure your code is inside Knack.ready(). This ensures Knack has fully loaded before the method is available.

// ✅ Correct
Knack.ready().then(async () => {
  const baseUrl = Knack.getBaseUrl();
});

// ❌ Wrong
const baseUrl = Knack.getBaseUrl(); // May be undefined

Related Helpers and Methods

Learn about other JavaScript helpers that complement Knack.getBaseUrl():

• Knack.getCurrentRecordId() — Get the ID of the record currently being viewed
• Knack.ready() — Wait for Knack to fully load before running your code
• Knack.on() — Listen for specific app events (page renders, form submissions, etc.)