locked
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

    Monday, May 14, 2012 10:38 AM

Answers

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

    Monday, May 14, 2012 7:15 PM
    Moderator

All replies

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

    Monday, May 14, 2012 4:04 PM
    Moderator
  • 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

    Monday, May 14, 2012 7:05 PM
  • 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)

    Monday, May 14, 2012 7:15 PM
    Moderator
  • Yes it works, but I want when you hit 'Help' from settings pane, http://www.microsoft.com to be open in browser.

    Simeon Antonov

    Monday, May 14, 2012 7:23 PM
  • Thanks for answer

    Simeon Antonov

    Monday, May 14, 2012 7:40 PM
  • But Weather app by Microsoft can do that.

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




    • Edited by Sars C Tuesday, July 03, 2012 9:39 AM
    Tuesday, July 03, 2012 9:38 AM
  • 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)

    Tuesday, July 03, 2012 2:15 PM
    Moderator
  • thanx  jpsanders

    Really helpful for  me.

    Friday, October 12, 2012 7:05 AM
  • 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'));
      }));
    };

    Thursday, February 14, 2013 12:06 AM