How to create master-detail views in Retool?

 

Creating Master-Detail Views in Retool

 

A master-detail interface allows users to select an item from a list (the "master" view) and see the details of that item in a separate panel (the "detail" view). In Retool, building this type of functionality involves creating a combination of table components, detail panes, and queries to bind them together. Here's a step-by-step guide to achieving this.

 

Prerequisites

 

• Ensure you have access to a Retool account and an existing workspace to build upon.
• Basic knowledge of how to create queries and work with Retool's component library.
• Access to the data source you'll be using, whether it's an SQL database, a REST API, or another type of data source supported by Retool.

 

Setting Up the Data Source

 

• Log in to your Retool dashboard and navigate to the desired application or create a new one.
• Add a new data source by clicking on

  Resource

  in the main menu, then

  Create New

  to link to the database or API you plan to use for your master-detail views.

 

Creating the Master View with a Table

 

• Drag a

  Table

  component from the component panel onto your Retool interface. This will serve as your master view, displaying the list of items.
• Bind the table to a data query by creating an SQL query or API call that fetches the master list data. For example, an SQL query could be: SELECT * FROM items;.
• Ensure the table's data field is set to the name of your query (e.g., {{ query.data }}).
• Customize the table columns to reflect essential fields such as item name, ID, or any relevant preview information.

 

Creating the Detail View Pane

 

• Add a

  Container

  component next to the table to keep your detail view organized.
• Within the container, place various components (e.g., text fields, numbers) to display detailed information about the selected item. For instance, you could drag in

  Text

  and

  Image

  components if your details include textual descriptions and images.

 

Linking the Master and Detail Views

 

• Create a new query or API call to fetch the details of the selected item. This query should filter the result set based on the selected item from the table. For example: SELECT * FROM items WHERE id = {{ table.selectedRow.data.id }}.
• In the detail components, bind each element to the appropriate fields in the detail query's result. For example, for a text component displaying an item description, you would use a binding like {{ detailQuery.data.description }}.
• Set the detail query to run automatically when the selection changes in the table. This can be done in the query's settings under "Triggers" to run on table selection change.

 

Adding Interactivity and Enhancements

 

• Implement a "loading state" in the detail view components to handle cases where the data is fetching, which improves user experience. Use conditional display logic in Retool's properties panel.
• Allow for edits in the detail view if needed. If making fields editable, ensure there's a corresponding update query to push modifications back to your data source.
• Consider using other components such as buttons for additional actions like "Delete" or "Refresh" on the detailed item, and wire these to respective queries.

 

Testing and Validation

 

• After setting up the master-detail views, test the application by selecting different rows in the table and verifying that the correct details are displayed.
• Assess the application's response time and ensure that all queries execute as expected without significant delay.
• Make sure any data updates or deletions behave correctly with live data integration.

 

Deploying and Sharing Your Dashboard

 

• Ensure all components and queries are set up correctly and in line with your deployment requirements.
• Publish your Retool app by selecting the appropriate deployment option and ensure it is accessible to your designated audience by adjusting user permissions as necessary.
• Share your creation with team members or stakeholders, providing instructions on how to interact with the master-detail views.

 

By following these steps, you can effectively build a master-detail interface in Retool, enabling users to seamlessly navigate between a summary view and a detailed view of the selected data. Test thoroughly to ensure responsiveness and accuracy in data representation.