Build your first ToolJet app in less than 10 minutes

hey in this video we're going to build and publish our very first app using toolshed so to begin with we'll be building an easy and straightforward application that anyone can create regardless of the experience level and by the end of this video you'll not only have a working application but have gained a few fundamental skills to start working with tool Jet and building apps with it let's get started so here is the complete application that what we will be building in this video so this is a product Explorer where the data is coming from a

fake store API which we'll be looking into in a while so this is a table which lists all the different products and the moment you click on a product you should be able to see the details of the product like image title price and a little description with rating so you could able to explore all the different products the moment you click on the item of the row so that you should be able to see the product details and all of the details as I said are coming from a fake store API product endpoint so

this is the complete complete data that we are bringing into the toolsit application and weaving or exploring it in a simple app there you go so let's get started on building this from the scratch go ahead to your tool jet account and create a new app and this is where you'll be landing in right so the first thing what we've been needing here is a container as the background and which will be also holding all the different components that we'll be having for the application so drag and drop a container and adjust the width and

height of it so that it looks good there you go and the first thing what we've been needing here is a table to list all the different product titles so search for a table or it should be always on the top in the component manager and once you have it drag and drop into the Container which we have just created and then adjust it to the middle so that we have the next image and the other components coming in so drag it to the bottom and there you go we'd be not needing the query panel

for a while we'll be getting back to it later so let's minimize it from here there you go so the next thing what we've been needing here to present the image title description price and the start rating so to do that we also would be needing another container to hold all of those items let's search for another container and add it to here adjust the sizes that should be fine so to get this highlighted let's click on the container and go to the style software and let's add some Shadows maybe two into the X and

Y and let's have a blur value around Phi there you go looks good so now we have the table and the container which should hold the image so let's go ahead and search for an image component drag and drop and drop it to the container that should be fine we need a text component for holding the title so there you go and then we can set the alignment into the Styles tab go to the styles of the text component and then go to the bottom and see the Align text and set it to the middle

okay so we can also increase the height a bit and this should be this should be the title we'll be updating as we have the data coming along and the next thing we can have another text component for the price drag and drop have it up here and then change this to price and we'll update the field later okay let's also set the style to the alignment to Middle and then we can make it bold so you can go to the font weight change from normal to bold there you go so we need one more

text component to display the description of the product and now uh we can change the style of this phone to lighter and also set it to the alignment middle and we would need one more component to present the star ratings so go to the component manager search for Star or you can just search for rating it should be up here drag and drop it to the container and then we would be not needing this text what we call the label for the star rating component you can find that in the properties tab remove this up

and then you can set this to the middle to a little bottom and there you go okay now the UI is ready what we need is some data to populate the table and on the moment I click on the item of the table the details of the product should be displayed here so first and the form was to do all of this we need the data to be coming along so the data what we'd be needing is the fake store API which is an endpoint with products and you see the data up here uh we'll

be bringing all of this data to our application so go to your app and pull up the query panel now and now select the rest API as the data source and you click on it you see that the default is a get request that you can create so I'm going to use that endpoint fixerapi.com forward slash products all right so as given this is an open endpoint it would not need any headers a body or any authentication so you can make a quick preview by clicking on the preview button here and the moment you see

the preview you should be able to see the data coming to your application so you can find all of this data in the query panel by expanding it to there okay let me name this query as get products and you can create this by clicking on the create button so the moment you click on that you should be able to see the query is created all right so let me make a quick final preview so how do you do it click on the preview button and you should be able to see the data up here

all right so let us now populate the get products data to the table first so how do you do that so click on the table component first and then you see the date uh table is selected here let's go ahead to the properties and let us remove this dummy data which is currently displayed so all of this data is here let us remove this up and now use the double curly braces and say queries dot get products dot data what I mean by this we are accessing queries and the queries which we currently have is

get products and from that we are getting the data of that query all right so here we go the data is auto populated The Columns are automatically generated from the field values so with within all of this we'd be not needing all of this information which we are getting from the data to present we'll be only needing the title of it so let us remove The Unwanted columns so ID is something not needed the price is not needed description category and image we will use all of this and to present here but for the table

this is going to be a list of all the products all right so let us also increase the count there is some limitation here for the properties to show the list of all the products which is currently 10 so let us put it up to 20. there you go we have a 20 products in the table all right so the next thing is something we have to display on click of a product let's go ahead and display it on uh the second container which we have created all right let's minimize the query panel again and

let's go ahead and configure the image first click on the image component and you see that URL is something which is by default remove this and now we wanted to access the specific product of this so let us click on a specific table item which is a product so men's cotton jacket just just click on it and go to the image and now go ahead to the component properties start with double curly braces and say components dot table 1 which is the ID of our table and then say dot selected row and Dot image all

right so if you see that we are accessing the components which is table one the ID of the component which is which we are using and in that table we want the selected row and the selected rows image and the moment I go back and click on the canvas you see the image coming up here so let us check with the other things you can click on other products so the moment you click on that you see the data is changing all right to make it look more good what you could do is you can

click on this table and also add an option to show the selected row which is also called The Highlight selected row so that you can turn on this so that you would be knowing what is the active row that is selected okay so there you go you have the image up here and let us also set the title here how do you do it click on the component go ahead and remove the text up here and start using the curly braces and say components dot the same way table one which is ID of our table

and Dot selected row dot title I hope you will be able to understand we are going to the components and our component table one and selected row enter the title all right there you go we have got the uh title up here let us also set the price so we have the price up here and we can start using the curly braces right from here you can say components dot table one selected row dot price there you go you can bring it a bit down and now let's go ahead set the description in the same

way remove this say components selected row dot description there you go and now let's go ahead and set the last thing which is going to be the star rating and click on the component and you see the properties go to the properties and change the default number of stars selected remove this and let's access the value from the table from selected row dot rating dot rate there you go so let's go ahead and check with other other products so click on this one and you see the details of this product there you go and to

publish this what you need to do is to go ahead and click on release all right now the version one is released so to share this you should be able to click on the share button and then you can make this public all right so with this you should be able to access your application across so this is the very first app that you can easily build by fetching an API data into the application and presenting into different components so the components we used is a table containers image text and star rating I hope you

are able to build your very first app with tool jet ready thank you