This forum is closed to new posts and responses. New discussions are now taking place in the IBM Developer Answers forum.



Mar 2, 2016, 1: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>

 

 

Mar 3, 2016, 11:19 AM
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. New discussions are now taking place in the IBM Developer Answers forum.