Customizing Strings, Styles, Images and More

The Nok Nok App SDK allows you to customize its built-in UI without programming. By editing a cross-platform JSON UI configuration file, you can:

• Replace strings.

• Display a friendly name for an authentication method.

• Give a title, description and icon to an authenticator.

• Explain to the user why an additional authentication method is required.

• Modify a style to affect one or many different views.

• Use your own images.

• Handle Dark Mode.

See App UI Customization for instructions to create the JSON UI configuration file.

The App SDK loads your JSON UI configuration file at runtime. You can store your UI Configuration file either on a local server with the same origin as your application, or on a remote web server with the same origin as the App SDK. You can even pass your entire UI configuration to the App SDK in a JSON formatted string.

Direct the App SDK to a Locally Stored UI Configuration File

If your JSON UI Configuration File is stored locally, add the following code to your JavaScript app.

try {
    await NNLUiConfig.addUiConfig("<source of your UI configuration file>", fLocalizing Your Appalse);
} catch(exception) {
    // Failed to add the configuration file.
}

Specify the source of your UI configuration file with one of the following:

• the URL where the configuration file resides, must be the same origin as the origin of the application.

• the configuration object itself

• the entire configuration in a JSON formatted string

To localize your app, pass true into the localize parameter and prepare additional UI configuration files as described in Localizing Your App. A localized UI configuration file can be applied only if you pass a URL as the source parameter when you call addUiConfig().

Direct the App SDK to Remotely Stored UI Configuration Files

If you store your UI configuration file(s) on a remote server, you must store the files in a specific directory structure under specific filenames. See Using a Remote Server for details. Before you can direct the App SDK to your UI configuration file, you must know the name of your chosen root directory in the remote server.

Your JavaScript app calls the downloadUiConfig() method to download the UI configuration files from your chosen root directory on the remote server.

let uiConfRemoteURL = "https://www.example.com/uicfg_dir";
try {
    await NNLUiConfig.downloadUiConfig(uiConfRemoteURL);
    // Configurations have been successfully loaded and applied.
    // Continue with the app initialization.
}catch(exception) {
    // Failed to download the configuration files.
}

• The origin of the URL parameter must be the same as the origin of the nnlappsdk.

• The downloadUiConfig() method automatically calls the addUiConfig() method to apply the configuration files to your application's user interface.

• If the downloadUiConfig() method finds files in your root configuration directory for a language or an ISO region, it automatically localizes your app using those files.