Does Container Node on Title Bar in Application Layout work - xpages

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

Related

(XPages)How can change the banner color?

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.

Expand just one container tree node in navigator

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.

Xpages: Cannot get OnClick event in Navigator to fire

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>

tree nodes in container nodes in application links doesn't link to their target xpage - in OneUI V3.0.2

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

Unable to set elements in an Application Layout control (XPages)

Ok, I have two custom controls:
MainLayout: Contains an Application Layout control (from the Domino extension library)
Section1: Contains a section with a header and a few items
Now I create a new XPage, and drag the MainLayout control on it.
Now I want to drag Section1 to the page, and connect it to LeftColumn area of the MainLayout... which seems like something trivial, but I can't get it to work for some reason.
When I drag the section1 control to the leftColumn area, the component is always getting inserted at the top of the page. The little pencil-icon next to "LeftColumn" seems decoration-only to me, because no matter if you left-click or right-click on it, nothing happens...
How is this supposed to work?
Update:
This how my xpage looks like after adding the MainLayout control:
<?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">
<xp:this.resources>
<xp:styleSheet href="/custom.css"></xp:styleSheet>
</xp:this.resources>
<xc:MainLayout></xc:MainLayout>
</xp:view>
XML of the MainLayout custom component:
<?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"
xmlns:xc="http://www.ibm.com/xsp/custom">
<xe:applicationLayout id="applicationLayout1">
<xe:this.configuration>
<xe:oneuiApplication titleBarName="Test"
placeBarName="Server1" legalText="YadaYada">
<xe:this.footerLinks>
<xe:userTreeNode label="User 1"></xe:userTreeNode>
</xe:this.footerLinks>
<xe:this.bannerUtilityLinks>
<xe:loginTreeNode label="Login 1"></xe:loginTreeNode>
</xe:this.bannerUtilityLinks>
<xe:this.placeBarActions>
<xe:basicContainerNode label="Select server">
<xe:this.children>
<xe:basicLeafNode label="Server1"></xe:basicLeafNode>
</xe:this.children>
</xe:basicContainerNode>
</xe:this.placeBarActions>
</xe:oneuiApplication>
</xe:this.configuration>
</xe:applicationLayout>
</xp:view>
I also have a custom where i use the application layout.
in my custom control I have above the configuration tag the following code
And in my XPage which use my custom layout I referer to my LeftColumn editable area by the following code

Resources