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.
Related
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
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>
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: