In this article I will demonstrate how to make a nice looking layout section on your XPages which goes well with OneUI
Introduction
I have a requirement to lay out a form into sections with headers which “looks good” within the OneUI framework. There are many ways I could do this but the reason I chose dojo.TitlePane was because of the original requirement to make “collapsible sections” and I am already using OneUI and wanted to conform to that look and feel.
Demonstration
The collapsible and non-collapsible sections are demonstrated here
Creating a collapsible section
Could not be easier. We add the script tag to “require” the loading of the titlePane library and then tell the web page which “div” elements we want to be TitlePanes. The dojoType=”dijit.TitlePane” tells the dojo code on page load to convert this div to a nice looking TitlePane.
<script type="text/javascript">
dojo.require("dijit.TitlePane");
</script>
<xp:div id="titleChildren" dojoType="dijit.TitlePane" title="Collapsible Pane - Click on me">
HERE IS YOUR CONTENT
</xp:div>
And you fill your content into the <xp:div> section – couldn’t be easier!
Creating a non-collapsible pane
And then my requirements changed and the section had to be non-collapsible – of course……
So I had to come up with a simple way to turn what I had into the new requirement.
There is a parameter on the TitlePane “toggleable” which when set to false dictates that the title bar cannot be clicked on and there is no mouse over color. Don’t hurt yourself but here is the dojo API documentation for the TitlePane
<script type="text/javascript">
dojo.require("dijit.TitlePane");
</script>
<div id="titleChildren" dojoType="dijit.TitlePane" class="noToggle" title="Collapsible Pane - Click on me" toggleable="false">
HERE is the text
<div>
In this case I used a <div> and not an <xp:div> so that it will work in R<8.5.3. If you have 8.5.3+ then you can add the <attr> toggleable to your <xp:div>.
The last thing we need to do is to add a CSS to hide the expandable icon
<style>
.noToggle .dijitArrowNode {
background-image: url("") !important
}
</style>
so there we have it
Demonstration
The collapsible and non-collapsible sections are demonstrated here
Xomino 
I’m using the TitlePane quite extensively in a project that I’m working on right now with great success. If you’re a fan of this look, but need to allow someone to configure/edit settings for content within the “container”, check out the dojox.widget.Portlet. The Portlet actually extends the TitlePane, and allows you to – like the TitlePane – pass functional properties as-needed. For example, you can choose to allow the user to delete the given Portlet. That, combined with the settings/configuration section make this an AWESOME addition to your toolkit.
Thanks Chris! I will definitely check it out.
The look is very simple but “modern enough” for the moment.
Simple & easy. Thanks!
BTW, if you don’t want to have to add a specific class to say which titlePane widgets are toggleable, here’s some CSS:
div[class~=”dijitTitlePane”] > div[class~=”dijitTitlePaneTitle”][class~=”dijitFixedOpen”] > div[role~=”heading”] > img[class~=”dijitArrowNode”] {
background-image: none !important;
}
Basically, when the toggleable attribute is set to “false”, it adds the “dijitFixedOpen” class to the “dijitTitlePaneTitle” DIV, which is the immediate child of the main/container “dijitTitlePane” DIV. This CSS walks the nodes and tells the IMG (with the “dijitArrowNode” class) to not have a background image.
NICE – thank you 🙂
Anytime! We need more stuff like this. I’m putting together a quick demo of my portlet and titlePane custom controls & publishing them ASAP. Adding enough properties to address the majority of functional use cases (such as “href” XHRing same-domain content, and “extractContent” and “parseOnLoad” batting cleanup).
I’m pretty new to xPages and love the samples you post. Is there anyway to get all the code to see how it all works? Maybe a simple dbase with the different xPages and custom controls etc. .
Thanks for all that you share!
thank you for you kind comments – I appreciate you taking the time to let me know 🙂
I post a sample database for the jQuery items as they are the “end product”, but the examples in the xPlay.nsf database are really not intended for production code which is why I do not post them as a database. Is there something specific you need more code for or is this just in general you would like it as a learning tool?
Marky
was working for an travel request app with Thomas Hampel, this looks very promising for the customers who all are planning to migrate to other platforms…
Check out Chris Toohey’s new post for a custom control for this
http://www.dominoguru.com/pages/ibm_xpages_custom_controls_portlet_and_titlepane.html
[…] is not part of the Dojo controls in the ExtLib. You can implement your own version and Mark Roden posted a nice description how to achieve this. HOWEVER in case you are using the Bootstrap theme in the Extension […]