I've just started using Mark Leuksink's XPages Debug Toolbar (along with his Bootsrap4Xpages plugin). The Toolbar works well, but my Bootstrap UI has been overridden.
I've tried setting disableTheme="true", but no bananas. I've inserted the debug Toolbar just under the resources tag of my appLayout Custom Control.
Is there something I can do about this?
I'm using OpenNTF Bootstrap Library for XPages 1.0.0.201407020945 and XPages Debug Toolbar 1.0.0.20143092102
<xp:view
xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xe="http://www.ibm.com/xsp/coreex"
xmlns:bx="http://www.openntf.org/xsp/bootstrap"
viewState="fulltree"
xmlns:xc="http://www.ibm.com/xsp/custom"
xmlns:debug="http://www.openntf.org/xsp/debugtoolbar">
<xp:this.resources>
<xp:script
src="/commonjavascript.jss"
clientSide="false">
</xp:script>
</xp:this.resources>
<debug:toolbar
defaultCollapsed="false"
collapseTo="left"
disableTheme="true"
autoRemove="true">
</debug:toolbar>
Ohhh. Duuh. Major Dunce Cap.
Under XSP Properties, Theme defaults, Application theme, the bootstrap theme was no longer correctly inputted.
Per and Oliver, sorry for that!
Feeling sheepish right now.
Related
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.
I have to create a simple XPages application for iOS devices so want to use the XPages Mobile Controls which come with the Extension Library in 8.5.3 UP1.
On one of the pages, I need the users to be able to open links in new tabs, but I've found that even with the link target set to _blank, the links are opening in the same tab when opened on the iPad. It works fine using Chrome on my laptop - opening in a new tab. If I just create a simple XPage (not using the Single Page App control) with the same link control on it, the link opens ok in a separate tab on the iPad.
Is there any way to try and force the link into a new tab if I use the Mobile controls?
This is code from a simple test xpage - which results in the link opening in the same tab when I test it on an iPad:
<?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" defaultLinkTarget="_blank">
<xe:singlePageApp id="singlePageApp1" selectedPageName="homePage">
<xe:appPage id="appPage1" pageName="homePage">
<xe:djxmRoundRectList id="djxmRoundRectList1">
<xp:label value="File Link:" id="FileLinkLabel"></xp:label>
<xp:br></xp:br>
<xp:link escape="true" text="Link" id="link1"
value="http://www.stackoverflow.com/" target="_blank">
</xp:link>
</xe:djxmRoundRectList>
<xe:djxmHeading id="djxmHeading1" label="Home">
</xe:djxmHeading>
</xe:appPage>
</xe:singlePageApp>
</xp:view>
I tried this out on an iPad with Domino v9.0.1 and on v8.5.3 (with ExtLib v853.20130315-0724 installed). In both cases the link opened in a new tab as expectedusing the code you posted.
Would you be able to upgrade to a newer version of the Extension Library, and try that?
http://extlib.openntf.org/?r=project/XPages%20Extension%20Library/releases/56832E9BD6A0615186257B4300349C59
The v853.20130315-0724 release was the final one released for 8.5.3, so I would try that.
I have a requirement for an application in a Domino version 9.x deployment for a carousel like interface similar to what Netflix and others use to allow continuous scrolling. I got the jQuery jCarousel code working from here. But that lacks the pizzazz the user wants since the swiping feature is not available. I also used 100% computed HTML instead of being able to intersperse XPages controls within the carousel code.
So I found dojox/mobile/carousel (examples here) but all implementations, including the basic examples are not working well. The number of elements does not seem to be flexible and the positioning of them is much lower than I would think the should be. I fiddled with the CSS to see if I could fix things but have not found the right combination.
Here is the entire custom control I am using for this test (I captured the images from the demo and added them as image resources):
<?xml version="1.0" encoding="UTF-8"?>
<xp:view
xmlns:xp="http://www.ibm.com/xsp/core"
dojoParseOnLoad="true">
<xp:this.resources>
<xp:metaData
name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
</xp:metaData>
<xp:metaData
name="apple-mobile-web-app-capable"
content="yes">
</xp:metaData>
<xp:styleSheet
href="/.ibmxspres/dojoroot/dojox/mobile/themes/iphone/iphone.css">
</xp:styleSheet>
<xp:dojoModule
name="dojox/mobile"></xp:dojoModule>
<xp:dojoModule
name="dojox/mobile/parser"></xp:dojoModule>
<xp:dojoModule
name="dojox/mobile/Carousel"></xp:dojoModule>
</xp:this.resources>
<xp:panel>Above it</xp:panel>
<div
id="carousel1"
data-dojo-type="dojox/mobile/Carousel"
data-dojo-props='height:"150px", navButton:false, numVisible:2, title:"Category"'>
<!-- View #1 -->
<div
data-dojo-type="dojox/mobile/SwapView">
<div
data-dojo-type="dojox/mobile/CarouselItem"
data-dojo-props='src:"dish1.jpg", value:"dish", headerText:"dish"'></div>
<div
data-dojo-type="dojox/mobile/CarouselItem"
data-dojo-props='src:"glass1.jpg", value:"glass", headerText:"glass"'></div>
</div>
<!-- View #2 -->
<div
data-dojo-type="dojox/mobile/SwapView">
<div
data-dojo-type="dojox/mobile/CarouselItem"
data-dojo-props='src:"stone1.jpg", value:"stone", headerText:"stone"'></div>
<div
data-dojo-type="dojox/mobile/CarouselItem"
data-dojo-props='src:"shell1.jpg", value:"shell", headerText:"shell"'></div>
</div>
</div>
<xp:panel>Below it</xp:panel>
</xp:view>
in the sample in the documentation it has this comment followed by the inclusion of a JavaScript file.
<!-- Need to load the theme files for Carousel and PageIndicator as well as the base theme file -->
<script type="text/javascript" src="dojox/mobile/deviceTheme.js"
data-dojo-config="mblThemeFiles: ['base','Carousel','PageIndicator']"></script>
Not having this step done may be my problem but I cannot see how to do that within the XPages environment.
The dojo carousel exists since 1.7 Notes 8.5.3 comes with 1.6 (i dont know the dojo version of Notes9), so you maby have to update your dojo or implement a newer dojo lib in your application.
I did a short experiment on it, i disabled the build in dojo adding xsp.client.script.libraries=none to my xsp.properties and importet the dojo 1.9 in my application under WEB-INF/dojo/... then add the dojo to my xPage as ClientSide script resource. As soon i finished this the programatic Example from the dojo homepage worked immediately with out bigger errors (forgot to change the image sources =) ..).
The problem when adding xsp.client.script.libraries=none to your xsp.properties is that you also disable the XSP. library and some other xPage features wich you have to rebuild using the newer dojo version.
I realy prefer using dojo over jquery but in this case If you dont want to update your dojo i recomend you to maby stay at the jquery Library for this or look for other solutions.
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
Another hopefully simple issue from an xpages beginner.
I am trying to use the Navigator control from the Extension Library. No matter what I do with it, I cannot get it to render on any of the pages I try it on. Code is below. Thanks for any assistance.
<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:navigator id="outline" expandable="true">
<xe:this.treeNodes>
<xe:pageTreeNode page="/bcbsarequirements.xsp" selection="/bcbsarequirements" label="BCBSA Requirements" role="navigation"/>
<xe:pageTreeNode page="/compliance.xsp" selection="/compliance" role="navigation" label="Compliance"/>
<xe:pageTreeNode page="/finance.xsp" selection="/finance" label="Finance" role="navigation"/>
</xe:this.treeNodes>
</xe:navigator>
</xp:view>
This will happen at least if your view tag is missing the extension library attribute. Make sure the view tag looks like this: <xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex">. If the attribute is missing there is an error visible in the source.
Make sure there is no error in XPage source.
Make sure the application is built (sometimes project -> clean is needed).
Make sure extension library is checked in application properties (you should get errors if not).
Check for any error messages in the server console/log when loading the XPage on browser.
Do other extension library controls render for you? If not there is a problem in ExtLib installation.
Make sure your Designer and server have the same and preferably the latest (20121217) ExtLib version.
If you are using the Upgrade Pack then you can open an SPR with IBM.