How to create custom components in Retool?

Creating Custom Components in Retool

Retool provides a flexible environment for building custom components that can extend its capabilities beyond the default set of tools. Below, you'll find a detailed guide on creating custom components within Retool, allowing for an enhanced and tailored data manipulation experience.

Prerequisites

• Ensure you have a Retool account with access to the appropriate project or application where you want to add a custom component.
• Basic understanding of JavaScript, HTML, and CSS, as Retool custom components rely on these technologies.
• Familiarity with Retool's UI and how it manages data and variables.

Accessing the Custom Component Interface

• Log in to your Retool account and open the application where the custom component will reside.
• Navigate to the left panel, where you can find a list of components.
• Select the Custom Component option from the component list and drag it onto the canvas where you plan to incorporate it into the app.

Configuring the Custom Component

• Click on the custom component placed on the canvas to display its settings in the right panel.
• Here, you'll find two main sections: Script and Style. Start by writing the JavaScript code within the Script editor.
• Within the Script section, write JavaScript code to define the logic and data handling for your component. Use Retool's built-in functions and properties to access data, manipulate state, and interact with other components.
• Example:

      const { data, selectedRow } = inputs.table1;
      return (
        <div>
          <p>You have selected: {selectedRow ? data[selectedRow].name : 'none'}</p>
        </div>
      );
      

• In the Style editor, you can customize the look of your component using CSS. This is useful for aligning the design with your app's overall aesthetics.

Integrating with Retool Data Sources

• To enable dynamic interaction with your data, leverage Retool's data sources by referencing them in the custom component's script using the inputs object provided.
• Bind data to your component by accessing data source queries or other components' properties. This ensures that your custom component reflects the latest data changes.
• For example, reading a text input's value:

      const userInput = inputs.textInput1.value;
      

Communicating with Other Components

• Custom components can emit events or trigger changes in other components through Retool’s state management system.
• Use the outputs object to send data back to Retool:

      outputs.sampleOutput.next('New Data');
      

• To watch for changes in your component and react accordingly, define watchers on Retool’s side or use JavaScript event listeners.

Testing Your Custom Component

• Once the logic and styling of the component are in place, use the preview function in Retool to test its functionality.
• Ensure that your component behaves as expected, interacts with data correctly, and responds to user events as intended.
• Make adjustments in the code or styles as necessary to resolve any issues or enhance performance.

Documentation and Comments

• Document your code within the custom component using comments to ensure that its functionality and purpose are clear to other team members or for future reference.
• Provide detailed information about any complex logic, data handling, or interaction with other components.

Deploying the Component

• After ensuring correct functionality and appearance, your custom component is ready to be used within your Retool application.
• If applicable, demonstrate the component's use to other team members or stakeholders, highlighting its benefits and functionality.
• Maintain and update the component as needed, especially if underlying data sources or application needs change over time.

By following this guide, you can effectively create, integrate, and maintain custom components in Retool, enhancing the application’s interactivity and utility tailored to your specific needs.