Skip to content

Make the UI reactive

There are cases where an interaction with an element should affect other elements in the integration’s UI. For example, you may want a user to be able to select a ”Show details” button to reveal other elements.

To do this, use the state provided in callback functions to select and change elements. Below is an example using a button element. Use the picker object to retrieve elements from the UI and adjust the UI to control which elements are displayed:

// src/ui/index.ts
  title: "Show details",
  id: "show-details-button",
  callback: async (surfaceState) => {
    const { picker } = surfaceState;

    const detailsSection = picker?.getElementById<UIElementSectionOptions>("details-section");

    if (detailsSection) {
      detailsSection.display = "visible";
  title: "Details",
  id: "details-section",
  display: "hidden",
  // ...