Quickstart: Using the Accounts Settings flyout pane
Language: HTML | XAML

Quickstart: Using the Accounts Settings flyout pane (HTML)

Your app can use the app Settings flyout to display a list of accounts that are stored in the credential locker (PasswordVault) for the current user by way of new ApplicationSettings APIs. This is especially useful if your app leverages a number of user accounts to access secure content.

This topic will show you how to add the Accounts command to the app settings flyout (SettingsPane), and how to populate the Accounts setting pane (AccountsSettingsPane) that appears when that command is activated.


A basic understanding of the Windows.UI.ApplicationSettings (app Settings flyout) and Windows.Security.Credentials (credential locker) is helpful.

Initialize credential locker with account data

The AccountsSettingsPane is populated using credentials stored with the credential locker for the current user. For demonstration purposes we will create a new instance of the credential locker and populate it with some temporary data that our AccountsSettingsPane can display when it's demonstrated later in the topic.

app.onactivated = function (args) {
	if (args.detail.kind === activation.ActivationKind.launch) {
		if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
			// TODO: This application has been newly launched. Initialize
			// your application here.
		} else {
			// TODO: This application has been reactivated from suspension.
			// Restore application state here.

		// Add dummy data
		var credLocker = new Windows.Security.Credentials.PasswordVault();
		credLocker.add(new Windows.Security.Credentials.PasswordCredential("doug", "user1", "password1"));
		credLocker.add(new Windows.Security.Credentials.PasswordCredential("doug", "user2", "password2"));
		credLocker.add(new Windows.Security.Credentials.PasswordCredential("ryan", "user1", "password1"));


Implement the settings contract and control callback

Next implement the callback methods, defined later, that are responsible for adding the AccountsCommand to the SettingsPane configuration, and populates the AccountsSettingsPane when this app is running.

var settingsPane = Windows.UI.ApplicationSettings.SettingsPane.getForCurrentView();

settingsPane.oncommandsrequested = function (args) {

var accountSettingsPane = Windows.UI.ApplicationSettings.AccountsSettingsPane.getForCurrentView();

Include Accounts command and pane in the Settings flyout

To make UI navigation to the AccountsSettingsPane possible, your app will need to request the AccountsCommand for it to appear on the SettingsPane. Once in place, this command is represented on the app Settings flyout as Accounts.

accountSettingsPane.onaccountcommandsrequested = function (args) {

	// Called after successfully deleting the credential from the locker.
	// Perform any required cleanup and display Account settings pane to user 
	// to show that the credential has been deleted.
	var credDeleteHandler = function (command) {
		try {
		catch (e) { 
			// Handle error.


Populate the Accounts Settings pane

After clicking Accounts on the Settings flyout, users will see the Account settings pane.

In the following example, the Accounts Settings pane is populated with account data present in the credential locker (our example data from earlier), and if stored account credentials are removed elsewhere in system during the app session, the Account settings pane is updated to reflect that change.

// Populate the Accounts settings pane with credentials from the credential locker. 
// Provide the "Remove" command for each credential.
protected void OnAccountCommandsRequested(
	Windows.UI.ApplicationSettings.AccountsSettingsPane sender, 
	Windows.UI.ApplicationSettings.AccountsSettingsPaneCommandsRequestedEventArgs e)
	// Get the Deferral object if async operations are required.          
	var deferral = e.GetDeferral();

	// Handler for the delete credential command.    
	var credDeletedHandler = new Windows.UI.ApplicationSettings.

	// Get credentials to display in the Settings pane.
	var credLocker = new Windows.Security.Credentials.PasswordVault();
	IReadOnlyList<Windows.Security.Credentials.PasswordCredential> credentials = 

	if (credentials.Count == 0)
		e.HeaderText = "No credentials found.";
		e.HeaderText = "User credentials:";

	foreach (var c in credentials)
			var credCommand = new Windows.UI.ApplicationSettings.
				CredentialCommand(c, credDeletedHandler);

			// Delete command is invoked after the system deletes the credential
		catch (Exception err) 
			// Handle error.

	// Complete the Deferral.

The Windows.UI.ApplicationSettings namespace also defines a set of classes specifically for associating commands with a WebAccount, enabling management of these accounts through the app Settings flyout.


This topic showed you how to display saved accounts for a user in the app Settings flyout. To learn how to provide a UI for credential input, store credentials locally, or authenticate with a service on the web, check out the following topics:

Related topics




© 2017 Microsoft