nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

WAB initialization complete and DOM built event?

Keith-Bornhorst

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

Find more posts tagged with

Accepted answers

All comments

Jade_Freeman

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

Keith-Bornhorst

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

rscheitlin

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

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

rscheitlin

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?

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.