DEV Community: ToolJet

Build An Audio Transcriber and Analyzer using ToolJet and OpenAI🎙️

Karan Rathod — Thu, 29 Aug 2024 12:00:00 +0000

In this hands-on tutorial, we’ll learn how to build a powerful audio transcriber and analyzer using ToolJet and Open AI. We'll quickly design an intuitive UI using ToolJet's pre-built components, and then use the platform's query builder to interact with Open AI for audio transcription and analysis.

By the end of this tutorial, we'll have a fundamental structure to build more sophisticated transcription and audio analysis applications.

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.
Open AI Account : Register for an Open AI account to utilize AI-powered features in your ToolJet applications. Sign up here.

Here's a quick preview of what we are going to build:

Before you begin, go to the Open AI Console, and copy your secret key. Next, login to your ToolJet account, locate the Data Sources section on the left sidebar, and configure Open AI as a data source using the secret key.

Once the data source is configured, create a new app called "Speech Insight" from the dashboard. And with that, we are ready to start building our application.

Step 1: Building the UI for the Audio Transcriber

Let's use ToolJet's visual app builder to design our UI.

For the app header, drag and drop an Icon component on the canvas. Navigate to its properties panel on the right, and select the IconBrandDingtalk icon.
Drop a Text component next to it, and enter "Speech Insight" under its Data property.
Change the color of both components to blue (#3E63DD). This will be the primary color scheme of our app, update the color scheme of the remaining components accordingly.

Place a Container component below the header. We will organize the upcoming components inside the Container component.
Rename it to mainContainer.

On the top left of the Container component, place a Text component with the label "Output".
Below it, add another Container and place two Text components inside it. We will use these components to display the transcribed text and feedback. Name them transcribedText and feedback respectively.
Add a File Picker component below it and rename it to uploader. Change its Accept file types property to "audio/*".
Place a Button component below it and rename it to analyzeButton and add an "Analyze Button" label to it.

Note: We are renaming key components to make them easier to reference in other parts of our application.

Finally, place four Statistics components on the right for Fluency, Pronunciation, Intonation, and Vocabulary scores.
Drop a Button component below it labeled "Copy Output" and rename it to copyButton.

The UI is now ready! Time to configure the interactions with Open AI.

Step 2: Interact With Open AI

In the below steps, we will go through the configuration to interact with Open AI using both REST API and ToolJet's native integration.

Expand the query panel at the bottom and click on the Add button to create a new REST API query. Rename the query to transcribe.
Enter the Open AI URL under the URL property: https://api.openai.com/v1/audio/transcriptions.
Add a new row under Header, enter Content-Type as the key and multipart/form-data as the value.
Add another key for Authorization. Enter Bearer <OPEN_AI_KEY> in the value.

Under Body, add file as the key and value as {{ components.uploader.file[0] }}. This will ensure the audio file selected in our uploader/File Picker component is sent.
Add model as the key and enter whisper-1 as the value.

Now if we select an audio file in the uploader/File Picker component and click on the Run button, we will see the transcribed audio as the output.

Once the audio is transcribed, we need to analyze it to provide a score. Let's use the native Open AI integration for this query.

Click on the Add button and add a new query. Select Open AI as the data source for this query. This is the same data source that we had set up at the beginning. Rename it to analyze.
Select Chat as the operation and Message as input, and enter the below prompt:

Based on the transcribed audio below, provide a 
JSON object in response with the following details:

   - Fluency (out of 10)
   - Pronunciation (out of 10)
   - Vocabulary (out of 10)
   - Intonation (out of 10)
   - A paragraph that gives general feedback 
on the transcribed text's quality and overall improvement suggestions.

   Return the object in the following format:

   {fluency: "...", pronunciation: "...", 
vocabulary: "...", intonation: "...", feedback: "..."}

   Transcribed text:
   {{queries.transcribe.data.text}}

In this prompt, we are using Open AI to perform a detailed analysis of the audio transcription. We are referencing the data returned by the transcribe query in the prompt along with other scoring criteria.

Running this query will result in the following output:

Both the queries are ready. As a final step, let's automate the process of triggering the analyze query every time the transcribe query is successfully executed.

Go back to the transcribe query, navigate to Events and add a new event handler.
Select Query Success as the Event, Run Query as the Action, and analyze as the Query.

By using events, we have set up the process of triggering the analyze query after the transcribe query is triggered and is ready with the output for analysis.

Step 3: Binding the Transcripts and Analysis to Components

Onto the final step. We have built our UI and also built queries to interact with Open AI. Now we can connect it all together and see the app in action.

Select the Analyze Audio button, navigate to its properties panel on the right and add a new event.
Select On click as the Event, Run Query as the Action, and transcribe as the Query.

Now every time the Analyze Audio button is clicked, it will trigger the transcribe query.

Select the Copy Output button and add a new event to it.
Select On click as the Event, Copy to clipboard as the Action, and {{queries.analyze.data}} as the Text.

This configuration will ensure that the analyzed output gets copied when you click on the Copy Output button.

Select the Text component that we had placed to display the transcript. Enter the following value under its Data property:
Transcript: {{queries.transcribe.data.text}}
Select the Text component to display the feedback. Enter the following value under its Data property:
Feedback: {{JSON.parse(queries.analyze.data).feedback}}

Note: We received a JSON string in response to our analyze query. Therefore, we need to parse it to construct a JavaScript object before displaying it.

Select the Statistics component for "Fluency" and enter the below value under its Primary value property:
{{JSON.parse(queries.analyze.data).fluency}}
Update the rest of the Statistics components using the same logic.

Our audio transcriber and analyzer is now fully complete. Upload an audio file and click on the Analyze Audio button to see the transcription, feedback, and scores getting populated in the UI.

Conclusion

In this tutorial, we learned how to create a complete audio transcription and analysis tool using ToolJet and OpenAI. We walked through designing an intuitive user interface, setting up API queries to interact with OpenAI, and binding the results to display transcriptions, feedback, and speech analysis scores.

To further customize the application, experiment with different UI components to enhance the user experience or integrate additional APIs to analyze other aspects of the audio, such as emotion detection or language translation.

To learn more, check out ToolJet's official documentation or connect on Slack for questions or queries.

Build an Advanced Web Scraping Tool Using ToolJet and Scraper API! 🚀 🛠️

Karan Rathod — Thu, 15 Aug 2024 12:35:05 +0000

Introduction

Scraping data can be tedious, especially when dealing with dynamic content. However, it becomes a lot more convenient if you can instantly preview the data scraped in the UI. ToolJet, combined with Scraper API, enables exactly that. This tutorial shows how to set up a script to scrape data using ToolJet and display the results in real time.

If you've worked with web scraping using Google Colab or tools like Selenium, you know the challenges. Here, we'll take a different approach using JavaScript web scraping, utilizing ToolJet’s visual app builder to manage the data flow.

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 knowledge of JavaScript.

Begin by creating an application named TJ Web Scraper.

Step 1: Designing the UI to Display the Scraped Data

Let's use ToolJet's visual app builder to quickly design the UI.

Drag and drop a Container component onto the canvas.
Inside the container, place an Icon component on the left for the logo.
Place a Text component next to it and enter "TJ Web Scraper" under its Data property.
Place another Text component on the right to display the total count of scraped products.

We are using blue (hex code: #075ab9) as the primary color for this application; change the color scheme of all the components accordingly.

Add a Table component below the header and a Button component on the bottom-right of the canvas.

With that, our UI is ready in just a couple of minutes.

Step 2: Writing the JavaScript Code to Scrape Data

In this step, we will utilize the Scraper API to scrape the data from a sample eCommerce website. Here's a preview of the website:

The website has a few products with their images, titles, and prices. Additionally, it has a load more button to dynamically load more content.

To start, expand the Query Panel at the bottom, and click on the Add button to create a new Run JavaScript code query. Rename the query to scrapeData.
Set up the main scraping function: Create the runMainScript() function that will coordinate all the logic needed for scraping products.

function runMainScript() {
    const API_KEY = 'SCRAPER_API_KEY'; 

    // Main logic goes here
    // .....
}

Create a request helper: Build a helper function makeRequest() using axios to handle API requests, manage responses, and deal with errors efficiently.

async function makeRequest(url) {
    try {
        const response = await axios.get('https://api.scraperapi.com/', {
            params: {
                api_key: API_KEY,
                url: url
            }
        });
        return response.data;
    } catch (error) {
        if (error.response && error.response.status === 404) {
            throw new Error('404NotFound');
        }
        console.error(`Error making request to ${url}: ${error}`);
        return null;
    }
}

Extract product details: Define the parseProducts() function to gather relevant information (like title, price, and image) from the HTML content, filtering out incomplete data. This function uses the HTML selectors tailored to the target website.

function parseProducts(html) {
    const parser = new DOMParser();
    const doc = parser.parseFromString(html, 'text/html');
    const items = doc.querySelectorAll('.product-item');
    return Array.from(items).map(item => ({
        title: item.querySelector('.product-name')?.textContent.trim() || '',
        price: item.querySelector('.product-price')?.textContent.trim() || '',
        image: item.querySelector('img')?.src || 'N/A',
        url: item.querySelector('a')?.href || null
    })).filter(item => item.title && item.price);
}

Handle dynamic loading: The fetchProducts() function manages the initial page load and any additional AJAX requests, collecting all available products. It saves the total count in a ToolJet variable.

async function fetchProducts(pageUrl, ajaxUrl) {
    let products = [];
    let offset = 0;
    const initialPageHtml = await makeRequest(pageUrl);

    if (!initialPageHtml) return products;
    products = products.concat(parseProducts(initialPageHtml));

    while (true) {
        const ajaxHtml = await makeRequest(`${ajaxUrl}?offset=${offset}`);
        if (!ajaxHtml) break;
        const newProducts = parseProducts(ajaxHtml);
        if (newProducts.length === 0) break;
        products = products.concat(newProducts);
        offset += 12;
        console.log(`Scraped ${products.length} products so far...`);
        // Save the length of the total products fetched in a ToolJet variable
        actions.setVariable('totalProductsScraped', products.length);
    }
    return products;
}

Launch the scraping process: Implement the scrapeProducts() function to trigger the scraping and output the final count of products collected.

async function scrapeProducts() {
    const pageUrl = "https://www.scrapingcourse.com/button-click";
    const ajaxUrl = "https://www.scrapingcourse.com/ajax/products";
    let products = await fetchProducts(pageUrl, ajaxUrl);
    console.log(`\nTotal products scraped: ${products.length}`);
    return products;
}

Run the script and handle results: Execute the scraping process, save the data, and log a sample of the products for review and handles potential errors by setting an error variable.

scrapeProducts().then(products => {
    // Save all the products fetched from the eCommerce website
    actions.setVariable('scrapedProducts', products);
    console.log("\nScraped products stored in 'scrapedProducts' variable.");
    console.log(`Total products: ${products.length}`);
    console.log("\nSample of scraped products:");
    products.slice(0, 5).forEach(product => {
        console.log(`Title: ${product.title}`);
        console.log(`Price: ${product.price}`);
        console.log(`Image: ${product.image}`);
        console.log(`URL: ${product.url}`);
        console.log("---");
    });
}).catch(error => {
    actions.setVariable('scrapingError', error.message);
    console.error("An error occurred:", error);
});

Time to see the code in action : Invoke the runMainScript() function to start the entire process.

function runMainScript() {
    // Main logic
    // .....
}

runMainScript();

The code to scrape the data is ready. The above code for web scraping will have to be adjusted based on each target website.

Click on the Run button on the Query Panel and check all the logs that will appear in the browser console.

Step 3: Displaying the Scraped Data

With the UI and code set up, we can now focus on displaying the data on the Table component and triggering the code based on Button click.

Select the Button component, navigate to its properties and create a new event handler.
Select On click as the event, Run Query as the action, and scrapeData as the query.

Select the Table component, and under its Data property, enter {{variables.scrapedProducts}}.
Select the Text component in the header that is created to display the total count of the products that are scraped. Enter the {{"Total Products Scraped: " + variables.totalProductsScraped || 0 }} code under its Data property.

We've successfully linked the components with the query. Now, just click the Button component and watch as the data is scraped and displayed in the Table component.

Conclusion

Scraping data effectively requires overcoming challenges like dynamic content and pagination, especially when dealing with AJAX-loaded pages. Using ToolJet combined with Scraper API, you can simplify this process and gain the ability to instantly preview and manage your scraped data through a clean UI.

Unlike traditional approaches like Selenium web scraping or using Google Colab, this method integrates JavaScript web scraping seamlessly into your workflow with real-time visibility of your data. Building on this foundation, you can scale the tool to handle more complex scraping needs while maintaining an intuitive interface.

To learn more, check out ToolJet's official documentation or connect on Slack with any questions.💡

Build a Grammarly Alternative Using ToolJet and OpenAI in 10 Minutes📝

Karan Rathod — Wed, 07 Aug 2024 13:42:21 +0000

This tutorial will walk you through the process of creating a Grammarly alternative using ToolJet and OpenAI. We will use ToolJet's visual app builder to design an elegant user interface for our application. Then we will use the platform's low-code query builder to connect with OpenAI to perform detailed text analysis. The completed application will allow you to perform four operations:

List all grammatical errors in your text
Fix all grammatical errors and return the revised text
Provide a score for the text based on specific parameters: clarity, coherence, grammar, and engagement
Make the content sound more natural (ideal for transforming generic AI-generated content with a more organic tone)

Feel free to adjust the structure and functionality of the application to match your exact content-enhancement needs.

Check out this tutorial to learn how to build a QR Code generator using ToolJet and Python.

Here's a final preview of the application:

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.

OpenAI Account : Register for an OpenAI account to utilize AI-powered features in your applications by accessing APIs such as GPT for advanced natural language processing. Sign up here.

Since integration in ToolJet is very straightforward, you can use any other service instead of OpenAI to build the same application.

Step 1. Set up Your First ToolJet Data Source

In the steps below, we will set up the data source and create a new app.

Access the OpenAI Console and generate a new secret key. Remember to copy this key for later use.
Sign up for a free ToolJet cloud account if you haven't already and log in.
On the ToolJet dashboard, locate the Data Sources section on the left sidebar. Here, click on the Add button under the OpenAI plugin.
In the API Key field, paste the API key you copied from OpenAI Console and click on the Save button

Use the Test Connection button to ensure the OpenAI plugin is correctly connected to your ToolJet account.
Finally, click on the "Apps" icon in the left sidebar to navigate to the applications section.
Select "Create new app" and name your application "Wordly" (or anything else based on your use case), and click on "Create app" to finalize the app creation.

Step 2. Building the User Interface

We will start by creating a minimal UI for the application. The UI will take around five minutes to build. First, we will build the header section, then the input section, and finally, the output section, where we will display the results of the text analysis.

Header

For the Header, drop an Icon component on the empty canvas and place a Text component next to it. Set its Icon property to "IconTextWrap" and change its font size to 28.

We are using light blue ("#d9e2fc") as the primary color in this application. Update the color scheme of all the components accordingly.

Input Section

Drag and drop a Container component below the header and rename it to mainContainer.

We will rename important components like containers and input fields to ensure that we can easily refer and access component-related data inside the app builder.

Add a Text component at the top left of the container with the label 'Enter Text'.
Place a Dropdown component next to it with the label 'Operation'. Rename it to operationDropdown.
Set the dropdown's Option labels to: {{['List Grammatical Errors', 'Fix Grammatical Errors', 'Humanize Content', 'Provide Content Score']}}.
Set the Option values to: {{['listGrammaticalErrors', 'fixGrammaticalErrors', 'humanizeContent', 'provideAScore']}}.
Add a Textarea component below and rename it to textInput. - Add a Button component labeled 'GENERATE OUTPUT ⚡' and rename it to generateButton.
Add another Button component next to it labeled 'COPY 🗒️' and rename it to copyButton.

Output Section

Add a Text component labeled 'Output'.
Place another Text component below it to display the output. This component will display the data returned by the OpenAI queries.
Rename the Text component to output, and under its Data property, set Markdown as the type.

Step 3. Creating Queries to Interact With OpenAI

Next, we’ll create four OpenAI queries and a JavaScript query that will conditionally trigger one of the OpenAI queries based on the selected operation.

List Grammatical Errors:

Expand the Query Panel at the bottom of the screen and click on the Add button to create a new query
Rename this query to listGrammaticalErrors.
Select OpenAI as the Data Source and select Chat as the Operation. In the Message input field, enter the following prompt:

Find all grammatical errors in the given text. List each error with a heading and a description using Markdown. Include the following elements:

Header: Use a bold header with an appropriate emoji, and mention the error type.
Sentence: Provide the sentence which contains the error.
Description: Provide a brief description of the error and two line breaks after it.

Use these emojis for different types of errors:

Subject-Verb Agreement: 🧑‍🏫
Verb Tense: ⏳
Punctuation: 📝
Spelling: 🔠
Sentence Structure: 🏗️
(…please use other more names and related emojis if needed)

Ensure that each section clearly identifies the error type and provides a description.

Create Three More OpenAI Queries:

Create three more OpenAI queries - fixGrammaticalErrors, humanizeContent, and provideAScore.

Prompt for fixGrammaticalErrors query:

Review the following text, identify all grammatical errors, and provide a corrected version of the text. 

Provide the output in Markdown format.

Text: {{components.textInput.value}}

Prompt for humanizeContent query:

Rewrite the following content to make it sound more natural and human-written. 

Ensure the revised text is engaging, clear, and maintains the original meaning. 
Provide the output in Markdown format.

Text: {{components.textInput.value}}

Prompt for provideAScore query:

Analyze the following text and provide a score from 1 to 10 for 
each of the following categories: 
clarity, coherence, grammar, engagement, and overall quality. 

Present the results in Markdown format with the following structure and no header:
**Overall Quality🌟**: [score]

Show the next four paremeters inside a block quote
Clarity💡: [score]

Coherence🔗: [score]

Grammar✅: [score]

Engagement🔥: [score]

<insert a line break here>
-------------------------------------------------------------------

**Comments**:
Add comments below the results. 

Ensure to include a header before the results. 

Text: {{components.textInput.value}}

Create a Query to Conditionally Trigger the OpenAI Queries

Create a JavaScript query named triggerQuery with the following code:

switch (components.operationDropdown.value) {
    case 'listGrammaticalErrors':
        await queries.listGrammaticalErrors.run();
        break;
    case 'fixGrammaticalErrors':
        await queries.fixGrammaticalErrors.run();
        break;
    case 'humanizeContent':
        await queries.humanizeContent.run();
        break;
    case 'provideAScore':
        await queries.provideAScore.run();
        break;
}

This JavaScript query will check the selected operation from the operationDropdown component and run the relevant OpenAI query.

Step 4. Configuring Events and Other Functionalities

In the final step, we will configure the events and bind queries with components and see how it all comes together.

Update the Output on Query Success:

Add a new Query Success event handler to the listGrammaticalErrors query and select Action as Control Component.
Under Action Options, set the Component as output, Action as Set text, and Text as {{queries.listGrammaticalErrors.data}}.
Follow the same steps for the remaining three OpenAI queries; this will populate the output component with the returned data from the query.

Generate Button:

Select the Generate Output button, navigate to its properties panel on the right and create a new event under Events.
For the event configuration, select Action as Control Component. - Under Action Options, set the Component as output, Action as Clear.

This event will clear the output component every time the button is clicked.

Add another event to the Generate Output button to run the JavaScript query when it is clicked.

This event will trigger the JavaScript query. The JavaScript query will then trigger one of the OpenAI queries based on the selected operation from the dropdown, and the output component will be populated with the latest data.

Copy Button

Create a new event for the Copy button, select Copy to clipboard as the event, and enter {{components.output.text}} under its Text property.

With this setting, every time you click on the Copy button, the text inside the output component will be copied to the clipboard.

The functionality of our application is now fully configured. Enter some text in the input field, click on the Generate Output button and test the output for the available operations.

Conclusion

Congratulations! You've built a Grammarly alternative in less than 10 minutes. Using ToolJet's Continue adjusting the application's functionality to meet your specific text analysis needs. You can create new OpenAI queries for a variety of content enhancement scenarios such as changing the tone of the content, improving SEO, changing the language of the output content, improving clarity, etc.

To learn more, check out the ToolJet documentation or connect with us on Slack.

Creating a CSV to Graph Generator App Using ToolJet and Python Libraries 🚀

Karan Rathod — Thu, 25 Jul 2024 12:53:21 +0000

In this tutorial, we'll create a CSV to Graph Generator app using ToolJet and Python code. This app enables users to upload a CSV file and generate various types of graphs, including line, scatter, bar, histogram, and box plots. Since ToolJet supports Python (and JavaScript) code out of the box, we'll incorporate Python code and the matplotlib library to handle the graph generation. Additionally, we'll use ToolJet's customizable pre-built components to design an intuitive user interface in minutes.

Here's a quick preview of the complete application:

Check out this tutorial to learn how to develop a QR code generator using ToolJet.

Prerequisites

ToolJet(https://github.com/ToolJet/ToolJet) : An open-source, low-code business application builder. Sign up for a free ToolJet cloud account or run ToolJet on your local machine using Docker.
Basic knowledge of Python.

Begin by creating an application named CSV To Graph Generator.

Step 1: Designing the User Interface

Let's use ToolJet's visual app builder to quickly design the UI.

Designing the Header

Drag and drop a Text component onto the canvas for the header. Rename this component to headerText and set its text to "CSV TO GRAPH GENERATOR."
Customize its styling properties to have:
- Text size: 25
- Font weight: bolder
- Text color: #375fcfff
- Text alignment: right

This will serve as the header text of your app.

Add an Icon component, naming it logo. Set the icon to IconChartAreaFilled and the icon color to #375fcfff. Position it appropriately on the canvas to complement the header text.

Creating the CSV Upload Section

Drag a Container component onto the canvas. Style this container with:
- Border radius: 7
- Background color: #fff
- Box shadow: 2px 2px 1px 1px #aec0f5ff

This container will hold all the input fields and output preview.

Inside the container, add a File Picker component and rename it to fileUploader. Set its Accept file types property to {"csv/*"} to accept CSV files. Enable the Parse content toggle, and select File type as CSV.
Next, add a Dropdown component next to the File Picker, rename it to graphSelectionDropdown. Set the component's Option values to ["line", "scatter", "bar", "histogram", "box"] and Option labels to ["Line", "Scatter", "Bar", "Histogram", "Box"].
Below the dropdown, add a Button component and rename it to generateGraphButton. Set its text to "Generate Graph".

Double curly braces in ToolJet are used to pass custom code and refer or access values.

Creating the Image Preview

To display the generated graph, add an Image component below the File Picker and Button.

The UI is now ready!

Step 2: Using Python Libraries through Queries

ToolJet's query builder offers a convenient way to use custom code or connect with external data sources, services, and libraries. We will use it to create a Python query that uses the CSV data and interacts with the matplotlib library to generate graphs.

Expand the query panel at the bottom, create a new query named generateGraph, and choose Python as the data source.

Enter the below code in your Python query:

import matplotlib.pyplot as plt
import pandas as pd
import numpy as np
from io import BytesIO
import base64
import io

def create_plot():
    try:
        csv_string = components.fileUploader.file[0].content
        graph_type = components.graphSelectionDropdown.value
        print("Debug info:", csv_string, graph_type)

        df = pd.read_csv(io.StringIO(csv_string))
        columns = df.columns.tolist()

        if len(columns) < 2:
            raise ValueError("CSV must contain at least two columns")

        x_column = columns[0]
        y_columns = columns[1:]

        plt.figure(figsize=(12, 6))

        if graph_type == 'line':
            for col in y_columns:
                plt.plot(df[x_column], df[col], label=col)
            plt.title(f'Line Plot: {x_column} vs {", ".join(y_columns)}')
            plt.legend()
            plt.xticks(rotation=45, ha='right')
        elif graph_type == 'scatter':
            if len(y_columns) >= 2:
                plt.scatter(df[y_columns[0]], df[y_columns[1]])
                plt.title(f'Scatter Plot: {y_columns[0]} vs {y_columns[1]}')
                plt.xlabel(y_columns[0])
                plt.ylabel(y_columns[1])
            else:
                plt.scatter(df[x_column], df[y_columns[0]])
                plt.title(f'Scatter Plot: {x_column} vs {y_columns[0]}')
                plt.xlabel(x_column)
                plt.ylabel(y_columns[0])
        elif graph_type == 'bar':
            x = range(len(df[x_column]))
            width = 0.8 / len(y_columns)
            for i, col in enumerate(y_columns):
                plt.bar([xi + i*width for xi in x], df[col], width, label=col)
            plt.xlabel(x_column)
            plt.ylabel('Value')
            plt.title(f'Bar Plot: {", ".join(y_columns)}')
            plt.xticks([xi + width*(len(y_columns)-1)/2 for xi in x], df[x_column], rotation=45, ha='right')
            plt.legend()
        elif graph_type == 'histogram':
            for col in y_columns:
                plt.hist(df[col], bins=10, alpha=0.5, label=col)
            plt.title(f'Histogram: {", ".join(y_columns)}')
            plt.xlabel('Value')
            plt.ylabel('Frequency')
            plt.legend()
        elif graph_type == 'box':
            plt.boxplot([df[col] for col in y_columns])
            plt.title(f'Box Plot: {", ".join(y_columns)}')
            plt.xticks(range(1, len(y_columns) + 1), y_columns, rotation=45, ha='right')
            plt.ylabel('Value')
        else:
            raise ValueError(f"Invalid graph type: {graph_type}. Choose 'line', 'scatter', 'bar', 'histogram', or 'box'.")

        plt.grid(True)
        plt.tight_layout()

        buffer = BytesIO()
        plt.savefig(buffer, format='png')
        buffer.seek(0)

        img_str = base64.b64encode(buffer.getvalue()).decode('utf-8')

        plt.close()

        return img_str
    except Exception as e:
        print(f"Error in create_plot: {str(e)}")
        return None

create_plot()

Once this is configured, you can select a CSV file in the File Picker, select the graph type, and click on the Run button in the query panel. You can see the output generated by the query under preview.

Step 3: Connecting the UI Components with the Query

Time to bind the query to the components.

Configuring the Image Preview

In the Data property of the Image component, enter the following code to bind the query's result:
```
{{'data:image;base64,' + queries.generateGraph.data}}
```

For the Loading state property of the Image component, click on the fx button to enter custom code and enter the below code:
```
{{queries.generateGraph.isLoading}}
```

Triggering the Query Based on Button Click

Bind the query to the generateGraphButton by adding an on Click event that triggers the generateGraph query. This setup ensures that the script runs and generates the graph when the button is clicked.

After this setup, every time you upload a CSV file, select a graph type, and click on the generateGraphButton, the graph will be created and a preview will be visible in the Image component.

Conclusion

By following these steps, we've successfully built a dynamic and user-friendly CSV to Graph Generator app with ToolJet. We utilized ToolJet's visual app builder to craft an elegant and intuitive UI, used the query builder to integrate a Python library for graph generation, and demonstrated how to customize ToolJet applications to deliver a smooth user experience.

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

Build an HTML To Markdown Converter using ToolJet📋

Karan Rathod — Thu, 04 Jul 2024 13:05:46 +0000

In this tutorial, we will walk through the steps to build an HTML to Markdown Converter using ToolJet. This application allows users to input HTML code and get the corresponding Markdown output which can be copied with a button click. Using ToolJet's intuitive pre-built components, we'll design an elegant UI in just 5 minutes. The HTML to markdown conversion will be managed by the Turndown JavaScript library, while the Markdown preview will be rendered using the react-markdown library.

ToolJet's Run JavaScript query and Text component can be utilized to convert HTML to Markdown and preview the content without using external libraries. However, in this tutorial, we are looking to demonstrate the process of using 3rd party libraries in ToolJet.

Here's a preview of the complete application:

Prerequisites:

ToolJet(https://github.com/ToolJet/ToolJet) : An open-source, low-code business application builder. Sign up for a free ToolJet cloud account or run ToolJet on your local machine using Docker.

Basics of JavaScript: A basic understanding of JavaScript is essential for this tutorial since we will use JavaScript and React libraries to handle the logic for converting HTML to Markdown and previewing the markdown content.

To begin, create a new application named HTML To Markdown Converter.

Step 1: Creating the UI

Header

Add a Container component at the top of the canvas and rename it to headerContainer.
Add an Icon and a Text component inside the Container. Rename them to logo and headerText respectively.
Set the text to "HTML to Markdown Converter" and select an appropriate icon for the app in the Icon component.

Input Section

Add another Container component on the left and rename it to inputContainer.
Inside the container, add a Text component labeled "Enter HTML Code:". Rename it to enterHTMLLabel.
Below the label, add a Textarea component for the HTML input and rename it to htmlInput.

Output Section

Add a container next to the input section and rename it to outputContainer.
Add a Text component labeled "Markdown Preview:" below the input section. Rename it to markdownLabel.
Add a Custom Component to display the Markdown output and rename it to markdownOutput.

Buttons

Add a Button component labeled "Convert" below the Textarea component. Rename the button to convertButton.
Add another Button component labeled "Copy Markdown" besides the Convert button and rename it to copyButton.

The UI of the application is done. Time to focus on the functionality.

Step 2: Adding Queries and Events

Import Turndown Library

Create a Run JavaScript code query named importTurndownLibrary to import the Turndown library.
Use the following code in the query to import the library:

// Function to add script dynamically
function addScript(src) {
    return new Promise((resolve, reject) => {
        const scriptTag = document.createElement('script');
        scriptTag.setAttribute('src', src);
        scriptTag.addEventListener('load', resolve);
        scriptTag.addEventListener('error', reject);
        document.body.appendChild(scriptTag);
    });
}

try {
    // Importing turndown
    await addScript('https://cdnjs.cloudflare.com/ajax/libs/turndown/7.0.0/turndown.js');

    // Showing a success alert
    await actions.showAlert("success", 'Turndown JS is imported');
    turndownService.turndown(components.textarea1.value);
} catch (error) {
    console.error(error);
}

Enable the Run this query on application load? toggle to automatically run this query every time the app loads.

Convert HTML to Markdown

Create another Run JavaScript code query named convertToMarkdown.
Use the following code in the query to convert the text entered in the htmlInput component to markdown:

const turndownService = new TurndownService();
const markdown = turndownService.turndown(components.htmlInput.value);

return markdown;

Button Actions

For the Convert button, create a new On click event, set the Action as Run Query, and select convertToMarkdown as the Query.

For the Copy Markdown button, create a new On click event, set the Action as Copy to clipboard the {{queries.convertToMarkdown.data}} as the Text.

Most of the key functionality is now configured. In the next step, we will use a Custom Component to import a React library to preview the markdown content.

Step 3: Creating Markdown Preview

Add Custom Component

In the Custom Component, add the data that will be returned by the convertToMarkdown query:

{{
   { preview: queries.convertToMarkdown.data}
}}

Use the following code to render the Markdown preview:

import React from 'https://cdn.skypack.dev/react';
import ReactDOM from 'https://cdn.skypack.dev/react-dom';
import { Container } from 'https://cdn.skypack.dev/@material-ui/core';
import Markdown from 'https://esm.sh/react-markdown@9';

const MyCustomComponent = ({ data }) => (
    <Container>
        <Markdown>{data.preview}</Markdown>
    </Container>
);

const ConnectedComponent = Tooljet.connectComponent(MyCustomComponent);
ReactDOM.render(<ConnectedComponent />, document.body);

With this, the HTML to Markdown converter is ready. Time to see it in action!

Step 4: Preview and Testing

Test the application by entering various HTML snippets and checking the Markdown output.
Ensure that the Copy Markdown button works correctly.

Conclusion

We have successfully built an HTML to Markdown Converter using ToolJet in just minutes! This application is designed to simplify your content formatting process, and you can easily expand its functionality based on your specific requirements. Explore the capabilities of ToolJet to create similar projects and enhance your workflow.

You can check out ToolJet docs for further learning or join the ToolJet Slack community for doubts and queries.

Building a Regex Generator with Gemini AI and ToolJet ⚙️

Aman Regu — Tue, 02 Jul 2024 13:02:20 +0000

Introduction

This tutorial will guide you through the process of building an AI-powered Regex Generator using ToolJet , a low-code visual app builder, and the Gemini API, a powerful natural language processing API. The resulting application will enable users to input requests in plain English, which will then be translated into Regular Expressions (Regex). We'll use ToolJet's visual app builder to create a user-friendly UI, and ToolJet's low-code query builder to connect it to the Gemini API endpoint.

Prerequisites:

ToolJet (https://github.com/ToolJet/ToolJet ): An open-source, low-code business application builder. Sign up for a free ToolJet cloud account or run ToolJet on your local machine using Docker.
Gemini API Key : Log into Google AI Studio using your existing Google credentials. Within the AI Studio interface, you can locate and copy your API key.

Here is a quick preview of our final application:

Login to your ToolJet account. Navigate to the ToolJet dashboard and click on the Create new app button on the top left corner. ToolJet comes with 45+ built-in components. This will let us set up our UI in no time.

Assembling our UI

Drag and drop the Container component onto the canvas from the component library on the right side. Adjust the height and width of the Container component appropriately.
Similarly, drag-and-drop the Icon and Text component onto the canvas. We'll use them as our header.
For the Icon component, navigate to the properties panel on the right and select the appropriate icon under the Icon property.
Change the colour of the Icon and Text component according to your preference.
Drag and drop one Text component and one Textarea component inside your canvas. We'll use these components for the label and input for our text query. Rename the Textarea component to textQueryInput.
Again, drag-and-drop two Text components and two Text Input components inside your container. We'll use them for displaying the generated regex expressions and testing a string against the generated regex expression respectively.
Rename the Text Input components as generatedRegex and testString respectively.
Lastly, drag and drop two Button components inside your container. We'll use them for initiating the regex expression generation and adding a copy to clipboard functionality respectively.
Rename the added Button components to generateRegex and copyToClipboard respectively.

Setting up Queries

ToolJet allows you to connect to various external data sources, including databases, external APIs, and services using its powerful low code query builder. For this tutorial, We'll be using the REST API query feature to connect with the Gemini API endpoints.

Using ToolJet's Workspace Constants feature, create a new constant named GEMINI_API_KEY with your Gemini API key.
In the query panel, click on the + Add button and choose the REST API option.
Rename the query to getRegexPattern.
In the Request parameter, choose POST as the Method from the drop-down and paste the following URL.

https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-pro:generateContent?key={{constants.GEMINI_API_KEY}}

Navigate to the Body section of getRegexPattern. Toggle on Raw JSON and enter the following code:

{{
  `{
   "contents": [{
     "parts": [{
       "text": "Text Prompt: Based on pattern, generate a regex without any code highlighting, formatting or backticks, Pattern: ${JSON.stringify(components.textQueryInput.value).replace(/\\?"/g, '\\"')}"
      },],
    },],
  }`
}}

Binding Queries to the UI Components

Now that we have successfully added our UI and the query, the next step is to integrate them.

Select the generateRegex Button component and navigate to the properties panel on the right. Click on the + New event handler button. Change the Action to Run query and select the getRegexPattern query. This will trigger the getRegexPattern every time we click the generateRegex button.
Next, select the generatedRegex Text Input component and navigate to the properties panel on the right. Paste the following code into the Default value field:

{{queries.getRegexPattern.data.candidates[0].content.parts[0].text.trim()}}

Select the copyToClipboard Button component and navigate to the properties panel on the right. Click on the + New event handler button. Change the Action to Copy to clipboard. Paste the following code in the Text field under the Action Options subsection:

{{components.generatedRegex.value}}

Similarly, select the testString Text Input component and navigate to the properties panel on the right. Paste the following code in the Regex field under the Validation subsection:

{{queries.getRegexPattern.data.candidates[0].content.parts[0].text.trim()}}

We have successfully integrated everything together. Now let's test the application with the text query below:
Match any string that is at least 8 characters long, contains at least one lowercase letter, one uppercase letter, and one number

Conclusion

Congratulations on successfully creating an AI-powered Regex generator with ToolJet and the Gemini API. You can now input natural language prompts to generate Regular Expressions effortlessly.

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

Build an AI BPMN Diagram Analyzer using ToolJet 🛠️

Karan Rathod — Thu, 27 Jun 2024 13:12:06 +0000

In this tutorial, we'll create a BPMN Diagram Analyzer application using ToolJet. This app allows users to generate detailed explanations of BPMN processes by uploading them in image format. We'll use ToolJet's low-code app-builder for the user interface and its query builder to connect to the Gemini API to generate an in depth analysis of uploaded BPMN processes.

Here's a quick preview of our application:

Prerequisites

Gemini API Key : The Gemini API is an advanced AI service provided by Google AI Studio. It enables developers to integrate powerful content generation capabilities into their applications.

ToolJet(https://github.com/ToolJet/ToolJet) : An open-source, low-code business application builder. Sign up for a free ToolJet cloud account or run ToolJet on your local machine using Docker.

To begin, create a new application named BPMN Diagram Analyzer.

Step 1: Adding UI Elements 🖼️

The first step in the app-building process is to utilize ToolJet's customizable pre-built components to build a UI in minutes. We will start with the header.

App Header

For the logo, add an Icon component at the top of the canvas and name it logo.
Choose an appropriate icon (e.g., IconAnalyzeFilled) and set its color to #3e63ddff.
Add a Text component next to the Icon component.
Set its Data property to "BPMN Diagram Analyzer".
Style it with #3e63ddff as the color, 24px as the font size, and font weight as bold.

We are using blue (hex code: #3e63ddff) as the primary color, style the upcoming components accordingly.

Input Section

Add a Container on the left to hold the input elements, and name it inputContainer.
Inside this container, add a Text component as the header, and name it inputLabel.
Set the Text component's Data property to "Input".
Below it, place an Image component to display the uploaded BPMN diagram. Name it imagePreview.
Add a File Picker component and name it fileUploader.
Add a Button component labeled "Generate". Name it generateButton.
Add another Button labeled "Copy Output", and name it copyButton.
Position the buttons appropriately next to the File Picker.

Output Section

Add another Container for the output section, and name it outputContainer.
Add a Text component inside this container as the header, and name it outputLabel.
Set the Text component's Data property to "Output".
Add another Text component for the generated explanation. Name it generatedOutput.
Set the data format to HTML since the generated explanation will be formatted in HTML format.

Step 2: Configuring Queries 🔗

With the UI ready, we can now connect to Gemini API and format the image preview using queries.

Generate Image Preview Query

Create a new Run JavaScript code query named generateImagePreview.
Add the code below in the query:

return `data:image;base64,${components.fileUploader.file[0].base64Data}`

The above query will restructure the image data and return it. The returned value will be used as a URL to display the image as a preview in the Image component.

Analyze Diagram Query

Create a new REST API query named analyseDiagram.
Set the method to POST and enter the below URL under the URL property:

https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-pro:generateContent

Under Headers, add a new header and set the key to Content-Type and value to application/json.
Create a new workspace constant named GEMINI_API_KEY and add your Gemini API Key to it.
Under Parameters, add a new row with the key as key and value as {{constants.GEMINI_API_KEY}}.
Configure the Body property of the query using the code below:

{
  "contents": [
    {
      "parts": [
        {
          "text": "Explain in depth the content and overall of the uploaded BPMN (Business Process Model and Notation) diagram in HTML formatting only. Respond with only the explanation, and nothing else. Return the following information, with clear bullet points and headers (under 18 px) for each section: 1. **Title**: The title or main heading of the BPMN diagram. 2. **Description**: A brief description or summary of the BPMN diagram. 3. **Elements**: Explain all the processes identified in the diagram in the correct flow. If there are multiple sequences, explain them individually. 4. **Flows**: Describe the sequence flows, message flows, and associations between elements. 5. **Data Objects**: Identify and describe any data objects present in the diagram. 6. **Swimlanes**: If present, list the swimlanes (e.g., pools, lanes) and their roles or participants. Ensure the returned HTML is well-structured, with appropriate tags for headers, lists, and any other necessary elements for readability and organization."
        },
        {
          "inline_data": {
            "mime_type":"image/jpeg",
            "data": "{{components.fileUploader.file[0].base64Data}}"
          }
        }
      ]
    }
  ]
}

This JSON request sends an uploaded BPMN diagram image for analysis, asking for a detailed HTML explanation of its contents, including the title, description, elements, flows, data objects, and swimlanes.

Step 3: Using Events For Dynamic Interaction 🔘

Events in ToolJet allow you to easily create dynamic app interactions based on triggers such as button clicks or query completion.

Generate Button Click

Add a new event to the Generate button.
Leave the Event as On click, select Run Query as the Action and Query as analyseDiagram.

Now every time the Generate button is clicked, the analyseDiagram query will run and the output will be generated.

Copy Button Click

Add an On click event on the Copy Output button to copy the generated output to the clipboard.
Set the action as Copy to Clipboard and under the Text property, enter the code below:

{{components.generatedOutput.text}}

The above setting will copy the output text from the related component every time we click on the Copy Output button.

File Picker Load:

Add an On File Loaded event on the File Picker component to run the generateImagePreview query.
This configuration will ensure that the generateImagePreview query runs each time a file gets uploaded to the File Picker component.

This configuration will ensure that the generateImagePreview query runs each time a file gets uploaded to the File Picker component.

Image Preview

Under the URL property of the Image component, enter the code below:

{{queries.generateImagePreview.data}}

Now the Image component will display the BPMN diagram image once it is uploaded using the File Picker.

Step 4: Testing ✅

Time to test all the functionalities.

Use the File Picker to upload an image - a preview should be visible on the Image component.
Click on the Generate Button - the Text component in output should display the explanation of the BPMN diagram in-depth through HTML formatting.
Click on the Copy Output Button - the generated explanation should get copied and you should get a notification saying "Copied to clipboard!"

Conclusion

By following this tutorial, you have successfully created a BPMN Diagram Analyzer using ToolJet. This app allows users to upload BPMN diagrams in image format and receive detailed explanations, enhancing their workflow analysis capabilities. Feel free to expand and customize the app further based on your specific requirements. Happy building!

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

Building a Mock Data Generator with Google Sheets, Gemini AI & ToolJet ⚙️

Aman Regu — Tue, 25 Jun 2024 13:33:12 +0000

Introduction

This tutorial will guide you through the process of building an AI-driven Mock Data Generator using ToolJet, a low-code visual app builder, and the Gemini API, a powerful natural language processing API. We'll also use ToolJet's build-in integration with Google Sheets to store our mock data. The resulting application will enable users to generate mock data based on the sample format data present in the spreadsheet. We'll use ToolJet's visual app builder to create a user-friendly UI, and ToolJet's low-code query builder to connect it to the Gemini API endpoints and our Google Sheets data source.

Prerequisites

ToolJet(https://github.com/ToolJet/ToolJet) : An open-source, low-code business application builder. Sign up for a free ToolJet cloud account or run ToolJet on your local machine using Docker.
Gemini API Key : The Gemini API is an advanced AI service provided by Google AI Studio. It enables developers to integrate powerful content generation capabilities into their applications.
Google account with access to Google Sheets: Log into Google Sheets using your Google account and create a new spreadsheet. Add column names to define the structure of your data. Additionally, you can create at least one row of data.

Here is a quick preview of our final application:

Step 1: Prepare your Google Sheets Document

We will be starting this tutorial by setting up the Google Sheets document with the following data.

Step 2: Connecting Google Sheets to ToolJet

Once the spreadsheet is ready, let’s connect our Google Sheet to ToolJet. Follow the steps mentioned below.

On the ToolJet dashboard, locate the Data Sources section on the left sidebar. Click on the +Add button under the Google Sheets plugin.
Choose the Read and write option since we will be adding the mock data to our Google Sheet.
Once you click on Connect Data source, you will be redirected to grant access to ToolJet to your Google Sheets; grant the access and click Save data source.
Now that you have successfully connected Google Sheets to your ToolJet account, click the Apps icon on the left sidebar and select Create an app. Let’s name our app Mock Data Generator. Now that we’ve set up our App, it’s time to create the UI.

Step 3: Building the UI

Drag and drop the Container component onto the canvas from the component library on the right side. Adjust the height and width of the Container component appropriately.
Similarly, drag and drop the Icon and the Text component onto your canvas. We'll use them as our logo and header.
For the Icon component, navigate to the properties panel on the right and select the appropriate icon under the Icon property.
Change the color of the Icon and Text component according to your preference.
Drag and drop the Dropdown component inside your container. We'll use this dropdown to choose between the available sheets. Rename this component to selectSheet.
Similarly, drag and drop two Button components inside the container. We'll use these buttons for generating mock data and saving the data to the Google Sheet.
Next, add a Table Component to display the generated mock data.

Step 4: Setting up Queries

1. Fetching the Sheets

Expand the Query Panel at the bottom and click the Add button to create a query - rename this query to getSheets.
Choose Data Source as googlesheets, and Operation as Get spreadsheet info.
In the Spreadsheet ID section, enter the spreadsheet ID of your sheet. To access the spreadsheet ID, check your Google Sheet's URL, the format should be: https://docs.google.com/spreadsheets/d/<SPREADHEET_ID>/edit#gid=0.
To ensure that this query runs every time the application loads, toggle Run this query on application load?
Enable the Transformations toggle and enter the following code:

return data.sheets.map(item => item.properties.title);

This will return all the sheet names in an Array. We'll use this to populate the values in our dropdown component.

2. Fetching initial sample data

Similarly, create another query and rename it to getInitialData.
Choose the Operation as Read data from a spreadsheet.
Enter the following code in the Sheet field:

{{components.selectSheet.value}}

3. Generating Mock Data using Gemini API

Using ToolJet's Workspace Constants feature, create a new constant named GEMINI_API_KEY with your Gemini API key.
In the query panel, click on the + Add **button and choose the **REST API option. Rename the query to generateMockData.
In the Request parameter, choose POST as the Method from the drop-down and paste the following URL. https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-pro:generateContent?key={{constants.GEMINI_API_KEY}}
Navigate to the Body section of getSqlQuery. Toggle on Raw JSON and enter the following code:

 {{
  `{
   "contents": [{
     "parts": [{
       "text": "Sample Data: ${JSON.stringify(queries.getInitialData.data[0]).replace(/\\?"/g, '\\"')}, Text Prompt: Based on the sample data, only return an Array with 10 objects with same type of mock data without any code highlighting, formatting or backticks"
      },],
    },],
  }`
}}

4. Inserting data into our Google Sheet

Create another query and choose Data Source as googlesheets, and Operation as Append data to a spreadsheet.
Enter the following code in the Sheet field:

{{components.selectSheet.value}}

Enter the following code in the Rows field:

{{JSON.parse(queries.generateMockData.data.candidates[0].content.parts[0].text)}}

Step 5: Binding Queries to the UI Components

Now that we have successfully built our UI and queries, the next step is to integrate them.

Select the Dropdown component, under the Properties section, and enter the following code for both Option values and labels fields: {{queries.getSheets.data}}
Select the Generate Data Button component, under the Properties section, click the New event handler button to create a new event.
Choose On click as the Event, Run Query as the Action, and select getInitialData as the Query.
Select the getInitialData query, and click the New event handler button to create a new event.
Choose Query Success as the Event, Run Query as the Action, and select generateMockData as the Query.
Next, Select the Table component. In the properties panel on the right, enter the following code in the Data field.

{{JSON.parse(queries.generateMockData.data.candidates[0].content.parts[0].text)}}

Select the Save to Google Sheets Button component, under the Properties section, click the New event handler button to create a new event.
Choose On click as the Event, Run Query as the Action, and select insertData as the Query. We have successfully integrated our queries into our UI.

Now let's test the application with the following sample data format:

Table Preview:
Click on the Save to Google Sheets Button.

Conclusion

Congratulations on successfully building an AI-driven Mock Data Generator using ToolJet and Gemini API.

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

Create a QR Code Generator Using ToolJet and Python in 5 Minutes! 🛠️

Karan Rathod — Thu, 20 Jun 2024 13:04:57 +0000

This quick tutorial will guide you through the steps to create a QR Code Generator application using ToolJet. The app will allow users to select a URL and generate a corresponding QR code. We will utilize ToolJet's visual app-builder to rapidly build a user interface and then connect to a Python module to generate QR codes from URLs.

Here's the preview of the application:

Prerequisites

ToolJet(https://github.com/ToolJet/ToolJet) : An open-source, low-code business application builder. Sign up for a free ToolJet cloud account or run ToolJet on your local machine using Docker.
Basic knowledge of Python.

Begin by creating an application named QR Code Generator.

Step 1: Design the User Interface

- Add a Container for the Header

Drag and drop a Container component onto the canvas.
Name it headerContainer.
Set its background color to #0a60c6ff.

- Add a Text Component for the App Name

Inside the headerContainer, add a Text component.
Set the text to "QR Code Generator."
Style it with:
- Text Color: #ffffffff
- Text Size: 24
- Font Weight: bold
- Border Radius: 6

- Add an Icon for the App Logo

Inside the headerContainer, add an Icon component.
Set the icon to IconQrcode and color to #ffffffff.

- Add a Table with URLs and Other Information

Drag and drop a Table component onto the canvas.
Name it linksTable.
Below is the database table structure that we are using for this application:
- id: Auto-generated
- title: String
- url: String
- description: String
Populate the Table component with data, based on the provided structure.

- Add a Text Component for the Table Header

Above the table, add a Text component.
Set the text to "URL Information."
Style it with:
- Text Color: #0a60c6ff
- Text Size: 24
- Font Weight: bold

- Add a Modal for QR Code Generation

Drag and drop a Modal component onto the canvas.
Name it generateButton.
Set the Trigger button label to "Generate QR" and the Background color to #0a60c6ff.

- Add an Image Component to Display the QR Code

Inside the modal, add an Image component.
Name it qrOutput.
Use the below code for the Image component's URL property:
```
data:image/png;base64,{{queries.QRGenerator.data}}
```
Similarly, use the below code for the Loading state property of the Image component:
```
{{queries.QRGenerator.isLoading}}
```

The above configuration will display the generated QR code in the Image component after we craft and run the related query(named QRGenerator).

Step 2: Implement Functionality

- Add a Python Script for QR Code Generation

Add a query named QRGenerator using the Run Python code data source.

Use the following Python code to generate the QR code:

import micropip
await micropip.install("qrcode")
import qrcode
from io import BytesIO
import base64

def QR_Generator():
    qr = qrcode.QRCode(
        version=1,
        error_correction=qrcode.constants.ERROR_CORRECT_L,
        box_size=10,
        border=4,
    )
    qr.add_data(components.linksTable.selectedRow.url)
    qr.make(fit=True)
    img = qr.make_image(fill_color="black", back_color="white")
    buffered = BytesIO()
    img.save(buffered, "PNG")  # Specify the format as a string
    img_str = base64.b64encode(buffered.getvalue()).decode('utf-8')
    return img_str
QR_Generator()

This code uses the qrcode library to generate a QR code from a selected URL in a ToolJet table component. The generated QR code is converted to a base64-encoded PNG image and returned as a string.

- Link the QR Generator to the Generate Button

Select the generateButton modal and add a new event handler to it.
Set up an On open event to run the QRGenerator query.
After the above configuration, the output of the QRGenerator query will be displayed in the qrOutput Image component based on the earlier configuration.

Step 3: Test the Application

Select a row on the Table component and click on the generateButton modal to generate and view the QR code.

You can save the QR code by right-clicking on the image and selecting Save image as. Alternatively, you can set up a Button component to download the image directly.

Congratulations

Congratulations! You've successfully built a production-ready QR code generator. This application demonstrates ToolJet's capability to rapidly design clean user interfaces and extend functionality with custom code. While we used Python code in this tutorial, ToolJet also supports JavaScript code and Custom Components for users who want to extend the platform's functionality for very specific use-cases.

For any questions or support, join the ToolJet Slack community. You can also check out the ToolJet docs to learn more!

Building a SQL Report Generator using Gemini AI + ToolJet 📊

Aman Regu — Tue, 18 Jun 2024 13:00:56 +0000

Introduction

This tutorial will guide you through the process of building an AI-driven SQL custom report generator using ToolJet, a low-code visual app builder, and the Gemini API, a powerful natural language processing API. The resulting application will enable users to input requests in plain English, which will then be translated into custom reports. We'll use ToolJet's visual app builder to create a user-friendly UI, and ToolJet's low-code query builder to connect it to the Gemini API endpoints and our data sources. The final product will enable users to preview generated reports and download them in PDF, Excel, or CSV formats.

Prerequisites:

ToolJet (https://github.com/ToolJet/ToolJet): An open-source, low-code business application builder. Sign up for a free ToolJet cloud account or run ToolJet on your local machine using Docker.
Gemini API Key : Log into Google AI Studio using your existing Google credentials. Within the AI Studio interface, you can locate and copy your API key.

Here is a quick preview of our final application:

Building our UI

Drag and drop the Container component onto the canvas from the component library on the right side. Adjust the height and width of the Container component appropriately.
Similarly, drag-and-drop the Icon and three Text components inside your Container. We'll use these Text components for our header and label texts.
For the Icon component, navigate to the properties panel on the right and select the appropriate icon under the Icon property.
Change the colour of the Icon and Text component according to your preference.
Change the font size and content of the Text component appropriately.
Drag and drop the Textarea component inside your Container. We'll use this component as an input for our text query.
Rename the Textarea component to textPrompt.
Next, drag and drop the Table component onto the Container. We'll use this component to display a preview of our report. The Table component comes built-in with the functionality to download the displayed data. This will allow us to download our generated report in PDF, Excel, or CSV formats.
Now let's add a Button component that initiates the report generation process. Change the colour, size and content appropriately.

Setting up Queries

Apart from its built-in database and data sources, ToolJet allows you to connect to various external data sources, including databases, external APIs, and services. For this tutorial, we'll be using ToolJet's built-in PostgreSQL sample data source. The queries we'll set up will be applicable to an external PostgreSQL data source as well.

We'll also be using the REST API query feature to connect with the Gemini API endpoints.

In the query panel, click the + Add button and choose the Sample data source option.
Rename the query to getDatabaseSchema.
In the dropdown, choose the SQL mode and enter the code below. This will fetch all the table names in our database along with their column names.

SELECT table_name, string_agg(column_name, ', ') AS columns
FROM information_schema.columns
WHERE table_schema = 'public'
GROUP BY table_name

To ensure that the query runs every time the application loads, enable the Run this query on application load? toggle.

Now, let's create another query that will connect to the Gemini AI API and generate our custom SQL report query.

Using ToolJet's Workspace Constants feature, create a new constant named GEMINI_API_KEY with your Gemini API key.
In the query panel, click on the + Add button and choose the REST API option.
Rename the query to getSqlQuery.
In the Request parameter, choose POST as the Method from the drop-down and paste the following URL.

https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-pro:generateContent?key={{constants.GEMINI_API_KEY}}

Navigate to the Body section of getSqlQuery. Toggle on Raw JSON and enter the following code:

{{
  `{
   "contents": [{
     "parts": [{
       "text": "Data Schema: ${JSON.stringify(queries.getTablesWithColumns.data.map(item => ({ ...item, table_name: "public." + item.table_name }))).replace(/"([^"]+)":/g, '$1:').replace(/"/g, '\\"')}, Text Prompt: Write a standard SQL query for a custom SQL report that will ${components.textPrompt.value.replaceAll("\n"," ")}. Return without formatting and without any code highlighting and any backticks"
      },],
    },],
  }`
}}

Let's add our final query which will retrieve the data from the sample data source that we need for our custom report.

Similarly, create another Sample data source query, rename it to getReportData and enter the code below:

{{queries.getSqlQuery.data.candidates[0].content.parts[0].text}}

Binding Queries to the UI Components

Now that we have successfully built our UI and queries, the next step is to integrate them.

Select the Button component and navigate to the properties panel on the right. Click on the + New event handler button. Change the Action to Run query and select the getSqlQuery query.
Next, navigate to the getSqlQuery query and click on the + New event handler button. Change the Action to Run query and select the getReportData query.
Next, Select the Table component. In the properties panel on the right, enter the following code in the Data field.

{{queries.getReportData.data}}

We have successfully integrated our queries into our UI. Now let's test the application with the prompt below:
list the names of customers along with the products they have ordered, including the order date and the total quantity ordered for each product.

You can click on the + button on the Table footer to download this report in PDF, Excel, or CSV formats.

Conclusion

Congratulations on successfully building an AI-powered SQL report generator using ToolJet and the Gemini API. You can now input prompts in plain English and generate reports across multiple tables in your PostgreSQL instance.
To learn and explore more about ToolJet, check out the ToolJet docs or connect with us and post your queries on Slack.

Build an AI Business Proposal Writer Using Gemini API and ToolJet in 10 minutes 🚀

Karan Rathod — Thu, 13 Jun 2024 13:03:15 +0000

In this tutorial, we'll guide you through the process of creating an AI Business Proposal Writer using ToolJet and Gemini API. We will utilize ToolJet's pre-built components and simple integration process to quickly create an application that can interact with the Gemini API. This application will allow users to input business details and generate professional business proposals.

Here's a preview of the final application:

Prerequisites

Gemini API Key : The Gemini API is an advanced AI service provided by Google AI Studio. It enables developers to integrate powerful content generation capabilities into their applications.

ToolJet(https://github.com/ToolJet/ToolJet) : An open-source, low-code business application builder. Sign up for a free ToolJet cloud account or run ToolJet on your local machine using Docker.

Begin by creating an application named Business Proposal Writer.

1. Create a New Application

Open ToolJet and click on Create new application.
Name your application "Business Proposal Writer."
Once you create a new application, you will see an empty canvas with a component library on the right and a query panel at the bottom.

2. Design the UI

Drag and drop the following components onto your canvas:
- Containers: To organize the header, input fields, and output section.
- Text and Text Inputs: For company name, service description, budget, deadline, and company expertise.
- Button: For generating the proposal.
- Text: To display the generated proposal in HTML format.
- Icons: For logos and making the UI more appealing.
Rename the input fields for clarity:
- companyNameInput
- serviceDescriptionInput
- budgetInput
- deadlineInput
- companyExpertiseInput
Name the button createButton.
Name the text component that will display the generated proposal as output.

ToolJet's pre-built components offer complete flexibility in functionality and styling customization.

3. Integrating with Gemini API through Queries

Create a workspace constant to save your Gemini API key. Name it GEMINI_API_KEY.
Expand the query panel, create a new query, and name it generateProposal.
Change the Request Method to POST and paste the following URL under the URL input:

https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-pro:generateContent?key={{constants.GEMINI_API_KEY}}

Navigate to the Body section of the generateProposal query. Toggle on Raw JSON and enter the following code:

{
  "contents": [
    {
      "parts": [
        {
          "text": "
1. **Client/Company Name:** {{components.companyNameInput.value}}
2. **Project/Service Description:** {{components.serviceDescriptionInput.value}}
3. **Budget Range (if applicable):** {{components.budgetInput.value}}
4. **Deadline:** {{components.deadlineInput.value}}
5. **Company Expertise:** {{components.companyExpertiseInput.value}}

Based on these inputs, generate a well-structured and comprehensive business proposal document in HTML format. The generated proposal should include the following sections, each with ample padding and spacing:

1. **Executive Summary**
2. **Company Overview and Qualifications**
3. **Project Understanding and Approach**
4. **Proposed Solution and Methodology**
5. **Timeline and Deliverables**
6. **Team Structure and Bios**
7. **Cost Breakdown and Budget** (Include charts as needed)
8. **Terms and Conditions**
9. **Conclusion and Call to Action**

Ensure that the HTML output is properly formatted and visually appealing."
        }
      ]
    }
  ]
}

Queries in ToolJet offer a simple and easy way to connect with databases, APIs, and cloud storage services.

4. Connecting the UI Components with Queries

Select the createButton component.
Add an event handler to trigger the generateProposal query when the button is clicked.

Events are used to run queries, show alerts, and other functionalities based on triggers such as button clicks or query completion.

Select the output component that was added to display the generated business proposal.
Under its Data property, enter the following code:

{{queries.generateProposal.data.candidates[0].content.parts[0].text}}

Now, enter the required details in the input fields and click on the button. You should see the generated business proposal in the output component.

Conclusion

You have successfully built a business proposal writer using the Gemini API and ToolJet in just 10 minutes. This tool will streamline the creation of professional business proposals, saving you time and effort.

For any questions or support, join the ToolJet Slack community. You can also check out the ToolJet documentation to learn more!

Building an Ed-Tech Sales CRM using ToolJet 📈

Pritesh Kiri — Tue, 11 Jun 2024 12:33:52 +0000

Introduction

An effective Customer Relationship Management (CRM) system can help Ed-tech companies streamline their sales processes, maintain customer information, and enhance customer interactions.

In this tutorial, we will guide you through the process of building an Ed-tech sales CRM using ToolJet and ToolJet Database.

Here is a quick preview of the CRM that we’ll be building in ToolJet.

Prerequisites:

ToolJet (https://github.com/ToolJet/ToolJet): An open-source, low-code business application builder. Sign up for a free ToolJet cloud account or run ToolJet on your local machine using Docker.
Basics of JavaScript: Basic knowledge of JavaScript can be handy for implementing dynamic functionality in your ToolJet applications.

Setting up the ToolJet Database

This section will teach you how to set up the database for our CRM app. We will be using ToolJet Database for this application.

Log in to your ToolJet account and click on the ToolJet Database icon in the left sidebar. We will be creating two tables, one will be for the sales_revenue and other for sales_executives. Let's start by creating the database tables.

Create a new table with the following columns and rename it to sales_revenue:

id (primary key/auto-generated)
course(varchar)
number_of_courses_sold (int)
discount (varchar)
customer_name (int)
customer_email (varchar)
customer_country (varchar)
customer_age_group (int)
revenue (int)
se_name (varchar)
profession (varchar)
sale_date (varchar)

Create a new table with the following columns and rename it to sales_executives:

id (primary key/auto-generated)
name(varchar)
email (varchar)
phone (varchar)

We recommend adding some dummy data to the table so that we have something to work with when we begin the app development process.

UI Development

Once you are done setting up the database, click on the Apps in the sidebar and create a new app with the name Ed-Tech Sales CRM. After the successful creation of the App, you will land on the App-Bulider page.

Now we can drag and drop ToolJet's pre-built components to build the app's UI quickly.

Here is the structure of the app that we will be building:

Header
Tabs
- Overview
- Sales Executives
- Revenue

Let us start will building the Header:

Drag and drop a Container component on the canvas from the components library on the right and rename it to header. Containers are used to group related components in the App-Builder.
Resize it and change its color to #2E425A and border radius to 8.
Inside the Container component, add two Text component for and rename it to brandName and CRMTitle.
In the brandName component change the Data to TOOLJET and change the color to white, font size to 20, font weight to bolder and letter spacing to 6.
In CRMTitle component, change the Data to Ed-Tech Sales CRM and change the color to white, font size to 18.

Renaming components can be useful as the application grows, allowing easy reference to component-related values throughout various parts of the application.

Drag and Drop the Tabs component and change the tab names to Overview, Sales Executives and Revenue.
In Revenue tab, add a Table component which will contain the data from the sales_revenue table in the database.
Now add a Modal component, place it above the table, and rename it to saleDetails. In properties change the title to Sale Details, Trigger button label to Add sale and change the color of button to primary color ( #2E425A ).

Now we need to add input fields in this modal. Here we will be dividing the modal into two parts, first is Customer Details and Revenue Details.
In Customer Details, add Text Input component for Name and Email, Dropdown component for Country, Course and Sales Executive name, Radio button component for the Age group and profession and a Date component for the Sale date.
For the Country dropdown you can add the following data in Option values and labels:

{{ ["Argentina", "Australia", "Brazil", "Canada", "China", "Egypt", "France", "Germany", "Greece", "India", "Indonesia", "Italy", "Japan", "Mexico", "Netherlands", "New Zealand", "Russia", "Saudi Arabia", "South Africa", "South Korea", "Spain", "Switzerland", "Thailand", "United Kingdom", "United States"]
}}

For the Courses dropdown you can add the following data in Option values and labels:

{{ ["Marketing Management", "Data Science Fundamentals", "Financial Accounting", "Introduction to Psychology", "Business Ethics", "Digital Marketing Strategy", "Creative Writing Workshop", "Computer Programming Basics", "Public Speaking Mastery", "Introduction to Economics", "Full Stack Web Development"]
}}

For the Sales Executive dropdown, we will be fetching data from the sales_executives table in the database.
Here is the quick preview of salesDetails modal UI, you can change the design at your convenience.

In salesDetails modal, as you can see we have the dynamic UI elements that will show the values of Revenue without discount and Total revenue generated based on what they choose in Courses sold and Discounts offered. The HEX color codes for both of these Text components are #4A90E2 and #9013FE respectively.
To build these dynamic text elements we need to add on change event handlers on Courses sold and Discounts offered.
We will run a script that will calculate both of these revenues and then will populate those details in the Text components.
Open the Query Manager and add a Javascript query. Name it updateRevenue.
Add the following code to this query. This will return the values that we can use in the Revenue without discount and Total revenue generated in UI respectively. Make sure you rename the number input component to courses and the radio button component to discount.

const revenue = components.courses.value * 2000 * (100 - components.discount.value) * 0.01
const revenueWithoutDiscount = components.courses.value * 2000

return {revenue, revenueWithoutDiscount}

Events in ToolJet are used to run queries, show alerts, and other functionalities based on triggers such as button clicks or query completion.

Update the Data property of the Revenue without discount text component: {{queries.updateRevenue.data.revenueWithoutDiscount ? queries.updateRevenue.data.revenueWithoutDiscount : 0}}
Update the Data property of the Total revenue generated text component: {{queries.updateRevenue.data.revenue ? queries.updateRevenue.data.revenue : 0}}

Once you do these updates, just add on change and on select event handlers in Course sold number input and Discount offered radio button input respectively and add updateRevenue query.
In Sales executive tab also, we will be adding a modal and a table, so drag and drop both of these components in the tab.
Change the modal size to small and height to 300px. Also change the color of trigger button to #2E425A.
Now add three text components for Name, Email and Phone and a submit button in the modal. Change the color of submit button to #2E425A.

In the Overview tab, add three Statistics components. Hide the secondary value and change the primary color to #F28585 for all three components.
Set the primary value labels to Total revenue, Total courses, and Total customers. Keep the primary values as default for now. We will be update it later once we add the data.
Now add seven Chart components from the component library. Set the chart type to pie for five of them and to bar for the remaining two.
Change the background color of all the charts to #F1F4FC. For the two bar charts, set the marker color to #2A77B4.

We have completed building UI, now let's quickly create queries and add functionality to our app.

Data Fetching

With ToolJet, we can easily connect the UI elements to the data sources and fetch data by creating queries in the Query Manager.

We will be adding queries for Revenue, Sales Executive and Overview tabs. We will start with Sales Executive tab, as we will need that data in the modal for adding sales in the revenue tab.

1. Sales Executive Tab

Here, we will need two queries, one will be to add the data to the database and one will be to show the data in the table.

Open the Query Manager at the bottom, click on Add, and then click on the ToolJet database. Rename the query to getSalesExecutives.
Select the table name as sales_executives and operation as List rows. In settings, turn on Run this query on application load? toggle to run this query every time the app reloads.
Once you are done with this, you can click on Preview to check the data.
Let's link this query to the table. Click on table and add {{queries.getSalesExecutives.data}} in the data. You will see your data from the database in the UI.

Now we need to add another query to add the data in sales_executives from the modal component.

Click on Add in the Query Manger and then click on the ToolJet database. Rename the query to addSalesExecutive.
Select the table name as sales_executives and operation as Create row. Then select name, email and phone in the column.
Now we need to add the data from UI to these columns in the keys input. Add {{components.seName.value}}, {{components.seEmail.value}}, {{components.sePhone.value}} in the respective columns in the keys input.
Here seName, seEmail and sePhone are the component names. Make sure you rename them before adding them to the query.
Open the modal and select the submit button. In properties, click on New event handler and add on click event, select action as Run query and select the addSalesExecutive query.
The last thing we need to add is the event handlers in the query. You can add these three events - close modal, success prompt and run getSalesExecutives query.
Try adding the data in the inputs components and submit it. You will see the that data populating in the table.

2. Revenue Tab

In this tab also, we will be needing two queries, one will be to add the data to the database and one will be to show the data in the table.

Open the Query Manager at the bottom, click on Add, and then click on Run Javascript code. Rename the query to getRevenueDetails.
Select the table name as sale_revenue and operation as List rows. In settings, turn on Run this query on application load? toggle to run this query every time the app reloads.
Once you are done with this, you can click on Preview to check the data.
Let's link this query to the table. Click on table and add {{queries.getRevenueDetails.data}} in the data. You will see your data from the database in the UI.

Now we need to add another query to add the data in sale_revenue from the Modal component.

Click on Add in the Query Manger and then click on the ToolJet database. Rename the query to addRevenueDetails.
Select the table name as sale_revenue and operation as Create row.
Add and the columns and then add the data from UI to these columns in the keys input. Add {{components.name.value}}, {{components.email.value}} and all other items from the modal based on names you have added for all the input components.
Open the modal and select the submit button. In properties, click on New event handler and add on click event, select action as Run query and select the addRevenueDetails query.
You can add these three events - close modal, success prompt, and run getRevenueDetails to your query.
Try adding the data in the inputs and submit it. You will see that data populating in the table.

3. Overview Tab

In this tab, we will be calculating all the data to be added in all the Chart and Statistics components using Javascript.

Open on the Query Manger at the bottom, click on Add and then click on Run Javascript code. Rename it to analytics.
You can paste the following code which calculates all the data that you can put inside of all the charts and statistics components.

await queries.getRevenueDetails.run(); 

let data = queries.getRevenueDetails.getData(); 

const totalRevenue = data.reduce((acc, obj) => acc + obj.revenue, 0);
const totalCourseSold = data.reduce((acc, obj) => acc + obj.number_of_courses_sold, 0);
const totalCustomers = Array.from(new Set(data.map(obj => obj.customer_email))).length


const countryCounts = data.reduce((counts, obj) => {
  counts[obj.customer_country] = (counts[obj.customer_country] || 0) + 1;
  return counts;
}, {});

const customerCountryData = Object.keys(countryCounts).map(state => ({ x: state, y: countryCounts[state] }));

const ageRangeCounts = data.reduce((counts, obj) => {
  counts[obj.customer_age_group] = (counts[obj.customer_age_group] || 0) + 1;
  return counts;
}, {});

const ageRangeData = Object.keys(ageRangeCounts).map(state => ({ x: state, y: ageRangeCounts[state] }));

const discountCounts = data.reduce((counts, obj) => {
  counts[obj.discount] = (counts[obj.discount] || 0) + 1;
  return counts;
}, {});

const discountData = Object.keys(discountCounts).map(state => ({ x: state, y: discountCounts[state] }));

const professionCounts = data.reduce((counts, obj) => {
  counts[obj.profession] = (counts[obj.profession] || 0) + 1;
  return counts;
}, {});

const professionData = Object.keys(professionCounts).map(state => ({ x: state, y: professionCounts[state] }));


const courseCounts = data.reduce((counts, obj) => {
  if (obj.course) {
    counts[obj.course] = (counts[obj.course] || 0) + 1;
  }
  return counts;
}, {});


const courseData = Object.keys(courseCounts).map(course => ({ x: course, y: courseCounts[course] }));

const revenueByExecutive = data.reduce((acc, obj) => {
  if (obj.se_name) {
    acc[obj.se_name] = (acc[obj.se_name] || 0) + (obj.revenue || 0);
  }
  return acc;
}, {});


const teamData = Object.keys(revenueByExecutive).map(executive => ({ x: executive, y: revenueByExecutive[executive] }));

// Aggregate revenue by year
const revenueByYear = data.reduce((acc, entry) => {
    const year = parseInt(entry.sale_date.split('/')[2]);
    if (!acc[year]) {
        acc[year] = 0;
    }
    acc[year] += entry.revenue;
    return acc;
}, {});

// Format the data
const yearRevenueData = Object.entries(revenueByYear).map(([year, revenue]) => {
    return {
        y: revenue.toString(),
        x: parseInt(year)
    };
});

// Sort the data by year (y) in increasing order
yearRevenueData.sort((a, b) => a.y - b.y);



return {totalRevenue, totalCourseSold, totalCustomers, courseData, teamData, customerCountryData, ageRangeData, discountData, professionData, yearRevenueData};

You can preview and check the data. Now we will be connecting the query to all the components in this tab.

Select the Total Revenue component and add {{queries.analytics.data.totalRevenue}} in the Primary value.
Select the Total Course component and add {{queries.analytics.data.totalCourseSold}} in the Primary value.
Select the Total Customers component and add {{queries.analytics.data.totalCustomers}} in the Primary value.
Select the Customer location chart component and add {{queries.analytics.data.customerCountryData}} in the chart data.
Select the Courses chart component and add {{queries.analytics.data.courseData}} in the chart data.
Select the Age range chart component and add {{queries.analytics.data.ageRangeData}} in the chart data.
Select the Team revenue chart component and add {{queries.analytics.data.teamData}} in the chart data.
Select the Profession chart component and add {{queries.analytics.data.professionData}} in the chart data.
Select the Discounts chart component and add {{queries.analytics.data.discountData}} in the chart data.
Select the Year Vs Revenue chart component and add {{queries.analytics.data.yearRevenueData}} in the chart data.

Once you are done connecting all queries to your components, turn on Run this query on application load? toggle in the settings, to run this query every time the app reloads.

Conclusion

Congratulations, your Ed-tech sales CRM application is now fully functional! By leveraging Tooljet and the ToolJet Database, you've created a powerful and efficient CRM tailored to the unique needs of the Ed-tech industry. Your application can now effectively manage leads, track sales activities, and analyze performance metrics, all within a user-friendly interface.

We hope this guide has been helpful and inspires you to explore further capabilities and integrations with ToolJet. To continue exploring, check out the official ToolJet docs or connect on Slack for queries and doubt-solving.