# Loading order of ui\_templates **URL:** \ **Category:** Dashboard\ **Tags:** node-red-dashboard\ **Created:** [19 August 2021 09:37 UTC](https://discourse.nodered.org/t/loading-order-of-ui-templates/49906 "2021-08-19T09:37:33Z")\ **Posts on this page:** 6\ **Page:** 1
**Author:** ![rko](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rko/32/45807_2.png) [@rko](https://discourse.nodered.org/u/rko)\ **Post date:** [19 August 2021 09:37 UTC](https://discourse.nodered.org/t/loading-order-of-ui-templates/49906/1 "2021-08-19T09:37:33Z")
~~**Edit** : It's weird, as soon as I posted this, the problem does not occur anymore 🙊~~ **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 `...` 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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/6/6635c5c74f1ebdd1ced0077ebd7129cd1190ec0d.png) Any suggestion would be appreciated. ---
**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\ **Post date:** [19 August 2021 21:51 UTC](https://discourse.nodered.org/t/loading-order-of-ui-templates/49906/2 "2021-08-19T21:51:50Z")
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. ---
**Author:** ![rko](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rko/32/45807_2.png) [@rko](https://discourse.nodered.org/u/rko)\ **Post date:** [20 August 2021 06:16 UTC](https://discourse.nodered.org/t/loading-order-of-ui-templates/49906/3 "2021-08-20T06:16:24Z")
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 ---
**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\ **Post date:** [20 August 2021 06:41 UTC](https://discourse.nodered.org/t/loading-order-of-ui-templates/49906/4 "2021-08-20T06:41:57Z")
> [@rko](#): > > 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: why cant you use a relative path and statically declare the script tag in the HTML? e.g. in a head template... ```auto ``` A relative path will always load from the current base path in the URL (ie, no need to worry about ip or http(s)) ---
**Author:** ![rko](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rko/32/45807_2.png) [@rko](https://discourse.nodered.org/u/rko)\ **Post date:** [20 August 2021 06:46 UTC](https://discourse.nodered.org/t/loading-order-of-ui-templates/49906/5 "2021-08-20T06:46:47Z")
🦧 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! ---
**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\ **Post date:** [3 September 2021 06:46 UTC](https://discourse.nodered.org/t/loading-order-of-ui-templates/49906/6 "2021-09-03T06:46:51Z")
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.