How to: Add a dropdown to the Console UI Header

The Console UI header provides customizations and features that you can integrate into your App. This how-to provides guidance on adding a custom HTML component (referred to as an App Widget) that your Users interact with in your App.

Prerequisites

• An App that is integrated with the Console UI. For more information, see Console UI Overview.
• Unauthorized user opening your App is redirected to the login page.
• Authorized users see a header component on the top of the App.

Implementation

To integrate with the App Widget:

1. Declare types before populating the dropdown(only for Typescript)

   In your App.jsx file, add a helper Interface to help you populate your dropdown:

import { initialize } from "header/initialize";

interface IDropdownItem {
  text: string;
  key: string;
  href?: string;
  onClick?: () => void; 
}

initialize();

2. Populate the App Widget

   Create an array of values of type IDropdownItem. There are two ways to implement the response action when a User selects an item from the dropdown:

• href: Add a hyperlink to the dropdown item.
• onClick: Add an event-based trigger that fires when the User someone selects an item.

3. Add the App widget parameter to the Header

   Modify the initialize function as shown below with the following values. The parameters in the dropdown parameter can be read as follows:
   • items: This refers to the array of items that the dropdown is set to contain.
   • initialKey: This optional parameter takes in one of the keys in the above list of dropdown items which is selected by default.
   • placeholder: This optional parameter takes a placeholder string that is displayed when the dropdown doesn't have any value selected.

import { initialize } from "header/initialize";

interface IDropdownItem {
  text: string;
  key: string;
  href?: string;
  onClick?: () => void; 
}

const initialize: (options?: {
  dropdown?: {
    items: dropdownItems;
    initialKey?: string;
    placeholder?: string;
  };
}) => void;