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 a callback function to be executed when the UpdateDropdown function is called.
    • updateDropdownAsync: This optional parameter takes an async callback function to be executed when the UpdateDropdown function is called.
      updateDropdownAsync has priority, if both parameters are passed in only updateDropdownAsync will be used when trying to update the dropdown
import { InitializeDropdown } from 'header/dropdown'

const yourData = await getYourData();

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

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

const updateDropdownAsync = async () => {
  const data = await getYourData()
  return data.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 12 days ago