Redirect Blank Menu Pages

How to redirect blank pages as a result of selecting a navigation menu item

Blank page resulting from selecting a menu item

Another great example of this in practice is the Knack Directory in DTS Portal where each app has a blank page that redirects to its respective app's home page url.

The JS

We create a handler that renders on a specified page scene and redirects the page to the specified url (our first top level page in the menu)

Option A (standard redirect)

/**************************************/
/*** Redirect from Blank Menu Pages ***/
/**************************************/
//Menu Page
$(document).on('knack-scene-render.scene_28', function(event, scene) { 
window.location.href = "https://atd.knack.com/development-services#development-reviews/";
});

Option B (allows the user to go back in the browser after being redirected)

/**************************************/
/*** Redirect from Blank Menu Pages ***/
/**************************************/
//Menu Page
$(document).on('knack-scene-render.scene_28', function(event, scene) { 
window.location.replace("https://atd.knack.com/development-services#development-reviews/");
});

Option C (redirects from a root url - the first page in your page hierarchy. Used for Customer Portals)

/***********************************/
/*** Redirect from Root URL Page ***/
/***********************************/
$(function() { // Execute on page load
  if (window.location.hash === '') {
    window.location.href = "https://atd.knack.com/development-services#customer-portal";
  }

  $(window).on('hashchange', function() {
    if (window.location.hash === '') {
      window.location.href = "https://atd.knack.com/development-services#customer-portal";
    }
  });
});

The CSS

None needed 😎

How to Implement

Adjust the Scene ID

'knack-scene-render.scene_28'

and the URL

window.location.href = "https://atd.knack.com/development-services#development-reviews/"