Host page navigation

Azure DevOps Services | Azure DevOps Server 2022 - Azure DevOps Server 2019

The HostNavigationService provides APIs for interacting with the parent host frame, including refreshing it and accessing the hash of the URL:

Tip

Check out our newest documentation on extension development using the Azure DevOps Extension SDK.

Get the current hash value

	// Get navigation service
    VSS.getService(VSS.ServiceIds.Navigation).then(function(navigationService) {
        // Get current hash value from host url
        navigationService.getHash().then(function (hash) {
            console.log("Host hash value: " + hash);                        
        });
    });

Get notified when the hash value changes

	// Get navigation service
    VSS.getService(VSS.ServiceIds.Navigation).then(function(navigationService) {
        navigationService.onHashChanged(function (hash) {
        	// Adding #something to the end of browser url executes this handler with the hash value "something"
            console.log("Hash changed to : " + hash);                        
        });
    });

Change the hash value

Two methods are available for changing the hash value of the host page URL:

• setHash adds a new entry to the browser history
• replaceHash does not add a new entry to the browser history

	// Get navigation service
    VSS.getService(VSS.ServiceIds.Navigation).then(function(navigationService) {
    	// Adds a new entry to browser history
        navigationService.setHash("new-hash-value");
    });

Refresh the host page

Following code piece shows how host page can be reloaded.

	// Get navigation service
    VSS.getService(VSS.ServiceIds.Navigation).then(function(navigationService) {
    	// Reload whole page
        navigationService.reload();
    });