XPages Data Views – Part 4: Icon Columns

The Data View control layout includes a placeholder for an icon column. In this post, I’ll show how to use this feature and dynamically detemine the icon to display.

Data View Series

Example

This screen shot shows an example that was demonstrated in the first NotesIn9 video on the Data View control that I recorded

DataView_4_A

Icon Column

The icon column in the data view does display icon columns from an underlying Notes client view. Instead, you provide a list of available icons and specify the value from an underlying column that would cause the icon to be displayed.

Icon columns are defined under All Properties > format > iconColumn.

1) Define the columnName from the underlying view that will provide data.

2) Click the plus (+) icon in the icons property to add an icon and define the url path to the icon. If you click into the url field, you will see a folder icon that will provide a list of images in the current database to choose from.

3) Define the selectedValue property. When the data in the underlying column matches the selectedValue property, the icon will be displayed.

DataView_4_B

In this example, the column from the underlying view is named $2. The first icon is set to be displayed if the column value is 1. The second icon is defined to be displayed when the underlying view column is 2, and so on.

Another option that you have is to compute the URL for the icon to display.

A third option that you have is to set the selected property of the icon and compute a value that returns true or false, based on whether you want to display the icon.

Up Next

In the next post, I’ll show how to use the Pager Add Rows control to provide a more modern method of view navigation than a pager.

Advertisements

6 responses to “XPages Data Views – Part 4: Icon Columns”

  1. Artem Areshko (@AreshkoAA) says :

    Hi!
    It’s not obligatory to detemine all icon values that I have in Notes View, am I right?
    The Icons are not displaying at all niether in client nor in browser…
    I’ve done all the steps you mentioned, checked icon column name, selectedValue (testing only one value), but no effect.
    Does the size of image matters? I’ve tried 16×16, 22×22, 32×32

    Any suggestions?

    King regards, Artem

    • Brad Balassaitis says :

      You do not need to do anything in the Notes client view for this to work — it is completely unrelated. It is basically setting up logic to display an image resource based on the value of data in a column from the Notes view. The image size should not make a difference.

      Just to get the icon to display, try removing the selectedValue setting and just set the selected property to true to force it to always be displayed. Then you can verify that it will work properly.

      Also, verify the file name/path to the image to display. The examples in the blog post are image resources within the same database. (If you use the folder icon to select them, it will set up the path properly.)

      • Artem Areshko (@AreshkoAA) says :

        Got it!
        The thing, that confused me your example was values in columns – there were numbers. In reality, I think, it’s text, that is why selectedValue you input matched the value in column.

        In my case, I have column, that displays icons is Notes View. And the values in column are numbers. So to make it work I needed to convert the value, passed to selectedValue to number.

        Thank you!

      • Brad Balassaitis says :

        Glad to hear you worked it out!

  2. David says :

    This is an excellent post! I’m wondering though what can be done to display multiple icon columns? Some views might have several icon columns, how can this be represented on an XPage?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: