How to use dojo.ready or dojo/domReady! with EWM custom presentation?

Kevin Johnson

(11●6) Nov 30 '20, 10:40 p.m.

Hello,

We've written a non-trivial custom EWM presentation for a customer which extends dijit._Widget and dijit._Templated and uses dojox.grid.DataGrid.

It has a lot of functionality which all works great except we have one issue which we are unable to solve. Sometimes the DataGrid does not render on the EWM work item tab. Sometimes we need to click the EWM work item refresh icon to get it to load. Sometimes it won't load at all - especially if go to a work item we had accessed prior to the current work item we are working on.

It seems like a classic case of needing dojo.ready or dojo/domReady! - but I cannot get these to help at all.

1 - Where in our JS code would be put the dojo.ready? I've surrounded the following code with dojo.ready but with no success:
grid.placeAt();
grid.startup();

2 - Can I use dojo/domReady! with code that is not loaded with AMD? Do I have to use AMD compatible code?

3 - Sometimes with firefox or chrome debugger I can that the grid (table) HTML code is there. But it is display=none

4 - Is any of this well-documented and I just haven't found it yet.

5 - I've looked at existing EWM JS code such as
- com.ibm.team.rtc.foundation.web.ui.views.tags.DecoratedTagWidget.js
- com.ibm.team.rtc.foundation.web.ui.views.tags.explorer.ItemBrowser.js
these do not use dojo.ready or dojo/domReady!

Any / all help is appreciated.

Thanks,
Kevin

0 votes

2 answers

2,234 views

0 votes

2 answers

Permanent link

Lawrence Smith

JAZZ DEVELOPER (376●4) edited

Dec 02 '20, 11:29 a.m.

Hello... The workitem code does not use dojo DataGrid. It also does not use the domReady calls of base dojo. Here are some things to try:

1) Check that the require statements include all the elements referenced. Sometimes if a require is not included then the order in which a component is loaded will determine if a non-specified required component is already loaded or missing, meaning that it will not render on first load but would render on refresh. The fix is to add all the require statements.

2) Use a setTimeout to defer loading of the grid until the target element is available in the dom. Something like (untested psuedocode)...

postCreate(): function {

...

waitAndRender(6000); // * 100 ms

...

}

waitAndRender: function(count) {

if (count<=0) {

console.log("Page not loaded for...");

return; // fail

}

window.setTimeout(dojo.hitch(this, function() {

if (this.elementLoaded()) {

this.doRenderGrid();

} else {

this.waitAndRender(count-1); // stop after so many tries

}

}), 100);

}

3) Use page lifecycle events. This is a hack since it uses internal events but there are a few events (see EventTopics.js) that are published...

// EventTopics.WORKITEM_PAGE_LOADED= "rtc/workitems/page/loaded"

// EventTopics.WORKITEM_VIEW_CHANGED= "workitem/view/changed"

var handle= dojo.subscribe("rtc/workitems/page/loaded", this, doRenderGrid);

// remember in the destroy method or sooner to unsubscribe

onDestroy... dojo.unsubscribe(handle).

4) If the widget itself is not loading, try a super simple version that just renders a text div or something to see that it is loading, then add in the required components until it fails.

For further analysis we would need to look at the code including the requires and postCreate, and how the contribution is specified.

Regards,

Lawrence

0 votes

Comments

Kevin Johnson

Dec 02 '20, 11:34 p.m.

Hello Lawrence,

Thank you for your help. Here is my latest post with more details:

https://jazz.net/forum/questions/272491/javascript-and-dojo-widget-is-caching-previous-wis-and-failing-to-render-datagrid

1) The require statements look complete.

2) I tried setTimeout to defer loading of the grid but that didn't help.

3) I tried the page lifecycle events.

4) Text does get displayed in the <div>. I tried just DataGrid with no data (only headers ) but same result.

In summary, it all works great until I revisit a WI that I have visited before. When I navigate to a new WI then the Widget constructor and postCreate are called - and it all works great. But when I visit a previous WI (that worked great the first visit) then the DataGrid does not render. It will render if I then hit the yellow refresh since it at this points calls the constructor and postCreate. It all fails when the current Widget instance is reused against a previous WI.

Lawrence Smith

JAZZ DEVELOPER Dec 04 '20, 12:58 p.m.

This is a rendering problem with the dojo.DataGrid which is not used in Work Items. the DataGrid may require dojo calls to destroy the old one and recreating it when the widget is in view. Or there is a dojo version or library incompatibility. I searched for DataGrid and found it referenced in dojox.grid library. Maybe this is being overlaid with a dojo library that does not have DataGrid.

Permanent link

Lawrence Smith

JAZZ DEVELOPER (376●4) Dec 04 '20, 1:50 p.m.

Please keep the post to one question thread.

DataGrid may be designed to be a singleton. The source code for it shows it uses some kind of store. Be sure the store is cleared and refreshed when switching items. Debug into DataGrid and see what it is doing. use the ?debug=true#action= to look at the code.

If the class itself is somehow being overwritten... then maybe try not using DataGrid or copy the DataGrid class locally and rename it and use that to see if it is some kind of dojo conflict.

0 votes

Comments

Kevin Johnson

Dec 04 '20, 3:40 p.m.

Hello Lawrence, thank you for your help. I've been reading and re-reading your comments above and still trying to understand what I need to change/fix.

The widget/DataGrid always fails in only one specific use case:
- If the user goes back to visit a WI that they had visited earlier in the EWM session then the widget is not rendering the DataGrid.

I have observed the following behavior:
- When a user visits a new WI during a session then the widget constructor() and postCreate() functions are called. This is expected.
- When a user visits a WI that they have previously visited during the session then the constructor() and postCreate() functions are NOT called. So, for example, assume a user navigates to WI 200, then to WI 500, and then back to WI 200. The instance of the widget that is being used for the 2nd visit to WI 200 is the one that was instantiated when the user went to WI 500. And for some unknown reason my JS code fails to placeAt() the DataGrid to the HTML template (from _Templated).

Any thoughts? Thank you!

-Kevin

Lawrence Smith

JAZZ DEVELOPER Dec 09 '20, 1:57 p.m.

It looks like the DataGrid is either implemented as a singleton or there is a problem in the usage such as passing the same store to two DataGrid. When you switch work items it may be that the prior DataGrid has to be removed then a new one added to the new work item, and a new store provided. Perhaps publishing an event that is subscribed by the widget to move it to the work item when it is presented. I have not looked at this component.

Lawrence Smith

JAZZ DEVELOPER Dec 09 '20, 1:58 p.m.

Looking at the SubscribersPart there is a refresh on showWidget and when the working copy changes. The showWidget is called automatically and the work item change is subscribed to (and unsubscribed on destroy):

showWidget: function() {
            if(this._isInitialized) return;
            this._isInitialized = true;
            this.refresh();
        },

Lawrence Smith

JAZZ DEVELOPER Dec 09 '20, 1:59 p.m.

The work item change is subscribed to (and unsubscribed on destroy):

_handleWorkingCopyChange: function(parms) {

this.refresh();
}

---

this.workingCopy.addListener({
                    path: path,
                    event: "onchange",
                    listener: this,
                    functionName: "_handleWorkingCopyChange"
                });

Lawrence Smith

JAZZ DEVELOPER Dec 09 '20, 1:59 p.m.

Is the class inheritance correct? The documentation shows...

The class attribute references either a subclass PresentationPart or AttributePart, depending of whether needsAttribute is false or true. The id is references as kind from the process specification.

The contribution in the plugin.xml looks similar to this:
<editorPresentation
         id="com.ibm.team.workitem.kind.workItemList"
      widget="com.ibm.team.workitem.web.ui.internal.view.editor.parts.WorkItemListPart"
         needsAttribute="true" >
    </editorPresentation>

Your answer

Dashboards and work items are no longer publicly available, so some links may be invalid. We now provide similar information through other means. Learn more here.

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here.

By RSS:

Answers

Answers and Comments

Question details

rational-team-concert

× 42,896

extending

× 10,941

workflow-management

× 1,601

Question asked: Nov 30 '20, 10:40 p.m.

Question was seen: 2,234 times

Last updated: Dec 09 '20, 1:59 p.m.

How to use dojo.ready or dojo/domReady! with EWM custom presentation?

2 answers

2,234 views

0 votes

2 answers

Comments

Comments

Your answer

Follow this question

Question details

Related questions