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:
route.addButton({ 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"; } },});route.addSection({ title: "Details", id: "details-section", display: "hidden", // ...});