Customize your UI configuration

To customize the styles, images and strings in your application, follow these instructions.

Step 1. Choose the application, platform, language, and region that this configuration applies to.

1. Open the NNL Customizer tool.

   1. Sign into the cloud.noknok.com and choose your Tenant.

   2. Open Step 2 and click UI configuration.

2. At this point, changes you make in the UI Customizer apply to all platforms, languages, and regions. If you want to make changes for a specific platform, language, and/or region, select the Platform, Language and/or Region.

3. If you want to start with configuration files from your local computer, click Import. This imports them to the cloud under the currently selected platform, language, and region, if any.

Step 2. Modify the default, top level style.

A view is a screen containing elements of the user interface. Views can be nested, as in the following example from the Digipass S3 Tutorial App for iOS. For a description of each view, see Customize the App SDK Using JSON, section Views in the App SDK.

This top level styles object represents the styles that apply to all views by default. If you want to apply a different style to a particular view, you can override this top level style by nesting a modified style inside a particular view object.

Select the style you want to customize by choosing it from the Select style menu. Every style has its default style attributes. For example, the main_button has the following default properties:

If you want to change the color of all of your main buttons, change the value of the Background Color here. Remember that you can override this top level style by nesting a different main_button style inside a view object.

Step 3. Modify the default, top level images.

The top level images object represents the images that apply to icons and buttons in all views unless you override it with a modified definition of that image nested inside a view object.

Select the image that you want to customize by choosing it from the Select image menu. For example, select the cancel_button and enter the path to your image inside the ZIP file that you uploaded:

In the example above, a folder called media was zipped up and uploaded.

Step 4. Modify the default, top level strings.

The top level strings object represents the strings that will apply to all views unless you override it with a modified definition of that string nested inside a view object.

Select the string you want to customize by choosing it from the Select string menu. For example, if you want all of your decline_button labels to be a string that is different from the default, enter the corresponding value for the decline_button in strings:

Step 5. Make a specific view look different from the top level default view.

If you want one view to have a style, image or string that is different from the rest of the views, select that view from the Select View menu and click Add View. This adds a lower level view object to the UI configuration file.

Make a choice from the Select style, Select image or Select string menu. Any change that you make here overrides the top level styles, images and strings, and this change applies only to that one view object.

For example, pull down the Select View menu and choose Sign-in View. Then click the Add View button. The UI Customizer adds a Sign-in View section to the UI configuration file and the pull down menus allow you to make modifications that apply only to Sign-in View.

If any of these items are disabled, this means that the selected view does not have any customizable style, image or strings.

If you click Save, it will be saved in your tenant. If you would like to export it to your local computer, right-click the blue link above the Save button.