DEV Community: shivangT

Build Customer Relationship Management (CRM)- Using Airtable and ToolJet

shivangT — Tue, 07 Jun 2022 10:17:26 +0000

This article is a complete guide to build a a customer relationship management app. Users can list, delete, update & create record on Airtable. We'll have a detailed insight around a customer's order detail. To access the app visit this link:

We are going to build this app with three simple steps:

Building the UI
Integrating data sources & creating queries
Connecting event handlers

You can choose to build your custom UI. We'll have the following features in this app.

Create new lead
Update existing lead
Delete existing lead
List the records

Prerequisites

ToolJet (https://github.com/ToolJet/ToolJet): A free and open-source low-code platform that allows you to quickly build applications. Sign up here.
Airtable: A replacements to traditional google-sheet, Airtable is a database to read & write data.

This tutorial will help you build the complete app in minutes, it'll allow you to understand various steps with a full description. It would be a best practice if you go through the above links before we start building our app.

Building the UI

CRM app we're going to build will look like this, you're free to choose your custom UI. Let's buckle up for a fun developing experience 🤩

First, let's start with building the UI for our app. Open ToolJet Cloud on a new tab & click on “Create New Application”. We'll require the following widgets to make our entire app.

Container
Various input fields
Button
Table
SVG-Image
Modal
Divider

Start with following the steps one by one:

Divide your canvas into 2 containers. The first container will have table widget & the other one will display customer details with delete & edit operations.
You need to configure your table widget with the following input values.

Now, on the second container drag-drop widgets same as the UI below. You have to use the following widgets:

Text: To display all the texts in the present in the UI.
Divider: To provide a separation b/w column names & values.
Button: For edit and delete operation
SvgImage: For logo and icons

We'll be able to collect the following data around a customer:

Name
Contact
Email
Address
Delivery date
Member assigned
Cost price
Selling price
Quantity
Special request
Items
- Next, create your modals for edit & create operations. Replicate the following UI for both the modals.

Bind your modal input fields to connect it with the data.

1) Create modal : Inspect the widgets in the UI and add placeholder texts as per your choice.

2) Update modal : Inspect the widgets in the UI and add default values as shown below. You must sync it with your widget names.

a) Name: {{components.table1.selectedRow.name ?? ''}}
b) Email: {{components.table1.selectedRow.email ?? ''}}
c) Contact: {{components.table1.selectedRow.contact ?? ''}}
d) Address: {{components.table1.selectedRow.address ?? ''}}
e) Priority: {{components.table1.selectedRow.priority ?? ''}}
f) Status: {{components.table1.selectedRow.status ?? ''}}
g) Items: {{components.table1.selectedRow.items ?? ''}}
h) Member: {{components.table1.selectedRow.member_assigned ?? ''}}
i) Cost Price: {{components.table1.selectedRow.cost_price ?? ''}}
j) Quantity: {{components.table1.selectedRow.quantity ?? ''}}
k) Special Request: {{components.table1.selectedRow.special_request ?? ''}}
l) Selling Price: {{components.table1.selectedRow.selling_price ?? ''}}

Now trigger both your modals on respective button clicks, On the Navbar we've our create new lead button. Inspect and add an event handler. Select Show modal under action and the name of your Create new lead modal under modal name. Do the required for your edit modal as well.

Congratulations 👏
You have successfully completed the first step, Next, let's move to the most important step.

Integrating data sources and creating queries

We'll use Airtable to implement the backend for our app. You can visit this link to setup your account if you haven't already done it.

Step 1: On ToolJet, go to "sources" tab & add a new source. Search & select Airtable.

As the next step you need to fill the credentials for API key which you can access from this link once you create your account.

Step 2: Once the data source is successfully saved, let's set up Airtable data sheet.

a) Name your sheet as per usecase, I've named it
as user_list.

b) Add the following column names & specify their data
types as the following. You should name them in small-
cases, its a good practice. These are the inputs we'll
use to manage our customers.

 `
 **name**: String
 **contact**: number
 **email**: String 
 **address**: Long text
 **deliver_date**: Date
 **member_assigned**: Single select
 **cost_price**: number
 **selling_price**: number
 **quantity**: number
 **special_reuqest**: Long text
 **items**: Single select
 **priority**: Single select
 **status**: Single select
`

You should set your custom options for the next step, else copy the details below.

Under member_assigned, type Single select, enter & save the following options.

For items,type Single select, enter the options below.

For status, type Single select, enter the options below.

For priority , type Single select, enter the following options.

Our table setup is completed now, let's continue with the next step.

Step 3: Once the data source is successfully added, we'll configure four operations so we have to create queries respectively.

a) First Operation- ListRecord

It'll be used to access all the records from our Airtable sheet. We'll use it to populate data in the table widget. You can also refer this link to read the documentation for Airtable integration.

Expand the query panel at the bottom & click on create query button & select Airtable.
Now, under Operations, select List records.
For Base ID, go to your Airtable data sheet & on the top right corner click on Help button. A side drawer will appear, at the bottom click on "API Documentation". You will be redirected to a new page where you can find the Base ID. It'll look something like this apptJ2LJtQqSt0CYh. Note: use your unique Base ID & don't copy this.

Under Table name, enter the name of your table. I've entered it as lead_list
We'll avoid enter values for Page size & Offset. You can use these values if it fulfils your app requirement.

-Now, toggle on "Transformations" to modify your data source. We're creating an array of objects using this function with the required data we want for our app.

return data.records.map(row => { let obj = {} obj.fields = row.fields obj.fields.id = row.id return obj.fields });

You can preview the output of this code below the code editor. Once all the values are entered, click on create & then save query.

b) Second Operation- CreateRecord

This query is used to Create a new row in our Airtable spread-sheet. Start with selecting the Operation as Create record. For the Base ID & Table name enter the values from the previous step.

Under Records, here we'll enter the row value that we want to enter in our spreadsheet in the following format, also keep in mind to sync the correct widget names as per your modal UI.

[{"fields":{
 "name":"{{components.textinput2.value}}",
 "email":"{{components.textinput1.value}}",
 "address":"{{components.textarea2.value}}",
 "priority":"{{components.dropdown4.value}}",
 "delivery_date":"{{components.datepicker1.value}}",
 "member_assigned":"{{components.dropdown3.value}}",
 "contact":{{parseInt(components.numberinput7.value)}},
 "cost_price":{{parseInt(components.numberinput1.value)}},
 "selling_price":{{parseInt(components.numberinput2.value)}},
 "quantity":{{parseInt(components.numberinput3.value)}},
 "items":"{{components.dropdown2.value}}",
 "special_request":"{{components.textarea1.value}}",
 "status":"{{components.dropdown1.value}}"}}]

Note: You have to parseInt the number inputs i.e contact, selling price, cost price & quantity.

Once you enter all the values, you can trigger Create modal which we built in the first step. You can fill input fields with values in the modal and, preview the data at the bottom of the query panel. This is an ideal way to test & understand the flow of the data in a query.

c) Third Operation- UpdateRecord

This query is used to Update an existing row in our Airtable spread-sheet. Start with selecting the Operation as Update record. For the Base ID & Table name enter the previous values.

For the Record ID, we've can access it from our data source we transformed. Enter the following value.
{{components.table1.data.selectedRow.data.id}}

Under Record ID, we'll input the row value that we want to update in our spreadsheet in the following format, also keep in mind to sync the correct widget names as per your edit modal UI.

{
 "name":"{{components.textinput5.value}}",
 "email":"{{components.textinput4.value}}",
 "address":"{{components.textarea4.value}}",
 "priority":"{{components.dropdown5.value}}",
 "delivery_date":"{{components.datepicker2.value}}",
 "member_assigned":"{{components.dropdown6.value}}",
 "contact":{{parseInt(components.numberinput8.value)}},
 "cost_price":{{parseInt(components.numberinput5.value)}},
 "selling_price":{{parseInt(components.numberinput6.value)}},
 "quantity":{{parseInt(components.numberinput4.value)}},
 "items":"{{components.dropdown8.value}}",
 "special_request":"{{components.textarea3.value}}",
 "status":"{{components.dropdown7.value}}"
}

Once you enter all the values, you can trigger Edit modal from the first step. You can fill input fields with values in the modal and, preview the data at the bottom of the query panel to understand the flow of the data.

d) Fourth query- DeleteRecord

This query is used to delete an existing record in our Airtable spreadsheet. Follow the steps to quickly set up this query.

1) Start with selecting the Operation as Delete record. For the Base ID & Table name enter the previous values.

2) In the record ID enter the the following value
{{components.table1.selectedRow.id}}.

Amazing!! 🤩 We have successfully implemented our queries. Now let's start creating and connecting our event handlers.

Connecting event handlers

Now that we have built the user interface & created all the queries, all we need to do is connect the UI with queries. Let's get started:

Trigger the Create_Lead modal, inspect the "Create" button in it & add the following four-event handlers in the same sequence:

a) CreateRecord: Under action, enter Run Query and select your Create Record query name as Query.

b) ListRecord: Under action, enter Run Query and select your List Record query name as Query.

c) CloseModal: Under action, enter Close Modal and select create new record Modal name as Modal.

d) ShowAlert: Under action, enter Show Alert. Add the message and Type to alert the user on success of this query. I've enter New lead added as message and success alert type.

Trigger the Update_Lead details modal, inspect the "Update" button in it & add the following four-event handlers in the same sequence:

a) UpdateRecord: Under action, enter Run Query and select your Update Record query name as Query.

b) ListRecord: Under action, enter Run Query and select your List Record query name as Query.

c) CloseModal: Under action, enter Close Modal and select create new record Modal name as Modal.

d) ShowAlert: Under action, enter Show Alert. Add the message and Type to alert the user on success of this query. I've enter Lead Details updated as message and success alert type.

Now inspect the delete button in the UI and add the following three event handlers in the same sequence:

a) DeleteRecord: Under action, enter Run Query and select your Delete Record query name as Query.

b) ListRecord: Under action, enter Run Query and select your List Record query name as Query.

c) ShowAlert: Under action, enter Show Alert. Add the message and Type to alert the user on success of this query. I've enter Lead Deleted as message and success alert type.

Inspect the table widget and in the table data input field add the following {{queries.ListRecord.data}}. This will connect our table with Airtable spreadsheet data.

Binding the values in the right container of our app's UI. Inspect each text and add the following values. This will allow us to show the details when we select a table row. Kindly sync the names correctly as per your UI.

Name: {{components.table1.selectedRow.name}}
Email: {{components.table1.selectedRow.email}}
Contact: {{components.table1.selectedRow.contact}}
Address: {{components.table1.selectedRow.address}}
Priority: {{components.table1.selectedRow.priority}}
Status: {{components.table1.selectedRow.status}}
Items: {{components.table1.selectedRow.items}}
Member: {{components.table1.selectedRow.member_assigned}}
Cost Price: {{components.table1.selectedRow.cost_price}}
Quantity: {{components.table1.selectedRow.quantity}}
Special Request: {{components.table1.selectedRow.special_request}}
Selling Price: {{components.table1.selectedRow.selling_price}}
Final Price: {{(components.table1.selectedRow.selling_price - components.table1.selectedRow.cost_price)*components.table1.selectedRow.quantity}}

You can use ternary operator (? :) to display a custom option when no data is available. This will make the UI look better.
For e.g {{components.table1.selectedRow?.status ? components.table1.selectedRow.status: '-----'}}

Congratulations!! 🚀 You have successfully built your application. I hope you had a good time building something new today, you can start working on this app directly by selecting this template when you create a new application.

We are continuously integrating different data sources with ToolJet. Stay in the loop to read upcoming releases to develop useful internal tools. If you have any trouble building this application, please join our Slack community or email us at hello@tooljet.com.

Build a Bug tracker app using ToolJet and Appwrite.

shivangT — Thu, 05 May 2022 20:12:29 +0000

This article will see a complete guide to building a Bug-Tracker app that allows you to create and manage your bugs with title, description, project name, priority, and tag with inbuilt messages to notify the user. You can preview the hosted app here

We are going to build this app with three simple steps:

Building the UI
Integrating data sources and creating queries
Connecting event handlers

Here’s how our app will look in the end:

Pre-requisite:

ToolJet: Building the UI of our app
Appwrite: For storing bug reports in the Appwrite collection
Aws S3: For storing images in the S3 bucket
DigitalOcean: For deploying Appwrite

This tutorial will help you build the complete app in minutes, and it will allow you to understand various steps with a full description. It would be best if you go through the following articles before we start building an app. Let's buckle up for a fun developing experience.

Building the UI

First, let's start with building the UI for our app. Open ToolJet on a new tab and click “Create New Application”. We will require the following widgets to make our entire app.

Container
TextInput and TextArea
Button
Table
Dropdown
File-Picker
Image
Modals

Step 1: Create a table view to list and manage the bugs

Drag and drop a container widget from our widget menu on the right, and expand it completely. Now drop the table widget inside our container. Once done, Let's inspect the table widget and start adding the following:

Add column: Title, Description, Priority, Status, Project Assigned & Message

Actions Button: “View details” and “Edit.” We can style our buttons by clicking on the actions. We will later set the “Add Handler” property once we finish our modal views.

On the top of the table, add the “Text” widget called Bug Tracker and a “Button” widget with CTA “New Bug”. We can style the button by adding colors and border radius to it. We will set the onClick event later.

Step 2: Create modals for CRUD operations

We have to create three modals popping up to perform all the crud operations in the app. You are free to make your layouts.

New Bug: This allows you to list a new project-specific bug with titles, descriptions, priority, messages, and related images.

Drag and drop texts, text-input, text-area, dropdowns, file-picker, and button widgets and adjust according to the UI above.

Inspect each input field and add a label, placeholder, and add the option values and labels in respective drop-downs with the following inputs. You can modify these values as per you

a) Select priority : {{["Low", "Medium", "High"]}}
b) Name of Project : {{["Mobile App", "Internal Tool", "Website"]}}
c) Notify Message : {{["Resolve Now","Resolve in 3hrs", "Resolve within 48hrs", "Thanks for resolving"]}}

View details: This allows you to watch specific details around your bug for a better understanding.

Drag and drop texts and image widgets to adjust according to the UI above. We display the bug title, priority, description, message, and images.

Inspect modal, set the title to Title:{{components.table1.selectedRow.title}}

We need to bind the data in our texts to display the following UI.
a) Message: {{components.table1.selectedRow.message}}
b) Priority: {{components.table1.selectedRow.priority}}
c) Project: {{components.table1.selectedRow.project_assigned}}
d) Description: {{components.table1.selectedRow.description}}

Inspect the image widget and set the URL to: {{queries.ListDocument.data.documents[components.table1.selectedRowId].preview_url}}

e) Message: {{components.table1.selectedRow.message}}

3. Edit: This allows you to perform edit and delete operations on an existing bug.

Drag and drop texts, text-input, text-area, dropdowns, file-picker, and button widgets and adjust according to the UI above. Currently, we don't have an option to edit the image. I will release it in the next version of this application.

Follow step one to populate the dropdown option's value and label. Now add the default value under each input field as:

a) Title: {{queries.ListDocument.data.documents[components.table1.selectedRowId].title}}
b) Description: {{queries.ListDocument.data.documents[components.table1.selectedRowId].description}}
c) Priority: {{queries.ListDocument.data.documents[components.table1.selectedRowId].Priority}}
d) Name of project: {{queries.ListDocument.data.documents[components.table1.selectedRowId].project_assigned}}
e) Notify Message: {{queries.ListDocument.data.documents[components.table1.selectedRowId].message}}
f) Uploaded Screenshot: {{queries.ListDocument.data.documents[components.table1.selectedRowId].preview_url}}

Step 3: Inspecting table format and styles

Let's format and style the table widget. You are free to explore various options available for your purpose. Kindly copy the following settings and paste them into your app.

a) Properties: This helps you display the collection you created on Appwrite. Later in the tutorial, we will learn about creating queries. You have to copy this {{queries.ListDocument.data.documents}} in the input field.

b) Columns: We have defined these columns in our Appwrite attributes. We have to update and add the following columns, i.e., title, description, priority, project_assigned, and message. Note: Define attributes in a small case. Under each column setting, assign the same value to the key as the column name.

c) Action Buttons: Once you add two action buttons, Edit and View details, you can explore its settings to style the button. You must add an event handler with "Show Modal" as action and select the view_details modal. Do the same in the Edit action button's settings for the Edit modal.

d) Styles: Under the table's styles tab, set Action Button Radius with 8, Table Type as bordered, Cell Size as spacious, Border Radius as 8.

Step 4: Connect modals in the UI

Let’s add our modals with the onClick events to our respective buttons. Inspect each button and navigate to the “Add event handler” property to perform this step.

Now Click on “Action” and set it to “Show Modal”. We get to select the action options where we put them to our respective modals.

Great !! 👍 We have completed the first part of our application. Now let's move on to the next step.

Integrating data sources and creating queries

We have to add 2 data sources, i.e., Aws and Appwrite. You can visit these links to read about the steps involved in the integration.

Step 1: Add Data sources

a) Set up AWS:

Create your account on AWS
Once done, you have to give access permissions
Create a bucket with your name preference
You need to collect the access and secret key and go to the ToolJet tab where you have built the UI
On the left-hand side, select sources > click on “+” to add data source > Search and select AWS s3
Now fill in the inputs fields Access key, Secret key, and in the region select “Asia Pacific (Mumbai)”
Once you test the connection, then save

b) Set up Appwrite:

We'll be deploying Appwrite on DigitalOcean. To do the this, follow the steps:

Sign up for a free account on DigitalOcean, and it may ask for card details for verification purposes while signing up for the first time.
Once signed up, you'll receive free $100 credits valid for 60 days from the date of registration. You can use these credits for deploying apps.
Now create an Appwrite droplet in your DigitalOcean account from the following link: https://marketplace.digitalocean.com/apps/appwrite.
Next, select the capabilities that you want for your Droplet. We will go with the “Basic” option of a shared CPU and at least 1 GB of RAM. Select the cheapest option with Intel CPU with SSD for $5 per month.
In the next step, create the login credentials for your virtual machine. You can either add SSH keys or create a root password. Adding SSH keys is the recommended way, but you can go with the root password if you're new.
Click on finalize and create. After some time, DigitalOcean will have your virtual machine running.
Finally, you can go to the IP address or URL for our new server and log in to the Appwrite console.

Creating collections and documents

Now let's look into creating collections and attributes in Appwrite.

Once you have signed in to the Appwrite console, create a project. Let's call this project: **bug_tracker**

Go to the Database from the sidebar in the console, and click on the Add Collection button. In the modal, enter the collection name as bug_tracker and click Create button.

In Appwrite, Collections hold Documents. We will add a few sample Documents to the Collection that we created. You can think of Collections as tables and Documents as rows. But before adding documents, we will need to add Attributes.
We will need the following attributes for the documents in our collection:

Attribute ID(key): title, Type: String (Title of the bug Ex: Button-alignment)
Attribute ID(key): description, Type: String (Describe the bug. Ex: On /user/profile align the "Save details" button to the right)
Attribute ID(key): priority, Type: String (Set it to low, medium, high)
Attribute ID(key): message, Type: String ( Select a message from the dropdown: Ex: Resolve Now)
Attribute ID(key): project_assigned, Type: string (Project where the bug is found. Ex: Website)
Attribute ID(key): preview_url, Type: string(URL) (URL of the picture of the bug's screenshot)

Finally, you can start adding documents to the collection.

Let's look at the steps for adding the Appwrite data source:

Go to the left sidebar, and click on the Datasource.
In the modal that pops up, select the Appwrite data source.
You'll be asked to enter the - Host, Project ID, and Secret Key. You'll find these three in your Appwrite console.
Now click on the Test Connection button to verify that the Appwrite server is connected successfully.
Click on Save to add the data source.

Cheers!! 😍 We have added our data sources. Now, let's create different query operations required to integrate into our application.

Step 2: Creating queries

These are the following queries we are going to create. I will describe each step in detail. Click on the '+' icon on the left and select AWS S3 or Appwrite as dataSource for respective queries.

Let's create our first Query to connect the AWS bucket we made in our previous step.

UploadImage: Name of the query. We upload the file picked by our file picker widget to our AWS bucket.

Please select the following details and fill them in, respectively. These components are from our **create_new_bug **modal, so you set them accordingly.

a) Operation: Upload Object
b) Bucket: The bucket you created in your AWS dashboard. I have named mine 'tooljet-bucket.'
c) Key: {{components.filepicker2.file[0].name}}
d) Content-Type: {{components.filepicker2.file[0].type}}
e) Upload Data: {{components.filepicker2.file[0].base64Data}}
f) Encoding: base64

Once done, SAVE this query.

Download: Name of the query. We are downloading the signed URL to preview in our app.

We need to add the following:

a) Operation: Signed URL for download
b) Bucket: Name of the bucket where we are downloading the preview URL
c) Key: It should be the name of the file. {{components.filepicker2.file[0].name}}
d) Expires in: Set it to 36,0000

Congratulations!! We have successfully set up our first queries. Now let's create Queries with the following names to connect the Appwrite to perform the basic CRUD operations.

ListDocument: To list all the documents we created in our collections on Appwrite. Copy and paste the following values.

a) Operation: List Document
b) Collection ID: Under settings, you will get this in your Appwrite dashboard.

Under the "Advanced tab," toggle on "Run this query on page load." Once done, save the query.

createNewDoc: To add new entries to our collection. Fill in the following fields.

a) Operation: Add Document to Collection
b) Collection ID: You will get this in your Appwrite dashboard under settings.
c) Body: Add the following key-value pairs. This is the data format in which our Appwrite collection will receive data.

{"title": "{{components.textinput4.value}}","description":"{{components.textarea3.value}}","project_assigned": "{{components.dropdown7.value}}","priority": "{{components.dropdown8.value}}","message": "{{components.dropdown9.value}}","preview_url":"{{queries.Download.data.url}}"}

You can save the query once you confirm all the components.

DeleteDocument- To delete a document in the collection

Add the following:

a) Operation: Delete Document
b) Collection ID: You will get this in your Appwrite dashboard under settings.
c) Document ID: It is nothing but the selected row id. {{queries.ListDocument.data.documents[components.table1.selectedRowId].$id}}

Once done, save this query. Now let's take a look at our last query.

UpdateDocument: To update a particular document in the collection.

a) Operation: Update Document
b) Collection ID: You will get this in your Appwrite dashboard under settings.
c) Document ID: It is nothing but the selected row id. {{queries.ListDocument.data.documents[components.table1.selectedRowId].$id}}
d) Body: Add the following key-value pairs. This is the data format in which our Appwrite will receive data and update the collection.

{"title": "{{components.textinput3.value}}","description":"{{components.textarea2.value}}","project_assigned": "{{components.dropdown4.value}}", "Priority":"{{components.dropdown5.value}}","message": "{{components.dropdown6.value}}", "preview_url":"{{queries.ListDocument.data.documents[components.table1.selectedRowId].preview_url}}"}

Save the query once the details are filled up correctly.

Amazing!! 🤩 We have created all our queries. We need to connect these queries in our app on button clicks as a next step now.

Connecting event handlers

Now that we have built the user interface and created all the queries, all we need to do is connect the UI with queries. Let's get started:

Go to the Create_New_Bug modal, inspect the "Create" button widget and add the following six-event handlers in the same sequence:

a) Set Variable: Select the following action and add key as "new_bug_status" and set the value {{true}}. Go to the Advanced tab under the ListDocument query setting and click on "add a handler". In action, select "set Variable", key as new_bug_status, and value as {{false}}. In creating a button, also update the loading state programmatically with the following value: {{variables?.new_bug_status ?? false}}. This will allow a loading stating while queries are being processed.

b) Run Query: Select the following action and add query as "uploadImage."
c) Run Query: Select the following action and add query as "Download."
d) Run Query: Select the following action and add query as "createNewDoc."
e) Run Query: Select the following action and add query as "ListDocument."
f) Close Modal: Select the following action and add modal as the current modal name, i.e., Modal3 in this case.

Go to the Edit_Bug modal, inspect the "Delete" button and add the following three event handlers in the same sequence:

a) Run Query: Select the following action and add query as "DeleteDocument."
b) Run Query: Select the following action and add query as "ListDocument."
c) Close Modal: Select the following action and add modal as the current modal name, i.e., Modal2 in this case.

Go to the Edit_Bug modal, inspect the "Update" button and add the following three event handlers in the same sequence:

a) Run Query: Select this action and add query as "UpdateDocument."
b) Run Query: Select the following action and add query as "ListDocument."
c) Close Modal: Select the following action and add modal as the current modal name, i.e., Modal2 in this case.

We have successfully connected the queries and UI, and our app is fully functional now. You can now understand the reason behind the sequencing queries in such a way. Now, we can perform any CRUD operation and check all the flows in our app.

Congratulations!! 🚀 You have successfully built your bug-tracker application. I hope you had a good time building something new today, and you can start working on this app directly by selecting this template when you create a new application.

We are continuously integrating different data sources with ToolJet. Stay in the loop to read upcoming articles to develop useful internal tools. If you have any trouble building this application, please join our Slack community or email us at hello@tooljet.com.