dominoGuru.com

Your Development & Design Resource

Using an XPages Repeat Control for an Embedded Single-Category View

05/19/2010 10:21 AM by Chris Toohey

Using an
XPages Repeat Control for an Embedded Single-Category View I recently had a customer who needed to create an export of content from an application for warehouse staff processing. The content -- not that it's important -- was a spec build list for custom doodads. The NotesData hierarchy consists of a document NotesDocument with response NotesDocument Responses. Pretty simple stuff, really.

Using traditional Design Elements, I created a Form Design Element named document with an embedded View Design Element named embresponses, which contained -- you guessed it -- the specific response NotesDocument Responses.

And it worked great, I had a great view of the responses directly from the document UI... but then they wanted to print.

This is where it gets a little messy. See, the response NotesDocuments contained Image Resource references of various sizes - scaled specifically to aid the warehouse staff in visually identifying various parts of the doodads during build.

Have you ever tried to print a Form with an Embedded View that contains NotesDocuments that themselves use Image Resources? It sucks quite frankly. The Image Resources - regardless of their size - scale to a consistent and unusable size. Not to mention that you will, regardless of settings, cut off contents of your embresponses Embedded View Design Element.

The fix? Well, I went with XPages...

I can easily duplicate the Embedded View Design Element technique with XPages via a simple Repeat Control.

First, I'll define my XPage Data Source:


<xp:this.data>

    <xp:dominoDocument 
var="thisDoc" formName="document"></xp:dominoDocument>

</xp:this.data>

From there, I build out my XPage UI using "thisDoc" as my NotesUIDocument (... if you will).

When I get to the point where I need to build out my response Embedded View Design Element in my XPage, I use the following Repeat Control:


<table id="embresponses">

    <thead>

        <tr>

            <td class="col0"></td>

            <td class="col1">Part 
Number</td>

        </tr>

    </thead>

    <tbody>

        <xp:repeat id="repeat1" rows="30"

            value="#{javascript:thisDoc.getDocument().getResponses()
}" var="thisResp">

            <tr>

                <td class="col0">

                    <xp:image>

                      
  <xp:this.url><![CDATA[#{javascript:var imgURL = "/";

                
            imgURL += 
thisResp.getItemValueString("partnumber");

                
            imgURL += ".jpg";

                
            return imgURL;}]]></xp:this.url>

                    </xp:image>

                </td>

                <td class="col1">

                    <xp:text value="#{thisResp.partnumber}"></xp:text>

                </td>

            </tr>

        </xp:repeat>

    </tbody>

</table>

I simply build out my TABLE HTML Element and use a Repeat Control -- which is treating the response NotesDocumentCollection as it's own Data Source -- and build out my TABLE TBODY contents.

Using this technique, I was able to quickly and quite successfully duplicate (if not exceed) the traditional Embedded View Technique in XPages!

About the author: Chris Toohey

Thought Leadership, Web & Mobile Application Development, Solutions Integration, Technical Writing & Mentoring

A published developer and webmaster of dominoGuru.com, Chris Toohey specializes in platform application development, solutions integration, and evangelism of platform capabilities and best practices.