--- title: "Customize your UI configuration" slug: "dpo-customize-app-sdk-ui-configuration" updated: 2026-10-27T20:13:21Z published: 2026-10-27T20:13:21Z canonical: "docs.onespan.com/dpo-customize-app-sdk-ui-configuration" --- > ## Documentation Index > Fetch the complete documentation index at: https://docs.onespan.com/llms.txt > Use this file to discover all available pages before exploring further. # 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. ![](https://cdn.document360.io/038f59a7-abd0-4c14-9de7-3434d28b49fd/Images/Documentation/image7(2).png?sv=2026-02-06&spr=https&st=2026-10-29T02%3A07%3A47Z&se=2026-10-29T03%3A07%3A47Z&sr=c&sp=r&sig=128QYWW%2Fx9l6P%2F0H99A%2BWMyjXylvXjz0KbyyxISmhKE%3D) A view is a screen containing elements of the user interface. Views can be nested, as in the following example from the DigipassONE Tutorial App for iOS. For a description of each view, see *Customize the App SDK Using JSON*, section [*Views in the App SDK*](/dpoa/docs/s3suite94-modifying-a-style-for-different-ui-elements-1#views-in-the-app-sdk). ![](https://cdn.document360.io/038f59a7-abd0-4c14-9de7-3434d28b49fd/Images/Documentation/image-1766517825701.png?sv=2026-02-06&spr=https&st=2026-10-29T02%3A07%3A47Z&se=2026-10-29T03%3A07%3A47Z&sr=c&sp=r&sig=128QYWW%2Fx9l6P%2F0H99A%2BWMyjXylvXjz0KbyyxISmhKE%3D) ![](https://cdn.document360.io/038f59a7-abd0-4c14-9de7-3434d28b49fd/Images/Documentation/signInView(2).jpg?sv=2026-02-06&spr=https&st=2026-10-29T02%3A07%3A47Z&se=2026-10-29T03%3A07%3A47Z&sr=c&sp=r&sig=128QYWW%2Fx9l6P%2F0H99A%2BWMyjXylvXjz0KbyyxISmhKE%3D) 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: ![](https://cdn.document360.io/038f59a7-abd0-4c14-9de7-3434d28b49fd/Images/Documentation/image4(9).png?sv=2026-02-06&spr=https&st=2026-10-29T02%3A07%3A47Z&se=2026-10-29T03%3A07%3A47Z&sr=c&sp=r&sig=128QYWW%2Fx9l6P%2F0H99A%2BWMyjXylvXjz0KbyyxISmhKE%3D) 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](/dpoa/docs/s3suite94-upload-media-files-1): ![](https://cdn.document360.io/038f59a7-abd0-4c14-9de7-3434d28b49fd/Images/Documentation/image1(3).png?sv=2026-02-06&spr=https&st=2026-10-29T02%3A07%3A47Z&se=2026-10-29T03%3A07%3A47Z&sr=c&sp=r&sig=128QYWW%2Fx9l6P%2F0H99A%2BWMyjXylvXjz0KbyyxISmhKE%3D) 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**: ![](https://cdn.document360.io/038f59a7-abd0-4c14-9de7-3434d28b49fd/Images/Documentation/image6(2).png?sv=2026-02-06&spr=https&st=2026-10-29T02%3A07%3A47Z&se=2026-10-29T03%3A07%3A47Z&sr=c&sp=r&sig=128QYWW%2Fx9l6P%2F0H99A%2BWMyjXylvXjz0KbyyxISmhKE%3D) **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. ![](https://cdn.document360.io/038f59a7-abd0-4c14-9de7-3434d28b49fd/Images/Documentation/image3(3).png?sv=2026-02-06&spr=https&st=2026-10-29T02%3A07%3A47Z&se=2026-10-29T03%3A07%3A47Z&sr=c&sp=r&sig=128QYWW%2Fx9l6P%2F0H99A%2BWMyjXylvXjz0KbyyxISmhKE%3D) 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. Formerly known as Digipass S3.