We have multiple tabs that load iframes using templates but are concerned that this means our page load times will get longer as we add more tabs with more iframes. Is there a way to trigger an action on the tab click to dynamically load the tab’s content (iframe)?
Hi Stephen, If you place the content of each of your tabs into separate Skuid Pages, and then load in these Skuid Pages into each Tab using the “Page Include” component, Skuid will automatically dynamically load those Pages into the Tabs. So, for instance, if you have an Account Detail page, and have a Tabset with a “Cases” tab, then you could move out the Cases content into a separate Skuid Page, called “CasesTab_Include” or something like this. This separate Skuid Page could contain your Template with the iFrame, or it could contain other Skuid content. 
Then, you can include this Page in your parent page’s “Cases” tab with the “Page Include” component:
Thanks for the fast response Zach. I’ve tried what you describe with a page with two tabs that have page includes to two pages with templates containing iframes to different sites and unfortunately the tabs are both loading at the same time? When you load the top page you get the “Loading…” status text which looks promising but both tabs are loading. Am I doing something wrong? Here are my page XMLs (very basic):
<skuidpage showsidebar="false" showheader="false"> <resources> <labels/> <javascript/> <css/> </resources> <models/> <components> <tabset> <tabs> <tab name="Fronde"> <components> <includepanel type="skuid" pagename="Dynamic_Tabs_IFrame_Fronde"/> </components> </tab> <tab name="Skuid"> <components> <includepanel type="skuid" pagename="Dynamic_Tabs_IFrame_Skuid"/> </components> </tab> </tabs> </tabset> </components> </skuidpage> <skuidpage showsidebar="false" showheader="false"> <resources> <labels/> <javascript/> <css/> </resources> <models/> <components> <template model="" multiple="true" allowhtml="true"><iframe src="http://www.fronde.co.nz/" frameborder="0" width="100%" height="1800"/></template> </components> </skuidpage> <skuidpage showsidebar="false" showheader="false"> <resources> <labels/> <javascript/> <css/> </resources> <models/> <components> <template model="" multiple="true" allowhtml="true"><iframe src="http://www.skuidify.com/" frameborder="0" width="100%" height="1800"/></template> </components> </skuidpage>
I also noticed the tab fonts get oversized when I don’t include the Salesforce header which is annoying but I guess I can fix that with some css. Cheers, Stephen
Hey Stephen, there’s not actually a (built-in) method currently for delaying loading a tab’s content until the tab is clicked. What’s happening now with the method Zach suggested is that the tabs are loading asynchronously after main page content loads. So in theory, they shouldn’t delay page loads. Loading tab content with via AJAX is something we’ve talked about, but obviously haven’t implemented yet. If it’s something you’d like to see added to the product feel free to add it as an idea. Our product road map is heavily influenced by the features users are asking for.
Ok thanks John, this explains the behaviour I’m seeing. We will try using this as it is and see what the experience is like first. Have posted an idea for this too.
Hope this worked for you.
