this tutorial will show you how to set up a No Code database in Convertigo Studio, and then how to use it in your projects.
Step 1 : Set up your Database account
To start this tutorial, the first thing to do is to open the No Code Database window in the Studio to set up your account :
To do so, click on the "Convertigo" button in the Header and then click the "Open the NoCode Databases view". It will open a Window that will tell you to check your emails to create your profile (The email you created your Studio account with).
In this email, click the "accept invitation" button, it will bring you to the account creation page. Fill in the information and Sign up.
Once you signed up, come back to the Studio : Here is your NoCode Database homepage.
Now you can create your first Database from a template : In the right side of the window, click the "Create new" button "From template".
Here you have a wide range of complete Database template : For this tutorial let's choose "Human ressources" then "Employee directory".
Now click the "use this template" button to install this database.
It now appears on the left : If you open it, and click on "employee", it shows you the Database containing name, picture, job title etc...
Step 2 : Integrate Database sequences in your project
The onboarding has been done. To continue, create a "Convertigo Low Code FullStack Web/Desktop or Mobile app project" project
(if you followed the previous tutorials, you surely know how to do it now !) and call this project "nocode_database_front".
Then, in the Nocode Database window, find your Employee Directory dabatase -> Employees and click it.
Click your nocode_database_front project and come back in the Nocode Database Window and click "import into nocode_database_front" on top of the page.
It will open a window to let you choose which sequences you want to import : Here you want il all, so click "Select all". Don't forget to uncheck the "authentification required", then apply.
Now open your project again in the Treeview, and open the "Sequences" folder, and the Database sequences have automatically appeared!
Step 3 : Display Database in your project
You now have your sequences integrated in your project : If you execute your "Employee_DirectoryEmployeesList" (right click -> execute) it will show you the Data in the editor.
Let's see how to display it in the application:
In your project, go to Application -> NgxApp
-> Pages -> Page, then search in the Palette for the "PageEvent" component and drag & drop it into "Page" in the Treeview. It creates a "pageDidEnter" where you will have to drag & drop the "Employee_DirectoryEmployeesList" sequence (CTRL + drag & drop for Windows and OPTION + drag & drop for Mac).
It creates a CallSequence. Now to display it, let's add a "ListContainer" in the Content by drag & dropping it from the Palette.
Step 4 : Display Database in your project #2
When you place a ListContainer, that includes a ForEach that will be useful :
Click the ForEach, then go into the "Source picker" at the right of the Palette. Here you will have to find the right sequence to iterate : the "Employee_DirectoryEmployeesList" one.
Click it, then open "objects" and select "results", the one that contains the Data. Drag & drop it into your ForEach.
Open this ForEach until finding the "{{item.text}}". Click it, and, in the source picker, click the Blue iterator arrow, select the ForEach that is proposed and inside it choose "Full name" : drag & drop it into your "{{item.text}}" and it will display every full names of the database in the application.
Step 5 : Display Database in your project #3
Now that we have the names, why not completing it with the pictures ?
To do so, you will have to add an "Avatar Item" component into your "ListItem" in the treeview. As you can see for now it shows Yoda, and even if everybody loves Yoda, let's put the people's real faces :
First of all you can change the Slot to "start" (in the properties) to put the image at the left of the names. Then, in the Treeview, open the Avatar Item, click on the "Image" component and then go to the Source Picker. Click on Photo -> [0] -> url and drag & drop the url field in your image component : And here are the employee's faces !
The last step will show how to add a searchbar that will find the employees according to what you typesearch.
Step 6 : Display Database in your project #4
Let's add a searchbar to be able to directly look for what/who you want in the database.
First, look for the "Search Bar" in the Palette and drag & drop it into your Header (you can get rid of the "page" text in the BarTitle).
Then drag & drop an "Event" from the Palette int your Search Bar. In this Event properties, click the "Event type" and click the arrow to choose the one wanted : "ionInput". Then take your "Employee_DirectoryEmployeesList" sequence and drag & drop it into your OnClick (CTRL + drag & drop for Windows and OPTION + drag & drop for MAC).
Right click this CallSequence and click on "Import variables from the targeted sequence" to have the right data, then go to the Source picker and click the "Show Action Sources" (the one that looks like a wheel).
In there, click the "ionInput" and open the "out" and the "target" to find the one you want to link it to which is "value".
Drag & drop this "Value" field into the "search = " located in your CallSequence variables folder.
Once done, you will just have to try a name in the searchbar to see if it works. (Spoiler : It should !)
You now know how to use a Database from a No Code tool and integrate it into your application.