We extend our gratitude to all participants who joined our Community Call on January 25, 2024. The session proved to be an enriching experience, covering various aspects of the ToolJet features. Here’s a summary of the topics discussed:

Banner Image for Access A User Location Community Call

Understanding RunJS Query

We went through the basics of creating a Run JavaScript Code query in the App-Builder. To create a query, you simply have to click on the + Add button on the top bar of the Query Panel and select Run JavaScript code. Once done, you’ll get to see a code editor where you can enter JavaScript code.

Decoding Geolocation API Documentation

Then we went through the official documentation for Geolocation API(Doc – Geolocation API) and mainly went through two functions: A mandatory success callback: If the location retrieval is successful, the callback executes with a GeolocationPosition object as its only parameter, providing access to the location data. An optional error callback: If the location retrieval is unsuccessful, the callback executes with a GeolocationPositionError object as its only parameter, providing access information on what went wrong.

Creating the JavaScript Query for User’s Location

We then wrote a simple Javascript query/code to return the User’s location:

function getCoordinates() {
return new Promise(function(resolve, reject) {
navigator.geolocation.getCurrentPosition(resolve, reject);
});
}

async function getAddress() {
// notice, no then(), cause await would block and
// wait for the resolved result
const position = await getCoordinates();
let latitude = position.coords.latitude;
let longitude = position.coords.longitude;

return [latitude, longitude];
}

return await getAddress()

Utilizing the Inspector for Data Insight

Here, we demonstrated how the Inspector can be used to make sure that the query we were running is properly returning data to our application.

Inspector for Data Insight

Integrating Location Data with the Map Component

Then, we proceeded to leverage the location data obtained through our JavaScript query, seamlessly integrating it into our Map component to showcase real-time location.

Integrating Location Data with the Map Component - javascript

Demo Application

We went through a demo application that helps in managing drivers. This would be an ideal use-case of the topic covered in this community call.

demo application

Closing Notes

We hope you found this community call informative and helpful. Since this call happens every month, we’re open to topics for future sessions. Your feedback matters — let us know how we can make them even better. You can connect with us through our social media links provided below this article. We truly value your insights.

Resources:

Stay connected with ToolJet: