Learning XPages Part 16 : A Better Homepage Look
Tags : Lotus Domino XPages Repeat CSS
Bookmark :
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.
Bookmark :
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.
Comments
Not sure if the CSS you are taking about is coming ahead.
Thanks
Posted by Joe At 03:53:44 PM On 03/09/2009 | - Website - |