I am using a navigator that has several container nodes at the top level with child nodes in each one. I wanted to have the navigator initially open with all the container nodes closed but one.
Using getComponent("navigator1").getTreeNodes()[0].setExpanded(true) does not seem to do anything (but I can use setLabel to change the label)... Anyone solve this issue before?
Howard
Add property expanded="false" to all containers you want initially closed.
Example:
<xe:navigator
id="navigator1"
expandable="true">
<xe:this.treeNodes>
<xe:basicContainerNode
label="Container 1"
expanded="false">
<xe:this.children>
<xe:basicLeafNode label="Node 1.1"></xe:basicLeafNode>
<xe:basicLeafNode label="Node 1.2"></xe:basicLeafNode>
</xe:this.children>
</xe:basicContainerNode>
<xe:basicContainerNode
label="Container 2">
<xe:this.children>
<xe:basicLeafNode label="Node 2.1"></xe:basicLeafNode>
<xe:basicLeafNode label="Node 2.2"></xe:basicLeafNode>
</xe:this.children>
</xe:basicContainerNode>
</xe:this.treeNodes>
</xe:navigator>
Only Container 2 is initially expanded.
Related
I have an XPages, like this :
How can I change the banner color?
2020/10/19 Update
The following is the main design code, where can I change the banner color?
There is only "invertedNavbar"...
<xe:applicationLayout id="applicationLayout1">
<xp:callback facetName="facet_1" id="callback1"></xp:callback>
<xp:this.facets>
<xe:navigator id="navigator1" xp:key="LeftColumn"></xe:navigator>
</xp:this.facets>
<xe:this.configuration>
<xe:bootstrapResponsiveConfiguration productLogoAlt="XPAGES"
titleBar="false" placeBar="false" footer="false" legal="false" invertedNavbar="true">
<xe:this.bannerApplicationLinks>
<xe:basicLeafNode label="HOME"></xe:basicLeafNode>
<xe:basicLeafNode label="INFO"></xe:basicLeafNode>
<xe:basicLeafNode label="PRODUCT"></xe:basicLeafNode>
</xe:this.bannerApplicationLinks>
</xe:bootstrapResponsiveConfiguration>
</xe:this.configuration>
</xe:applicationLayout>
I would assume it can be modified through the css or theme definition of the XPage.
If you inspect the Element with the Developer Console in the Browser (F12 to open in most browsers) you should find out wich class is associated with the Element and should be modified.
In many cases you can add your own CSS-class name to an element. Then create a stylesheet in your Design and define the class.
I am trying to build a dynamic navigator for a document database. The navigator build correctly by using a repeat node (I got this from a post by Per) and I can put page or basic nodes in the repeat node and everything looks good, but I need to set a scope variable and then refresh the view element, and I cannot get that code to fire.
I have included the code for the navigator below. Any help would be greatly appreciated, I have scoured Stack Overflow and tried adding events manually all to no avail.
<?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">
<xe:navigator
id="navigator1"
expandable="false">
<xe:this.treeNodes>
<xe:repeatTreeNode
var="navEntry"
indexVar="index"
loaded="true">
<xe:this.children>
<xe:pageTreeNode
rendered="true"
page="/xpViewAllDocs.xsp">
<xe:this.label><![CDATA[#{javascript:var dbName=#DbName();
var arr = #Unique(#Trim(#DbColumn(dbName,"alldocslookup",1)))
arr[index]}]]></xe:this.label>
</xe:pageTreeNode>
</xe:this.children>
<xe:this.value><![CDATA[#{javascript:var dbName=#DbName();
#Elements(#Unique(#Trim(#DbColumn(dbName,"alldocslookup",1))))}]]></xe:this.value>
</xe:repeatTreeNode>
</xe:this.treeNodes>
<xp:eventHandler
event="onItemClick"
submit="true"
refreshMode="complete">
<xe:this.action><![CDATA[#{javascript:viewScope.put("key","Test");
view.postScript("alert('Client Side JavaScript executed!')");}]]></xe:this.action>
</xp:eventHandler></xe:navigator>
</xp:view>
EDIT:
I tried all of the suggestions below but none of them worked.
I can get this to work by simply putting a link in the repeat or a computed field or something like that, but then it doesn't really look the navigation element at all. If I can just change the css some to make it look like the navigation I would be happy. I have taken a stab at it with a list container, but it is not working:
I feel like I am kind of close. What can I go to get this to look more like a navigator?
<?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">
<xe:list
id="list1"
styleClass="lotusMenuHeader">
<xp:link
role="menuItem"
styleClass="lotusSelected"> All Documents</xp:link>
<xp:link>Tag 1</xp:link>
<xp:link>Tag 2</xp:link>
</xe:list>
<xp:panel>
<ul
header="lotusMenuHeader">
<li
class='lotusSelected'>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</xp:panel>
</xp:view>
onItemClick doesn't seem to work with pageTreeNode. The event doesn't get rendered at all.
Use basicLeafNode instead. onItemClick does work with it well.
Put the current clicked value into sessionScope variable with context.getSubmittedValue().
Redirect to you target XPage with context.getSubmittedValue().
<xe:navigator
id="navigator1"
expandable="false">
<xe:this.treeNodes>
<xe:repeatTreeNode
var="navEntry">
<xe:this.children>
<xe:basicLeafNode
label="#{navEntry}"
submitValue="#{navEntry}" />
</xe:this.children>
<xe:this.value><![CDATA[#{javascript:var dbName=#DbName();
#Unique(#Trim(#DbColumn(dbName,"alldocslookup",1)))}]]></xe:this.value>
</xe:repeatTreeNode>
</xe:this.treeNodes>
<xp:eventHandler
event="onItemClick"
submit="true"
refreshMode="complete">
<xe:this.action><![CDATA[#{javascript:
sessionScope.key = context.getSubmittedValue();
context.redirectToPage("xpViewAllDocs.xsp")}]]></xe:this.action>
</xp:eventHandler>
</xe:navigator>
I just want to create a simple drop-down in the bannerApplicationLinks:
<xe:this.bannerApplicationLinks>
<xe:pageTreeNode label="Generator"
page="/xpGenerator.xsp" selection="/Generator/.*">
</xe:pageTreeNode>
<xe:basicContainerNode label="Settings">
<xe:this.children>
<xe:pageTreeNode label="manual setting"
page="/userprofile.xsp">
</xe:pageTreeNode>
<xe:basicLeafNode label="Language"></xe:basicLeafNode>
</xe:this.children>
</xe:basicContainerNode>
<xe:pageTreeNode label="man. setting"
page="/userprofile.xsp">
</xe:pageTreeNode>
</xe:this.bannerApplicationLinks>
the (contained) tree node "manual setting" doesn't link to "/userprofile.xsp", but to the current page.
The tree node "man. setting" links correctly to "/userprofile.xsp"
The same effect happens in the utility links. Am I missing sth?.
Server is 9.0.1, Extlib is 9.0.1
thx in advance, Uwe
I'm using the Application Layout control, and on the Title Bar, I'm adding a Container Node with 2 (or more) children Basic Nodes, although I have tried several other children types for experimentation purposes. The label for the container node is displayed on the page, but none of the functionality of a container node is present. The same container node works as expected in the banner, place bar, and footer, but not in the Title Bar.
Is this a bug or is there another setup step I need to take?
Are there any workarounds to get this to work in the Title Bar?
<?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">
<xe:applicationLayout id="applicationLayout1">
<xe:this.configuration>
<xe:oneuiApplication
legal="false"
footer="false"
banner="false"
placeBar="false">
<xe:this.footerLinks></xe:this.footerLinks>
<xe:this.titleBarTabs>
<xe:basicContainerNode label="Container 1">
<xe:this.children>
<xe:basicLeafNode
label="Link 1"
href="url1">
</xe:basicLeafNode>
<xe:basicLeafNode
label="Link 2"
href="url2">
</xe:basicLeafNode>
</xe:this.children>
</xe:basicContainerNode>
</xe:this.titleBarTabs>
<xe:this.placeBarActions></xe:this.placeBarActions>
<xe:this.bannerApplicationLinks></xe:this.bannerApplicationLinks>
</xe:oneuiApplication>
</xe:this.configuration>
</xe:applicationLayout>
</xp:view>
This is a bug one why or another. Usually only tabs are placed here so it is either that container nodes aren't supported here and they should be removed as an option to developers to add them to the TitleBar, or that the container node just doesn't work in the Title Bar.
I've logged 'PHAN9FDDFX' to track this issue regardless of the outcome.
Never tried it the way described by you; I always put the tree nodes directly into the titleBarTabs, as it's done in the Extlib demo database:
<xe:this.titleBarTabs>
<xe:pageTreeNode page="Core_Home" selection="/Core/.*" label="Core">
</xe:pageTreeNode>
<xe:pageTreeNode page="Domino_Home" selection="/Domino/.*" label="Domino">
</xe:pageTreeNode>
<xe:pageTreeNode page="DWA_Home" selection="/DWA/.*" label="iNotes">
</xe:pageTreeNode>
<xe:pageTreeNode loaded="false" page="iWidget_Home" selection="/iWidget/.*" label="iWidget">
</xe:pageTreeNode>
<xe:pageTreeNode page="Mobile_Home" selection="/Mobile/.*" label="Mobile">
</xe:pageTreeNode>
<xe:pageTreeNode page="OneUI_Home" selection="/OneUI/.*" label="OneUI">
</xe:pageTreeNode>
<xe:pageTreeNode page="REST_Home" selection="/REST/.*" label="REST">
</xe:pageTreeNode>
</xe:this.titleBarTabs>
Hope that helps
I see a "menu dropdown" type control in one of the examples of the OneUI application Framework v2.1. see here
http://infolib.lotus.com/resources/oneui/2.1/docPublic/examples.htm?content=interactive.htm&theme=green
If you hover over the links at the top of the interactive demo like "people" and "communities" a dropdown menu appears. I would love to use this control if it exists rather than creating one.
Thanks in advance for any info.
Elijah Lapson
if you use the Application Layout control and add a container node with children to the Utility Links or Application Links section, you will get a drop down. Here's an example:
<xe:basicContainerNode label="Container 1">
<xe:this.children>
<xe:basicLeafNode label="Link 1"></xe:basicLeafNode>
<xe:basicLeafNode label="Link 2"></xe:basicLeafNode>
</xe:this.children>
</xe:basicContainerNode>
It does not look exactly like the one in the UI documentation, however: