This is SO confusing. I have an Xpage application built with the application layout control. I have 2 Title Bars which each have a navigation element in them with two views each.
I want the selected Title Bar and view to be highlighted. I understand that somehow this involves the Navigation Path and the use of the selected and/or selection properties,, but I do not understand how they work or interact.
Can these answers help you? How do you use the Selected property of the navigator?
You need to set the navigationPath property on each XPage and this must match the selection property (using regex) on the navigation control.
Updated with answer to the comment below
Here's an example XPage for the Home tab and the navigation control for Home:
<xc:layout navigationPath="/Home/XPage1">
<xp:this.facets>
<xc:layout_menu_home xp:key="facetLeft"></xc:layout_menu_home>
<xc:content_xpage1 xp:key="facetMiddle"></xc:content_xpage1>
</xp:this.facets>
</xc:layout>
The layout custom control uses the xe:applicationLayout to control the layout. In this case it has a custom property called navigationPath which is used in the example XPage above. The corresponding navigationPath property of the xe:applicationLayout must be set to this custom property:
<xe:applicationLayout id="applicationLayout">
...
<xe:this.configuration>
<xe:oneuiApplication
navigationPath="${javascript:compositeData.navigationPath}">
Here's part of xe:applicationLayout for handling the two tabs in your layout custom control:
<xe:this.titleBarTabs>
<xe:pageTreeNode page="/xpage1.xsp" label="Home" selection="/Home/.*"></xe:pageTreeNode>
<xe:pageTreeNode page="/xpage3.xsp" label="Tips" selection="/Tips/.*"></xe:pageTreeNode>
</xe:this.titleBarTabs>
Here's an example navigation control for Home:
<xe:navigator id="navigator1" >
<xe:this.treeNodes>
<xe:pageTreeNode page="/xpage1.xsp" label="XPage 1" selection="/Home/XPage1"></xe:pageTreeNode>
<xe:pageTreeNode page="/xpage2.xsp" label="XPage 2" selection="/Home/XPage2"></xe:pageTreeNode>
</xe:this.treeNodes>
</xe:navigator>
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 using a navigator control from the extension library. I want to use the default styling where only the selected item is highlighted and all the others are not highlighted and show the pointer cursor. For some reason it is applying the class "lotusSelected" to all the navigator nodes which are rendered as list items <li>.
I know that the "selected" property of tree nodes controls this. It does the same whether the property is set to true, false, or nothing. I am not trying to do anything fancy here, just use the default behavior. There is nothing in the custom css or theme to override this.
This happens on all browsers. Using Chrome tools I can see that removing the class causes the behavior I want. The navigation opens an XPage and changes a dynamic content control, this all works. This is used inside of the application layout control.
<?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:pageTreeNode label="Add New ATM"
page="/xpSupervisor.xsp" queryString="content=newATM">
</xe:pageTreeNode>
<xe:pageTreeNode label="Update ATM Information"
page="/xpSupervisor.xsp" queryString="content=updateATM"
selected="false">
</xe:pageTreeNode>
<xe:pageTreeNode label="One Time Settlement Amount Change"
page="/xpSupervisor.xsp" queryString="content=changeSettlementAmt"
selected="false">
</xe:pageTreeNode>
</xe:this.treeNodes>
</xe:navigator></xp:view>
UPDATE: It seems to be some conflict between the pageTreeNode and the way I created the dynamic content control. It only messes up when on that one Xpage. Here is the code for that:
<?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:dynamicContent id="dynamicContent1" useHash="true"
defaultFacet="default">
<xp:this.facets>
<xc:ccSupervisorHelp xp:key="default"></xc:ccSupervisorHelp>
<xc:ccNewATM xp:key="newATM"></xc:ccNewATM>
<xc:ccUpdateATM xp:key="updateATM"></xc:ccUpdateATM>
<xc:ccChangeSettlementAmt xp:key="changeSettlementAmt"></xc:ccChangeSettlementAmt>
</xp:this.facets>
</xe:dynamicContent>
</xp:view>
If I'am right, all nodes are selected because all nodes has the same page page="/xpSupervisor.xsp" as aim.
So if the page xpSupervisor.xsp is open, the navigator renders the nodes as select.
The property selected is only a boolean value, indicating whether the pageTreeNode is selected or not.
You should take a look at the property selection. This property is used in conjunction with navigationPath in the applicationLayout control. The property selection can take regular expressions to determine the selection state.
Despite two good answers which go me closer, I could not get the menu to work using the pageTreeNode. The fix was to switch to using a basicLeafNode and use a submittedValue and open the correct page in the onItemClick event of the navigator. I also added code in the 'selected' property to calculate which menu item was selected.
I could not get the context.getSubmittedValue() method to work in the selected property. I overcame this by setting it to a sessionScope var in the event. (viewScope didn't work for some reason)
<xe:basicLeafNode label="Update ATM Information" submitValue="updateATM">
<xe:this.selected><![CDATA[#{javascript:if(sessionScope.menuValue == "updateATM"){
return true;
} else {
return false;
}}]]></xe:this.selected></xe:basicLeafNode>
This is the code in the onItemClick that opens the correct link:
sessionScope.menuValue = context.getSubmittedValue();
if (sessionScope.menuValue == "newATM") {
context.redirectToPage("xpSupervisor.xsp?content=newATM");
} else...
The bottom of page 244 of the Extension Library book confirms this problem without offering a fix. Even though I have the book, hopefully this searchable answer will help others avoid the hassle I went through.
How can I style the xe:tabBar and xe:tabBarButton control so it looks as a "native" footer with buttons (including icons, text)?
To have your tabbar stay at the bottom of the page, use a Dojo ScrollablePane (dojox.mobile.ScrollablePane). If you're using Domino 9, this widget is already available and can be implemented like:
<xe:appPage
id="appPage1"
pageName="firstpage">
<xe:djxmHeading
id="heading1"
label="Scrollable Pane Demo">
</xe:djxmHeading>
<xp:div
id="scrollableContent"
dojoType="dojox.mobile.ScrollablePane">
<xp:this.dojoAttributes>
<xp:dojoAttribute name="fixedFooter">
<xp:this.value><![CDATA[#{javascript:var mobFooter = getComponent("tabBar1");
return mobFooter.getClientId(facesContext);}]]></xp:this.value>
</xp:dojoAttribute>
<xp:dojoAttribute name="fixedHeader">
<xp:this.value><![CDATA[#{javascript:var mobHeader = getComponent("heading1");
return mobHeader.getClientId(facesContext);}]]></xp:this.value>
</xp:dojoAttribute>
<xp:dojoAttribute
name="scrollDir"
value="v">
</xp:dojoAttribute>
<xp:dojoAttribute
name="fixedHeaderHeight"
value="54">
</xp:dojoAttribute>
<xp:dojoAttribute
name="fixedFooterHeight"
value="54">
</xp:dojoAttribute>
</xp:this.dojoAttributes>
YOUR CONTENT GOES HERE
</xp:div>
<xe:tabBar
id="tabBar1"
barType="segmentedControl">
</xe:tabBar>
</xe:appPage>
The Header and footer must stay outside the ScrollablePane and the following dojo attributes are required for functionality:
fixedHeader
fixedFooter
scrollDir
fixedHeaderHeight
fixedFooterHeight
If you're using Domino 8.5.3 then you will have to add the ScrollablePane and all of it's dependencies to your NSF which I cover in a blog post here. You can find additional documentation here.
You will need to implement a version of the dojo scrollableView or scrollablePane in order to get the navigation bar to reliably position itself at the bottom of the mobile device. Watch out for a video from Keith Strickland on NotesIn9 that explains how to do this if you have any troubles.
Using Domino 9.0 we at Red Pill Development have found that styling the NavBar with CSS alone does not guarantee the navigation bar will always drop to the bottom of the screen on each application page transition and/or screen orientation and/or partial refresh.
This is currently not possible with the current set of XPages mobile controls. We have logged PHAN962BJ8 to address this in the future.
I'm using the Extension Library for creating XPages and I want to use a view, where i can use some inline buttons (buttons in every row of the view) and I also want to use the functionality of the data view where I can expand the content of the current row.
I want to use one of those inline buttons, to expand the content of this row, because before the functionality of this button can be executed, the user has to enter some data in an inputText-field.
So the questions are?
- How can I add inline buttons (using SSJS) to a data view?
- Do you know any other way to solve my problem?
Thanks!
In the Extlib database the expansion with a custom form was done using a link. I would stick to the links -> gives you the most options (client side, server side). Stick to those. If you really need that "buttony" look (which does IMHO not look very much like a web application), use CSS to style the link to look like a button. The OneUI has instructions for that (or steal them from Twitter bootstrap).
The OneUI is worth another look suggesting a different visual clue for expand/collapse.
You should be able to do this within the confines of a dataView by adding a facet for "detail" and using collapsible detail.
For the dataView, set collapsibleDetail="true", add in a panel to the detail facet, then put the elements you want to display when they click to expand in that panel.
<xe:dataView id="dataView1" collapsibleDetail="true" detailsOnClient="true">
<xp:this.facets>
<xp:panel xp:key="detail">
<xp:button id="Mybutton" value="My button"></xp:button>
<xp:label value="This is the label" id="label1" for="Mybutton"></xp:label>
</xp:panel>
</xp:this.facets>
<xe:this.summaryColumn>
<xe:viewSummaryColumn columnName="lastname"></xe:viewSummaryColumn>
</xe:this.summaryColumn>
<xe:this.extraColumns>
<xe:viewExtraColumn columnName="city"></xe:viewExtraColumn>
<xe:viewExtraColumn columnName="state"></xe:viewExtraColumn>
<xe:viewExtraColumn columnName="zip"></xe:viewExtraColumn>
</xe:this.extraColumns>
<xe:this.data>
<xp:dominoView var="view2" viewName="ByName-First"></xp:dominoView>
</xe:this.data>
</xe:dataView>
Now, I'm not positive on how to bind it to the contents of the documents displayed, but I'm sure there's a way. I know how to access the document in a repeat, but not in a dataView, so I would probably do it in a repeat (unless you figure it out and post it to us here!)
Hopefully, that moves you in the right direction.
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: