Answered by:
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)
- Proposed as answer by Jeff SandersMicrosoft employee, Moderator Monday, May 14, 2012 7:15 PM
- Marked as answer by Dino He Tuesday, May 22, 2012 7:11 AM
Monday, May 14, 2012 7:15 PMModerator
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)
- Proposed as answer by Jeff SandersMicrosoft employee, Moderator Monday, May 14, 2012 4:04 PM
Monday, May 14, 2012 4:04 PMModerator -
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)
- Proposed as answer by Jeff SandersMicrosoft employee, Moderator Monday, May 14, 2012 7:15 PM
- Marked as answer by Dino He Tuesday, May 22, 2012 7:11 AM
Monday, May 14, 2012 7:15 PMModerator -
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 -
-
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"); }
-JeffJeff Sanders (MSFT)
- Proposed as answer by Jeff SandersMicrosoft employee, Moderator Tuesday, July 3, 2012 2:15 PM
Tuesday, July 3, 2012 2:15 PMModerator -
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