Custom Component
This method for building custom components is deprecated. Use the custom component libraries feature for developing custom components.
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.
The HTML, CSS, and JavaScript to render.
Render the component with quirks mode if checked (otherwise render in non-quirks mode). See https://developer.mozilla.org/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode for more details.
The source data to pass into the component.
Whether to allow file downloads.
Whether to allow form submissions.
Whether to allow modals via window.print(), alert(), confirm(), and prompt().
Whether to allow popups via window.open() and target="_blank".
Whether to allow fullscreen display via requestFullScreen().
Whether to allow camera use via getUserMedia().
Whether to allow microphone use via getUserMedia().
Whether to allow geolocation use via getCurrentPosition() and watchPosition().
Whether to allow payments via PaymentRequest().
Whether to allow links and code to navigate to away from the current app.
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.
Scrolls the canvas or parent container so that the selected component appears in the visible area.
Update the model value.
Reload the iframe.