How do you dynamically load tab content when a tab is clicked?

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.