Created IFrame Component and trying to make it static

[SigmaOutdoors]

I've created a generic Iframe component and everything is great, but it keeps getting refreshed all the time by what I am unsure, I've dug through a bunch of the code but nothing really sticks out on what is refreshing it, but it seems to me more than just time, like also mouse events etc. I've tried to call stop() but it doesn't seem to work, can you point me in the right direction on how to make a component that is more or less static in the widget frame?

[jayhamilton]

@SigmaOutdoors Maybe if you could provide code snippets of your component, view and service, I can try to reproduce the issue.

There is a mouse over event on the gadget used to enable disable the controls on the upper right side of the gadget. The mouse over effect can be turned off by going into the Config icon( sprocket icon in the upper right menu) and select the options tab and toggle the option that will always show the controls.

Also, if you have this.run() in the component's constructor, as I do for some of the gadgets, that could be the issue as well.

[SigmaOutdoors]

Hi Jay,
First, thank you for getting back to me, it is appreciated. So I took out all of the run things I could see from my iframe component and the behavior is still the same. There seems to be some master timer going off that will refresh my component (and hence its underlying web page) like every 3-7 seconds. Then any mouse over any part of the dashboard causes a refresh (not just my component). I have uploaded the component files and a video to show you what's going on (in an attempt to not waste your time if I am doing something dumb). Thanks again! https://github.com/SigmaOutdoors/ngx-dynamic-dashboard-framework_files/tree/master/iframe

[jayhamilton]

@SigmaOutdoors Ok, finally had a chance to look at this. I found what seems to be a related issue: https://github.com/angular/angular/issues/16994

Taking a cue from that site I modified the News gadget to try one of the solutions posted there. In your component, remove the OnInit call and add something like the following:

     destURL = "https://www.wikipedia.org/";
      constructor(
                  ....
                 protected hostElement: ElementRef) {
             super(
                ........
           );
    }
    preRun() {

        console.log("getURL=" + this.destURL)
        const iframe = this.hostElement.nativeElement.querySelector('iframe');
        iframe.src = this.destURL;
    }

Then in your view modify your iframe to look like the following <iframe [src]="" width="100%" height="100%"></iframe>

[SigmaOutdoors]

Thank you, I apologize for not doing my own research and seeing it was an Angular issue, not your project. That seems to stop the flicker, I just need an ingenious way to figure out how to apply the property from the config/gear icon when it changes. That's on me. Again, your sleuthing is much appreciated.

[jayhamilton]

In terms of the configure gear icon you need to do the following:

Your gadget is driven by the JSON document gadget-library-model.json. It will include a config.propertyPages object for your gadget. If you look at other gadget examples you will see that the property page object dictates what GUI controls get presented in via configure/gear icon. With this approach you do not have to worry about creating code for showing GUI options.

Once the gadget library JSON doc has the appropriate property page items it will automatically present the controls. All you then need to do is update the updateProperties method to handle changes to your particular properties.

Sent from my iPhone

On Nov 5, 2018, at 9:50 AM, SigmaOutdoors notifications@github.com<mailto:notifications@github.com> wrote:

Thank you, I apologize for not doing my own research and seeing it was an Angular issue, not your project. That seems to stop the flicker, I just need an ingenious way top figure out how to apply the property from the config/gear icon when it changes. That's on me. Again, your sleuthing is much appreciated.

— You are receiving this because you commented. Reply to this email directly, view it on GitHubhttps://github.com/catalogicsoftware/ngx-dynamic-dashboard-framework/issues/16#issuecomment-435902206, or mute the threadhttps://github.com/notifications/unsubscribe-auth/ABHCUbkHVKotVPM_OUWZWof20oGLG5qcks5usFBAgaJpZM4X7Bw7.

[SigmaOutdoors]

Yeah I had all the property stuff done prior to the flicker issue, but it seems when I change the property when using the queryselector method that the component seems to lose the src property, it goes null and you get a blank component.

I've tried a bunch of different things including overriding the toggleConfigMode and performing the set there as you move back into "non-config" mode, but it isn't working at the moment. As I said though, that is on me to try and figure out. Thanks again for your responses.

EDIT : I should be more clear, so when I stop in my component's override of toggleConfigMode or updateProperties, the querySelect is null because it is still on the TAB for the config screen properties, so attempting to get iframe = this.hostElement.nativeElement.querySelector('iframe'); at that point results in a null.

UPDATE : I was able to use a combination of ngAfterContentChecked and some other logic to find when the querySelector wasn't null and knowing we just came back from a config event to set the iframe.src appropriately.