Hi,
I am working on creation of fully dynamic left menu page. I am having a view that contains parent link documents and child link documents. Each child link document is related to one of the parent link document. I am using accordion container and accordion pane controls to generate this page. Here I am using a repeat control within Accordion container. Value of this repeat control is set to list of parent link documents and suppose, var property is set to pEntry, and 'repeatControls' property is set to true. Within this repeat control, I have created accordion pane. Title of this pane will be pEntry.getItemValueString("LinkName"), and Id property is also being generated dynamically. Now, within this accordion pane, I created another repeat control, that will contain all child documents of current parent document (means pEntry). Within this repeat control, I am creating a link, which will be used as link items.
Now, I need to set 'selectedTab' property of accordion container control. As I set this property with hard-coded value, this is still not working, and each time the page loads, first accordion pane gets opened by default. I need to open different panes in response of different links. How can I achieve this?
Below is the source of my page:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xe="http://www.ibm.com/xsp/coreex">
<xp:this.beforePageLoad><![CDATA[#{javascript:viewScope.ktr = "0"}]]></xp:this.beforePageLoad>
<xe:djAccordionContainer id="acLeftMenu"
styleClass="left_content">
<xp:repeat id="repeat1" var="pEntry" indexVar="idx"
repeatControls="true" disableOutputTag="true">
<xp:this.value><![CDATA[#{javascript:var key = "WKF_HelpDesk~Parent~NA~";
database.getView("WKFLeftMenuItems").getAllDocumentsByKey(key.toLowerCase())}]]></xp:this.value>
<xe:djAccordionPane
rendered="#{javascript:showLink(pEntry)}" partialRefresh="true">
<xe:this.id><![CDATA[${javascript:viewScope.ktr = (parseInt(viewScope.ktr) + 1).toString()
print("cpLeftMenu" + viewScope.ktr)
"cpLeftMenu" + viewScope.ktr}]]></xe:this.id>
<xp:repeat id="repeat2" rows="0" var="cEntry"
disableOutputTag="true">
<xp:this.value><![CDATA[#{javascript:var key = "WKF_HelpDesk~child~" + pEntry.getItemValueString("LinkName") + "~";
database.getView("WKFLeftMenuItems").getAllDocumentsByKey(key.toLowerCase())}]]></xp:this.value>
<xp:link escape="false" id="link1"
rendered="#{javascript:showLink(cEntry)}"
style=" color: #656565;text-decoration:none">
<xp:this.text><![CDATA[#{javascript:cEntry.getItemValueString("LinkName") + "<br>"}]]></xp:this.text>
<xp:this.value><![CDATA[#{javascript:cEntry.getItemValueString("PageToOpen") + "?q=" + pEntry.getItemValueString("SeqNo") + "&Title=" + cEntry.getItemValueString("LinkName")}]]></xp:this.value>
</xp:link>
</xp:repeat>
<xe:this.title><![CDATA[#{javascript:pEntry.getItemValueString("LinkName")}]]></xe:this.title>
</xe:djAccordionPane>
</xp:repeat>
<xe:this.selectedTab><![CDATA[#{javascript:"repeat1:cpLeftMenu3"// + context.getUrlParameter("q")}]]></xe:this.selectedTab>
</xe:djAccordionContainer>
</xp:view>
Please let me know if there any alternate way to generate fully dynamic left menu. I also tried accordion control of Extension library section, but that did not work properly.
Thanks and regards
Romil