Custom Component

A custom-built, embedded component using React or HTML and JavaScript. It supports passing data to and from the Retool app, and 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 Retool's component library. You can also use an IFrame component to embed web pages or the HTML component to include custom HTML and CSS.

Properties

Available properties for Custom Component. You can write JavaScript almost anywhere in Retool to manipulate or read information about components.

NameDescriptioniframeCode

The HTML, CSS, and JavaScript to render.

model

The source data to pass into the component.

allowDownloads

Whether to allow file downloads.

allowForms

Whether to allow form submissions.

allowModals

Whether to allow modals via window.print(), alert(), confirm(), and prompt().

allowPopups

Whether to allow popups via window.open() and target="_blank".

allowFullscreen

Whether to allow fullscreen display via requestFullScreen().

allowCamera

Whether to allow camera use via getUserMedia().

allowMicrophone

Whether to allow microphone use via getUserMedia().

allowGeolocation

Whether to allow geolocation use via getCurrentPosition() and watchPosition().

allowPayment

Whether to allow payments via PaymentRequest().

allowTopNavigation

Whether to allow links and code to navigate to away from the current app.

allowSameOrigin

Whether to allow the use of browser storage, such as LocalStorage and cookies, by enabling allow-same-origin on the frame. Refer to the MDN iframe documentation for more information.

Set the SANDBOX_DOMAIN and ALLOW_SAME_ORIGIN_OPTION env variables to enable this option. Visit the environment variable documentation for more information.

Methods

Methods for interacting with Custom Component. You can write JavaScript almost anywhere in Retool and use methods to manipulate data or components.

NameDescriptionscrollIntoView(options: any)

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

updateModel(model: object)

Update the model value.

reload()

Reload the iframe.