Skip to main content

Custom Component

A custom-built React, or HTML and JavaScript, component.

This is a legacy component that is no longer supported. Use custom component libraries if you want to build custom components for Retool apps.

Custom Component supports passing data to and from the Retool app. It can be granted permission for popups, link redirection, and camera access.

You should only build a custom component if you need functionality that isn't already available in an existing component. You can also use an IFrame component to embed web pages or the HTML component to include custom HTML and CSS.

Demo

Properties​

All properties for this object with supported data types or values. You can write JavaScript almost anywhere in Retool to manipulate or read property values.

allowCamera​

Whether to allow access to a connected camera.

Type boolean
Format True/False
Configurability Inspector
Defaultfalse
Examples
true

allowDownloads​

Whether to allow downloads.

Type boolean
Format True/False
Configurability Inspector
Defaultfalse
Examples
true

allowForms​

Whether to allow form submissions.

Type boolean
Format True/False
Configurability Inspector
Defaultfalse
Examples
true

allowFullscreen​

Whether to allow fullscreen mode.

Type boolean
Format True/False
Configurability Inspector
Defaultfalse
Examples
true

allowGeolocation​

Whether to allow access to the user's location.

Type boolean
Format True/False
Configurability Inspector
Defaultfalse
Examples
true

allowMicrophone​

Whether to allow access to the microphone.

Type boolean
Format True/False
Configurability Inspector
Defaultfalse
Examples
true

allowModals​

Whether to allow modals.

Type boolean
Format True/False
Configurability Inspector
Defaultfalse
Examples
true

allowPayments​

Whether to allow payments using PaymentRequest().

Type boolean
Format True/False
Configurability Inspector
Defaultfalse
Examples
true

allowPopups​

Whether to allow popups.

Type boolean
Format True/False
Configurability Inspector
Defaultfalse
Examples
true

allowPopupsToEscapeSandbox​

Whether to allow popups to escape the sandbox.

Type boolean
Format True/False
Configurability Inspector
Defaultfalse
Examples
true

allowSameOrigin​

Whether to allow content to be treated as being from the same origin.

Type boolean
Format True/False
Configurability Inspector
Defaultfalse
Examples
true

allowTopNavigation​

Whether to allow navigation away from the app.

Type boolean
Format True/False
Configurability Inspector
Defaultfalse
Examples
true

heightType​

Whether the height automatically adjusts to fit content or is a fixed size.

Type string
Format Plain Text
Configurability Inspector > Spacing > Height
Allowed Values
ValueDescription
fixed

Fixed height.

auto

Expand to fit content.

Defaultfixed

hidden​

Whether this object is hidden from view.

Type boolean
Format True/False
Configurability Inspector > Appearance > Hidden
Defaultfalse
Examples
true

id​

The unique identifier (name).

Type string
Format Plain Text
Configurability Inspector
DefaultcustomComponent1
Examples
query1
button1

iframeCode​

The HTML code to render.

Type string
Format HTML
Configurability Inspector
Defaultnull

isHiddenOnDesktop​

Whether to show or hide this object in the desktop layout.

Type boolean
Format True/False
Configurability Inspector > Appearance > Advanced > Show on desktop
Defaultfalse
Examples
true

isHiddenOnMobile​

Whether to show or hide this object in the mobile layout.

Type boolean
Format True/False
Configurability Inspector > Appearance > Advanced > Show on mobile
Defaulttrue
Examples
true

maintainSpaceWhenHidden​

Whether to take up space on the canvas if hidden is true.

Type boolean
Format True/False
Configurability Inspector > Appearance > Advanced > Maintain space when hidden
Defaultfalse
Examples
true

margin​

The amount of margin to render outside.

Type string
Format Plain Text
Configurability Inspector > Spacing > Margin
Allowed Values
ValueUI OptionDescription
4px 8pxNormal

Normal margin.

0None

No margin.

Default4px 8px
Examples
4px 8px

model​

Dynamic data.

Type object
Configurability Inspector
Defaultnull

showInEditor​

Whether the component remains visible in the editor if hidden is true.

Type boolean
Format True/False
Configurability Inspector > Appearance > Advanced > Always show in edit mode
Defaultfalse
Examples
true

style​

Custom style options.

Type object
Configurability Inspector > Appearance > style
Defaultnull

Methods​

JavaScript API methods for this object. You can write JavaScript almost anywhere in Retool and use methods to manipulate data and property values.

customComponent.reload()​

Reload the component.

Definition
customComponent.reload()
Examples

Reload customComponent.

customComponent.reload();

customComponent.scrollIntoView()​

Scrolls the canvas or parent container so that the selected component appears in the visible area.

Definition
customComponent.scrollIntoView(options)
Parameters

options​

The scroll options.

Type object
Object Properties

behavior​

The scroll behavior.

Type string
Allowed Values
ValueDescription
auto

Scroll immediately to the specified position.

smooth

Scroll gradually to the specified position.

block​

The scroll position relative to the component.

Type string
Allowed Values
ValueDescription
nearest

Scrolls only the minimum amount required for the component to appear in the visible area. Scrolling does not occur if the component is already in view.

start

Scrolls to position the component at the top of the visible area.

center

Scrolls to position the component in the middle of the visible area.

end

Scrolls to position the component at the bottom of the visible area.

Examples

Scroll the minimum amount to immediately bring customComponent into view.

customComponent.scrollIntoView({behavior: 'auto', block: 'nearest'});

customComponent.updateModel()​

Update the model with the specified value.

Definition
customComponent.updateModel(model)
Parameters

model​

Dynamic data.

Type object

Events​

Events triggered by user interactions. You can configure event handlers in the IDE to trigger queries or other actions in response to events.

EventDescription