Add command to Setting charm, which open page in default browser

Question

Hi

I wan to ask how I can add command in setting charm and when I click to command to open web page in default browser.

I see in Application setting sample that you can add command in setting charm with following:

        WinJS.Application.onsettings = function (e) {
            e.detail.applicationcommands = { "settingsDiv": { title: "Defaults", href: "/html/5-SettingsFlyout-Settings.html" } };
            WinJS.UI.SettingsFlyout.populateSettings(e);
        };
But I didn't see how to make to open external web page.

---

Simeon Antonov

Answer 1

Simeon,

The code above opens the settings pane. 

What you want to do is add a link into your settings pane.

See this example scenario 2: http://code.msdn.microsoft.com/windowsapps/App-settings-sample-1f762f49

Note you have to fix the link in this file: 2-SettingsFlyout-Help.html to be a valid href like <a href="http://www.microsoft.com"

-Jeff

---

Jeff Sanders (MSFT)

Answer 2

Dear Jpsanders,

This code doesn't open setting pane. It add command to setting pane. Before I wrote I tried to set valid link istead of 2-SettingsFlyout-Help.html. When you select command application is closed. You can try it.
I think it is a defect.

---

Simeon Antonov

Answer 3

Hi Simeon,

1.  Download this sample again:  http://code.msdn.microsoft.com/windowsapps/App-settings-sample-1f762f49

2.  Open the file: 2-SettingsFlyout-Help.html

3.  Edit line 22 in this file so that it looks like this:

<li>For more in-depth usage guidance, refer to the <a href="http://www.microsoft.com" target="fix_this_link">App settings UX guide</a>.</li>

4.  Run the application

5.  Select scenario 2

6.  Hit the button 'Add settings flyout'

7.  Hit the button 'Show settings charm'

8.  From the settings pane select 'Help' at the top

9.  From the Help pane select 'App settings UX guide.' at the bottom and your browser will display http://www.microsoft.com

-Jeff

---

Jeff Sanders (MSFT)

Answer 4

Yes it works, but I want when you hit 'Help' from settings pane, http://www.microsoft.com to be open in browser.

---

Simeon Antonov

Answer 5

Thanks for answer

---

Simeon Antonov

Answer 6

But Weather app by Microsoft can do that.

Click "Terms of User" or "Privacy Statement" will open a link by browser directly.

Answer 7

Simeon and Sars,

Here is how to do this:

I modified the 2nd scenario of the App Settings sample:

    function onSettingsCommand(settingsCommand) {
        // The URI to launch
        var uriToLaunch = "http://www.bing.com";
        // Create a Uri object from a URI string 
        var uri = new Windows.Foundation.Uri(uriToLaunch);
        
        Windows.System.Launcher.launchUriAsync(uri).then(
           function (success) {
               if (success) {
                   // URI launched
               } else {
                   // URI launch failed
               }
           });
    }
    function onCommandsRequested(eventArgs) { /* Your code */
        var str = "e";
        var settingsCommand = new Windows.UI.ApplicationSettings.SettingsCommand("jhelp", "Jeff Help", onSettingsCommand);
        eventArgs.request.applicationCommands.append(settingsCommand);
    }
    function scenario2AddSettingsFlyout() {
        var settingsPane = Windows.UI.ApplicationSettings.SettingsPane.getForCurrentView();
        settingsPane.addEventListener("commandsrequested", onCommandsRequested);
        
        // Make sure the following is called after the DOM has initialized. Typically this would be part of app initialization
        WinJS.Application.start();
        // Display a status message in the SDK sample output region
        WinJS.log && WinJS.log("Help command and settings flyout added from 2-SettingsFlyout-Help.html", "samples", "status");
    }

-Jeff

---

Jeff Sanders (MSFT)

Answer 8

thanx  jpsanders

Really helpful for  me.

Answer 9

Here's a version that's a little less verbose:

WinJS.Application.onsettings = function(e) {
  e.detail.e.request.applicationCommands.append(new Windows.UI.ApplicationSettings.SettingsCommand('bing', 'Search', function() {
    Windows.System.Launcher.launchUriAsync(new Windows.Foundation.Uri('http://www.bing.com'));
  }));
};