addComponent(key, name, component)

Add a custom component that can be used to render a preview for records, commands, or record actions in Spotlight.

In the code example: mount will be called to initialize the component into the provided HTML element, then render will be called (possibly multiple times) with the Record, Record Action, or Command to be rendered. Finally, when the component is no longer being displayed, unmount is called.

Example

/// Part 1: types ///
type CustomComponent = {
  mount: (node: HTMLElement) => CustomComponentInstance,
};

type CustomComponentInstance = {
  render: (data: DataRow, metadata: DataRowMetadata) => void,
  unmount: () => void,
};

/// Part 2: examples ///
// Example with `addRecords`

window.CommandBar.addComponent(
  "record-preview-with-image",
  "Basic Record Preview with an image",
  {
    mount: (elem) => ({
      render: (data, metadata) => {
        elem.innerHTML =
          "<div>" +
          "<h3>" +
          data.label +
          "</h3>" +
          '<div><img src="' +
          data.photo +
          '" /></div>' +
          "</div>";
      },
      unmount: (elem) => {
        // ... clean up any timers, event handlers, etc. ...
      },
    }),
  }
);

window.CommandBar.addRecords(
  "pets",
  [
    {
      label: "Fido",
      id: "foo42",
      photo: "https://www.example.com/img/fido.jpg",
    },
    {
      label: "Buster",
      id: "bar43",
      photo: "https://www.example.com/img/buster.jpg",
    },
    {
      label: "Brutus",
      id: "baz44",
      photo: "https://www.example.com/img/brutus.jpg",
    },
  ],
  { detail: { type: "component", value: "record-preview-with-image" } }
);

Method parameters

key Required

string

Key that uniquely identifies the component. This value should be referenced if programmatically using the component (e.g., with .addRecords).

name Required

string

Name that describes how the component should be used. Displayed in the Editor when selecting a custom component for a command preview or record action preview.

component Required

CustomComponent

The component that you want to use in preview. See the code example for the types related to CustomComponent.