Learning XPages Part 16 : A Better Homepage Look

In the last part we added a view control
to our content_HomePage custom control and set it up to display the contents
of a view from our application. For simple views this works great and we
probably could have used it in this application also but I like the level
of control that the ‘repeat control’ gives you so I’m going to replace
our view control with a repeat.

Start by deleting the view control from
our XPage. Make sure it’s fully gone by look and at the source, you should
just see your data source and the div’s or panel with the ‘lotusContent’
class. Drag in your repeat control and then drag a table control into the
repeat control. When you drag in a table control you will get a helper
dialog box asking how big you want the table.

I have select 2 rows and 3 columns and
left everything else at the default. Setup the repeat controls properties
just like we did for the side bar making sure to select the data source
we defined earlier and also making sure to put in the collection name and
index name

Design your table just like you would
any other table, Put some headers in and then drag over some computed field
controls to hold the values of the repeat. You table should look something
similar to this

I’ve setup the values for the computed
fields exactly the same way as I did for the computed field I’m using in
the sidebar. I have set the value to JavaScript and set the script to rowData.getColumnValue("ViewColName")
where ViewColName is the name of each column in the view that I want to
display.

If we now refresh the XPage we should
see something like this :

It should quickly become obvious as
to what’s wrong here. Well the entire table is inside the repeat so for
each location document in the database it’s building an entire table.  To
fix this problem we need to go into the XPage source and move the <xp:repeat>
tags to the inside of the table tags and below the first row of the table
because that is the header. I have also changes the <xp:tr> tags
in the header row to <th> tags as this is the proper setup for a
header row in a html table.

The one IMPORTANT thing that is left
to do is remove the repeat’s name. if you don;t do this then a DIV will
appear inside your table in the web browser and this is not valid HTML
and it will cause havoc with your CSS. The easiest way to remove the name
is in the source view, just delete the entire ‘id="repeat1"’
bit out of the repeat controls tag. Save and refresh and your table should
look perfect :

In the next part we will create some
custom CSS and apply it to our table.