TB.render explanation

App Development
1

Not every question about explaining code gets answered by ChatGPT, neither by Iris.

My question: can you give some more context about TB.render.

When I try to hide a component with hideComponent, I call the hideComponent with JavaScript from within another component. So let’s say when component 25 is rendered, I can hide component 23, but hiding a component itself with the tb.render function is (I thought) problematic, at least I have not seen this on this platform.

But when does the rendering actually kick-in?
For example I have a form on a page with a table. First the form appears, then the table below the form and then the form gets hidden with the tb.render function.
It would be great if you can time it, so the form gets rendered on the page, and then immediately you hide this form with hideComponent, before the table gets rendered…

I use hideComponent and showComponent more and more for the application, but actually, I don’t think I understand what is happening: it just works.

So, can someone give please some more context on the rendering function. When does it get called, how is a page being built up, do you need a timeout in particular cases?

Thanks for giving context.

2

Hey @Peter

JavaScript is really not my strong point but I’ll do my best to explain. First, our documentation on our JavaScript API is pretty limited so Iris won’t have much to say about it by default. Second, TB.render and TB.hideComponent are basically just JS functions, so you can treat them as such. TB.render specifically takes the place of $(document).ready(function() {} in vanilla JS or $(document).ready(function() {} in jquery. If you’re asking ChatGPT about this, you may have to first define what the TB.render function is.

Anyways, for all intents and purposes, TB.render is called as soon as the component is present in the DOM upon page load/refresh.

If you were using 2 separate JS API functions, I would think you could set a timeout as needed.

// Render component_3 and wait for it to load
TB.render('component_3', function(data) {
  // Wait for 3 seconds
  setTimeout(function() {
    // Hide component_4 after the delay
    TB.hideComponent('component_4');
  }, 3000); // 3000 milliseconds = 3 seconds
});

70B961BF-F66B-4F50-84E8-EC85EC614D93

You can see the table component on the details page is hidden 3 seconds after the page loads.

So in theory you could use a combination of hideComponent and showComponent to do what you need with various timings.

7CBE7000-2583-4B36-B959-FB515A89F089

BTW, all of this code was generated with Iris after I gave it the information it needed :wink:

image
image445×912 28 KB

2 Likes
3

In my case it is:

  1. first load is the layout components
  2. top component loaded (component_24), this is the toggle button (custom component)
  3. the form is loaded (component_25)
  4. the data table is loaded (component_3)
  5. tb.render (of component_3) kicks in after component_3 was loaded and makes component_25 hidden.

So the pages loading goes top-down, not looking at the number of the components for the order of loading.

I changed the JS code to:

TB.render('component_25', function(data) {
    TB.hideComponent('component_25');    
});

And that works as intended. After component_25 is loaded, then the tb.render kicks in and this case hides the component it just loaded, before loading the data table below the form. And this helps as the data table takes time to load, and by changing the code, now the hiding of the form goes so fast, you don’t see the form before you want it to be seen: order matters.

Thanks: I learned today:

  1. how a page loads: from top to bottom - not by number of the component
  2. that tb.render (component_xx) works directly upon loading the component_xx
    (* and 3) prompting an AI must be learned*)
2 Likes