This forum is closed to new posts and responses. Individual names altered for privacy purposes. The information contained in this website is provided for informational purposes only and should not be construed as a forum for customer support requests. Any customer support requests should be directed to the official HCL customer support channels below:

HCL Software Customer Support Portal for U.S. Federal Government clients
HCL Software Customer Support Portal



~Laura Xanniman
Mar 2, 2016, 6:39 AM
67 Posts

put tabPanel forward with sessionScope variable

  • Category: Server Side JavaScript
  • Platform: All
  • Release: 9.0.1
  • Role: Developer
  • Tags:
  • Replies: 1

Hi,

the following Tabs should be controllable with the help of variable 'm1':

    <xp:tabbedPanel id="tabbedPanel1" selectedTab="#{javascript:sessionScope.get('m1')}">
        <xp:tabPanel label="Config" id="conf">
            <xc:k_conf></xc:k_conf>
        </xp:tabPanel>
        <xp:tabPanel label="Solution" id="sol">
            <xc:k_sol></xc:k_sol>
        </xp:tabPanel>
    </xp:tabbedPanel>

In Control k_conf is a button 'calculate' which performs an agent and then sets the varable 'm1' to 'sol'.

I would expect, that the Tab switches to 'Solution', but nothing happens (although refreshmode="complete").

        <xp:button value="calculate" id="button1">

           <xp:eventHandler event="onclick" submit="true" refreshMode="complete">
            ...
             <xp:executeScript>
                 <xp:this.script><![CDATA[#{javascript:
                    ...
                     agent.runWithDocumentContext(docVG.getDocument());
                     sessionScope.put("m1","sol");
                     }]]>
                 </xp:this.script>
             </xp:executeScript>
            ...
        </xp:button>

 

 

~Autumn Kijipymanakol
Mar 3, 2016, 4:19 PM
453 Posts
I don't use the TabPanel control but ..

I just use a series of ordinary panel then build a navigator to select the panel I want to display. The click on the link in the navigator sets a viewScope variable that computes the style of the panel and sets display:none when appropriate. You should not need it to be a sessionScope because you should always be in the same view. In any case below is a shell of a panel that I use as a starting point in all my development. Copy it into a custom control then load the control onto your XPage when appropriate. 

 

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xc="http://www.ibm.com/xsp/custom"
    xmlns:xe="http://www.ibm.com/xsp/coreex">

    <div class="panel panel-default">
        <div class="panel-heading">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-9 col-md-6">
                        <ul class="nav nav-pills">
                            <li role="presentation">
                                <xp:link id="headerLink" text="Header">
                                    <xp:this.attrs>
                                        <xp:attr name="data-toggle" value="tab">
                                        </xp:attr>
                                    </xp:this.attrs>
                                    <xp:eventHandler event="onclick" submit="true"
                                        refreshMode="partial" refreshId="panelMain">
                                        <xp:this.action><![CDATA[#{javascript:viewScope.vsSelectedDocMenu = "headerLink"
viewScope.vsShowPanel = "Header"}]]></xp:this.action>
                                    </xp:eventHandler>
                                </xp:link>
                            </li><!-- li role= -->
                            <li role="presentation">
                                <xp:link id="attachmentLink" text="Attachments">
                                    <xp:this.attrs>
                                        <xp:attr name="data-toggle" value="tab">
                                        </xp:attr>
                                    </xp:this.attrs>
                                    <xp:eventHandler event="onclick" submit="true"
                                        refreshMode="partial" refreshId="panelMain">
                                        <xp:this.action><![CDATA[#{javascript:viewScope.vsSelectedDocMenu = "attachmentLink"
viewScope.vsShowPanel = "Attachments"}]]></xp:this.action>
                                    </xp:eventHandler>
                                </xp:link>
                            </li><!-- li role= -->
                            <li role="presentation">
                                <xp:link id="infoReqLink" text="Information Request">
                                    <xp:this.attrs>
                                        <xp:attr name="data-toggle" value="tab">
                                        </xp:attr>
                                    </xp:this.attrs>
                                    <xp:eventHandler event="onclick" submit="true"
                                        refreshMode="partial" refreshId="panelMain">
                                        <xp:this.action><![CDATA[#{javascript:viewScope.vsSelectedDocMenu = "infoReqLink"
viewScope.vsShowPanel = "InfoReq"}]]></xp:this.action>
                                    </xp:eventHandler>
                                </xp:link>
                            </li><!-- li role= -->
                            <li role="presentation">
                                <xp:link id="historyLink" text="History">
                                    <xp:this.attrs>
                                        <xp:attr name="data-toggle" value="tab">
                                        </xp:attr>
                                    </xp:this.attrs>
                                    <xp:eventHandler event="onclick" submit="true"
                                        refreshMode="partial" refreshId="panelMain">
                                        <xp:this.action><![CDATA[#{javascript:viewScope.vsSelectedDocMenu = "historyLink"
viewScope.vsShowPanel = "History"}]]></xp:this.action>
                                    </xp:eventHandler>
                                </xp:link>
                            </li><!-- li role= -->
                        </ul><!-- class nav -->
                    </div><!-- col -->
                </div><!-- main row -->
            </div><!-- container-fluid -->

        </div><!-- panel-heading -->
        <xp:panel id="panelMain">

            <div class="panel-body">
                <xp:panel id="panelHeader">
                    <xp:this.style><![CDATA[#{javascript:if (!viewScope.containsKey("vsShowPanel")){
        viewScope.vsShowPanel = "Header";
    }
    var showPanel:String = viewScope.vsShowPanel;
    (showPanel == "Header" ) ? "" : "display:none";
    }]]></xp:this.style>
                    <div class="container-fluid">
                        Header
                    </div><!-- panelHeader container-fluid -->

                </xp:panel><!--panelHeader-->

                <xp:panel id="panelAttachments">
                    Attachments
                </xp:panel><!-- panelAttachments -->
                <xp:panel id="panelHistory">
                    History
                    <xp:this.style><![CDATA[#{javascript:(viewScope.vsShowPanel == "History") ? "" : "display:none"}]]></xp:this.style>
                </xp:panel><!-- panelHistory -->
                <xp:panel id="panelInfoReq">
                    <xc:ccWFSInfoRequest>
                        <xc:this.linkKey><![CDATA[#{javascript:WFSMainDoc.getValue("LinkKey")}]]></xc:this.linkKey>
                    </xc:ccWFSInfoRequest>
                    <xp:this.style><![CDATA[#{javascript:(viewScope.vsShowPanel == "InfoReq") ? "" : "display:none"}]]></xp:this.style>
                </xp:panel>
            </div><!-- panel-body -->
        </xp:panel><!-- panelMain -->
    </div><!-- class=panel -->

    <xp:eventHandler event="onClientLoad" submit="false">
        <xp:this.script><![CDATA[
         var selectedPillId = "#{javascript:getClientId(viewScope.vsSelectedDocMenu ? viewScope.vsSelectedDocMenu : 'headerLink')}"
         document.getElementById(selectedPillId).parentNode.className = "active"]]></xp:this.script>
    </xp:eventHandler>

</xp:view>


This forum is closed to new posts and responses. Individual names altered for privacy purposes. The information contained in this website is provided for informational purposes only and should not be construed as a forum for customer support requests. Any customer support requests should be directed to the official HCL customer support channels below:

HCL Software Customer Support Portal for U.S. Federal Government clients
HCL Software Customer Support Portal