Instantiation of Tabulator in ui-template

Dashboard 2.0
1

In Dashboard v1, instead of using ui-table I used to instantiate the Tabulator package directly inside ui-template nodes (in order to leverage the full package capabilities).
When switching to dashboard 2, I noticed that sometimes Tabulator fails to load (with various error types) unless given some “breather” delay.
I tried to add a Vue component and piggyback its mounted() callback for the Tabulator instantiation, but the issue persists.
I am currently solving this by placing the initialization within a timeout loop, but wonder if there is some other event or status I can wait for, which will allow me to avoid this loop. The code I’m using is:

var count = 0;
let interval = setInterval(() => {
    try   {
        initGrid(); // Where I do the actual instantiation
        clearInterval(interval);
    }  catch (err)   {
        count++;
        if (count >= 30)   { // abort after 3 seconds
            console.log ("Grid load failed: "+err);
            clearInterval(interval);
        }
    }
}, 100);

On another note, I noticed that when working with Vue components, I cannot place any general (not Vue-related) JavaScript code outside of Vue’s export default {...} structure, and I need to place it in another JavaScript section.
What would be a better approach - to place all my code (Vue & non-Vue) within the Vue’s export default {...} structure, or use separate script sections?

2

You can still define HTML outside of the <script/> using <template />, we have a few examples in our docs: Text ui-template | Node-RED Dashboard 2.0

3

Thanks for the quick answer, Joe.
My bad (typo). I meant adding JavaScript code (which is not related to Vue) outside of “export default”

4

you are correct in that case - it’s a limitation of how we parse the template’s content, but things should be easily built into the Vue component itself anyway.

Anything you want to run when the page loads put inside mounted () { ... } and methods, etc can all be stored inside methods: { ... }

5

For the external dependency piece, we follow the same pattern: Text ui-template | Node-RED Dashboard 2.0

You can put that interval inside the Vue Component’s mounted() and then define an init() method, call that when appropriate, knowing that the Tabulator package is available

6

Great, thank you Joe!

7

Hi @joepavitt ,
I see that Dashboard 2.0 version 1.0.0 has just been released. Great job! thanks!

Does this mean that Dashboard v2.0 is now officially out of Beta?

8

You are correct :slightly_smiling_face: we posted about it at Blog • FlowFuse too