Portal Engine Questions on portal engine and web parts.
Version 6.x > Portal Engine > Tab Layout - Select Particular Tab View modes: 
User avatar
Member
Member
wrb-seqinc - 2/2/2012 9:47:05 AM
   
Tab Layout - Select Particular Tab
Hello,

I'm trying to select a particular tab via a query string. I have the following Javascript (see below) that will work fine (if loaded correctly). However, the call to initialize the tab layout takes place at the end of the document - right before the closing body tag. I have my JS script in the content of the page and have it set to fire on document.ready. The issue is when that event fires, the tab control is not ready yet so I get a null reference error.

Is there a way to tie into the init event of the tab layout and call my function in there? Or, is there another way I should be going about this?

Thanks,
Ryan


<script type="text/javascript">

function getParameterByName(name)
{
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regexS = "[\\?&]" + name + "=([^&#]*)";
var regex = new RegExp(regexS);
var results = regex.exec(window.location.href);
if(results == null)
return "";
else
return decodeURIComponent(results[1].replace(/\+/g, " "));
}

function CheckForAndSetActiveTab() {
var ActiveTab = getParameterByName("ActiveTab");

if(ActiveTab != "") {
var tabContainerID = $(".ajax__tab_container").attr("id");

var tabControl = $get(tabContainerID).control;
tabControl.set_activeTabIndex(parseInt(ActiveTab));
}
}

$(document).ready(function() {
CheckForAndSetActiveTab();
});

</script>


User avatar
Member
Member
kentico_michal - 2/3/2012 6:04:14 AM
   
RE:Tab Layout - Select Particular Tab
Hello,

You can use query macro or custom macro in the Active tab index property that would return the index of tab that you want to be active based on the query parameters instead of using javascript. Its worth noting that by default, the Tabs layout web part does not resolve macros specified in its properties.

To deal with this limitation, you will need to change the implementation of the ActiveTabIndex property as shown here:

public int ActiveTabIndex
{
get
{
return ValidationHelper.GetInteger(CMS.CMSHelper.CMSContext.CurrentResolver.ResolveMacros(this.GetValue("ActiveTabIndex").ToString()), 0);
}
set
{
this.SetValue("ActiveTabIndex", value);
}
}


The Tabs layout web part is located here: ~\CMSWebParts\Layouts\Tabs.ascx.cs

This way, you can for example specify the following macro in the Active tab index property: {%ToInt(param, "1")%} and as result, if the Url contains the Url parameter named param, its value will be used as a selected tab, otherwise, the first tab will be selected.

More information about macros, can be found here: Types of macros

Best regards,
Michal Legen

User avatar
Member
Member
wrb-seqinc - 2/7/2012 6:54:36 AM
   
RE:Tab Layout - Select Particular Tab
Thanks, Michal - worked great!

Ryan