Which low-code UI framework? Part 3: ToolJet
Next in line for my low-code UI framework test is ToolJet. I have tried ToolJet before, a few months ago, but never got past the first steps. Now that I understand how to typically work with such framework and with a clear goal, I give it another try.
Setup for the tryout installation is a Docker one-liner. Much appreciated.
Evaluation
CSV editor
First, making the GET query to my CSV “datasource” works fine. There is a distinction between a “datasource” and a “query” (basically you can make multiple queries to the same datasource.)
We can run custom JavaScript in runjs “queries”. ToolJet’s Youtube has a video on how to use JavaScript, make local variables and so on. They also demonstrate how to include external libraries (basically a code snippet that inserts a <script> element into the DOM). In my case, I was able to add the <script> to the DOM, however the library would not load because of Content Security Policy issues (I guess because it’s not from the same domain). I’m sure there is a way around this that I can google, but here it shows that I have no experience with contemporary Web. Anyway, I can use my CSV parser snippet from the Budibase test instead. For real use, I’d have to figure out the library issue.
By the way, we can also run Python. It seems to be running slow (unsurprising, since it is server-side) and in my case, I couldn’t import the `csv` library which IMO should be in core python. So I guess it’s somewhat limited, but nice to have.
My CSV snippet needs a small change because “item.at is not a function” even though it worked fine in Budibase. I don’t get why but OK. I note that the JS editor sometimes loses my changes even if I save.
It offers editable columns and a “Save changes” event right out of the box. I can also trigger a PUT query. To convert the data to CSV, I tried a Javascript query with a snippet, but trying to use the query output as the PUT body seemingly doesn’t work. Putting
“abc, def”
as the data seems to be fine, andqueries.toCSV.data
is a string, but putting{{ queries.toCSV.data }}
in the body results in an “internal server error”. I feel the reason is that the result is not valid JSON but a string, but I can’t prove it.I also tried to
setVariable
the CSV data intovariables.csv
and retrieve it from there. I can usevariables
as PUT body but notvariables.csv
. Also, the UX for “Transformation” suggested that I could apply Transformations for the query body and query response - this is not the case, Transformation seem to apply only to the response.Curiously, no PUT request goes out of the browser when submitting the PUT query, even the ones that work; it seems those are done from server side. This is in opposition to CodeBlocks, where I see a PUT query in the network browser when I do a PUT query.
Nice: the columns are reconfigured automatically when loading new data. Unfortunately, the new columns have to be set to “editable” manually, so the benefit is lost. A table-level “default editable” would do the job.
A JSON Schema form component, which I used in Openblocks as a workaround for editability, does not exist.
Therefore I am failing at a similar point as Openblocks, but for a different reason (actually two: PUT query issue, and dynamic editable column).
Another point I am missing, is modularization: No obvious way to build and reuse a module made out of queries, components and parametrized with variables. (say, make a table editor with
{{root}}/{{path}}
as target address and then use it multiple times). Not a complete show-stopper but a slowdown.I note that refactoring is not automatic: name changes in elements aren’t automatically reflected in references to those elements.
The rawtext editor could be realized quite easily with a modal and a textarea, but suffers from the same issue - I cannot PUT the raw text.
Generic API query
Again, as a second task, I use a paginated API query to a Django Dynamic REST endpoint.
This works quite well: I can easily map the total entries, page number etc between the query and the table with
{{ }}
.The filter string, which can be zero or more
filter{column.operator}=condition
entries, can be composed with a JS query (almost verbatim like for OpenBlocks) and appended to the endpoint address.Weirdly, when I add a similar composer for
sort[]=column,
the app goes into an infinite loop and freezes the browser tab. I imagine
Summary
With the editable table component, I can realize an editor with less overhead than Openblocks, less extra states sitting around, handmade queries to update a single row, etc.
However the issue with PUT queries roadblocks me.
Finally, the UX could use some polishing. Only “Save” saves work-in-progress queries and edits; if clicking away and coming back, the edits are gone. Also it’s just hard to find things.
Business model: ToolJet charges for hosted accounts past two Applications, self-hosted is free including limited SSO options, with customizations available at apparently individualized rates.
The app has been around for two years and is still getting updates. In the end, sustainability will all depend on how their business model works long-term.
In summary, I like some features that are somewhat more elaborate & fleshed out than CodeBlocks. Aside from the PUT query issues, the biggest gripe for me is the somewhat clumsy UI - and after two years it’s not something I expect to change.