Best way to use NavBar to open external website

Question

Hi,

I want to use the NavBar to open external website (let's say Microsoft site for example).

The only way I find so far is to use the label and call a function to will evaluate the label name ...

<div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{ label: 'Microsoft', icon: 'delete' }"></div>

WinJS.UI.Pages.define("index.html", {
    ready: function (element, options) {
        document.getElementById('createNavBar').addEventListener('invoked', this.navbarInvoked.bind(this));
        document.getElementById('toggleNavBar').addEventListener('click', this.toggleNavBarVisibility.bind(this));
    },
navbarInvoked: function (ev)
 {
        var navbarCommand = ev.detail.navbarCommand;
        switch (navbarCommand.label) {
            case "Google":
                window.open('http://www.google.com', '_blank');
                break;
            case "Microsoft":
                window.open('http://www.microsoft.com', '_blank');
                break;

It's working... but I was wondering if there is a better way to do that?

Thanks!

Answer 1

Hi Elezium38,

I don't think there is a best way, but there must be a suitable way. Your request is to open the external website in NavBar, so let's say we can separate the question into two parts:

#1 how to open external website

We can use the window.open as you wrote, to use LaunchUriAsync | launchUriAsync methods can do the same thing and even more with LauncherOptions. Here also some documentation for you: How to link to external web pages

#2 how to put a link or button on the NavBar

Basically NavBar is a container for NavBarCommands, see the documentation: Quickstart: Adding a nav bar, but you can also customize the navbar by adding a listview to it or etc.

I believe the design guideline documentation will definitely help you: App bars

--James

---

<THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
Thanks
MSDN Community Support

Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

Answer 2

Thanks for the link and references.  

It well really helpfulll!

Cheers!