Forem: Asjad Khan

Create a Code Explanation Tool using ToolJet and Gemini API

Asjad Khan — Tue, 28 May 2024 13:01:51 +0000

Introduction

This tutorial will walk you through creating a code explanation tool using ToolJet, a powerful low-code platform, and the Gemini API, an advanced language model API. This tool will allow users to input code snippets and receive detailed explanations, enhancing their understanding of various programming concepts.

Prerequisites

Before we begin, make sure you have the following:

ToolJet (https://github.com/ToolJet/ToolJet) : An open-source, low-code platform designed for quickly building and deploying internal tools. Sign up for a free ToolJet cloud account here.
Gemini API : A cutting-edge artificial intelligence (AI) model created through a joint effort by various teams within Google. You can find more information and sign up at Gemini API to get an API Key, that will be used later in the tutorial.

Here’s the preview of what we’re going to build.

Once we have an idea of what we will build, let’s follow the steps below to start building our app step by step.

Setting Up the Gemini API

Once you have set up your account on Gemini API, navigate here to get your API Key. This key will be used to authenticate your requests.
The endpoint for the code explanation feature looks like this: POST 'https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash-latest:generateContent?key=YOUR_API_KEY'.

Now that we have our API Key let’s dive straight into creating the UI as the next step.

Creating the UI

Before creating the UI, let’s create a new ToolJet App. On your ToolJet dashboard, click on the Create an app button and name the app Code Explanation Tool.

Creating a custom UI is very simple with the help of ToolJet’s built-in components.

Let’s start by creating the app’s header.

Drag and drop the Icon and a Text Component from the components library on the right and rename them headerIcon and headerText, respectively.
Choose an icon of your choice and customise it, under the Styles section.
To configure the Text component, click on it and see the Properties Panel on the right.
Set its Data property to 'Code Explanation Tool', and under the Styles section, change its colour to light blue (Hex code: #4a90e2ff), font-weight to bold and font size to 25.

Renaming the components will help quickly access their data during development.

Add a Container component to the canvas. The Container component is used to group related components.
Drag and drop a Text component, and in the Properties section, set its Data property to 'Enter your code below'.
Next, below the text component, add a Textarea component, where we will add the code to get the explanation. Rename it to codeInput. Adjust the height and width of the component. To make the codeInput component look neat, adjust the Boxshadow properties in the Styles section.
Under the Properties section of the codeInput component, add the following code as the Default value:

function fun_name (param1 , param2) {
  return param1 * param2 ;
}

Now that we have our codeInput component in place, drag and drop a Button component right below it and rename it to getExplanation.
Under its Button text property, add ‘Get Explanation’.

Now, let’s add the portion that will display the explanation for the code that we provide.

Below the getExplanation button, add a Text component and under the Data property, add the text, ‘Explanation’; under the Styles section, change the Size to 14 and Weight to bold.
Below the text component, drag and drop the Textarea component; this is where the explanation of our provided code will be displayed. Rename it to codeExplanation. For now, let’s remove the Default value and keep it blank.

With that, our UI is now ready; it’s time to build the functionality of our application.

Creating Query

With ToolJet, we can create queries, allowing us to interact with the data stored in the data sources. In this tutorial, we will use ToolJet’s REST API query, to use the Gemini API for the code explanation feature.

Expand the Query Panel at the bottom and click the Add button to create a query.
Choose the REST API query and rename it to getCodeExplanation.
In the Request parameter, choose POST as the Method from the drop-down and replace the URL with: https://generativelanguage.googleapis.com/v1beta/models/gemini-pro:generateContent?key=<YOUR_API_KEY>
Replace <YOUR_API_KEY> with the API Key you generated while creating an account on Gemini API, as mentioned in the start of the tutorial.
In the Body section, toggle on Raw JSON and replace it with the following code:

{{`{
  "contents": [
    {
      "parts": [
        {
          "text": "This ${components.codeInput.value.replaceAll("\n"," ")}",
        },
      ],
    },
  ],
}`}}

In ToolJet, double curly braces {{}} can be used to pass custom code and access data related to components and queries.

To ensure that the query runs every time the application loads, enable Run this query on application load?
Click on the Run button to run the query, and you can see that the explanation of the default value code we entered in our codeInput component is provided.

Binding the Query and the Query Data to the Components

As our query is running successfully and we are fetching the code explanation from Gemini API, it’s time to bind the query to our getExplanation button and display the data in the codeExplanation component.

Select the getExplanation button, under the Properties section, and click the New event handler button to create a new Event.
Choose On click as the Event, Run Query as the Action, and select getCodeExplanation as the Query.

This event will ensure that whenever we click the getExplanation button, the getCodeExplanation query is being run.

Now, let's display the code explanation in our codeExplanation component.

Select the codeExplanation component, and under the Default value property, add the following code: {{queries.getCodeExplanation.data.candidates[0].content.parts[0].text.replace(/\*\*/g, '').replace(/\*/g, '')}}.
Next, click on the getExplanation button, and if you followed the above steps correctly, you should now be able to see the explanation of the provided code displayed in the codeExplanation component.

Our app is now ready; try adding different pieces of codes in the codeInput component, and to generate an explanation, click on the getExplanation button to see the explanation being displayed codeExplanation component.

Conclusion

Congratulations! You've successfully created a code explanation tool using ToolJet and the Gemini API. This tool can help users understand complex code snippets, making learning and debugging more efficient. With ToolJet's low-code capabilities and Gemini's powerful language model, you can further enhance this tool by adding features like code formatting, language detection, and more.

To learn and explore more about ToolJet, check out the ToolJet docs or connect with us and post your queries on Slack. Happy coding!

Create a Weather App using ToolJet and OpenWeatherMap API

Asjad Khan — Thu, 23 May 2024 13:07:01 +0000

Introduction

In this tutorial, we will create a weather app using ToolJet and OpenWeatherMap. By the end of this guide, you'll have a functional app that fetches and displays weather data for any city using the OpenWeatherMap API.

Prerequisites:

Before we start, make sure you have:

ToolJet (https://github.com/ToolJet/ToolJet) : An open-source, low-code platform allowing you to build internal tools and applications rapidly. If you don’t have an account, sign up for a free ToolJet cloud account here.
API Key from OpenWeatherMap : Create an account on OpenWeatherMap to generate an API Key that will be used while we create queries to fetch the weather data.

Here’s a quick preview of the app that we will be building by the end of this tutorial:

Before creating the UI, let’s create a new ToolJet App. On your ToolJet dashboard, click on the Create an app button and name the app Weather App.

Once the app is created, we can start with the UI.

Creating the UI

Creating a custom UI is straightforward with the help of ToolJet’s built-in components.

Let’s start by creating the app’s header.

Drag and drop the Icon and a Text Component from the components library on the right and rename them to headerIcon and headerText, respectively.
To configure the Text component, click on it and see the Properties Panel on the right.
Set its Data property to 'Weather App', and under the Styles section, change its colour to light blue (Hex code: #4a90e2ff), font-weight to bold and font size to 25.

Renaming components is an effective way to refer to components as the app grows.

Once the header is ready, drag and drop a Text Input component onto the canvas. This is where we will be entering our desired locations. Rename it to locationInput.
For locationInput, change Label to Enter Location and Placeholder to Enter Location. Let’s set the default value to 'San Francisco'.
Next to locationInput component, add a Button component, rename it to getWeatherButton, and change the Button text property to Get Weather from the properties panel. From the Styles tab, change the Background color of the button to blue (Hex code: #4a90e2ff).

Next we will create the layout where we will be displaying the weather data.

Drag and drop a Container component. Containers are used to group related components.
Add an Image component inside the Container and rename it to weatherImage. This component will be used to display the weather through an image later in the tutorial. For now, let’s add a dummy image. In the URL section, add the URL, http://openweathermap.org/img/wn/02d@2x.png.
Next, add two Text components and rename them to weatherDescription and locationText, respectively. Add some dummy text under their Data property. The dummy data will be made dynamic as the tutorial progresses.
For both the text components, in the Styles section, change the font size to 25, font-weight to bold and alignment to center.

We will also display a particular location's humidity and wind speed.

Drag and drop the Image component and rename it to humidityIcon. In the URL property, let’s use the following URL for now: https://cdn.iconscout.com/icon/premium/png-512-thumb/humidity-14-532297.png?f=webp&w=512.
Place two Text components next to the Image component and rename them to humidityPrecent and humidityText respectively. In the Styles section, set the font weight to bold for both.
For the humidityPercent and humidityText components, add some dummy data in the Data section of the Properties panel. As the tutorial progresses, we will be fetching the humidity data dynamically.

To add wind-speed data, copy the Image and Text components and paste them beside the humidity section.
Rename the Image component to windspeedImage and the Text components to windpseed and windspeedText, respectively.
Select the windspeedImage component, and in the URL section, add the following URL for the image: https://cdn.iconscout.com/icon/premium/png-512-thumb/wind-336-974466.png?f=webp&w=512
Select the windspeed component, add some dummy data in the Data property. In the Styles tab, set the font weight to bold.
For the windspeedText component, add some dummy data in the Data property. In the Styles tab, set the weight to bold.

With the above steps, our UI is now ready. It’s time to use OpenWeatherMap API to fetch the weather data for our desired location.

Use OpenWeatherMap API to Fetch Weather Data

1. Creating the Query

To fetch the weather data from OpenWeatherMap API, we will use ToolJet’s queries.

Follow the steps below to create a query and fetch the data.

Expand the Query Panel at the bottom and click the Add button to create a query.
Choose the REST API query and rename it to getWeatherData.
Since we will just be fetching the data, in the Request section, choose the Method as GET from the dropdown, and add the following as the URL: https://api.openweathermap.org/data/2.5/weather?q=<LOCATION>&appid=<APP_ID>.
Replace with the following code: {{components.locationInput.value}}; since we have set the default value to 'San Francisco', the location will be replaced with 'San Francisco' for now.
Replace the with the API Key that you generated while creating an account on OpenWeatherMap API.
To ensure that the query runs every time the application loads, enable Run this query on application load?
Click on the Run button to see that the weather data is being fetched from the OpenWeatherMap API for the city of San Francisco.

In ToolJet, double curly braces are used to access or refer dynamic values.

2. Adding Event to locationInput and getWeatherButton Components

Now that we’re successfully configured the query, we will bind this query to our locationInput and getWeatherButton components.

Select the locationInput component. In the properties panel, click on the New event handler button, set Event as On enter pressed, choose Action as Run Query, and select getWeatherData as the query.
To test it, let’s change the location to 'London' and press enter. If you followed the above steps correctly, the query should fetch the data related to London.

We would also want the query to run once we enter a location and press the Get Weather button. To do so, follow the steps below:

Select the getWeatherButton button, and click on New event handler.
Choose the Event as On click, Action as Run Query, and select getWeatherData as the Query.
If you followed the above steps correctly, you can now run the query after clicking on the Get Weather button.

3. Binding the Data to the Components

Since we can now fetch the queries by pressing enter and clicking on the Get Weather button, we will bind the fetched data to our UI to make our app dynamic.

Let’s start with the weatherImage component first.

Select the weatherImage component, and replace the URL with http://openweathermap.org/img/wn/{{queries.getWeatherData.data.weather[0].icon}}@2x.png. This will ensure, that the image changes accordingly with the weather of a particular city.
Next, select the weatherDescription component and replace the text under the Data property with the following code: {{Math.round((queries.getWeatherData.data.main.temp - 273.15) * 10) / 10}} °C, {{queries.getWeatherData.data.weather[0].description}}. Here, we’re converting the temperature to degrees Celsius and adding the weather description.
Select the locationText component, and add the following code to the Data property: {{queries.getWeatherData.data.name}}.

If you followed the above steps correctly, you should see the image, temperature, weather description and city name changing according to the location we’re adding to the locationInput component.

The last step would be to display the actual humidity percentage and the windspeed of the entered location.

Select the humidityPercent component, add {{queries.getWeatherData.data.main.humidity}}% under the Data property. This will give the humidity percentage of the entered location.
Next, click on the windspeed component, and add {{queries.getWeatherData.data.wind.speed}} Km/h under the Data property. This will display the wind speed of the entered location.

If you have followed all the steps mentioned above, you can see that all of the component data gets updated after running the query according to the location we add.

To make sure that our app displays a loader whenever the data is being fetched for the new city, select the Container component and in the Loading state property, click fx and add {{queries.getWeatherData.isLoading}}.

Conclusion

You've successfully built a weather app using ToolJet by consuming the OpenWeatherMap REST API. This simple app demonstrates how straightforward it is to create functional apps in ToolJet. To know more about what ToolJet can do, visit the ToolJet docs or join us and post your queries on Slack.

Build an Employee Engagement Survey Dashboard using ToolJet

Asjad Khan — Tue, 21 May 2024 13:03:24 +0000

Introduction

Employee engagement is a critical factor in the success of any organization. It reflects how committed and motivated employees are towards their work and the organization’s goals. To effectively measure and understand employee engagement, organizations often conduct surveys that capture valuable insights from their workforce. However, collecting data is only the first step. Analysing and presenting this data meaningfully is essential for making informed decisions that enhance employee satisfaction and productivity.

This tutorial will walk you through creating an Employee Engagement Survey Dashboard using ToolJet, an open-source low-code platform. By the end of this tutorial, you will have a fully functional dashboard that visually represents your survey results, enabling you to identify trends, areas of improvement, and actionable insights.

Prerequisites:

ToolJet (https://github.com/ToolJet/ToolJet) : An open-source, low-code platform for quickly building and deploying internal tools. Sign up for a free ToolJet cloud account here.
Basic understanding of JavaScript : Familiarity with JavaScript concepts will help you follow the tutorial more effectively.

Here’s a quick preview of what our final dashboard looks like:

This tutorial will use the employee survey data which contains responses to various questions, such as job satisfaction, work environment, and compensation.

The employee data will be stored in a table in the ToolJet Database - ToolJet's in-built database that makes data management simple and efficient.

Designing the UI

With the help of ToolJet’s pre-built components, we will design a simple UI for our application.

The first step will be creating an app. Log in to your ToolJet account to access the dashboard. Click on Create an App button, and let's name our app Employee Engagement Survey.

Once our app is ready, let’s dive into creating the UI.

We will start by creating the header.

1. Creating the Header

Drag and drop the Text Component from the components library onto the canvas.
Rename the Text Component to headerText, and change its Data property to Employee Engagement Survey.
In the Styles section, change the font size to 25 and the font weight to bold.

Renaming components is an effective way to refer to components as we progress further while creating the application.

2. Creating the Dashboard Panel

In this step, we will create the layout of our dashboard. To design the dashboard, follow the steps below:

Drag and drop the Container component onto the canvas. Containers are used to group components.
Once we have the Container component in place, drag and drop three Chart components and place them next to each other. Rename them pieChart, barChart, and lineChart, respectively.
Enable Plotly JSON Chart Schema for all three. We will modify the JSON Description according to the desired chart later in the tutorial.
To add neat borders to the Chart components, adjust their Box shadow properties under the Styles tab.

Drag and drop the Table Component onto the canvas just below the charts. The Table will display the data stored in the ToolJet Database.
Rename the Table component to employeeSurveyTable.

The app UI is now ready. It’s time to add some functionality.

Fetching and Displaying the Data in the Dashboard

Let’s fetch and display our data in our ToolJetDB on the table.

1. Fetching the Data and Displaying it on the Table

Open the Query Panel at the bottom of the screen, click the +Add button and create a new ToolJet Database query and rename it to fetchEmployeeData.
Select employeeSurveyData as the Table name and List rows as the Operations.
To ensure that the query runs every time the application loads, enable Run this query on application load?
Click the Run button to see the data fetched from the employeeSurveyData database.

Once we can fetch the data, select the employeeSurveyTable component, and in the Data property, add the following code: {{queries.fetchEmployeeData.data}}. You should now see the data returned by the query on the Table component.

2. Displaying the Data through Charts

Next we'll display data on the charts.

a.) Pie Chart

First, we will display data based on “Job_Satisfaction” through a Pie Chart. We must convert the data we fetched into a Plotly JSON Chart Schema for a pie chart.

Expand the Query Panel, create a new Run JavaScript Code query, and rename it to pieChart.
In the code editor, paste the following code:

// run the fetchEmployeeData query
await queries.fetchEmployeeData.run();
const data = queries.fetchEmployeeData.getData();
function generatePlotlyPieChartData(data) {
  // Step 1: Extract and count job satisfaction values
  const jobSatisfactionCounts = data.reduce((acc, curr) => {
    const satisfaction = curr.job_satisfaction;
    if (acc[satisfaction]) {
      acc[satisfaction]++;
    } else {
      acc[satisfaction] = 1;
    }
    return acc;
  }, {});

  // Step 2: Prepare labels and values for the pie chart
  const labels = Object.keys(jobSatisfactionCounts);
  const values = Object.values(jobSatisfactionCounts);

  // Step 3: Generate Plotly pie chart schema
  const plotlyPieChartSchema = {
    type: 'pie',
    labels: labels,
    values: values,
    textinfo: 'percent',
    insidetextorientation: 'radial'
  };

  return plotlyPieChartSchema;
}

// Generate Plotly pie chart data
const plotlyPieChartData = generatePlotlyPieChartData(data);

// converts the plotlyPieChartData into a string
const finalData = JSON.stringify(plotlyPieChartData);

return finalData;

This code turns the data in the 'Job_Satisfaction' column into the format that is accepted by a Plotly pie chart.

To ensure that the query runs every time the application loads, enable Run this query on application load?
Click the Run button to see the data formatted for a pie chart.
Next, select the pieChart component and in the JSON Description of the pieChart component, replace the value under the "data" key with {{queries.pieChart.data}}.
If you follow the above steps correctly, you can see the data displayed via a pie chart.

For better understanding, in the Properties panel of pieChart, change the Title to Employee Satisfaction Index.

b.) Bar Chart

Next, we will display data based on “Work_Environment” through a Bar Chart. We must first convert the data we fetched into a Plotly JSON Chart Schema for a bar chart.

Expand the Query Panel, create another Run JavaScript Code query, and rename it to barChart.
In the code editor, paste the following code:

// run the fetchEmployeeData query
await queries.fetchEmployeeData.run();
const data = queries.fetchEmployeeData.getData();
function generateWorkEnvironmentBarChartData(data) {
  // Step 1: Extract and count job satisfaction values grouped by work_environment
  const workEnvironmentCounts = data.reduce((acc, curr) => {
    const workEnvironment = curr.work_environment;
    if (acc[workEnvironment]) {
      acc[workEnvironment]++;
    } else {
      acc[workEnvironment] = 1;
    }
    return acc;
  }, {});

  // Step 2: Prepare x (work environment levels) and y (counts) for the bar chart
  const x = Object.keys(workEnvironmentCounts);
  const y = Object.values(workEnvironmentCounts);

  // Step 3: Generate Plotly bar chart schema
  const plotlyBarChartSchema = {
    type: 'bar',
    x: x,
    y: y,
    marker: { color: 'blue' }
  };

  return plotlyBarChartSchema;
}

// Generate Plotly bar chart data
const plotlyBarChartData = generateWorkEnvironmentBarChartData(data);

// converts the plotlyBarChartData into a string
const finalData = JSON.stringify(plotlyBarChartData);

return finalData;

This code turns the data in the 'Work_Environment' column into the format that is accepted by a bar chart.

To ensure that the query runs every time the application loads, enable Run this query on application load?
Click on the Run button; you should now see the data based on the “work_environment” column and in a format accepted by a bar chart.
Next, in the JSON Description of the barChart component, replace the value under the "data" key with {{queries.barChart.data}}.
In the Properties panel, edit the Title to Work Environment Index for better reference.
If you follow the above steps correctly, you can see the data in the "Work_Environment" column displayed via a bar chart.

c.) Line Chart

Lastly, we will display data based on “Compensation” through a Line Chart. We must first convert the data we fetched into a Plotly JSON Chart Schema for a line chart.

Expand the Query Panel, create a new Run JavaScript Code query, and rename it to lineChart.
In the code editor, paste the following code:


// run the fetchEmployeeData query
await queries.fetchEmployeeData.run();
const data = queries.fetchEmployeeData.getData();
function generatePlotlyLineChartData(data) {
  // Step 1: Extract and count job satisfaction values grouped by compensation
  const compensationCounts = data.reduce((acc, curr) => {
    const compensation = curr.compensation;
    if (acc[compensation]) {
      acc[compensation]++;
    } else {
      acc[compensation] = 1;
    }
    return acc;
  }, {});

  // Step 2: Prepare x (compensation levels) and y (counts) for the line chart
  const x = Object.keys(compensationCounts);
  const y = Object.values(compensationCounts);

  // Step 3: Generate Plotly line chart schema
  const plotlyLineChartSchema = {
    type: 'scatter',
    mode: 'lines+markers',
    x: x,
    y: y,
    marker: {color: 'blue'},
    line: {shape: 'linear'}
  };

  return plotlyLineChartSchema;
}

// Generate Plotly line chart data
const plotlyLineChartData = generatePlotlyLineChartData(data);

// converts the plotlyLineChartData into a string
const finalData = JSON.stringify(plotlyLineChartData);

return finalData;

This code turns the data in the 'Compensation' column into the format that is accepted by a line chart

To ensure that the query runs every time the application loads, enable Run this query on application load?
Click on the Run button to see the data based on the “compensation” column and in a format accepted by a line chart.
Next, in the JSON Description of the lineChart component, replace the “data” value with {{queries.lineChart.data}}.
Edit the Title to Compensation Index in the Properties panel for better understanding.
If you follow the above steps correctly, you can see the data displayed based on "Compensation" via a line chart.

Conclusion

Congratulations, you have successfully created an Employee Engagement Survey Dashboard. You can customise this dashboard according to your needs by utilizing other pre-built components in ToolJet. To know more about the capabilities of ToolJet, look at the official ToolJet docs or connect with us on Slack.

Implement Advanced Chart Types like Heatmaps and Contour Plots

Asjad Khan — Tue, 14 May 2024 12:53:58 +0000

Introduction

This tutorial will explore implementing advanced chart types like Heatmaps and Contour plots using ToolJet’s Chart Component. ToolJet provides excellent tools for visualizing complex datasets. By the end of this tutorial, you will learn how to integrate these sophisticated visualizations into your applications. Heatmaps and contour plots are invaluable for revealing patterns and gradients in data. Let's dive into the steps to create these visual elements efficiently.

Prerequisites:

ToolJet (https://github.com/ToolJet/ToolJet) : An open-source, low-code platform for quickly building and deploying internal tools. Sign up for a free ToolJet cloud account here.
Basic understanding of JavaScript : Familiarity with JavaScript concepts will help you follow the tutorial more effectively.

Here’s what our final application will look like:

For this tutorial, we will use temperature variations during different times of the day across the week for London and Paris.

The weather data will be stored in two tables in the ToolJet Database.

Designing the UI

Creating a user-friendly UI is pretty straightforward with the help of ToolJet’s built-in components.

Let’s start by creating the header.

1. Adding the Header

Drag and drop the Text Component from the components library on the canvas.
Rename the Text Component to headerText, and change the Data property to London and Paris Weather Analysis.
In the Styles section, change the font size to 28 and the font weight to bold.

2. Adding the Chart Component

Since we will analyse the data through Charts, we will use ToolJet’s Chart Component.

Drag and drop a Chart component from the Components library.
Select the Chart component, rename it to heatmapChart and enable Plotly JSON Chart Schema, and in the JSON Description section.
Add the following code for a placeholder chart:

{
    "data": [
        {
            "z": [[1, 20, 30], [20, 1, 60], [30, 60, 1]],
            "x": ["Experiment 1", "Experiment 2", "Experiment 3"],
            "y": ["Trial 1", "Trial 2", "Trial 3"],
            "type": "heatmap"
        }
    ]
}

This will create a placeholder heatmap based on the data provided above. In the later sections of the tutorial, we will be able to create a heatmap based on our own data.

Next, drag and drop another Chart component next to the heatmap. Since this will be a contour, rename it to countourChart.
Enable the Plotly JSON Chart Schema and provide the following JSON Description:

{
"data": [
    {
      "x": [1, 2, 3, 4],
      "y": [1, 2, 3, 4],
      "z": [[1, 2, 3, 4], [2, 3, 4, 5], [3, 4, 5, 6], [4, 5, 6, 7]],
      "type": "contour"
    }
  ]
}

You should now see a contour plot next to the heatmap.

To know more about the examples available for the Chart component, visit ToolJet’s documentation for Charts.

The UI is now ready. It’s time to display some actual data through Heatmaps and Contours.

Analysing Data through Heatmap and Contour Plot

Let’s fetch London’s temperature variation data from our londonWeather DB and displaying it through the Heatmap. Here are the steps to implement it.

1. Fetching the Data for the Heatmap

Expand the Query Panel at the bottom of the screen and create a new query - rename it to fetchLondonWeather.
Select londonWeather as the Table name and List rows as the Operations.
To ensure that the query runs every time the application loads, in the Settings property toggle, Run this query on application load?
Click the Run button to see the data fetched from your londonWeather database.

2. Creating RunJS Query to Display the Data on the Heatmap

As we can now fetch our data, we must convert it into the format that the heatmap accepts.

Expand the Query Panel, create a new Run JavaScript Code query, and rename it to heatmap.
In the code editor, paste the following code:

//run the fetchLondonWeather query
await queries.fetchLondonWeather.run();
//get data from the fetchLondonWeather query
const data = queries.fetchLondonWeather.getData();

function convertDataToHeatmapJSON(data) {
    // Assuming each object has a time_day label and each weekday as a key
    const days = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday'];
    const times = data.map(item => item.time);
    const z = data.map(item =>
        days.map(day => item[day]) // Construct rows for each time slot
    );

    // Constructing the Plotly JSON
    const plotlyJSON = {
            x: days.map(day => day.charAt(0).toUpperCase() + day.slice(1)), // Capitalize day names
            y: times,
            z: z,
      type: 'heatmap',
    };

    return plotlyJSON;
}

const heatmapJSON = convertDataToHeatmapJSON(data);

const heatmapData = JSON.stringify(heatmapJSON); //converting the data to string

return heatmapData;

The JavaScript code above converts the data fetched from the londonWeather database to a Plotly JSON Chart Schema for a heatmap.

Click on the Run button to see the data formatted to three axes, named x, y and z.
Next, in the JSON Description of the heatmapChart component, replace “data” value with {{queries.heatmap.data}}.
If you follow the above steps correctly, you can see the data displayed via heatmap.

To make the heatmap more descriptive, replace the Title from the properties panel with London.

We will use similar data for a different city, Paris, to implement a contour plot. As mentioned in the tutorial, our data is stored in the parisWeather DB.

3. Fetching the Data for the Contour Plot

To fetch the data for Paris, we need to follow the similar steps mentioned in Step 1.

Expand the Query Panel, create a new ToolJet Database query, and rename it to fetchParisWeather.
Select parisWeather as the Table name and List rows as the Operations. Also, toggle the Run this query on application load?.
Click the Run button to see the data fetched from your parisWeather database.

4. Creating RunJS Query to Display the Data on the Contour Plot

Now that we can fetch our data, we must convert it into the format the contour plot accepts.

Expand the Query Panel, create a new Run JavaScript Code query, and rename it to contour.
In the code editor, paste the following code:

//run the fetchParisWeather query
await queries.fetchParisWeather.run();
//get data from the fetchDataParis query
const data = queries.fetchParisWeather.getData();

function convertToContourPlotJSON(data) {
    // Extract unique days and times assuming data is sorted by time
    const days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'];
    const times = data.map(item => item.time);

    // Construct the z matrix
    const z = data.map(item =>
        days.map(day => item[day.toLowerCase()]) // Access day values; ensure day keys are in lowercase
    );

    // Constructing the Plotly JSON for a contour plot
    const plotlyJSON = {
            x: days,   // Day labels
            y: times,  // Time labels
            z: z,     // Matrix of values
            type: 'contour',
    };

    return plotlyJSON;
}

const contourPlotJSON = convertToContourPlotJSON(data);

const contourData = JSON.stringify(contourPlotJSON); //converting the data to string

return contourData;

The JavaScript code above converts the data fetched from the parisWeather table to a Plotly JSON Chart Schema for a contour plot.

Click on the Run button to see the data.
Next, in the JSON Description of the contourChart component, replace “data” value with {{queries.contour.data}}.
Following the above steps correctly, you can see the data displayed via a contour plot.

Let’s update the Title of the contourChart Component to Paris.

Congratulations!

Awesome job completing this tutorial on Implementing Advanced Chart Types like Heatmaps and Contour Plots. This tutorial gives us an overview of using different chart types available on ToolJet to analyse data. To continue exploring other Chart options available on ToolJet, check out the ToolJet docs on charts.

Build a Todo Application Using ToolJet and ToolJetDB

Asjad Khan — Wed, 08 May 2024 14:59:59 +0000

This tutorial provides a step-by-step walkthrough for creating a Todo application with ToolJet. This application allows tracking of daily tasks, distinguishing between pending and completed activities. Throughout this tutorial, we will leverage ToolJet's built-in database (ToolJet DB) to manage the application's data.

Prerequisites:

ToolJet (https://github.com/ToolJet/ToolJet) : An open-source, low-code platform designed for quickly building and deploying internal tools. Sign up for a free ToolJet cloud account here.
Basic understanding of databases and JavaScript : Familiarity with database concepts and JavaScript will help you follow along more effectively.

Here’s what the final application will look like:

We’ll build the Todo App in three steps:

Setup: From your new application’s workspace, find the 'ToolJet Database' panel on the left sidebar click on ‘Create new table’ and then create a new app.
Building the UI: Using ToolJet's visual app-builder and pre-built components, we'll craft a UI for selecting languages and entering code.
Adding Functionality: This is where the major part of the application comes in. We will create queries to add, display, and update the status of our Todos.

Setup

Setting up the ToolJet Database is pretty simple. We will configure the database and create a new app after that.
Once you login, find the ToolJet Database panel on the left sidebar and click on the Create new table button.
Next, name the table that you’ve just created. For this tutorial, we are naming our database as todoList, and adding the following fields:
- id (Primary Key, Auto-increment)
- task (String)
- status (Boolean)
We will also add dummy data to our Database, which will be fetched first once we create a table for our application in the next steps.

Now that we have created our database table, click on the Apps icon in the left sidebar and select Create new app. Name your app Todo Application and click Create app to confirm the app creation.

We can start building the UI now that our basic setup is ready.

Building the UI

Creating an appealing UI with ToolJet is quick and simple with its visual app-builder and inbuilt components. We will start building the UI by creating the header first.

ToolJet makes UI creation quick and easy with its visual app-builder and pre-built components! We'll start by creating the header.

1. Designing the Header

Drag and drop an Icon component from the components library.
Click on the Icon component, navigate to its Properties Panel on the right and select the checklist symbol under its Icon property.
Place a Text component beside it and enter Todo Application under its Data property.
Next, change its font size to 24 and font-weight to bold.

2. Adding the Table Component

To display the todos, we will use the Table Component.

Drag and drop a Table component on the canvas. Let’s rename the Table component to todoTable.

3. Adding Text Input and a Logo Component

Once the Table component is added to list our todos, we would need an option to add a new todo. We would add a Text Input and a Logo Component that will act as a button to add a new todo.

Below the Table, drag and drop the Text Input component and name the component addTodoInput.
Next to the Text Input component, drop an Icon component choose IconCirclePlus as the icon and name it to addTodoButton.

Now that our UI is ready, let’s dive into adding functionality to our app.

Adding Functionality

ToolJet allows us to interact with the UI of an application that we easily create with the ToolJet DB. We will integrate the ToolJet Database we created earlier with our UI by creating queries.

1. Creating Query to Fetch the Data

Let's first fetch the dummy todo that we created earlier in the tutorial.

Expand the Query Panel at the bottom of the screen and click the +Add button to create a new query - rename it fetchTodos.
Choose todoList as the Table name and List rows as the Operation.
In Settings, toggle the Run this query on application? to run this query every time the app reloads.
Click on the Run Button to run the query - you can now see the dummy data that we had added earlier under Preview.

2. Binding the Fetched Data to todoTable

Once we successfully fetch the data, we would want to display it on our todoTable .

Open the Properties Panel of the todoTable, and in the Data property, enter {{queries.fetchTodos.data}}.
Now you should see the dummy data on our table.

3. Creating addTodo Query

Now that we can fetch the data in our table, it’s time to create a new query that adds the data to our ToolJet DB.

Expand the Query Panel at the bottom of the screen and click on the +Add button to create a new query - rename it to addTodos.
Choose todoList as the Table name, and Create row as the operation.
Since we will be adding a new todo, with two columns named Task and Status, in the Columns property, click + Add column, and perform the following:
- Choose task from the dropdown, and in the value, add the code: {{components.addTodoInput.value}}.
- For the second column, choose status from the dropdown and set its value to false.
Under Events, add a New Event Handler, select Query Success as the Event and Run Query as the Action. Under Action Options, choose fetchTodos as the Query. This will ensure that whenever a new todo is added, fetchTodos query is run again to fetch all the todos, including the newly added one.

4. Binding the addTodos Query to Components

Click on the addTodoInput component, and in the Properties Panel, create a new event by clicking on the New event handler button.
To add a new todo by just pressing enter after typing in the addTodoInput component, lets choose the Event as On enter pressed and the Action as Run Query. In the Action Options, choose the addTodos query. This will add a new todo(which is the value in the addTodoInput component) to the table once we press enter.

To clear the input area after pressing enter, create another On enter pressed event, with the action of Control component, choose the component as addTodoInput and Action to clear.

To also add the functionality of adding a new todo by clicking on the addTodoButton component(Icon component), add an event to run the addTodos query and another one to clear the addTodoInput component. But choose On click as the Action instead of On enter pressed.

Following the above steps, we can add new todos to our table.

5. Add Action Buttons to the Table

Now that we can add new todos to our table, we would want to add the functionality of changing their status to complete or deleting them.

Go to the Properties Panel of the todoTable.
Under the Action Buttons property, click the + New action button and create two new action buttons, Completed and Delete, respectively (The labels can be added in the Button Text property).

6. Updating the Status of the Todo

Whenever we complete our todos, we would want them to be marked as completed. To update the todo status, we will create a new query and name it updateTodo.

In the Query Panel, click the +Add button to create a new query - rename it to updateTodo.
Choose todoList as the Table name and Update rows as the operation.
Since we will update the todo by id, in the Filter property, choose id as the column, equals as the operation and the value to be {{components.todoTable.selectedRow.id}}.
In the Columns property, choose status from the dropdown and set its value to true.
After updating the status of our todos, we would want to fetch all the items again, so for that, we will create a new event in this query. For the new event, select Query Success as the Event and Run Query as the Action, and choose fetchTodos as the Query from the dropdown.

7. Deleting the Todo

After we have completed our pending Todo, we would want to delete it. To do so, let’s create a new query that deletes a particular Todo.

Create a new query from the Query Panel and name it as deleteTodo.
Choose todoList as the Table name and Delete rows as the Operation.
From the Filter option, choose id as the column, equals as the operation, and set its value to: {{components.todoTable.selectedRow.id}}
Under Events, add a New Event Handler.
Select Query Success as the Event and Run Query as the Action, choose fetchTodos as the Query from the dropdown.

8. Binding Update and Delete Queries to the Completed and Delete Action Buttons.

The final step for our application to be fully functional would be to make our Completed and Deleted buttons to work.

Go to the Properties Panel of todoTable, and select the Completed button, from the Action Buttons property, create a new event handler for this button and choose On click as the Event, Run Query as the Action and from the Action Options, choose the query as updateTodo.

Now, go to the Properties Panel of todoTable again, and select the Delete button, from the Action Buttons property, create a new event handler for this button and choose On click as the Event, Run Query as the Action and from the Action Options, choose the query as deleteTodo.

Now once you click on the Completed action button, the todo will be marked as completed and the status will be updated accordingly. Similarly, the Delete button will delete the todo.

Congratulations!

Great job on successfully building a fully functional Todo Application! Ready to dive deeper? Explore more possibilities and expand your skills with our extensive ToolJet docs.