How to: Add a dropdown to the Console UI Header

Suggest Edits

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

Implementation

To integrate with the App Widget:

  1. Add the dropdown widget to the application

    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.

Interface schema:

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

  1. Add the dropdown widget to the header

    Initialize the dropdown. 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.
    • updateDropdown: This optional parameter takes an async callback function to be executed when the UpdateDropdown function is called. 
import { InitializeDropdown } from 'header/dropdown'

const yourData = await getYourData();

InitializeDropdown(
  {placeholder: 'Select a store',
    initialKey: undefined,
    updateDropdown,
    items: yourData.map((data: any) => ({
      text: data,
      key: data,
      onClick: () =>  alert(`Your data: ${JSON.parse(data)}`),
    }),
  )});

const updateDropdown = async () => {
  return yourData.map((data: any) => ({
    text: data,
    key: data,
    onClick: () =>  alert(`Your data: ${JSON.parse(data)}`),
  }),)
}

  1. Updating your dropdown

    Update your dropdown by calling the exposed UpdateDropdown function. This will trigger the 'updateDropdown' method defined in the initialize. 
import { UpdateDropdown } from 'header/dropdown'

cosnt App = () => {
  return (
    <button onClick={updateDropdown}>Update Dropdown</button>
  )
}

Updated 18 days ago