Nice simple OneUI XPage layout section with dijit.TitlePane

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!

Collapsible dojo.TitlePane
Collapsible dojo.TitlePane

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

Non-Collapsible TitlePane
Non-Collapsible TitlePane

Demonstration

The collapsible and non-collapsible sections are demonstrated here

Advertisements

11 thoughts on “Nice simple OneUI XPage layout section with dijit.TitlePane

  1. 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.

  2. 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.

      • 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).

  3. 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

  4. 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…

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s