UIPanel
A UI panel that can be added to the map using UiController.createOrUpdatePanel.
Panels are containers for UI elements with title, body, footer, and close button. Body and footer elements are arranged in vertical stacks.
Body
Main content area that scrolls when content exceeds available space.
Footer
Sticky bottom section for action buttons (e.g., Save, Cancel).
Close Button
Optional close icon in header. When onClickClose
is provided, you must handle panel cleanup and removal.
Example
// 1. Create panel ID
const panelId = await felt.createPanelId();
// 2. Create panel with close button and footer
await felt.createOrUpdatePanel({
panel: {
id: panelId,
title: "My Panel",
body: [
{ type: "Text", content: "Hello, world!" },
{ type: "TextInput", label: "Name", placeholder: "Enter your name" }
],
footer: [
{
type: "ButtonRow",
align: "end",
items: [
{ type: "Button", label: "Cancel", onClick: () => handleCancel() },
{ type: "Button", label: "Save", onClick: () => handleSave() }
]
}
],
onClickClose: (args) => {
// Clean up any state or resources
cleanupResources();
// Close the panel
felt.deletePanel(panelId);
}
}
});
Properties
type
type:
"Panel"
id
id:
string
The ID of the panel obtained from UiController.createPanelId.
Remarks
Custom IDs are not supported.
title?
optional
title:string
The title to display in the panel header.
body?
optional
body:UIPanelElement
[]
The elements to add to the panel body.
footer?
optional
footer:UIPanelElement
[]
The elements to add to the panel footer.
onClickClose()?
optional
onClickClose: (args
: {id
:string
; }) =>void
A function to call when panel's close button is clicked.
Parameters
args
{ id
: string
; }
The arguments passed to the function.
args.id
string
The id of the panel.
Returns
void
onCreate()?
optional
onCreate: (args
: {id
:string
; }) =>void
A function to call when the element is created.
Parameters
args
{ id
: string
; }
The arguments passed to the function.
args.id
string
The id of the element.
Returns
void
onDestroy()?
optional
onDestroy: (args
: {id
:string
; }) =>void
A function to call when the element is destroyed.
Parameters
args
{ id
: string
; }
The arguments passed to the function.
args.id
string
The id of the element.
Returns
void
Last updated
Was this helpful?