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 How to: Integrate your existing application with the Console UI.
Implementation
To integrate with the App Widget:
Create an array of values of typeAdd the dropdown widget to the applicationIDropdownItem
. 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;
}
Initialize the dropdown. The parameters in theAdd the dropdown widget to the headerdropdown
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)}`),
}),)
}
Update your dropdown by calling the exposedUpdating your dropdownUpdateDropdown
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