Using Pass-Thru HTML Markup with IBM XPages xp:table Controls

01/15/2013 by Chris Toohey

While you don't need to know HTML, CSS, and JavaScript to get started with XPages development (but you do, let's be honest here), having a core understanding of those development languages is critical to crafting feature-rich XPages applications. One of my favorite examples of why it's good to know HTML when working with XPages features using Pass-Thru HTML in a core xp:table control.

Let's take a look at the structure of your average xp:table control:

Pretty basic. The xp:table control uses a structured combination of (Table Rows) and xp:td (Table Cells).

Knowing the structure options available to a standard HTML TABLE Element (and the xp:table control's ability to support those structure elements), we can take the core xp:table control further:

This version of our xp:table control uses a combination of HTML THEAD, TBODY, TFOOT, and TH Elements which generates the following HTML markup:

Let's throw some class attributes and styleClass properties into our HTML Elements and XPages Control respectively to give us easier access via CSS for styling:

And now some CSS for styling:

(Click here for the online demo)

Basic stuff really, but that's the entire point. Now I can structure and style (with CSS) the end-result markup to meet my individual UI needs.

Want more articles that highlight simple yet powerful features and functionality in IBM XPages? Make sure to Like / +1 / Share this post and leave a comment below and tell us how you use HTML as Pass-Thru elements in your XPages development.