FORUM PLAN UPDATE
Date revision: This forum will remain open to new posts and responses until December 1, 2018. (After that date, you will still be able to view and search the forum.) Also, we're taking a second look at the best place to host future conversation. For now, keep using this forum, and stay tuned for more news.



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>


FORUM PLAN UPDATE
Date revision: This forum will remain open to new posts and responses until December 1, 2018. (After that date, you will still be able to view and search the forum.) Also, we're taking a second look at the best place to host future conversation. For now, keep using this forum, and stay tuned for more news.