Top
Search

Categories
Tags
Archives
Recent Entries
Latest Comments
Latest FAQ's
RSS
Linkage

Entries in Dynamic Controls (3)

Wednesday
23Sep2009

Coloring Specific View Rows Using a Dynamic Table and CSS in XPages

DateWednesday, September 23, 2009 at 1:37PM

I had a student ask recently about the ability to set the background color of a table row based upon a value in the data.  This is something that was pretty commonly done in traditional Domino Web Development.  In investigating how to do this I couldn't find a way to implement this using the standard View control, so I developed the following technique.

I use a dynamic html table (I showed how to implement this in my previous post here) but this technique can be used with a Data Table as well.

Create a CSS Style sheet that will map the colors to be used to the data values from the Domino View data. In the View I'm using as a data source there is a column that contains a Status value with one of the following values in it

  • New
  • Existing
  • Terminated
  • Pending

I have the following CSS in a stylesheet resource called rowclasses.css that I will be using in this demo.

.New {
background-color: red;
}
.Existing {
background-color: blue;
}
.Terminated {
background-color: fuchsia;
}

The class definitions in the CSS stylesheet are the same as the values from the status column.

Add the style sheet as a resource for the XPage.

 

 Before the Stylesheet is applied the XPage rendered in the browser looks like the following

 

We want the individual table rows background color to be set using the colors from the CSS style sheet based upon the value from the Status column in the View data.

To review, the dynamic table uses a repeat control that has a variable called "customers" for each row of data that will be displayed.  The value in the status column can be read from that variable using the Expression Language syntax customers.Status.

To set the value of the table rows background color, select the table row.  On the Style tab of the Properties tab click the computed diamond icon next to the Class field and choose "Compute value...".

 

In the Script Editor dialog box that opens up change the language to Expression Language and type in the expression customers.Status.  Click the OK button to save the expression to the class field.

Save the XPage and preview it in the browser.  Now each rows background color will be set to the value in the CSS stylesheet based upon the value from the status column.

The status column does not have to be displayed, but it does have to be available in the data.

The style does not have to be applied to the entire row, it could be applied to one or many table cells as well.

The application with complete source code can be downloaded from my website here.

 

 

 

AuthorPaul Calhoun | Comment4 Comments |
tagged , , in , ,
Wednesday
23Sep2009

Creating a Dynamic HTML Table on an XPage

DateWednesday, September 23, 2009 at 10:03AM

At first glance this seems like an exercise in can it be done versus should it be done.  So lets review our options for "dynamic" output of data on an XPage.  There are two controls you can use

  • View Control
  • Data Table Control

 Both of these controls use a repeat control to display the contents of a data source.  Using the View control for view data is a no brainer, but what about other data?  In one of my previous articles I demonstrated how to use XML as a data source and I used a Data Table control for the output.  One of my issues with using the data table control is that in version 8.5.0 there is no easy way to add column headers to the Data Table so your data is just listed there without the benefit of labels and sometimes formatting the elements of the data table can be challenging, for example you can not select a table row for formatting only the columns.

So wanting to have some more control I decided to see if I could combine an HTML Table with the Repeat control so that I could have a dynamic HTML table that could be used for view content or XML content or down the road "other" data sources.

The tricky part was that I only wanted to repeat the table row and there was no way to do that in the UI.  So I used the following steps to combined the two.

Create a new or modify an existing XPage.

Add a Table control to the XPage with at least two rows and however many columns you need to display your data.  The first table row will be used for the column headers and the second table row will be used to hold the repeated elements.

Next Add a Repeat control that uses the included Domino View as a Data source and sets a value for the collection name that we can use with the repeat control.

 

 Next add a computed field to the repeat control to repeat the view data for the first column.  For the value of the computed field use the variable name set in the repeat control which will allow you to choose one of the columns from the view source.  At this point the XPage Design mode will look like the following.

 

Now we need to combine the two elements so that the table row is repeated for every row in the view.

Switch from the Design mode to the Source mode.  The code should look like the following.

Here is the tricky part.  You need to edit the source code to surround the table row element with the repeat control and pace the computed field inside of the table data element.

The second table row is what we want to repeat so I manually edit the source code so it looks like the following.

The repeat control now surrounds the table row element to be repeated and the computed field resides in the table data element.

This is what it will look like in Design mode.

Now you can add the table header values and the additional computed fields to finish out the design so it looks like the following.

When it's rendered in the browser it will look like the following

 

A pager control can be added to page through multiple records.

The Pros of this technique are

You now have more control over the formatting and layout of the table

Works with view data or XML data

The only con is that once you modify the source code then the Repeat Control no longer is editable in the Properties tab of the designer UI and changes will need to be made via the source view.

I'm going to be using this technique as the basis of my next two articles so I wanted to lay it all out here for you.

As always the complete source code and example application can be downloaded from my website here

Just click on the downloads link and download the XPages Playground application

 

AuthorPaul Calhoun | Comment3 Comments |
tagged , , in ,
Tuesday
21Jul2009

XPages - Example on how to generate dynamic controls for your fields at runtime

DateTuesday, July 21, 2009 at 6:47AM

In my XPages Survey tool example that I demoed at Lotusphere, I showed how to dynamically generate fields at runtime for a document collection. The tool allows an administrator to create survey questions and select the control type and selection values. Then the tool generates the fields for the questions when the user opens a survey. The XPage utilizes a repeat control and panel control to accomplish this.

For today's example I pulled out the specific code that generates the fields, i.e. checkbox, list, radio button, edit box, etc., and simplified it so that it is clearer how this technique works....and just how easy it is to implement. In the full survey tool example, this feature and technique easily gets lost.

You can download the sample database here.

The real key to this technique is the separation between presentation and data in XPages as compared with traditional Domino development. With XPages, you can have multiple controls bound to the same Lotus Notes fields. As long as only one of these controls is rendered at runtime, there is no issue with data integrity.

Below is a screen shot of the example generating a radio button group control :

Image:John's Blog - XPages - Example on how to generate dynamic controls for your fields at runtime

Here's how it is built:

On the DynamicFieldDemo XPage, the fields in the Field Attributes section control how the control is generated. There is one control in the Field Preview section for each possible control type. The Required field sets the validation required property on each control to true or false. The Generate Field button reloads the page. This is only required for this example because we need to regenerate the controls, which is not something that would be changing for your users.

The XPage layout looks like this:

Image:John's Blog - XPages - Example on how to generate dynamic controls for your fields at runtime
The visibility formula for the "Combo Box" control returns true if the user selected "DropDown" for the Control Type. In this example I pick the value up from a session variable:

Image:John's Blog - XPages - Example on how to generate dynamic controls for your fields at runtime

The data Binding is set the same for all the controls. In this example I am not using a Notes form as a datasource in order to keep it simple and instead just using session variables:

Image:John's Blog - XPages - Example on how to generate dynamic controls for your fields at runtime

The Validation is set, in this case for the combo box, from the All Properties->basics->required property:

Image:John's Blog - XPages - Example on how to generate dynamic controls for your fields at runtime

The possible selection values are set by exploding out the choices using a "," as the delimiter:

Image:John's Blog - XPages - Example on how to generate dynamic controls for your fields at runtime

Lastly, the Display Error control will display an error if the field is required and you pushed the Test Validation button. The really cool thing here is that I have only one Display Error control which I compute what control it should report errors for. This is accomplished by computing the "Show error messages for" property. Since the control names I used match the selection names it is easy to compute which control is being displayed:

Image:John's Blog - XPages - Example on how to generate dynamic controls for your fields at runtime

As you can see, this opens up many possibilities. I'm sure it won't be long before you discover other uses for this technique.

-John

AuthorJohn Mackey | Comment3 Comments |
tagged in