Using the Settings Service

The Cloud App API includes a Settings Service, which allows your app to save settings for your application to the platform. Settings are user-specific and can be used to store personal preferences. Any data which can be serialized in JSON can be saved.

In this tutorial, we’ll show how to use the service to save and retrieve settings. We’ll also use Angular Reactive Forms to create a form for users to save their settings. We start by following the instructions in the “Adding additional routes” tutorial to add a new component and route called “settings”.

Settings interface

Then we want to define a class which describes our settings. While this step is not necessary, it will help us build a form for editing and will provide clean access to our settings in other components. In a folder called models, we create a file called settings.ts. The file contains this simple class. The class also includes default values to help populate our form for new users:

Settings form

We’ll use Angular Reactive Forms to build our settings component. You can read about Reactive Forms in the Angular documentation. To get us started we need to do the following:

• In your app.module.ts, import ReactiveFormsModule from @angular/forms
• In settings.component.ts, import FormGroup from @angular/forms
• In settings.component.ts, define a local form variable:

In our initializer, we retrieve the settings as a FormGroup. If the settings are empty (the FormGroup‘s value property), we initialize a new Settings object with its default values. Then we set the local form variable to the settings FormGroup.

Now our settings are loaded and we’re ready to build our form. In settings.component.html, we build out a form which represents our settings. Reactive Forms takes care of the model binding and updates the underling form object as we change the values in the form. (To see this in action, you can check the “Show value” checkbox in the tutorials project.)

Finally, we build a save method which calls the set method of the Settings Service to set the value of our form. The next time we enter the settings component, we’ll see our previously selected values in the form.

Using settings

Now that we have a form to manage our settings, we can use them elsewhere in our app. For example, in the initialization method of a component in which we want to use the settings, we can do the following:

ngOnInit() {
  this.settingsService.get().subscribe(settings => {
    this.settings = settings as Settings;
  });
}

Notice the as Settings- this casts the return object as the Settings interface we defined earlier.

Settings Link

The last step is to provide a way for your users to get to your settings form. You could add a link within your app, but the Cloud App platform provides a standard way to expose settings within the app’s menu. To add the settings link, specify the route to your settings form within your app’s manifest.json:

"pages": {
  "settings": "/#/settings"
},

Note the format of the link- preceded by a “/#/”, which is needed for Angular to route to your settings page.

Now a settings icon appears in the menu next to your app’s name: