Is there a way to set a tab(has a unique id) via a skuid page include

  • 1
  • Question
  • Updated 2 years ago
  • Answered
  • (Edited)
I have a page include configured for a pop up.  The client is requiring that a specific tab be set.  I've tried setting it in the query string but I get an "Inked" message.  Anybody know how this can be accomplished?

It would be great if you could just add that to the Query String....Id={{Id}}&PopUp=1/#tabUniqueId

Photo of Jaime

Jaime

  • 1,220 Points 1k badge 2x thumb

Posted 2 years ago

  • 1
Photo of Stephen Sells

Stephen Sells, Official Rep

  • 16,856 Points 10k badge 2x thumb
Could you elaborating what you're wanting to do?

You have a page include inside a pop up. Great. That's easily done in Skuid.
You have this pop up somehow triggered within a specific tab on the page through the tab component. Great. Also easily done in Skuid.

You're wanting to make it to where upon page load of the page include, the page within the page include opens a pop up? Am I following that correctly?
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
Hello Jaime -

If I'm understanding you correctly, your situation is as follows:

1) You have a "main" page
2) The "main" page has some mechanism to trigger a "popup"
3) The "popup" contains a tabset
4) 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:

1) 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.
2) 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"
3) 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>
(Edited)
Photo of Jaime

Jaime

  • 1,220 Points 1k badge 2x thumb
Stephen and Barry thanks for responding. Barry that's exactly what I am trying to do. I figured that I would need a snippet. Thank you so much for the write up and sample code.
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
Hi Jaime -

Sorry it's not working!  Based on the above, I'm fairly certain that the issue is one (or both) of the following (see step 3 from my previous post):

1) Make sure you've given your tabset a unique id
2) Change the line of code in the javascript from:
var tabSet = skuid.$C('tabSetDraftChoices');
to
var tabSet = skuid.$C('<yourtabsetuniqueidhere>');
Lemme know how it goes. If the above doesn't work, let me know what version of Skuid you have installed. The "selectTab" is a relatively new API I believe (I'd never seen it before until I put together the above) so we might have to revert to an older method for selecting the tab if you're running an older version of Skuid.
(Edited)
Photo of Jaime

Jaime

  • 1,220 Points 1k badge 2x thumb
We are running version...8.15.4
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
Ok, selectTab properly isn't an API in that version (I don't have it installed so can't verify).

Did you make sure to set the unqiueId of your tabset and change the JS?

Assuming yes, then replace the following code replacing the 'tabSetDraftChoices' with your tabset unique id.

function selectTab(tabId) {	    
    var tabSet = skuid.$C('tabSetDraftChoices');
    tabSet.selectTab(tabId);
}

With:

function selectTabOld(tabId) {        
    var tabSet = skuid.$C('tabSetDraftChoices')
        , tabSetElement = tabSet && tabSet.element
        , tabPanels = tabSetElement && tabSetElement.children('.ui-tabs-panel')
        , targetTabIndex = tabPanels && (tabPanels.filter('#'+ tabId).index() - 1);
        
    if (targetTabIndex) {
        tabSetElement.tabs('option', 'active', targetTabIndex);    
    }
}
(Edited)
Photo of Jaime

Jaime

  • 1,220 Points 1k badge 2x thumb
thanks Barry....yup that's what I did and it now works!  thanks again...you're a life saver!
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
Glad to hear, happy to help!