How to build a dashboard with Retool
In this tutorial you will learn how to build a dashboard using Retool.
Last updated
In this tutorial you will learn how to build a dashboard using Retool.
Last updated
Retool enables you to quickly build and deploy internal apps for your team. Connect to your databases and APIs, assemble UIs with drag-and-drop building blocks like tables and forms, and write queries to interact with data using SQL and JavaScript.
The following steps explain, how to build a dashboard on retool with IoT data from your akenza environment.
As a first step, log in to your retool environment, create a new app and give a name to it.
As a next step, drag a Text Component into the Header view.
Drag a Tabbed Container Component into the Main view and resize it to full width.
If you want to copy the example layout, you can follow the next paragraph. Alternatively, you can of course make your own layout.
Inside the tabs of the tabbed container, you need the following components:
The first tab (By default called “View 1”) should contain five containers.
Two Containers should have a Chart and a Text.
One Container should have two Text and one Progress Circle Component.
One Container should have two Text and one Progress Bar Component.
The last Container should have three Text Components.
The second tab should contain only a Mapbox Map.
The third tab should contain one Key Value, one Text, and one Image Component.
Click the Text Component in the Header view. The Inspector Tab will open up on the right side of your screen. To modify the behavior of a component, modify its respective variables in the inspector tab. The Value of the text for example is set to "👋 Hello {{ current_user.firstName || 'friend' }}!". This is similar to the templating syntax of akenza. Change firstName to lastName in the value template and see the change in your text component live. Using this knowledge to play around with the components you added until you are satisfied with their variables.
In order to connect a device on akenza, follow these steps in the chapter Connect a Device.
If you do not have a device, or yours isn’t added to the device type library, you can check out the device simulator.
To access the Akenza API, an API Key is needed. To generate an API Key, check out our documentation.
Once the API Key is created, switch to the retool project. After checking the API documentation, we can see that a “get device by id” request would give us access to the static fields of the device. In order to make a request type, make sure the bottom panel is visible (the button for this is on the center top of your screen). Select New -> Resource Query. Give your new request a name like “getDevice”. Set the request type to Get and fill in the URL: https://api.akenza.io/v3/devices/{{akenzaDeviceId}} Make sure to replace the variable with the actual device Id value. You can find this value in the asset overview of your device. Set a header called x-api-key to the api key you copied earlier. Select Save and Run. You should get back a Query ran successfully with the JSON-response.
If a custom Field for the requested device has been set in akenza, the response contains an array called customFields which has an entry that contains a key-value pair called “GPS_COORDINATES” with the data.
Collapse the bottom panel and click the mapbox map added earlier.
In the inspect mode you can see that the map is awaiting a latitude and longitude value. These values describe where the map is pointed at. To point it at, for example, the Akenza Headquarters in Zurich enter 47.414 for the latitude and 8.533. To point it at the device’s location you can use variables to access the data we received from the API by accessing the request name. For example to get the latitude enter this:
{{ getDevice.data.customFields[0].GPS_COORDINATES.latitude }}
You can use the same principle to add the longitude.
In order to see where exactly the device is with a flag inside of the map, the Points value has to be set to
{{[{ lat: getDevice.data.customFields[0].GPS_COORDINATES.latitude, long: getDevice.data.customFields[0].GPS_COORDINATES.longitude },]}}
The same method can be used to hydrate your other components with data.
Use the “transformer” inside of requests to go from this chaos:
{{[{ lat: getDevice.data.customFields[0].GPS_COORDINATES.latitude, long: getDevice.data.customFields[0].GPS_COORDINATES.longitude },]}}
to a little more orderly:
{{[{ lat: getDevice.data.lat, long: getDevice.data.long },]}}
