Template: accessing msg in the <head> section

Dashboard
1

I already accessed the msg from a template and it worked perfectly.
Now I need to generate multiple similar widgets, which should show data for different rooms.
They have:

  • code for reacting on the msg and editing HTML values
  • CSS style
  • elements I editing

I tried just to copy the content of the template (all 3 sections mentioned above) to 3 different templates, but I had problems with accessing elements: CSS of every template unit sees all elements, because they are in the same document after deployment.

More structured solution would be to have one common template for css and scripts (styles are equal and I can access correct template unit from the script using the topic in my message).
I found special setting named "Template type" for it and put CSS and script into it:

<style>
   .... my css ...
</style>
<script>
(function(scope) {
        scope.$watch('msg', function(msg) {
            if (!msg) return;
            
            var room = msg.topic.split('.')[0];
            var elements = document.getElementsByClassName(`room_state ${room}`);
            if (elements.length() == 0) return; // searching for template unit for this room
            var el = elements[0]; // must be only one
            
            // here I change data in certain widget according to the message...
        });
    })(scope);

And I created several templates (with type "widget in group") with HTML data inside.

I connected msg to the template with the script and CSS (because the msg is being processed there I thought)
image

But when the first message arrives, I just lose my CSS. It looks like input at the template node of type "Added to site section" just replaces its content with the message.

What I should do? I could convert it to "widget in group" but I will see it as widget on the dashboard then. This solution looks better.

What am I doing wrong here?

2

I found out: a regular template (of type widget) doesn't occupy place on the dashboard if it has nothing to show inside. So, changing type to "widget in group" makes it working.

image
image941Ă—485 52.9 KB

But it seems to be a bug, that the "head section" can't accept messages

3

Not sure what you are really trying to do here. Since the Dashboard is a Single Page App (SPA), of course all CSS and scripts are shared by the whole dashboard.

Have I misunderstood what you said?

4

Thank you for your answer.
I expected, that all css are shared and this makes everything simpler, I can move common logic to the common node.
I just wanted to make this node of type "add to the HEAD section", which sounds correct, since I only have CSS and scripts there, but the node stops to process input messages, when I chose that type.

image
image971Ă—463 53.1 KB

I found workaround, but it's still a question: is it a bug or expected behavior?

5

Not sure what you mean. You don't need to load styles or scripts in the header if you don't want to. They will work fine in the body.

Scripts should be loaded late in the body anyway in most cases. styles are better loaded in the head so that they are already available once the DOM is loaded but you don't have to do it that way. It is better though to have multiple classes as pre-defined styles in the head and then use Anglular's dynamic features to change the class on an HTML element. So your CSS should always be static and pre-defined.

1 Like
6

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