top of page

Building Your First Retool App.

Overview

 

Retool provides a powerful way to quickly build internal tools, even if you don't have extensive front-end development experience. This guide will walk you through the basics of creating your first Retool application, connecting to an existing enterprise application, and building a user-friendly interface for interacting with your data. 

 

Here's a step-by-step outline of the process:​

 
1. Sign Up and Create a New App
​

  • Sign Up for Retool: If you haven't already, head over to the Retool website and sign up for a free trial or a paid account.

​​

  • Create a New App: Once logged in, click the "Create new" button and choose "App". Give your application a descriptive name (e.g., "Customer Management Portal")

 
2. Connect to Your Enterprise Application (Data Source)
​

  • Add a Resource: In your new app, navigate to the "Resources" tab (usually found at the top). Click "Create new" and choose the type of resource that matches your enterprise application. Retool supports a wide range of databases (PostgreSQL, MySQL, MongoDB, etc.) and APIs.

​​

  • Configure the Connection: Enter the necessary connection details for your data source. This might include:

    • Host: The server address of your database or API.

    • Port: The port number your database is listening on.

    • Database Name (if applicable): The name of the database you want to connect to.

    • Username and Password: Your credentials to access the data source.

    • API Base URL (if applicable): The main URL for your API.

​​

  • Test the Connection: Retool provides a "Test Connection" button to verify that you can successfully connect to your data source. Make sure this test passes before moving on.

​​

  • Save the Resource: Once the connection is configured and tested, click the "Save" or "Create resource" button.

 
3. Build the User Interface (UI)
​

  • Drag and Drop Components: Retool's interface is designed for rapid development. In the main editing area, you'll see a component library on the right side. Drag and drop the following components onto the canvas:

    • Table: To display a list of customers.

    • Text Input: For searching by customer name or ID.

    • Button: To trigger the search.

    • Form: To display and edit the selected customer's details.

​​

  • Arrange and Style: Position the components on the canvas in a logical layout. You can adjust their size, colors, and other properties using the options in the right-hand panel.

 

4. Query Your Data
​

  • Create a Query: On the bottom of the screen, you'll find the query editor. Click "Create new" and select the resource you created in Step 2.

  • Write Your Query:

    • For the Table: Write a query to fetch customer records. For example, in SQL, this might be:

​

SELECT * FROM customers WHERE name ILIKE '%{{textinput1.value}}%'

 

(This example assumes you named your text input textinput1 and allows searching by name). For an API, you would configure the endpoint and any necessary parameters.

​

  • For the Form: Create another query that fetches the details of a single customer based on a unique identifier (e.g., customer ID) when a row in the table is selected. An example SQL query could be:

 

SELECT * FROM customers WHERE id = {{table1.selectedRow.data.id}}

 

(This assumes you named your table table1).

​

  • Trigger the Query: In the Table component's settings, set the "Query" property to the query you created for fetching the list of customers. You can set it to "Run query automatically when inputs change" if you want the search to update live as the user types. Otherwise, you can trigger it with the search button. In the onClick event handler, add the code query1.trigger(); assuming you named your query query1.

​​

  • Populate the Table: The table component should automatically populate with the results of your query. Make sure the columns in the table match the fields returned by your query.

 

5. Enable Editing (Updating Data)
​

  • Connect the Form: Select your form. In the right-hand panel, set the "Data Source" property to the second query, which pulls data for a specific customer.

​​

  • Enable Input Fields in the Form: Ensure the form is set up to edit the relevant customer fields (e.g., name, email, address).

​​

  • Create an Update Query: Create another query that will update the customer record in your database or API. For SQL, this would be an UPDATE statement, like:

​​

UPDATE customers SET name = '{{form1.data.name}}', email = '{{form1.data.email}}'

WHERE id = {{table1.selectedRow.data.id}}

 

(This assumes you named your form form1). For an API, you would use a PUT or PATCH request.

​

  • Add a "Save" Button: Drag a button component onto your app. In its onClick event handler, add the code:

     

JavaScript

query3.trigger({

onSuccess: function(data) {

// Optionally, refresh the table data after successful update

query1.trigger();

utils.showNotification({title: "Success", description: "Customer updated", notificationType: "success"});

}

});

 

(This assumes you named your update query query3 and the query to refresh the table query1).

 

6. Test and Deploy
​

  • Preview: Use the "Preview" button to test your app. Search for customers, select a customer, edit their details, and save your changes.

​

  • Error Handling: Add error handling to your queries (using the onFailure event handler) to gracefully handle any issues with database connections or data updates.

​​

  • Deploy: Once you're happy with your app, click the "Deploy" button to make it live. You can then share the app's URL with your team.

 

Conclusion

 

You've now built a basic Retool application that connects to your enterprise application, displays data, and allows for updates. Retool offers many more features and components to explore, enabling you to build complex and powerful internal tools. Explore the documentation and experiment with different components to take your Retool skills to the next level!

​

bottom of page