How to include <script> in node-red-dashboard template

2,911 views
Skip to first unread message

Jean-Philippe Encausse

unread,
Aug 22, 2017, 9:13:27 AM8/22/17
to Node-RED
Hi,

I'd like to create a custom node-red-dashboard node to display my own content.
The template node allow me to put some HTML code with angular behavior.


Question 1:

How should I proceed if I want to include HTML with external dependencies:

For instance I want to include a WebChat (without IFRAME):


    <script>
      BotChat.App({
        directLine: { secret: direct_line_secret },
        user: { id: 'userid' },
        bot: { id: 'botid' },
        resize: 'detect'
      }, document.getElementById("bot"));
    </script>

If I copy/past that code, <script> tags are stripped and the BotChat object trigger an error because it is missing

More general question: How to include <script> and <style> tag in Node-RED and node-red-template knowing that the webpart is refreshed somehow. 

Question 2:

Is there a good example to create my custom node with a custom old school html template file ?

Thanks

steve rickus

unread,
Aug 22, 2017, 9:37:56 AM8/22/17
to Node-RED
I had similar problems with the ui_template node in the past, due to the timing of getting the external library files. The error happens because the call to the ChatBotApp object occurs while the library is still being loaded in the background...

If you are running node-red 0.17.x there is now an option on the ui_template node to include its content in the <head> element of the dashboard pages. This should ensure that the libs are fully loaded before the chatbot app starts running. Try moving the first two lines (the external links/scripts) into one of these nodes, and see if that works better for you.
--
Steve

Jean-Philippe Encausse

unread,
Aug 22, 2017, 9:59:50 AM8/22/17
to Node-RED
Thanks, I found your comment on 

But do you have any sample code on how to set that option ?

--
http://nodered.org
 
Join us on Slack to continue the conversation: http://nodered.org/slack
---
You received this message because you are subscribed to a topic in the Google Groups "Node-RED" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/node-red/3lAtHfTFGlQ/unsubscribe.
To unsubscribe from this group and all its topics, send an email to node-red+unsubscribe@googlegroups.com.
To post to this group, send email to node...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-red.
 To view this discussion on the web, visit https://groups.google.com/d/msgid/node-red/70c2c97f-a643-421c-83de-baf984e40079%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.



--
Jean-Philippe Encausse - R&D / IoT / Innovations
http://www.encausse.net - http://arm-avocats.fr
Twitter: @JpEncausse - Mob: +33 6 82 12 56 99 
Do it Once, Use it Twice ~ Do it Twice, Make It Once

steve rickus

unread,
Aug 22, 2017, 10:22:01 AM8/22/17
to Node-RED, J...@encausse.net
There is a new "Template Type" option on the ui_template node:


If you move just the 2 external <link> and <script> lines from your template into a separate ui_template node with this option set, it will load those libs into the dashboard before any rendering is done. Then your ChatBotApp script should run correctly whenever the dashboard page is loaded in the browser.
--
Steve

Jean-Philippe Encausse

unread,
Aug 22, 2017, 10:29:24 AM8/22/17
to Node-RED
Ahhhh got it thanks !

--
http://nodered.org
 
Join us on Slack to continue the conversation: http://nodered.org/slack
---
You received this message because you are subscribed to a topic in the Google Groups "Node-RED" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/node-red/3lAtHfTFGlQ/unsubscribe.
To unsubscribe from this group and all its topics, send an email to node-red+unsubscribe@googlegroups.com.
To post to this group, send email to node...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-red.
To view this discussion on the web, visit https://groups.google.com/d/msgid/node-red/c5219373-f4ae-4e02-80c1-f7d8e59ba670%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

Julian Knight

unread,
Sep 6, 2017, 4:38:57 PM9/6/17
to Node-RED, J...@encausse.net
In general, you should ensure that scripts that manipulate the DOM don't try to do so until the DOM is ready. Similarly, scripts that rely on libraries shouldn't execute until the library is loaded. So check out things like the JQuery $.ready function and solutions for Anglular.
Reply all
Reply to author
Forward
0 new messages