ToolJet: Free Open-source Low-Code App Builder

do you need to be a developer to build apps let's discover tool jet a free open source low code platform to create custom internal tools quickly and easily first it has an easy to ous visual Builder where you can drag and drop blocks to compose the different pages of your apps then you can create databases to make your application Dynamic and easily connect it with the button and interface of your app to feed your database you have 48 ready to use data sources from classic po gr database and Google spreadsheets to stripe and slack Integrations and for any more custom things you can always connect your own API before diving into the platform overview let's see the different options available to start using it you can use the free Cloud version up to five tables and 10,000 rows you can also self- deploy it with Docker by following the instructions on their GitHub repository or use a platform like ours lsal to take care of the installation on the cloud provider of your choice backups updates and maintenance for you to easily install tojet on our platform go to ls. and click on login deploy my first service search for Tool Jets and then click on select choose your cloud provider region and service plan based on your need then click on next adjust your level of support I will keep the free included one and once you're ready click on create service when the installation is finished you receive an email telling you that your instance is ready follow the click here to get the password link you arrive on your LST Administration dashboard click here to copy the password to your clipboard and follow the admin UI link of your tool jet instance you arrive on your fresh instance of tool jet write your email address and paste the password from your clipboard then login you arrive on the dashboard we don't have any application created yet but before doing it the most important deciding if we use the light or dark mode I will keep the light mode we have the choice between creating a new application from scratch or browsing through the different templates we would choose to use a template they are sorted between different categories and for each template you have information about what feature it is using from Tool jet for example this admin panel right here is to administrate a tool jet database and it's using tojet database and some custom JavaScript code inside developer utilities you also have AWS S3 Explorer and the integration it is using is AWS S3 you also have color palette generator that is only using JavaScript so I think it will be a good starting point to dive into the interface of tool jet let's create our application as it is an example we can keep that name and then create app because this is our first application from our account or our instance it is triggering us the onboarding tour so you can see drag and drop component so here it is all the different blocks we can drag and drop we have the inspector we'll go through it later we don't have to remember everything right now you can create queries this is a very important aspect of tool jet then the standard preview and share so you can preview develop and then once you are ready you will release your app and finally you can collaborate with your team members using comments perfect let's click on Don and see the template that we are currently so we won't edit it for now we just click the preview button this template is pretty simple what it does is it takes an input here it's in a hexad decimal color code and when you click on generate color palette it generate different variation of that same color so let's say for example we change the current color with 55 55 and blue with FF generate and it will generate that color so here it's from dark to light and then you create variation using more red more green or more blue you have different actions connected to this template or custom text if you write something like submit you can preview your button with the current text or you can choose to show the loading State and you can also set some canvas background carrier let's say 555555 set canvas background color it we change the color here so this is not using a database is just to show you connection between elements and rendering items now we understand better that project we can look at our interface in tool Jet and see how they created this for example here we have that button with that input so set canvas background color if we click on it configure we can edit the text content of the button here and it contains two events so onclick it will show an alert only if that regular expression here is much so it will trigger the alert if it is false which means the verification for that input is incorrect then it will say please enter a valid hex color code and we have a second one it is when the regular expression is match when it is true then what it will do it will set the color of the canvas using that background color here but the most interesting element here is the generate color palette so what it does is it run a query so the query it run is generate color codes so this is a query we have our queries here on the bottom panel we can resize it to have a better overview of what it does and this is custom JavaScript code so what it takes is a base color and based on it it will generate new colors we won't dive into the JavaScript code it's not the purpose of this video but what you can do is to preview the output of it so it return an array with five items and for each item it's returning new colors so those colors they are the colors that we see here so we have five rows here and for each rows we have all the different colors and the component used to render it is here a list View and you have some settings to make it customized so you can see it's using the data from generate color code it is in a list mode and you can choose the H row so for example we can make it smaller here and we will have less space between the different rows you can enable pagination add events and do a lot more things to dive deeper into the interface let's see another more interesting example so let's go back to our apps here back to apps so we can create an app but it will create it from scratch we still want to use a template so choose from a template and what we will want to do is to go into operations and you have again different templates and the one that will interest us is simple Marketplace so it is a Marketplace of products let's create application from this template keep the default name and create app why this template is more interesting is because it is really using a database under the hood so when we will add product they will be stored inside to Jet database so again let's preview our template and it's ready to use template so we can start using it and it will really add item to our database so we do manage your listings currently we don't have products so we need to add a product so click on list a product and here you have a model with different fields to create our product I've prepared those images we can use for our product let's name it pink marker a beautiful pink marker you already have categories but you can edit them in the database we'll see it later let's say it's a tool the price is $3 you can add a contact number contact email but we don't need it so we can save our product and you can see it is a request that has been submitted it doesn't add it directly we'll see later how to approve product first let's add a second one another image let's name it Cactus beautiful plant the category let's say it's Wellness the price 20 and again we can save our product now let's go back to the page builder and currently we don't see our product so why is that so we can expand the queries here and we have get products and to see a product it need to have its status equals to approved and a lot of other fatures that are used to do some files here but the one that interests Us in that case is the status approved so let's go to our database to accessit again the rocket the logo and database we have currently two tables Marketplace favorite and Marketplace product here we can see the two prodject that we created with that nice table view it automatically has a filter and sort we can select different one delete edit and so on let's expand one so it open the Edition and we know that it is the status that must be to approved and when it's created it's automatically to pending so to set a custom value approved and save changes then we do the same on the pink marker status approved save changes and you can see here if I expanded again you have some additional information about listed by who you can see my email address you have automatically a created that and updated that date that are set when you interact with your data now let's go back to the Builder and see if we can see our product so we can go back to our apps simple Marketplace edit and back to our application we can see them so let's do preview again and what I want to show you is that if we use the search bar for example if I tap pink we can only see the pink marker if I tap CA we have only the cactus everything is ready to use here so for example I think I put the cactus in Wellness apply filter I only see it if I set a maximum price to $10 it will be above so we don't have any projects that much we can reset the filters and we see all the products again and if we look back at the editor how it works it's a very low code platform you just have inputs that you set and connect the different data to connect the different input to impact your data logic here to see how they created it the best example is to try to create our own so let's open on the left the pages here we can add a new page let's name it frequently Asked question currently it's empty and we can add different type of blocks so commonly used table buttons form input text and so on layout so you can create responsive interface and you can see the choice is vast with a large number of different block components so let's add a table we place it randomly it's not so important it has some fake data for the M but first let's add a title here so it's automatically hello and my name so what I will do is frequently asked questions it's not big enough so we can adjust it and on the right we can connect data at events but on the style section we can fine-tune our title so let's make it bigger for example 22 I want to make it a bit Bolder so wait bold and we have our title see how easy it is to create an interface but instead of using those current data those sample data so it's hardcoded here we'll get rid of it and we will create a table to handle it so let's go back to the database here database and because the tables are shared between all the different projects it's good to keep a name convention so let's name it also Marketplace underscore FAQ and we will need two columns at Le these two columns so question you have the choice between all the classical database type so varar and the answer with the same type we don't need relation but you can see that you can create more intelligent one click on Create and let's add our two question so add new row and let's type our question when do I receive my order within three to five business days create let's add another one can I get a refound you have 30 days to claim a refound no questions asked and create now our data is set correctly we can go back to the application so we want to create a query to be able to have a access to our FAQ data so let's expand on the bottom the query so we have get products and so on and we will need to do a two jet database so it's a no code to create database request name it get FAQ the table we target is FAQ the operation is to list all the rows we have we don't need condition but you can see how easy you can choose between columns and value to create some sort of logic one option that interests us is to run this query on application load so we'll have the data directly available we can run preview and here we are we have an array with two items the first question when do I receive my order and the second item can I get a refund perfect so now we can get rid of it and edit our table to connect our data so at the moment I don't know the exact syntax to get access to my data so if I click here do they show me how I don't think so let's look at the other component that are using it let's go back to the homepage here it is using the product so we can copy it get products. data and we'll be using the same so let's go back to the FAQ data and it's not the products we want but get FAQ and now we have our data displayed on the left so currently we have the ID shown we have the possibility to select so we can edit it so we can remove the ID it's not removing it from the database but from the display so now they just see the question and the answer we don't want them to edit so we keep it like this we don't want to allow them to select we disable it but automatically we have a search bar pagination if we have more record and some filters which is excellent currently we don't have an access to our FAQ page so let's go back to the home and we'll add it at a random place maybe here on this bar we can add a button so drag and drop it we have our button let's size it like the others the text FAQ and we need to add an event so it will lead us to the other page so new event handler by default it's so on click it's what we need the action is switch page we don't have condition when we click we want to switch the page and the page we want to open is frequently ask question perfect so let's try to see if it work so right now we have our page we have the FAQ button let's click on it and it opens automatically our frequently as question page I think I forgot to show you something here it's the inspector so here here you have a global overview of your project you have the list of all the queries the different components that compose your page you should rename them to have a clear understanding of what it is but let's focus on the queries so we had get FAQ and here what we could do is copy path to clipboard and on the FAQ on our table we could use the path so if I paste it we had get FAQ and we just had to write data another interesting thing is the collaboration is made easy because here I open it in two tab you can see on the left it's moving the mouse cursor on the right and if I do the opposite you can see the other user that is moving around this in addition to the different comments that you can create on the interface make it very easy to collaborate in team we have seen the database but how do we feed our database it's by using data sources there are tons of ready to use integration from commonly used post G SQL Google Sheets air table mongod DB two more application one with apis for example Stripes slack twio and if you need some custom one you can always connect your rest API the process is made easy for example add you enter the URL you have different option to set but you have the documentation to help you do it and you have that nice guide here to help you achieve it finally in the settings of tool jet go to workspace settings you can invite different users and attach them to different groups so the good thing about groups is that you can create fine tune permission so if I go for example to admins you can choose the permission based on the resources so on apps what can they do on folder what they can do and so on but you can also do fine tune control on which app you want to give View and edit access thank you for watching we hope you enjoyed discovering tool jet with us if you find our content useful please hit the like button to help other open source lovers discover this video don't forget to subscribe to not miss our next platform overviews to continue your open source journey I recommend you watch this video here [Music]

Channel: Elestio

Views: 23,020

Keywords: open source software, open source alternative, elestio, open source, free software, free open source software, opensource, selfhosted, nocode, no code, low code, nocode app builder, lowcode appbuilder, internal tools, salesforce alternative, free salesforce alternative, free powerapps alternative, lowcode app, nocode app

Id: nwEHSp1A_WU

Length: 18min 56sec (1136 seconds)

Published: Fri May 24 2024