Custom icon based on item types

…this post was published on 2012 January 10.

Starting from a post Sharepoint Forum​, i decided to create a little example,  How To

For this, i began creating a new list, a custom list type, but could be also an announcements list. It’s a minimal list, To avoid config on “Advanced Setting” i renamed “Title” column in “Product”, and also i added one column, named Product_Type, which is a Choice column type

To be an example i used only 3 choices: Hardware, Software and Others

This is my list , how it looks like:

After this I added few items, on different categories, as you will see in the real page. I created this page, starting from a ‘blank’ page

 

Step 1

I added a xslt DataView, which contain only 2 columns: Product and Product_Type

Step 2
    step 1 +
Having selected first element on column 1 which is a product element, I selected from ribbon Table, Insert Left

So, you can see in the page that both columns are now positionated a little on right side. In left side a new column exist now.

 

Step 3

step 2 +

Before this step, let’s say that i uploaded on site 3 images, one for each type, png files at dimensions:64×64 pixels, named

xxx_l_custom1_hardware,png

xxx_l_custom1_software,png

xxx_l_custom1_others,png

Selecting one row from the new column, ( that I added on step 2 ), from the ribbon ( you can do it also by hand in code side of the page ) i added these 3 pics, and the code is:

<td>
      <img src=”path/xxx_l_custom1_hardware.png” width=”16″ />
      <img src=”path/xxx_l_custom1_software.png” width=”16″ />
      <img src=”path/xxx_l_custom1_others.png” width=”16″ />
</td>

I changed a little dimensions, and i minimized the pics with width=”16″

 

Step 4

step 3 +

Now it’s the moment to filtering these pics. First select one of the pictures, let’s say  xxx_l_custom1_hardware.png, and from ribbon select Options, Conditional Formatting , Show Content

In the new window, select your criteria. In my case Product Type equal “Hardware”, like this:

The code now looks like:

<td>
        <xsl:if test=”normalize-space($thisNode/@Product_Type) = ‘Hardware'” ddwrt:cf_explicit=”1″><img src=”path/xxx_l_custom1_hardware.png” width=”16″ /></xsl:if>
        <xsl:if test=”normalize-space($thisNode/@Product_Type) = ‘Software'” ddwrt:cf_explicit=”1″><img src=”path/xxx_l_custom1_software.png” width=”16″ /></xsl:if>
        <xsl:if test=”normalize-space($thisNode/@Product_Type) = ‘Others'” ddwrt:cf_explicit=”1″><img src=”path/xxx_l_custom1_others.png” width=”16″ /></xsl:if>
</td>
This entry was posted in Coding, Sharepoint. Bookmark the permalink.