Trying to use the window.addEventListener() function in a custom component
Hello everyone,
In our custom components I am trying to integrate the event listener so I can switch to dark or light mode depending on what mode our application is in. But the code, which the documentation suggests, does not seem to work. I did the following:
We use TypeScript so typing has been added.
This is, aside from a few console.warn statements, a copy from what is in the TW docs.
This is the suggestion from the TW docs with a few console.warns added so every log pops out.
And this is the output of this bit of code:
As you can see it does not get into the window.addEventListener. But if I change it to the following I get another result:
The result is as follows:
It does more, it gives me the console.warns I was after, but I don't get the TW status, which I was expecting. I am fairly certain I am doing something wrong somewhere, what could it be, as I am out of ideas.
Page 1 / 1
@SanderAdam Don’t do that. You are now listening to the event queue of Universal. You are seeing your own message.
We might have described this as a bit too verbose in the docs.
Could you move the code blocks around? So first add the event listener and then fire the post message.
But that might still not be enough if the JavaScript is included in the header of the HTML page. I would advise binding to the message handler and then binding to the window load handler and firing the post message to Universal from there.
Be aware that this does happen before the DOM is there. If your custom component is more complicated, it might be advisable to wait for the DOMContentLoaded event
@Sebastiaan Meijerink to get back on your reply, our component is very simple so it should work. So in the main.ts file I set that post message, it does what it has to do and posts that message, then later, in the file where I load the requested data, I use the add event listener for the status, so it can switch to dark or light mode accordingly and quickly.
A message never seems to return as it doesn't seem to enter the function within the addevent listener, where I set my dark and light mode. I am still doing something wrong, but I cannot seem to figure out what I am doing wrong. Maybe this has to do with timing? But In the original response, I put it as you had put it, and I still had no succes and no response. If such a postmessage is sent, the universal GUI should reply right?
@SanderAdam, I cannot be sure without seeing your code, but the fact that you say... then later, in the file where I load the requested data, I use the add event listener for the status... triggers me to believe you are not doing it correctly.
The events don’t work synchronously. They are a subscription, and you first have to set up that subscription, and then the function you put into that event handler will be called every time that subscription goes off. In this case, if something relevant changes in Universal.
The post message initComponent is just a way for you to trigger the subscription at the start, so you can directly have access to the information.
Imagine that there is a light around the corner that you cannot see. This light changes color, and you need to do something related to that color. You ask ME to look around the corner and tell you every time the light changes what color it is. (You set me up as the event listener). I look around the corner. But I don’t directly say anything, because the light did not change color. So you post an initial message by asking me, “What color is it to begin with?”
I think you understood that the initComponent message sets up the whole thing, but it actually doesn’t; it just triggers 1 cycle of it. It is the event listener that actually triggers it, and you should set everything up around that.
@Sebastiaan Meijerink I built a poc to showcase what I want to do, and what I intend to do. All I want now is the following: initialise the component, then get an initial event data, to see whether the theme is in dark or light mode. And then on event (changing the mode of your screen for instance) I want the subscription to fire again, so it can change the mode accordingly. The code of the poc now looks like the following, all it has to do is log the event data for now:
It is exactly a copy of the event subscription in component I am trying to achieve it in, difference is that the component is in Vue, but the component is also nothing more than a plain white HTML screen with a bunch of data on it (SVG in that case, here it is text).
I do as I did in the setup of the SVG viewer: I do as you explained earlier (I changed it in the component so it matches your explanation). But here is where I am not certain whether it does what I expect it to do, as it posts that message to the overlaying TW layer (it reaches that console.log statement), and then it returns nothing in return. That window.addEventListener("message”, () => {}) does not receive anything, I had hoped I would get a message, as we fire the event by posting the initcomponent message, but unfortunately, I cannot seem to get it to print the event message.
There are some things wrong with this poc, but I have just tried your code in my environment and it works.
Is the custom component URL a subdomain of the location where Universal is installed? E.G.
