Learning XPages Part 19 : Another Repeat Another Table
Tags : Lotus Domino XPages Repeat Table
Bookmark :
So now that we have our second XPage created lets add some content to it. We'll start by opening the new custom control that we created called content_Location and clear out the placeholder text. Once that's done we need to define the data source for the control. Select the 'Custom Control' node in the outline view on the left of your screen and go to the 'Data' properties tab. Create a new data source based on the vw_People view that is in the sample database
Now, just like the home page we will drag in a repeat control and into the repeat control we will create a table of two rows and six columns by dragging in a table control. Give the first row of your table some headers and then select the repeat control to look at it's properties.
Set the Collection Name and Index Name just like before and then, just like the repeated table on the homepage we need to drag in some computed field controls and set their values by using JavaScript similar to rowData.getColumnValue("colname"); where colname is the name of the column in the view that we are using as our data source. Next you move the repeat control inside the table and change the table header row to <th> tags. I have also given my table a styleClass of 'phonebook' so that it uses the same CSS as I created for the homepage's table.
You can now save your custom control and preview the 'Location' XPage and you will see a nice table listing all the people in the database. Feel free to apply the alternating row styles to the table just like we did for the homepage to give your application a consistent look and feel.
In the screenshot above you'll notic that the alternating row styles don't seem to have worked however if you examine the original view that the database is based on you'll see that it has a categorized column at the start of the view and the two red lines I have drawn above are rows in the table where those empty categories are showing. In the next part I'll show you how to pass a variable on the URl to restrict the repeat to a single category.
Bookmark :
So now that we have our second XPage created lets add some content to it. We'll start by opening the new custom control that we created called content_Location and clear out the placeholder text. Once that's done we need to define the data source for the control. Select the 'Custom Control' node in the outline view on the left of your screen and go to the 'Data' properties tab. Create a new data source based on the vw_People view that is in the sample database
Now, just like the home page we will drag in a repeat control and into the repeat control we will create a table of two rows and six columns by dragging in a table control. Give the first row of your table some headers and then select the repeat control to look at it's properties.
Set the Collection Name and Index Name just like before and then, just like the repeated table on the homepage we need to drag in some computed field controls and set their values by using JavaScript similar to rowData.getColumnValue("colname"); where colname is the name of the column in the view that we are using as our data source. Next you move the repeat control inside the table and change the table header row to <th> tags. I have also given my table a styleClass of 'phonebook' so that it uses the same CSS as I created for the homepage's table.
You can now save your custom control and preview the 'Location' XPage and you will see a nice table listing all the people in the database. Feel free to apply the alternating row styles to the table just like we did for the homepage to give your application a consistent look and feel.
In the screenshot above you'll notic that the alternating row styles don't seem to have worked however if you examine the original view that the database is based on you'll see that it has a categorized column at the start of the view and the two red lines I have drawn above are rows in the table where those empty categories are showing. In the next part I'll show you how to pass a variable on the URl to restrict the repeat to a single category.
Comments
there's a small typo in the article that made me crazy
I got the server error message:
Error 500
HTTP Web Server: Command Not Handled Exception
When you write:
'... set their values by using JavaScript similar to rowData.GetColumnValue("colname"); ...'
Actually it is:
'... rowData.getColumnValue("colname"); ... '
No difference?
I almost got crazy
It helped me a lot this forum entry about showing friendlier error messages:
{ Link }
Thanks again for your series.
Posted by Cristian D'Aloisio At 05:59:04 PM On 03/07/2009 | - Website - |