Tadabase Developer Technical Questions

App Development
1

Hey Tadabase Dev Team,
I’m a developer working with @SafetyUniversity to add some customized features to his applications.

Been learning Tadabase too, naturally. Really liking the platform so far!

It’s my first time working with a low code solution, and I was wondering if @moe or @tim.young could fill me in on some details regarding the technical side of Tadabase. (Or anyone else really)

Been looking at your examples and combing through the forums for a while now too.

  1. Say I wanted to integrate some custom web components into an application, for example utilizing Angular elements, would that be possible? I’m really trying to figure out the insertion point…
    – Especially, what is the loading mechanism for the Javascript tab on a page?
    – Databinding! Obviously pipes are a form of databinding, is there some type of binding included with the Javascript tab as well? [I can test this in a bit]
    – OR does the Javascript tab only trigger on page load? (I need to dig into page load rules more).

My concern is how do I ensure the elements I introduce stay reactive, similar to how data binding in Angular works. (Or reactivity in any modern JS framework). It’s a bit more opaque to me since I can’t just look at the entire codebase at once.

A more practical usecase:
Everytime a table is modified through multiple ways via the UI, through any number of Users, I would like to evaluate a Javascript expression, and do some stuff.

If the javascript in the javascript tab of a page is run only on Page load, I’ll have to find another way.

Because I want to evaluate on Page load, as well as at any time data is changed in a specific set of tables / form. This would allow me to then update multiple UI components state. (Tb render hide component) etc.

(Essentially how do I do state managment in a low code/ high code App). :slight_smile: Hope that made sense.

  1. It seems that the application itself is running as an Angular SPA, does that mean I can call Angular within my scripts and not worry about import (Since Tadabase is already utilizing it?)
    – Which Angular version are you running?

  2. Most of my tasks will be in embedding components and custom microservices throughout existing Applications. I’d like more control than “create custom component” for some use caseses.

Typically, I would approach this through generating a custom component, then inserting it into the appropriate position in a page’s DOM. Is there any way I can view a generated pages DOM?

I see a live preview of the page on page builder, is there any way to view the page in HTML. (I guess I could look at the developer tools view of your preview page link?) Is that the way to go?
^^ That would be great.

  1. I believe I saw that App “Admins/Owners” can view changes to the application, in a blog post I think? Do you mind linking me to more info on that?
    One of my concerns is how to do a “merge commit” to an existing application. It would be nice to evaluate every set of changes before integrating into a final “deployment” version. This is more of a workflow thing.

  2. Is it possible to output an entire page as Html/Css/JS, modify it, then reupload it to Tadabase prior to running the Angular compiler (Ngc)? This would be more developer friendly, and I could control iterations/variations via Git. :slight_smile:

Especially as our Apps scale with multiple clients, I’m not quite sure how pushing updates will work out across duplicate instances of an application. I suppose you can make changes then “copy paste overwrite” the existing deployed version of an app…

What would you suggest?

  1. If I create tables through the API, I can create more than 5 right? (I believe there is a 5 table limit in terms of duplicating tables from a UI element?). I can either create tables as necessary and populate them… or I can duplicate however many I want right? (Via Javascript API).

  2. I should be fine running whatever version of Js that Chrome is running right? (Or any modern browser). Do you have a specific JS version to stick to?

  3. What test automation framework do you guys use for the front-end? It seems running Cypress or Playwright against the live application would be fine right, just as I would do against any other SPA?

Any advice would be appreciated.

PS If a Zoom call would be easier, I would definitely be open to just do that.

Thanks in advance,
Deepak

2

@dseeni, quite a lengthy post, working on a response for you. Will post a bit later.

1 Like
3

Sounds good @moe,
Yeah I wasn’t sure if I should make seperate posts or just keep it to a single thread haha.

4

You have great questions and I’ll do my best to answer them.

  1. The JavaScript tab loads the data when the page loads. We therefore have callbacks you can listen for to know when a specific component has loaded so you can write your magic after its fully rendered.

  2. There’s no built in data binding and even though we currently use Angular, we don’t enable access to Angular from the app side. The only binding you’d have is ones you create custom using JS/Jquery.

I’ve discussed with our Engineering team about adding additional callbacks for events such as form submit and inline editing. For now, we don’t have that option and only have callbacks for when a component is rendered.

It’s not possible to view the page as a whole in HTML/CSS/JS. We render it dynamically and server side.

For creating tables via the API, I assume you mean creating records in the tables (record utilities pipe)? If that’s so, we can likely add additional tables if necessary. But, its not officially supported by our support team. We’ve have better luck using services like Integromat for such actions.

  1. For logs of page builder, please send me your email and I’ll enable it for your account.
  2. I believe you can greatly beneft from being able to run Pipes from the Javascript. Don’t store API details in the JS as its 100% insecure. Once I have your email I can enable that feature for you.
  3. We have a Builder API that we’ve been trying to publish but haven’t gotten around to it. Eventually you’ll be able to do all page builder actions from the API, but its quite long ways off at this point.
  4. We’re eventually also going to switch from Angular to React and therefore recommend sticking with Jquery which should still be supported after we switch.
  5. For displaying your custom components, have you seen the custom component feature?

I hope that sheds some light on your questions.

3 Likes
5

Thanks for the replies @moe!

My mistake, I meant adding records to existing tables, not creating new tables.

This seems possible with the REST api, although I’ve only tried GET and not POST yet.

For most of my work, initially I was thinking I could query the Api from the script tab and do “tb hide component” on a part of the UI (based on certain table records).

But now that you mention it, there are API keys required and thata’s note secure unless the API query comes from AWS.

If javascript pipes let me do the equivalent of a REST GET / POST records → I can proceed from there.

Actually @moe
I have a custom pipe setup that gets me the records in a table. How do I access the pipe return value in the javascript tab of a page, I would like to hide a component based on processing some records.

Like here:

image
image820×218 12.4 KB

If I make an unsecure API call from the javascript tab, the component flashes then disappears, which isn’t acceptable for this function. (I could have secured from AWS if the flashing was preventable but I don’t think that’s possible due to server side rendering on your end).

Please advise…