WAB initialization complete and DOM built event?

1085
7
08-13-2016 06:53 AM
Keith-Bornhorst
New Contributor III

Is there a mechanism in place to know when a Web AppBuilder app/map has been fully initialized and the entire DOM built and visible? We need to know when the app is ready for use (specifically, when the Header Widget is visible) so we can perform some minor DOM manipulation. We could use javascript's setTimeout to periodically check for the existince of the DOM elements in which we're interested, but perhaps there's a cleaner way to do this using WAB or dojo events or callbacks?

Thanks,

Keith

0 Kudos
7 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Keith,

   There is no such event that I am aware of. Maybe you can explain your need for such an event better (i.e. your workflow) and I can make a recommendation?

0 Kudos
Keith-Bornhorst
New Contributor III

Thanks, Robert.

WAB/LaunchpadTheme is responsive and on smaller devices we'd like the logo to be a link to the main site.

Short term solution was to add "Home" to the links array in config.json since that's always visible. Using JS we could wrap an A tag around the logo image, but I quickly realized that it takes a few seconds for those DOM elements to appear on the page.

In lieu of updating the LaunchpadTheme header widget and config options... YET... (although it's probably not a bad idea to add/request that functionality to the theme itself - i.e. wrap optional A tags around ".jimu-widget-header .logo" and ".jimu-widget-header .title") I added some JavaScript to modify the DOM when ready using jQuery and window.setTimeout to recursively call a function that checks for the presence of the header logo image.

Enhancing the theme header widget will definitely be the better, long-term option for us.

Cheers,

Keith

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Keith,

   You are correct that modifying the launchpad themes header Widget.js is the best solution. But if you really need a short term solution than you add some code listen from the widget creation event topic. topic.subscribe("widgetCreated") and see if it is the Header widget and if so then do your dom manipulation.

Keith-Bornhorst
New Contributor III

Interesting... I've yet to create a custom widget (or do any dojo/dijit development) so dojo/topic is new to me - thanks for the additional (and cleaner) workaround.

Cheers,

Keith

0 Kudos
JadeFreeman
Occasional Contributor III

Great Info!  Is this documented somewhere?  I mean WAB topics (I've used topic extensively elsewhere)?

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Jade,

   No they are not documented. The best way to find them is to search the code for topic.publish

0 Kudos
JadeFreeman
Occasional Contributor III

Thanks Robert, this was just what I was looking for!

0 Kudos