Loading order of ui_templates

Dashboard
1

Edit: It's weird, as soon as I posted this, the problem does not occur anymore :speak_no_evil:
Edit Edit: And it's back again. So the problem remains. Maybe a "cache" thing?

We have a problem with loading order of a ui_template (1) loaded into <head>...</head> section and another ui_template (2) which needs that bit of code from template (1). If the code in the header is loaded through a static ui_template (1), everything works as expected. But as soon as we make the template (1) dynamic (by using msg.template as input), the loading order is sometimes wrong and therefore template (2) can't find the needed code because it’s not loaded yet.

  • Template (1) is being triggered by the "connect" event of the UI. is loaded once on start-up which seems sufficient.

  • Template (2) is being triggered when a specific tab in the UI is opened.

I wonder if there is a way to pause the execution of the code in template (2), until template (1) is fully loaded. Or maybe our approach is completely wrong or we are missing something.

The reason why template (1) needs to be dynamic is because the IP address of the Node-RED machine can change and we don't want to manually change this in the flow. The dynamic template looks like that:

image
image856×56 2.88 KB

Any suggestion would be appreciated.

2

Any custom code for dashboard which has dependentcy should be written as dependent of something. Order of running the code in head is too complicated to have control at the enduser positions so better make it as independent and always check of existentce or availability of dependent properties.
There is some rules of order of running the code - left most tab is first and the first one created runs before others and so on but you just cant rely on that cos "copy - cut - paste " scenarios may ruin the ordering.

3

Thanks for your help but I am still struggling with this. I am checking the existence of the component now with something like typeof Plotly and the component is not there at first (if I press F5) as expected.

The problem I face right now is that my "checking loop" never ends. Maybe because I am blocking the flow from importing the external js file which is weird, because I thought everything is async which caused my initial problem. Without the loop, if I check in the browser console after everything is loaded, the component is there.

TGIF

4

why cant you use a relative path and statically declare the script tag in the HTML?

e.g. in a head template...

<script src="/plotly/plotly.min.js"></script>

A relative path will always load from the current base path in the URL (ie, no need to worry about ip or http(s))

5

:orangutan:
okay, I go hide in the cave now and use the rock which was in front of my head to shut the door. And sorry for insulting the orangutan.

Thank you so much!

1 Like
6

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.