addArgumentChoices(key, initialValue, options?)

Adds a list of a data to be used as argument choices. It has the same syntax as .addRecords, except that .addRecords includes additional options that are specific to records.

Example

// Example 1: Add a static array to argument choices
window.CommandBar.addArgumentChoices("users", ["Jane", "Jill", "Jack"]);

// Example 2: Add a static array to argument choices and turn on QuickFind
window.CommandBar.addArgumentChoices(
  "users",
  [
    { name: "Jane", id: 1 },
    { name: "Jill", id: 2 },
    { name: "Jack", id: 3 },
  ],
  {
    labelKey: "name",
  }
);

// Example 3: Custom search function, no default value
const onSearchContacts = (query) => {
  return fetch(`https://yourapi.com/search?=${query}`).then((response) =>
    response.json()
  );
};

// Register search function to CommandBar
window.CommandBar.addArgumentChoices("contacts", [], {
  onInputChange: onSearchContacts,
});

// Example 4: Add argument choices "lazily" with a loader function
// loader is called when Spotlight opens
// loader is NOT called on page load
window.CommandBar.addArgumentChoices(users, []);
window.CommandBar.addArgumentChoices(users, fetchUsersLoader);

Method parameters

key Required

string

Key for the list of argument choices.

initialValue Required

any | function

The initial value of key in the argument choices. There are two options: Static or Dynamic.

Property	Type	Description
category	string	Used to visually group the list of values with others that have the same category value.
icon	string	Icon to be shown next to each value. Can be a URL (absolute or relative), emoji character, or an SVG string.

options

object

Options to customize properties for key.

Property	Type	Description
onInputChange	function | async function	Adds a custom search function to CommandBar for key.
searchableFields	string[]	A list of object fields to be searched. If a custom searchFunction is provided, matches will be highlighted in these fields.
labelKey	string	The value key of key objects you want to use to display the object's label.
descriptionKey	string	The value key of key objects you want to use to display the object's description (subtext under label).
defaultIcon	string	Default icon to show alongside key objects.