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

  • 1
  • Question
  • Updated 2 years ago
  • (Edited)
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)?
Photo of Stephen Chan

Stephen Chan

  • 956 Points 500 badge 2x thumb

Posted 5 years ago

  • 1
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
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:

Photo of Stephen Chan

Stephen Chan

  • 956 Points 500 badge 2x thumb
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">&lt;iframe src="http://www.fronde.co.nz/" frameborder="0" width="100%" height="1800"/&gt;</template>
</components>
</skuidpage>

<skuidpage showsidebar="false" showheader="false">
<resources>
<labels/>
<javascript/>
<css/>
</resources>
<models/>
<components>
<template model="" multiple="true" allowhtml="true">&lt;iframe src="http://www.skuidify.com/" frameborder="0" width="100%" height="1800"/&gt;</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
Photo of John Nelson

John Nelson, Product Manager

  • 3,234 Points 3k badge 2x thumb
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.
Photo of Stephen Chan

Stephen Chan

  • 956 Points 500 badge 2x thumb
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.
Photo of Don Souza

Don Souza, Employee

  • 1,160 Points 1k badge 2x thumb
Hope this worked for you.