In this manual we will start from simple basic steps and go to detailed configuration of business processes for tables in web applications.
Imagine that we create a CRM for an online marketplace with a lot of orders. We need to have a table to see these orders and control it.
First step is to drag table element to canvas.
Choose the data model that will be used in this table. Make sure that you have created it in the Database Editor and your database has these records.
My Order model has a lot of various fields but I don’t need them all in the table. Need to go to table settings to configure it and activate columns that really should be displayed (let’s choose ID, customer name and status).
The table itself is ready but we don’t have any data inside. Let’s create the first business process for it. When the table is created (On Create trigger runs) we need to request table records from the database and put it into the table.
The most simple business process is this. We use GET /order/ endpoint (this is not the theme of current manual but you need to make sure that you have created backend business process to search orders in database, configured endpoint for it and published your application to make it operable) to get data from database and update data in table.
It’s enough to start using the table but it has a lot of problems that should be fixed. Let’s do it one by one.
- Add some visual fixes to make it more beautiful. Let’s add a loading state to see that we have requested data from the backend and wait when we will get it. When it’s done we need to remove the loading state from the table.
So we need to add an additional block of Table Update Properties. First at the start to set loading = true.
Second will run at the end, when data in the table is updated (so we use On Update Data trigger) and set loading = false.
Make sure that you always set Element Key to configure the exact element that should be used.
2) As a default search blocks at backend requests for 25 records even if the limit is not set. We could set “_limit = -1” to request for all records at once and it could be simple and work fine in some cases. But if we have thousands and thousands of records we don’t need to transfer all this data and this could even be the reason for the OOM (Out of Memory) problem and crash application.
Let’s configure our table to show 20 records at every page and make requests to get only required 20 records for the current page.
Go to table settings and configure pagination. Set 20 for default page size
Next step is to update the business process. Set
_limit = 20 for data request and provide additional information in the Table Update Data block. We have only 20 records in Data but the table should get information about total count to configure pagination correctly. Also we set “Page = 1” as we start from the first page when the table is created.
- Now everything runs smoothly but we still need to configure the pagination process (currently we get only the first 20 records when the table is created and that is all).
So we need to create a process for the On Pagination Change trigger. It’s similar to On Create but has additional offset calculation.
Let’s imagine that we go to page 5. It has data records with indexes from 81 to 100. So we need to request records from the database with offset 80.
This is calculated as:
(Page number - 1) * Page Size
So in our case it will be (5-1)*20=80
That is it. Now we have configured the table with correct pagination.
Additional information for filer options and table customization could be found here