Hello Jaime -
If I’m understanding you correctly, your situation is as follows:
- You have a “main” page
- The “main” page has some mechanism to trigger a “popup”
- The “popup” contains a tabset
- You want the tab displayed when the “popup” is shown to be dynamic based on a URL parameter
Assuming yes, then please read-on. If no, please let us know more specifically what you are trying to accomplish.
There is no “stock” method available for accomplishing this unfortunately. The URL that you specified “Id={{Id}}&PopUp=1/#tabUniqueId” is not properly URL Encoded (due to the / character) so likely you are getting an “Inked” error as a result of this. Either way, the only way to accomplish what you are after is programmatically unfortunately.
Here are the steps:
- Build your QueryString on the page include that lives on your popup with a QueryString of "tab={{{SomeField}}} where SomeField is the dynamic value that will drive which tab will be shown. Note that you MUST use triple braces here so that you get the raw field value.
- On your page include page, add a model called “QSTracker” configured as follows:
a) “Salesforce data type” - Note that while you really only need a UI Only model here, you must use Salesforce data type due to the issue referenced here.
b) Set the model to “not load records” on page load
c) Set the model to “Create row if none”
d) Add a UI Only field called “DefaultTabId” as a Text field
e) Add a condition for DefaultTabId set to Param value of “tab” - Add an inline javascript resource with the following replacing “tabSetDraftChoices” with the unique Id of your tabset
(function(skuid){ var $ = skuid.$;
function selectTab(tabId) {
var tabSet = skuid.$C('tabSetDraftChoices');
tabSet.selectTab(tabId);
}
$(document.body).one('pageload',function(){
var model = skuid.$M('QSTracker')
, row = model && model.getFirstRow()
, tabId = row && model.getFieldValue(row, 'DefaultTabId', true);
if (tabId) {
selectTab(tabId);
}
});
})(skuid);
In the spirit of the NFL Draft (aka. the “Super Bowl” for Cleveland Browns fans), here is a working sample:
Main Page
<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" useviewportmeta="true" showheader="true"> <models>
<model id="DraftPicks" query="true" createrowifnonefound="true" datasource="Ui-Only" processonclient="true">
<fields>
<field id="PlayerId" displaytype="PICKLIST" ogdisplaytype="TEXT" picklistsource="manual" label="Player" defaultvaluetype="fieldvalue">
<picklistentries>
<entry value="tabGarrett" label="Garrett"/>
<entry value="tabPeppers" label="Peppers"/>
<entry value="tabNjoku" label="Njoku"/>
</picklistentries>
</field>
</fields>
<conditions/>
<actions/>
</model>
</models>
<components>
<grid uniqueid="sk-2sNvmL-223">
<divisions>
<division behavior="flex" verticalalign="top" ratio="1" minwidth="100px">
<components>
<basicfieldeditor showheader="true" showsavecancel="false" showerrorsinline="true" model="DraftPicks" buttonposition="" uniqueid="sk-2sR6_b-91" mode="edit">
<columns>
<column width="100%">
<sections>
<section title="Section A" collapsible="no" showheader="false">
<fields>
<field id="PlayerId" valuehalign="" type=""/>
</fields>
</section>
</sections>
</column>
</columns>
</basicfieldeditor>
</components>
</division>
<division behavior="flex" verticalalign="top" minwidth="100px" ratio="1">
<components>
<buttonset uniqueid="sk-2sK9-B-85" model="DraftPicks" position="left">
<buttons>
<button type="multi" label="Open Popup">
<actions>
<action type="showPopup">
<popup title="Cleveland Browns 2017 1st Round Draft Picks" width="90%">
<components>
<includepanel type="skuid" uniqueid="sk-2sKHhD-100" pagename="DynamicTabOnTabsetInclude" module="" querystring="tab={{{$Model.DraftPicks.data.0.PlayerId}}}">
<renderconditions logictype="and"/>
</includepanel>
</components>
</popup>
</action>
</actions>
</button>
</buttons>
</buttonset>
</components>
</division>
</divisions>
<styles>
<styleitem type="background" bgtype="none"/>
</styles>
</grid>
</components>
<resources>
<labels/>
<javascript/>
<css/>
</resources>
<styles>
<styleitem type="background" bgtype="none"/>
</styles>
</skuidpage>
Include Page
<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" useviewportmeta="true" showheader="true"> <models>
<model id="QSTracker" limit="1" query="false" createrowifnonefound="true" datasource="salesforce" type="" sobject="Account" doclone="" processonclient="true" unloadwarningifunsavedchanges="false">
<fields>
<field id="DefaultTabId" uionly="true" displaytype="TEXT" defaultvaluetype="fieldvalue" defaultValue="" enclosevalueinquotes="true" label="Default Tab Id"/>
</fields>
<conditions>
<condition type="param" value="tab" field="DefaultTabId" operator="=" enclosevalueinquotes="true" novaluebehavior=""/>
</conditions>
<actions/>
</model>
</models>
<components>
<tabset rememberlastusertab="false" defertabrendering="true" uniqueid="tabSetDraftChoices" renderas="">
<tabs>
<tab name="Garrett" uniqueid="tabGarrett">
<components>
<template multiple="false" uniqueid="sk-2sIi9l-146">
<contents>Garrett Tab</contents>
</template>
</components>
</tab>
<tab name="Peppers" loadlazypanels="true" uniqueid="tabPeppers">
<components>
<template multiple="false" uniqueid="sk-2sIgaP-141">
<contents>Peppers Tab</contents>
</template>
</components>
</tab>
<tab name="Njoku" loadlazypanels="true" uniqueid="tabNjoku">
<components>
<template multiple="false" uniqueid="sk-2sIcEo-134">
<contents>Njoku Tab</contents>
</template>
</components>
</tab>
</tabs>
</tabset>
</components>
<resources>
<labels/>
<javascript>
<jsitem location="inline" name="newInlineJS" cachelocation="false" url="">(function(skuid){
var $ = skuid.$;
function selectTab(tabId) {
var tabSet = skuid.$C('tabSetDraftChoices');
tabSet.selectTab(tabId);
}
$(document.body).one('pageload',function(){
var model = skuid.$M('QSTracker')
, row = model &amp;&amp; model.getFirstRow()
, tabId = row &amp;&amp; model.getFieldValue(row, 'DefaultTabId', true);
if (tabId) {
selectTab(tabId);
}
});
})(skuid);</jsitem>
</javascript>
<css/>
</resources>
<styles>
<styleitem type="background" bgtype="none"/>
</styles>
</skuidpage>
