Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
PlacementForUIElement: {
after:string; } | {before:string; } | {at:"start"|"end"; }
Used in to specify the position of a panel in the stack and in to specify the position of an element in a panel.
In both cases, the default value is { at: "end" }
stringelements:
string[]
The options for which parts of the Felt UI can be shown when interacting with features and elements on the map.
Switching these off can be useful if you add your own click, selection or hover handlers for features and elements.
optionalfeatureSelectPanel:boolean
Set this to false to prevent the panel that shows information about a selected
feature from being shown.
optionalfeatureHoverPanel:boolean
Set this to false to prevent the panel that shows information about a hovered
feature from being shown.
optionalelementSelectPanel:boolean
Set this to false to prevent the panel that shows information about a selected
element from being shown.
optionallinkClickOpen:boolean
Set this to false to prevent clicking on a map link element from opening that link
in a new tab or window.
optionalimageLightboxOpen:boolean
Set this to false to prevent clicking on an image element from opening the image
in a lightbox.
The parameters for creating or updating a panel by using UiController.createOrUpdatePanel.
panel:
The panel to add.
optionalplacement: {after:string; } | {before:string; } | {at:"start"|"end"; }
optionalinitialPlacement: {after:string; } | {before:string; } | {at:"start"|"end"; }
The placement of the panel on the right sidebar stack.
{ at: "end" }
label: string
The label of the action trigger.
onTrigger: (
args: {id:string; }) =>void
The function to call when the action trigger is triggered.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the action trigger.
void
optionalid:string
optionaldisabled:boolean
Whether the action trigger is disabled or not.
optionaltype:undefined
optionalonCreate: (args: {id:string; }) =>void
A function to call when the element is created.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
void
optionalonDestroy: (args: {id:string; }) =>void
A function to call when the element is destroyed.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
void
UIPanelElementUpdate:
UIButtonElementUpdate|UITextElementUpdate|UITextInputElementUpdate|UISelectElementUpdate|UIDividerElementUpdate|UIButtonRowElementUpdate|UICheckboxGroupElementUpdate|UIRadioGroupElementUpdate|UIToggleGroupElementUpdate|UIGridContainerElementUpdate|UIFlexibleSpaceElementUpdate|UIIframeElementUpdate
This is a union of all the possible elements that can be updated inside panel's body or footer (excluding Divider and FlexibleSpace elements because they cannot be updated).
id and type are required to identify the element to update.
Represents a button element in a panel.
type:
"Button"
label:
string
The label to display in the button.
onClick: (
args: {id:string; }) =>void
The action to perform when the button is clicked.
void
id:
string
The ID of the element.
optionalvariant:"filled"|"transparent"|"outlined"
The style variant of the button.
"filled": a button with background.
background color is based on button's tint (defaults to default tint)
"transparent"
"filled"
optionaltint:"default"|"primary"|"accent"|"danger"
The tint of the button.
"default": Felt's theme-based light/dark colors.
"primary": Felt's primary color (pink).
"accent": Felt's accent color (blue).
"default"
optionaldisabled:boolean
Whether the button is disabled.
false
optionalonCreate: (args: {id:string; }) =>void
A function to call when the element is created.
void
optionalonDestroy: (args: {id:string; }) =>void
A function to call when the element is destroyed.
void
The parameters for creating a button element.
See UIButtonElement for more details.
id is optional but recommended if you want to be able to perform updates.
type:
"Button"
label:
string
The label to display in the button.
onClick: (
args: {id:string; }) =>void
The action to perform when the button is clicked.
void
optionalvariant:"filled"|"transparent"|"outlined"
The style variant of the button.
"filled": a button with background.
background color is based on button's tint (defaults to default tint)
"transparent"
"filled"
optionaltint:"default"|"primary"|"accent"|"danger"
The tint of the button.
"default": Felt's theme-based light/dark colors.
"primary": Felt's primary color (pink).
"accent": Felt's accent color (blue).
"default"
optionaldisabled:boolean
Whether the button is disabled.
false
optionalonCreate: (args: {id:string; }) =>void
A function to call when the element is created.
void
optionalonDestroy: (args: {id:string; }) =>void
A function to call when the element is destroyed.
void
optionalid:string
The ID of the element.
If not provided, the element will be assigned a random ID, but it is recommended to provide it to perform further updates on the element.
If provided, it must be unique within the UI.
undefined
An option to display in a control element.
Control elements are elements that allow the user to select one or more values from a list of options. This includes:
{
type: "Button",
label: "Click me",
onClick: () => alert("Button clicked"),
}text color is based on button's tint (defaults to default tint)
"outlined": a transparent button with a border.
text and border colors are based on button's tint (defaults to default tint)
"danger": Felt's danger color (red).args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the button.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
element
type:
"FlexibleSpace"
id:
string
The ID of the element.
optionalonCreate: (args: {id:string; }) =>void
A function to call when the element is created.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
void
optionalonDestroy: (args: {id:string; }) =>void
A function to call when the element is destroyed.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
void
text color is based on button's tint (defaults to default tint)
"outlined": a transparent button with a border.
text and border colors are based on button's tint (defaults to default tint)
"danger": Felt's danger color (red).args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the button.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
The option can be disabled by setting the disabled property to true.
A disabled option
label:
string
value:
string
optionaldisabled:boolean
booleanWhether or not the legend is shown.
optionalcooperativeGestures:boolean
When co-operative gestures are enabled, the pan and zoom gestures are adjusted to work better when the map is embedded in another page.
On mobile devices, enabling co-operative gestures will allow the user to pan past the embedded map with a single finger drag. To pan the map, they must use two fingers.
On desktop devices, enabling co-operative gestures allows the user to scroll past the embedded map using their scroll wheel or trackpad. To zoom the map, they must hold the Ctrl (Windows) or Command key (Mac) while scrolling.
optionalfullScreenButton:boolean
Whether or not the full screen button is shown in an embedded map.
When clicked, this will open the map in a new tab or window.
optionalgeolocation:boolean
Whether or not the geolocation button is shown in an embedded map.
The geolocation feature will plot your position on the map. If you click the button again, it will start tracking your position.
optionalzoomControls:boolean
Whether or not the zoom controls are shown in an embedded map.
This does not affect whether or not the map can be zoomed, just the display of the zoom controls in the bottom right corner of the map.
optionalscaleBar:boolean
Whether or not the scale bar is shown in an embedded map.
{ label: "Option A", value: "optionA" }{ label: "Option A", value: "optionA", disabled: true }truetruetruefalsetruetrueThe parameters for creating a button row element.
See UIButtonRowElement for more details.
type:
"ButtonRow"
items: []
The items to add to the button row.
optionalalign:"start"|"end"
The alignment of the button row.
"start"
optionalonCreate: (args: {id:string; }) =>void
A function to call when the element is created.
void
optionalonDestroy: (args: {id:string; }) =>void
A function to call when the element is destroyed.
void
optionalid:string
The ID of the element.
If not provided, the element will be assigned a random ID, but it is recommended to provide it to perform further updates on the element.
If provided, it must be unique within the UI.
undefined
optionallabel:string
Label text to display above the element and used for screen readers.
The parameters for updating a button row element.
See UIButtonRowElement for more details.
type:
"ButtonRow"
id:
string
The ID of the element.
optionalalign:"start"|"end"
The alignment of the button row.
"start"
optionalitems: []
The items to add to the button row.
optionalonCreate: (args: {id:string; }) =>void
A function to call when the element is created.
void
optionalonDestroy: (args: {id:string; }) =>void
A function to call when the element is destroyed.
void
optionallabel:string
Label text to display above the element and used for screen readers.
The parameters for updating a checkbox group element.
See UICheckboxGroupElement for more details.
type:
"CheckboxGroup"
id:
string
The ID of the element.
optionalvalue:string[] =valueSchema
The value of the checkbox group.
[]
optionaloptions: []
The options to display in the checkbox group.
optionalonChange: (args: {value:string[];id:string; }) =>void
The function to call when the value of the checkbox group changes.
void
optionalonCreate: (args: {id:string; }) =>void
A function to call when the element is created.
void
optionalonDestroy: (args: {id:string; }) =>void
A function to call when the element is destroyed.
void
optionallabel:string
Label text to display above the element and used for screen readers.
Represents a flexible space element in a container.
When rendered...
inside UIGridContainerElement, it will add extra gap between items. It can be controlled by grid property.
inside UIPanelElement body or footer, since they work as vertically stacks, it will add extra gap between items.
Paragraphs with a flexible space between makes them more visually separated.
Horizontal stack of buttons with a flexible space between makes them more visually separated.
type:
"FlexibleSpace"
id:
string
The ID of the element.
optionalonCreate: (args: {id:string; }) =>void
A function to call when the element is created.
void
optionalonDestroy: (args: {id:string; }) =>void
A function to call when the element is destroyed.
void
The parameters for creating an iframe element.
See UIIframeElement for more details.
id is optional but recommended if you want to be able to perform updates.
type:
"Iframe"
url:
string
The URL of the iframe.
optionalheight:string|number
The height of the iframe.
If not provided, the height will be automatically calculated following a 16:9 ratio.
optionalonCreate: (args: {id:string; }) =>void
A function to call when the element is created.
void
optionalonDestroy: (args: {id:string; }) =>void
A function to call when the element is destroyed.
void
optionalid:string
The ID of the element.
If not provided, the element will be assigned a random ID, but it is recommended to provide it to perform further updates on the element.
If provided, it must be unique within the UI.
undefined
The parameters for updating an iframe element.
See UIIframeElement for more details.
id and type are required to identify the element to update.
type:
"Iframe"
id:
string
The ID of the element.
optionalheight:string|number
The height of the iframe.
If not provided, the height will be automatically calculated following a 16:9 ratio.
optionalurl:string
The URL of the iframe.
optionalonCreate: (args: {id:string; }) =>void
A function to call when the element is created.
void
optionalonDestroy: (args: {id:string; }) =>void
A function to call when the element is destroyed.
void
Represents a divider element in a panel. This element is used to separate other elements in a panel. It is rendered as a gray horizontal line of 1px height.
Divider element is useful to separate sections of a panel.
type:
"Divider"
id:
string
The ID of the element.
optionalonCreate: (args: {id:string; }) =>void
A function to call when the element is created.
void
optionalonDestroy: (args: {id:string; }) =>void
A function to call when the element is destroyed.
void
The parameters for creating a divider element.
See UIDividerElement for more details.
id is optional but recommended if you want to be able to delete the element.
type:
"Divider"
optionalonCreate: (args: {id:string; }) =>void
A function to call when the element is created.
void
optionalonDestroy: (args: {id:string; }) =>void
A function to call when the element is destroyed.
void
optionalid:string
The ID of the element.
If not provided, the element will be assigned a random ID, but it is recommended to provide it to perform further updates on the element.
If provided, it must be unique within the UI.
undefined
The parameters for creating a flexible space element.
id is optional but recommended if you want to be able to perform updates.
type:
"FlexibleSpace"
optionalonCreate: (args: {id:string; }) =>void
A function to call when the element is created.
void
optionalonDestroy: (args: {id:string; }) =>void
A function to call when the element is destroyed.
void
optionalid:string
The ID of the element.
If not provided, the element will be assigned a random ID, but it is recommended to provide it to perform further updates on the element.
If provided, it must be unique within the UI.
undefined
The parameters for updating a text element.
See UITextElement for more details.
id and type are required to identify the element to update.
type:
"Text"
id:
string
The ID of the element.
optionalcontent:string
The text to display in the element.
optionalonCreate: (args: {id:string; }) =>void
A function to call when the element is created.
void
optionalonDestroy: (args: {id:string; }) =>void
A function to call when the element is destroyed.
void
The parameters for creating a checkbox group element.
The checkbox group is a control that allows the user to select one or more values from a list of options.
As a control, the checkbox group can have a label displayed above the checkboxes.
If no value is provided, value is [], the checkbox group will be empty.
{
body: [
{ type: "Text", content: "Contact" },
{ type: "TextInput", placeholder: "Enter your name", ... },
{ type: "TextInput", placeholder: "Enter your email", ... },
{ type: "Divider" },
{ type: "Text", content: "Address" },
{ type: "TextInput", placeholder: "Enter your address", ... },
],
}string
optionallabel:string
The label of the action trigger.
optionaldisabled:boolean
Whether the action trigger is disabled or not.
optionaltype:undefined
optionalonTrigger: (args: {id:string; }) =>void
The function to call when the action trigger is triggered.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the action trigger.
void
optionalonCreate: (args: {id:string; }) =>void
A function to call when the element is created.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
void
optionalonDestroy: (args: {id:string; }) =>void
A function to call when the element is destroyed.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
void
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
args
{ value: string[]; id: string; }
The arguments passed to the function.
args.value
string[]
Array of the selected values.
args.id
string
The id of the checkbox group element.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
type:
"Select"
options:
UIControlElementOption[]
The options to display in the select.
onChange: (
args: {value:string;id:string; }) =>void
The function to call when the value of the select changes.
args
{ value: string; id: string; }
The arguments passed to the function.
args.value
string
The value of the select.
args.id
string
The id of the select element.
void
optionalvalue:string
The value of the select.
optionalplaceholder:string
The placeholder text to display in the select.
optionalsearch:boolean
Whether the select should allow searching through the options.
false
optionalonCreate: (args: {id:string; }) =>void
A function to call when the element is created.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
void
optionalonDestroy: (args: {id:string; }) =>void
A function to call when the element is destroyed.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
void
optionalid:string
The ID of the element.
If not provided, the element will be assigned a random ID, but it is recommended to provide it to perform further updates on the element.
If provided, it must be unique within the UI.
undefined
optionallabel:string
Label text to display above the element and used for screen readers.
type:
"ToggleGroup"
id:
string
The ID of the element.
optionalalignment:"start"|"end"
The alignment of the toggle group.
"start"
optionalvalue:string[] =valueSchema
The value of the toggle group.
[]
optionaloptions:UIControlElementOption[]
The options to display in the toggle group.
optionalonChange: (args: {value:string[];id:string; }) =>void
The function to call when the value of the toggle group changes.
args
{ value: string[]; id: string; }
The arguments passed to the function.
args.value
string[]
Array of the selected values.
args.id
string
The id of the toggle group element.
void
optionalonCreate: (args: {id:string; }) =>void
A function to call when the element is created.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
void
optionalonDestroy: (args: {id:string; }) =>void
A function to call when the element is destroyed.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
void
optionallabel:string
Label text to display above the element and used for screen readers.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
type:
"CheckboxGroup"
value:
string[] =valueSchema
The value of the checkbox group.
[]
options:
UIControlElementOption[]
The options to display in the checkbox group.
onChange: (
args: {value:string[];id:string; }) =>void
The function to call when the value of the checkbox group changes.
args
{ value: string[]; id: string; }
The arguments passed to the function.
args.value
string[]
Array of the selected values.
args.id
string
The id of the checkbox group element.
void
id:
string
The ID of the element.
optionalonCreate: (args: {id:string; }) =>void
A function to call when the element is created.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
void
optionalonDestroy: (args: {id:string; }) =>void
A function to call when the element is destroyed.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
void
optionallabel:string
Label text to display above the element and used for screen readers.
type:
"Iframe"
url:
string
The URL of the iframe.
id:
string
The ID of the element.
optionalheight:string|number
The height of the iframe.
If not provided, the height will be automatically calculated following a 16:9 ratio.
optionalonCreate: (args: {id:string; }) =>void
A function to call when the element is created.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
void
optionalonDestroy: (args: {id:string; }) =>void
A function to call when the element is destroyed.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
void
{
type: "Panel",
body: [
{ type: "Paragraph", text: "Paragraph 1" },
{ type: "FlexibleSpace" },
{ type: "Paragraph", text: "Paragraph 2" },
],
}{
type: "Grid",
grid: "auto-flow / auto 1fr auto",
items: [
{ type: "Button", label: "Button 1", onClick: () => {} },
{ type: "FlexibleSpace" },
{ type: "Button", label: "Button 2", onClick: () => {} },
],
}{
type: "CheckboxGroup",
label: "Select your hobbies",
options: [
{ label: "👾 Video games", value: "gaming" },
{ label: "🎨 Art", value: "art" },
{ label: "🎤 Singing", value: "singing" },
{ label: "🎬 Movies", value: "movies" },
],
value: ["gaming", "art"],
onChange: ({ value, id }) => { }
}{ type: "Iframe", url: "https://www.example.com" }{ type: "Iframe", url: "https://www.example.com", height: 300 }label: string
The label of the feature action.
onTrigger: (
args: {feature:LayerFeature; }) =>void
The function to call when the feature action is triggered.
args
{ feature: ; }
The arguments passed to the function.
args.feature
The feature that triggered the action.
void
id:
string
optionallayerIds:string[]
The layers to add the action to. Optional. Defaults to all layers.
optionalgeometryTypes: ("Polygon"|"Point"|"Line"|"Raster")[]
The geometry type of the features to add the action to. Optional. Defaults to all geometry types.
optionaltype:undefined
optionalonCreate: (args: {id:string; }) =>void
A function to call when the element is created.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
void
optionalonDestroy: (args: {id:string; }) =>void
A function to call when the element is destroyed.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
void
stringelements: {
element:UIPanelElementCreate;container:"footer"|"body"| {id:string; };placement: {after:string; } | {before:string; } | {at:"start"|"end"; }; }[]
element
-
container?
"footer" | "body" | { id: string; }
The section of the panel to add the element to. It can be either one of the top-level sections of the panel ("body" or "footer") or a specific container (like ) in the panel ({ id: string }).
placement?
{ after: string; } | { before: string; } | { at: "start" | "end"; }
The placement of the element in the target container (based on the container property).
Represents a feature action for creation. It can be added to the map by using the UiController.createFeatureAction method.
label:
string
The label of the feature action.
onTrigger: (
args: {feature: ; }) =>void
The function to call when the feature action is triggered.
void
optionallayerIds:string[]
The layers to add the action to. Optional. Defaults to all layers.
optionalgeometryTypes: ("Polygon"|"Point"|"Line"|"Raster")[]
The geometry type of the features to add the action to. Optional. Defaults to all geometry types.
optionaltype:undefined
optionalonCreate: (args: {id:string; }) =>void
A function to call when the element is created.
void
optionalonDestroy: (args: {id:string; }) =>void
A function to call when the element is destroyed.
void
The parameters for creating a grid container element.
See UIGridContainerElement for more details.
type:
"Grid"
items: ( | | | | | | | | | | )[]
The items to add to the grid container.
optionalgrid:string
The grid to use for the container. It is the exact same as CSS's shorthand property grid.
two columns, the first column is 50px wide, the second column takes the remaining space
for more details.
optionalverticalAlignment:"center"|"top"|"bottom"
The alignment of the items in the grid. Only takes effect on horizontal stacks.
"top"
optionalhorizontalDistribution:"center"|"start"|"end"|"space-between"|"space-around"|"space-evenly"
The distribution of the items in the grid. Only takes effect on horizontal stacks.
"start"
optionalonCreate: (args: {id:string; }) =>void
A function to call when the element is created.
void
optionalonDestroy: (args: {id:string; }) =>void
A function to call when the element is destroyed.
void
optionalid:string
The ID of the element.
If not provided, the element will be assigned a random ID, but it is recommended to provide it to perform further updates on the element.
If provided, it must be unique within the UI.
undefined
The parameters for creating a radio group element.
See UIRadioGroupElement for more details.
type:
"RadioGroup"
options: []
The options to display in the radio group.
onChange: (
args: {value:undefined|string;id:string; }) =>void
The function to call when the value of the radio group changes.
void
optionalvalue:string=valueSchema
The value of the radio group.
undefined
optionalonCreate: (args: {id:string; }) =>void
A function to call when the element is created.
void
optionalonDestroy: (args: {id:string; }) =>void
A function to call when the element is destroyed.
void
optionalid:string
The ID of the element.
If not provided, the element will be assigned a random ID, but it is recommended to provide it to perform further updates on the element.
If provided, it must be unique within the UI.
undefined
optionallabel:string
Label text to display above the element and used for screen readers.
id:
string
optionallabel:string
The label of the feature action.
optionallayerIds:string[]
The layers to add the action to. Optional. Defaults to all layers.
optionalgeometryTypes: ("Polygon"|"Point"|"Line"|"Raster")[]
The geometry type of the features to add the action to. Optional. Defaults to all geometry types.
optionaltype:undefined
optionalonTrigger: (args: {feature: ; }) =>void
The function to call when the feature action is triggered.
void
optionalonCreate: (args: {id:string; }) =>void
A function to call when the element is created.
void
optionalonDestroy: (args: {id:string; }) =>void
A function to call when the element is destroyed.
void
The parameters for creating a panel by using UiController.createOrUpdatePanel.
UIPanel for more information about panels.
id:
string
The ID of the panel obtained from .
Custom IDs are not supported.
optionaltitle:string
The title to display in the panel header.
optionalonClickClose: (args: {id:string; }) =>void
A function to call when panel's close button is clicked.
void
optionaltype:"Panel"
optionalbody: []
The elements to add to the panel body.
optionalfooter: []
The elements to add to the panel footer.
optionalonCreate: (args: {id:string; }) =>void
A function to call when the element is created.
void
optionalonDestroy: (args: {id:string; }) =>void
A function to call when the element is destroyed.
void
The parameters for creating a toggle group element.
See UIToggleGroupElement for more details.
type:
"ToggleGroup"
value:
string[] =valueSchema
The value of the toggle group.
[]
options: []
The options to display in the toggle group.
onChange: (
args: {value:string[];id:string; }) =>void
The function to call when the value of the toggle group changes.
void
optionalalignment:"start"|"end"
The alignment of the toggle group.
"start"
optionalonCreate: (args: {id:string; }) =>void
A function to call when the element is created.
void
optionalonDestroy: (args: {id:string; }) =>void
A function to call when the element is destroyed.
void
optionalid:string
The ID of the element.
If not provided, the element will be assigned a random ID, but it is recommended to provide it to perform further updates on the element.
If provided, it must be unique within the UI.
undefined
optionallabel:string
Label text to display above the element and used for screen readers.
The parameters for creating a text element.
See UITextElement for more details.
id is optional but recommended if you want to be able to perform updates.
type:
"Text"
content:
string
The text to display in the element.
optionalonCreate: (args: {id:string; }) =>void
A function to call when the element is created.
void
optionalonDestroy: (args: {id:string; }) =>void
A function to call when the element is destroyed.
void
optionalid:string
The ID of the element.
If not provided, the element will be assigned a random ID, but it is recommended to provide it to perform further updates on the element.
If provided, it must be unique within the UI.
undefined
Represents a text element in a panel. Markdown is supported.
Complex markdown syntax is supported like tables, images, quotes, etc.
type:
"Text"
content:
string
The text to display in the element.
id:
string
The ID of the element.
optionalonCreate: (args: {id:string; }) =>void
A function to call when the element is created.
void
optionalonDestroy: (args: {id:string; }) =>void
A function to call when the element is destroyed.
void
{
type: "Text",
content: "Hello, world!",
}args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
args
{ feature: LayerFeature; }
The arguments passed to the function.
args.feature
The feature that triggered the action.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
args
{ value: undefined | string; id: string; }
The arguments passed to the function.
args.value
undefined | string
The selected value.
args.id
string
The id of the radio group element.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
args
{ feature: LayerFeature; }
The arguments passed to the function.
args.feature
The feature that triggered the action.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the panel.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
args
{ value: string[]; id: string; }
The arguments passed to the function.
args.value
string[]
Array of the selected values.
args.id
string
The id of the toggle group element.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
type:
"Button"
id:
string
The ID of the element.
optionallabel:string
The label to display in the button.
optionalvariant:"filled"|"transparent"|"outlined"
The style variant of the button.
"filled": a button with background.
background color is based on button's tint (defaults to default tint)
"transparent": a transparent button that gets a subtle dark background when hovered.
text color is based on button's tint (defaults to default tint)
"outlined": a transparent button with a border.
text and border colors are based on button's tint (defaults to default tint)
"filled"
optionaltint:"default"|"primary"|"accent"|"danger"
The tint of the button.
"default": Felt's theme-based light/dark colors.
"primary": Felt's primary color (pink).
"accent": Felt's accent color (blue).
"danger": Felt's danger color (red).
"default"
optionaldisabled:boolean
Whether the button is disabled.
false
optionalonClick: (args: {id:string; }) =>void
The action to perform when the button is clicked.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the button.
void
optionalonCreate: (args: {id:string; }) =>void
A function to call when the element is created.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
void
optionalonDestroy: (args: {id:string; }) =>void
A function to call when the element is destroyed.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
void
type:
"RadioGroup"
id:
string
The ID of the element.
optionalvalue:string=valueSchema
The value of the radio group.
undefined
optionaloptions:UIControlElementOption[]
The options to display in the radio group.
optionalonChange: (args: {value:undefined|string;id:string; }) =>void
The function to call when the value of the radio group changes.
args
{ value: undefined | string; id: string; }
The arguments passed to the function.
args.value
undefined | string
The selected value.
args.id
string
The id of the radio group element.
void
optionalonCreate: (args: {id:string; }) =>void
A function to call when the element is created.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
void
optionalonDestroy: (args: {id:string; }) =>void
A function to call when the element is destroyed.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
void
optionallabel:string
Label text to display above the element and used for screen readers.
type:
"Divider"
id:
string
The ID of the element.
optionalonCreate: (args: {id:string; }) =>void
A function to call when the element is created.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
void
optionalonDestroy: (args: {id:string; }) =>void
A function to call when the element is destroyed.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
void
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
type:
"RadioGroup"
options:
UIControlElementOption[]
The options to display in the radio group.
onChange: (
args: {value:undefined|string;id:string; }) =>void
The function to call when the value of the radio group changes.
args
{ value: undefined | string; id: string; }
The arguments passed to the function.
args.value
undefined | string
The selected value.
args.id
string
The id of the radio group element.
void
id:
string
The ID of the element.
optionalvalue:string=valueSchema
The value of the radio group.
undefined
optionalonCreate: (args: {id:string; }) =>void
A function to call when the element is created.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
void
optionalonDestroy: (args: {id:string; }) =>void
A function to call when the element is destroyed.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
void
optionallabel:string
Label text to display above the element and used for screen readers.
Sticky bottom section for action buttons (e.g., Save, Cancel).
Optional close icon in header. When onClickClose is provided, you must handle panel cleanup and removal.
type:
"Panel"
id:
string
The ID of the panel obtained from UiController.createPanelId.
Custom IDs are not supported.
optionaltitle:string
The title to display in the panel header.
optionalbody:UIPanelElement[]
The elements to add to the panel body.
optionalfooter:UIPanelElement[]
The elements to add to the panel footer.
optionalonClickClose: (args: {id:string; }) =>void
A function to call when panel's close button is clicked.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the panel.
void
optionalonCreate: (args: {id:string; }) =>void
A function to call when the element is created.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
void
optionalonDestroy: (args: {id:string; }) =>void
A function to call when the element is destroyed.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
void
type:
"Grid"
id:
string
The ID of the element.
optionalgrid:string
The grid to use for the container. It is the exact same as CSS's shorthand property grid.
two columns, the first column is 50px wide, the second column takes the remaining space
https://developer.mozilla.org/en-US/docs/Web/CSS/grid for more details.
optionalverticalAlignment:"center"|"top"|"bottom"
The alignment of the items in the grid. Only takes effect on horizontal stacks.
"top"
optionalhorizontalDistribution:"center"|"start"|"end"|"space-between"|"space-around"|"space-evenly"
The distribution of the items in the grid. Only takes effect on horizontal stacks.
"start"
optionalitems: (UIButtonElementCreate|UITextElementCreate|UIDividerElementCreate|UITextInputElementCreate|UISelectElementCreate|UIFlexibleSpaceElementCreate|UIButtonRowElementCreate|UICheckboxGroupElementCreate|UIRadioGroupElementCreate|UIToggleGroupElementCreate|UIIframeElementCreate)[]
The items to add to the grid container.
optionalonCreate: (args: {id:string; }) =>void
A function to call when the element is created.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
void
optionalonDestroy: (args: {id:string; }) =>void
A function to call when the element is destroyed.
args
{ id: string; }
The arguments passed to the function.
args.id
string
The id of the element.
void
searchonChangelabel is displayed above the select and used for screen readers. placeholder is displayed in the select when no value is selected.
type:
"Select"
options:
UIControlElementOption[]
The options to display in the select.