Facing issue with Custom UI widget on first load

[SaiKrishnaPola]

Hi,

I have created a Custom UI extension using an External Library -Plotly. JS.
When I first load the mashup using View Mashup from mashup, the widget doesn't load properly, and when I click reload( not Tab reload, its the Reload button which shows up when we click on view mashup), it works perfectly.  And if I reload the tab completely, again for the first time it doesn't work properly 

Another Scenario- I have added a contained Mashup and One of the mashups which loads in contained Mashup has the new widget. The first time I load the contained mashup with the UI widget, it does load properly. If I change the contained mashup and then change it back to the contained mashup( I have 2 buttons to load different mashups with different graphs in contained mashups) with the UI widget, it works perfectly.

Can someone help me how resolve this issue? Thanks in advance.

I am using Thingworx 9.1.6 version 

[nmilleson]

@SaiKrishnaPola ,

Did you create this mashup using Polymer or just plain javascript/html?

Thanks,

Nick

[SaiKrishnaPola]

@nmilleson  I used plain JavaScript/html to create the extension

[nmilleson]

@SaiKrishnaPola ,

I would put some console logging in each of your event listeners (afterRender, and updateProperty I think they're called).  Specifically, try logging the window size (window.innerWidth and window.innerHeight).  I've run into an issue where on the first time it runs the afterRender function, the window size is still showing 0px for some reason.  This was causing my widget to not render.  If that's not the issue, I would use logging to make sure that your data arrives to your widget before you try and render the Plotly content.  If not, I would put most of your render logic in the "updateProperty " function instead. So something like this:

this.updateProperty = function (updatePropertyInfo) {
    if (updatePropertyInfo.TargetProperty === "Data") {
        // chart rendering code
    }
}

Hope that helps,

Nick

[SaiKrishnaPola]

Hello @nmilleson ,

I am already plotting my chart in "updateProperty " function after I receive the Data.

Also, I have logged the height & width properties for both Div and Window and both are non zero before and after reload (Reload button which shows up when we click on view mashup) and I am still facing the same issue

[nmilleson]

@SaiKrishnaPola ,

When it doesn't load properly, what does it look like? Can you share a screenshot of both working and non-working scenarios?

Nick

[SaiKrishnaPola]

Hi @nmilleson ,

I have attached a PDF with both screenshots. Before and after clicking the reload.

Also, I have just noticed a thing where if there is only one widget- my extension in the mashup it works perfectly on mashup loading as well.
If I add any other widget, the issue is happening for the extension widget- In the screenshot, I have added a Text field and the chart is failing to load.

[nmilleson]

Thanks @SaiKrishnaPola,

If you inspect the html, does there seem to be any difference in DOM placement between the working and non-working one?

Nick 

[SaiKrishnaPola]

Hi @nmilleson ,

I see only difference in Elements in Dev Tools and I have attached the same in the PDF with both screenshots

[nmilleson]

@SaiKrishnaPola ,

Are you able share the zip file of your extension so others in the Community could attempt to replicate your issue?  My next advice would only be to add logging statements at several checkpoints and try to observe a difference between the working and non-working instances.

Thanks,

Nick

[VladimirRosu]

Whenever I have such behavior, I:

1. Start browser Developer Tools, go to the Debugger tab, and place a break-point inside, let's say, updateProperty method in this file:

(note that the file name is different on each ThingWorx instance, it depends on the date when you last loaded a widget extension - the path is important)

Then, reload the mashup using both methods, Browser reload and ThingWorx reload, do step-by-step and see if there are differences in the objects.

2. With the same browser Developer Tools, switch to Console tab, in Runtime, then do a browser reload. if there's an error in your widget code in the initial construct. this *might* appear here (eg, if some object is undefined at that initial time)

[SaiKrishnaPola · Accepted solution]

Hi Team, After multiple follow-ups with PTC tech support, I did not find a solution for the issue. 
But when I imported the Extension in 9.3 version, It is working fine. There seems to be an issue with 9.1.6 version