Add Settings to Service Package

In order to make a service package configurable by a user, it can expose a settings screen that will be rendered as a part of the application settings.

There is an example in the SDK package named menuitems that showcases how to implement this.

To create a settings screen, a runnable bundle of a service package should export a MenuItem of type SettingsMenu as shown below:

menuItems: () => [
  {
    id: "Example_Settings",
    menuId: MenuIdentifier.SettingsMenu,
    title: "Example Settings",
    description: "Example Settings",
    position: 1,
    component: ExampleSettings
  }
];

ExampleSettings is a component that renders a sample settings screen and in this example contains a set of radio buttons and toggle switches just to demo the basic functionality, but this can be certainly extended to render whatever settings a developer needs.

  public render(): React.ReactNode {
    const radioButtons: Array<RadioButton<string>> = ["Radio Button"].map(btn =>
        ({id: btn, label: btn})
    );

    return (
      <ScrollView>
        <NamedGroup label="Radio Buttons">
          <RadioField
            buttons={radioButtons}
            onPress={button => this.settingsModel.update({ radioButton: button })}
            selectedId={this.settingsModel.get().radioButton || radioButtons[0].id}
          />
        </NamedGroup>
        <NamedGroup label="Toggle Switches">
          <ComponentLabel label="Toggle Switch">
            <ToggleSwitch
              value={this.settingsModel.get().toggleSwitch}
              onChange={newValue => {
                this.settingsModel.update({ toggleSwitch: newValue });
                return newValue;
              }}
            />
          </ComponentLabel>
        </NamedGroup>
      </ScrollView>
    );
  }

The state of the settings is stored and exposed using a singleton model SettingsModel that persists the state as an instance of Settings class and has get/update methods to update and get the current settings.

export interface Settings {
  radioButton?: string;
  toggleSwitch?: boolean;
}

export class SettingsModel {
  private static instance?: SettingsModel;
  private settings: Settings = {};

  public get(): Readonly<Settings> {
    return this.settings;
  }

  public update(settings: Settings) {
    this.settings = Object.assign(this.settings, settings);
  }
}

ExampleSettings component uses update(settings: Settings) method to update the state when user modifies the settings and get() method to get default value when the component is rendered. get() method should also be used by the service package to get the state and implement any logic that relies on user settings.

results matching ""

    No results matching ""