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:

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",
// ...