Shell.UI.Navigation.js

Article
08/24/2015

Applies To: Windows Azure Pack

Provides navigation functionality.

Widgets

None.

Enums

None.

Properties

Name	Type	Description
Shell.UI.Navigation.WellKnownPropertyNames.alwaysVisibile	Boolean	Determines visibility.
Shell.UI.Navigation.WellKnownPropertyNames.count	Object	The count.
Shell.UI.Navigation.WellKnownPropertyNames.displayError	String	The display error.
Shell.UI.Navigation.WellKnownPropertyNames.displayName	String	The display name.
Shell.UI.Navigation.WellKnownPropertyNames.displayWarning	String	The display warning.
Shell.UI.Navigation.WellKnownPropertyNames.icon	Object	The icon URI.
Shell.UI.Navigation.WellKnownPropertyNames.collection	Object	The navigation items.
Shell.UI.Navigation.WellKnownPropertyNames.name	String	The name.
Shell.UI.Navigation.WellKnownPropertyNames.showSpinner	Object	The show spinner.
Shell.UI.Navigation.WellKnownPropertyNames.tooltip	Object	The tool tip

Methods

Name	Description	Returns	Parameters
Shell.UI.Navigation.calculateNavigationPath	Calculates the navigation path. Return value is the calculated navigation path.	String	Options: the navigation path to calculate. Options is an object with the following properties Extension: The extension. Type: The type. Name: The name. View: The view dataContext: The data context. expandPath: True to expand the path, otherwise False.
Shell.UI.Navigation.cdmNavigateTo	Programmatically navigate to a new area of the application	Nothing	hashPath (String): Area to navigate to.
Shell.UI.Navigation.crackNavigationPath	Gets the cracked navigation path which is an object with the following values. Hash: The hash value. Extension: The extension. View: The view. viewName: the view name. item: The item. itemName: the item name. itemType: The item type.	Object	Hash: The hash used to crack the navigation path.
Shell.UI.Navigation.currentLocation	Gets the current location	Object The object represent the current location and has the following properties: extension: The extension name. view: The view. viewName: The view name. item: The item. itemName: The item Name. itemType: The item type.	None
Shell.UI.Navigation.expandDefaultHashPath	Expands the default hash path for an extension. Returns the expanded hash path.	String	Extension: the extension hashPath: The hash path.
Shell.UI.Navigation.getBasePath	Gets the base path.	String	None
Shell.UI.Navigation.getHashPathType	Takes a hashpath (e.g. from location.hash) and return the "type" component of that has if it exists.	String	hashPath (String): A hashpath from a url which is in navigation format.
Shell.UI.Navigation.getObservableExtensionBadge	Returns the extension navigation badge.	String	Extension: The extension name.
Shell.UI.Navigation.initializeNav	Initializes navigation.	Nothing	None
Shell.UI.Navigation.isNavigatedTo	Returns true if the extension, view, item and item type are navigated.	Boolean	extensionName: The extension name. viewName: the view name. itemName: The item name. itemType: The item type.
Shell.UI.Navigation.navigate	Navigates to the supplied destination.	Nothing	Destination: The destination to navigate to.
Shell.UI.Navigation.removeConfirmNavigateAway	Removes the confirm navigate away message.	Nothing	None.
Shell.UI.Navigation.selectExtension	Selects an extension.	Nothing	Extension: The extension to select.
Shell.UI.Navigation.setConfirmNavigateAway	Sets the confirm navigate away message.	Nothing	Message: The confirm navigate away message.

Examples

How do I specify the location where the back button points to?

From the datafunction, return an object which has a backNavigationProperty. This property indicates where the back button should take you. This property uses Shell.UI.Navigation.calculateNavigationPath() on this property to determine the hash.

function dataFunction(...) {
// Code to acquire the data used to populate he list of the second level of navigation
// ...
    return {
        data: [...], //
        label: "label of the back button",
            backNavigation: {
                type: "the type id you want the back button to point to",
                view: "the view id you want the back button to point to",
                name: "the id of the item you want to point to"
            }
    };
}

How do I define multiple "levels" of navigation?

Consider the following scenario. You wish to build an extension that displays a grid of items of type "A" (perhaps a SQL Server). Clicking on one of those should take you to a list of items of type "B", within that instance of A (perhaps SQL Databases). In turn, cliquing on an instance of "B" in the grid should take you to a grid of items of type "C" (perhaps tables in the database). This is done via the navigationDependencies.

_types = [
    {
        name: "A",
        displayName: "A - SQL Server",
        dataFunction: function() {}, // data function here
        tabs: [{
            id: "AllAs",
            displayName: "SQL servers",
            template: "a template name",
            activated: function() {}, // tab activated function here
        }]
    },
    {
        name: "B",
        displayName: "B - SQL Database",
        navigationDependencies: {
            A: "AId"
        },
        dataFunction: function() {}, // data function here
        tabs: [{
            id: "AllBs",
            displayName: "SQL Databases",
            template: "a template name",
            activated: function() {}, // tab activated function here
        }]
    },
    {
        name: "C",
        displayName: "B - SQL Table",
        navigationDependencies: {
            B: "BId"
        },
        dataFunction: function() {}, // data function here
        tabs: [{
            id: "AllCs",
            displayName: "SQL Tables",
            template: "a template name",
            activated: function() {}, // tab activated function here
        }]
    }
];

Share via