Latest Updates

Products & Applications

Showtime
My Blackberry Enterprise Server Push Utility for the Lotus Notes Client, allows you to create Jobs for individual Channel, Message, and Browser Content Pushes, as well as allows you to delete Pushed Channel Icons from defined recipient devices.

Time Tracker
The idea is simple. At the start of your day - upon completion of your first task - create an entry highlighting what you did and whether you feel it was an efficient or inefficient use of your time. Based on several requests, you can also select the priority, apply categories, or even align your time against a project.

For Lotus Notes Client v8.0 and above, you can use the Time Tracker Widget to make this process even easier!

Zephyr
My Configuration-based Rich Text Mail Merge and Emailing Utility, Zephyr allows you to create rich, data-driven emails to support automated workflow - all via Microsoft Word Mail Merge-like architecture. Dear <firstname> allows you to personalize each email message not only to the individual recipient, but also to the individual application workflow event!

xCopy
xCopy is a simple configurable xCopy client for the Lotus Notes client. By creating and defining xCopy Profiles, you can batch process your file backup or remote upload jobs. With the addition of the xCopy sidebar widget, you can easily kick-off these jobs, and modify both the xCopy Profiles and xCopy itself.

Community & Resources

Lotus Technical Information & Education Community

The Lotus Technical Information & Education community is comprised of IBM, business partner, and customer subject matter experts who use product wikis, published articles, white papers, community blogs and the latest in social media to build and share high quality technical content.

OpenNTF.org - Open Source Community for Lotus Notes Domino

OpenNTF is devoted to enabling groups of individuals all over the world to collaborate on IBM Lotus Notes/Domino applications and release them as open source.

developerWorks Lotus : Wikis

Share your deployment experiences and best practices in our wikis and help IBM to create scenarios for successful deployments. Contribute to the community by collaborating on shared content and leverage the shared knowledge from that community.

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

01/15/2013 12:55:00 PM by Chris Toohey

Using Pass-Thru HTML Markup with IBM XPages xp:table Controls 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:

<xp:table>
    <xp:tr>
        <xp:td>
            Column 1
        </xp:td>
        <xp:td>
            Column 2
        </xp:td>
        <xp:td>
            Column 3
        </xp:td>
    </xp:tr>
</xp:table>

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:

<xp:table>
    <thead>
        <xp:tr>
            <th>
                Header 1
            </th>
            <th>
                Header 2
            </th>
            <th>
                Header 3
            </th>
        </xp:tr>
    </thead>
    <tbody>
        <xp:tr>
            <xp:td>
                Column 1
            </xp:td>
            <xp:td>
                Column 2
            </xp:td>
            <xp:td>
                Column 3
            </xp:td>
        </xp:tr>
    </tbody>
    <tfoot>
        <xp:tr>
            <xp:td>
                Footer 1
            </xp:td>
            <xp:td>
                Footer 2
            </xp:td>
            <xp:td>
                Footer 3
            </xp:td>
        </xp:tr>
    </tfoot>
</xp:table>

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

<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Column 1</td>
            <td>Column 2</td>
            <td>Column 3</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Footer 1</td>
            <td>Footer 2</td>
            <td>Footer 3</td>
        </tr>
    </tfoot>
</table>

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:

<xp:table>
    <thead>
        <xp:tr>
            <th class="col0">
                Header 1
            </th>
            <th class="col1">
                Header 2
            </th>
            <th class="col2">
                Header 3
            </th>
        </xp:tr>
    </thead>
    <tbody>
        <xp:tr>
            <xp:td styleClass="col0">
                Column 1
            </xp:td>
            <xp:td styleClass="col1">
                Column 2
            </xp:td>
            <xp:td styleClass="col2">
                Column 3
            </xp:td>
        </xp:tr>
    </tbody>
    <tfoot>
        <xp:tr>
            <xp:td styleClass="col0">
                Footer 1
            </xp:td>
            <xp:td styleClass="col1">
                Footer 2
            </xp:td>
            <xp:td styleClass="col2">
                Footer 3
            </xp:td>
        </xp:tr>
    </tfoot>
</xp:table>

And now some CSS for styling:

table {
    width: 100%;
    border-collapse: collapse;
}

table > thead > tr > th {
    background-color: #eee;
    color: #666;
}

table > thead > tr > th,
table > tbody > tr > td,
table > tfoot > tr > td {
    padding: 4px;
}

table > thead > tr > th[class="col0"],
table > tbody > tr > td[class="col0"],
table > tfoot > tr > td[class="col0"] {
    width: 20%;
}
table > thead > tr > th[class="col1"],
table > tbody > tr > td[class="col1"],
table > tfoot > tr > td[class="col1"] {
    width: 40%;
}

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

Permalink | Comments (3)

Demo Development Domino HTML IBM ICS XPages

 
Patrick KwintenName:Patrick KwintenWebsite:http://quintessens.wordpress.comComment still stupid the table control does not provide these elements.

One of those things in XPages…
 Murray SinclairName:Murray SinclairComment Very useful, thanks.  I had read about this type of styling a while ago - good to get a refresh plus learn something new in the CSS that you've used. David NewmanName:David NewmanWebsite:http://www.scriptkrewe.comComment I have been all over the CSS app I have on my iPad. Along with the HTML, JavaScript and xpages wiki apps. They have really helped when it comes to building xpages apps. With, of course your blog. It has been very helpful. Thanks Chris.

(not published)




Evaluate this Formula: @LowerCase(@Text("FOO"))