# Display User Interfaces

# Overview

The OneTrust SDK manages several different user interfaces to display to a user.

> 📘
>
> The user interfaces without methods indicate they can only be navigated from either the banner or preference center. Some views are also controlled in the OneTrust Console/Tenant.

[block:parameters]
{
  "data": {
    "h-0": "View Name",
    "h-1": "Description",
    "h-2": "Method to Display",
    "0-0": "Banner",
    "0-1": "Notice to the user of their privacy rights. Has configurable text and buttons for **Accept All**, **Reject All**, **Manage Preferences**, and **Close Banner**.<br><br> 📘**<span style=\"color:deepskyblue\">Note</span>**  \nEach of these buttons can be enabled/disabled in the Admin Console.",
    "0-2": "**OneTrust.showBannerUI('self');**",
    "1-0": "Preference Center",
    "1-1": "An interface for the user to view additional privacy information and update their consent choices. Has configurable text and buttons for **Accept All**, **Reject All**, **Save Settings**, and **Close Preference Center**. <br><br> 📘**<span style=\"color:deepskyblue\">Note</span>**  \nYou can choose to hide each button except **Save Settings**, this is required for a user to update their choices.",
    "1-2": "**OneTrust.showPreferencesUI('self');**",
    "2-0": "Purpose Details",
    "2-1": "The Purpose Details (or Category Details) view shows granular detail about the category and also shows the SDK List link, Vendor List link, and child categories based on configuration.",
    "2-2": "none, sub-view of Preference Center",
    "3-0": "SDK List",
    "3-1": "An interface to show a granular list of SDKs to the user. This list may be filtered by Category to provide more transparency to the user.<br><br> 📘**<span style=\"color:deepskyblue\">Note</span>**  \nThis can be hidden in **Template Settings** in the Admin Console.",
    "3-2": "none, sub-view of Preference Center",
    "4-0": "IAB Vendor List",
    "4-1": "An interface, shown only for IAB2 type templates, displays a list of third-party ad tech vendors under management by the application. This provides a way for users to opt in/out of consent for a particular vendor.",
    "4-2": "none, sub-view of Preference Center",
    "5-0": "Vendor Details",
    "5-1": "A child interface of Vendor List, this view shows more granular information about a vendor and its Purpose, Legitimate Interest, Special Feature, and Special Purpose settings.",
    "5-2": "none, sub-view of Preference Center"
  },
  "cols": 3,
  "rows": 6,
  "align": [
    "left",
    "left",
    "left"
  ]
}
[/block]

## UI Methods

The SDK must be initialized in order for the UIs to be surfaced. Consent will be written and stored locally when the SDK is initialized successfully the first time.

> 📘
>
> The app should call `startSDK()` upon each app launch/instance so fresh data can be fetched and new changes reflected, if any. It is also required before you are able to surface any UIs.

### Banner

This method will surface the Banner UI if **shouldShowBanner()** evaluates to true. If you need to force the banner UI to resurface regardless of the **shouldShowBanner()** logic, pass this additional value into **startSDK()** and reinitialize before calling **showBannerUI()**: `'OT-Force-Fetch': true`.

```javascript
const oneTrustHeaders = {
    'OT-Force-Fetch': true
}

startSDK();

OneTrust.showBannerUI('self');
```

### Preference Center

Renders a Preference Center UI after the SDK has been initialized.

```javascript
OneTrust.showPreferencesUI('self');
```

### setupUI()

This method evaluates the **shouldShowBanner()** method under the hood and will surface the banner UI if it evaluates to true. Unlike **showBannerUI()**, this method will not respect the `'OT-Force-Fetch': true` header and the Banner UI will only surface if `shouldShowBanner()` is true.

```javascript
OneTrust.setupUI('self');
```

## shouldShowBanner

This method determines if a banner UI should be displayed to the user based on SDK determined logic.

```javascript
OneTrust.shouldShowBanner();
```

### Values Returned

* -1: SDK not initialized
* 1: Banner should be shown
* 0: Banner should not be shown

### How `shouldShowBanner` gets computed:

1. **Is the geolocation rule configured to show a banner?**  This is controlled by the `showAlertNotice` property in the JSON being `true`.
   * If `showAlertNotice = false`, the method returns `false` and a banner should not be shown for this region.
   * If `showAlertNotice = true`, move to the next check.

2. **Was the most recent SDK Publish configured to re-consent users?**  This is controlled by the presence of 2 values.  1) A `LastReconsentDate` property in JSON with non-null value.  2) A `OneTrustLastReconsentDate` value saved on disk.
   * If the `LastReconsentDate` JSON is *newer than* the `OneTrustLastReconsentDate` on disk, the method returns `true` and a banner should be shown.
   * If no, move to the next check.

3. **Is the geolocation rule configured for automatic re-consent AND did the user's automatic re-consent timer expire?**  This is controlled by measuring the difference between `OneTrustLastConsentDate` saved on disk and the `Current Date` and seeing if it is greater than or equal to `OneTrustReconsentFrequencyDays` in the JSON saved on disk. The SDK considers the date itself and not the time consent was given. For example, if the re-consent period is set to 1 day in my geolocation rule and the user provides consent at 11:59pm GMT, the banner will reappear at 12:00am GMT (1 minute later, but the next day).
   * If yes, the method returns `true` and a banner should be shown.
   * If no, move to the next check.

4. **Has the user previously given consent and is that consent stored at disk?**
   * If yes, the method returns `false` and a banner should not be shown.
   * If no, the method returns `true` and a banner should be shown because this is the first time they are being asked to give consent on the app.

5. **Has a new category been added post giving consent?**
   * If yes, the method returns `true `and a banner should be shown again because user needs to give consent to the new category.
   * If no, the method returns `false` and a banner should not be shown.

## isBannerShown

This method determines whether or not the banner UI has already been shown to the user.

```javascript
OneTrust.isBannerShown();
```

### Values Returned

* -1: SDK not initialized
* 1: Banner shown
* 0: Banner not shown

## Set Remote Key Mapping

If the default remote key mappings do not work properly on your device, you can manually set the key codes using this method:

```javascript
OneTrust.setRemoteKeys({
    ArrowUp: 'UP',
    ArrowDown: 'DOWN',
    ArrowRight: 'RIGHT',
    ArrowLeft: 'LEFT',
    Enter: 'OK',
    Backspace: 'BACK',
    38: 'UP',
    40: 'DOWN',
    39: 'RIGHT',
    37: 'LEFT',
    13: 'OK',
    8: 'BACK',
    10009: 'BACK',
    461: 'BACK',
});
```