locked
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!


    Wednesday, August 20, 2014 8:54 PM

Answers

  • 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.

    Thursday, August 21, 2014 6:18 AM
    Moderator
  • Thanks for the link and references.  

    It well really helpfulll!

    Cheers!

    • Marked as answer by Elezium38 Monday, September 1, 2014 3:06 PM
    Monday, September 1, 2014 3:06 PM

All replies

  • 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.

    Thursday, August 21, 2014 6:18 AM
    Moderator
  • Thanks for the link and references.  

    It well really helpfulll!

    Cheers!

    • Marked as answer by Elezium38 Monday, September 1, 2014 3:06 PM
    Monday, September 1, 2014 3:06 PM