Archive for June 10, 2013

Sharepoint: Apply background color to custom list column based on other column value

Today we are going to learn how to apply the background color to a custom list column based on other column value, firstly, I tried this scenario using calculated formula column type but some javascript code is needed to render the background color based on calculated formula value,  so I did some research and come up with the best easy way…..

STEPS:

I have created a simple custom list and name it as ‘My List

Modified the ‘Title‘ column name as ‘Student Name

Created one more column ‘Subject‘ which is of type single line text

Also, created one column ‘Marks‘ which is of type Number min is 1 and max is 100

Open the AllItems.aspx page using Sharepoint Designer 2007

Select the list, right click and Convert into XSLT mode

Write the XSL condition in between the ‘Subject TD tag as show in the below image

Here goes the XSL code……



background-color:Green;


background-color:Yellow;


background-color:Red;

XSL condition in Sharepoint Designer 2007

XSL condition in Sharepoint Designer 2007

Output:

Background color to Sharepoint Custom List column based on Marks

Background color to Sharepoint Custom List column based on Marks

Conditional Formatting of List Views for SharePoint 2010 – Changing the Font Colour

There are often times when it’s useful to draw attention to particular items in a SharePoint list or library. For example, you might want to highlight overdue tasks, colour-code items according to priority, or draw attention to undesirable information. In other words, you want to apply conditional formatting based on field values. Now, as you probably know, SharePoint 2010 uses XSLT-based list views by default. By editing the XSLT for a list view you can apply all manner of rules and conditional formatting. Even better, SharePoint Designer 2010 includes some built-in tools that will figure out the XSLT for you. In the List View Tools tab group, on the Options tab, there’s a handy dropdown menu:

In most cases, you’re probably going to want to apply conditional formatting by row. First you set your conditions:
 

Then you choose the styles you want to apply when the conditions are met.

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 


When you’ve set your style, SharePoint Designer modifies the XSLT so that your formatting is rendered as an inline style on the row (
) element when your conditions are met. I’ve stripped out some of the less relevant attributes to improve readability.


 
   

 
So far so good. Everything looks correct in SharePoint Designer. However, if you’ve tried this, you might have found that when you load the list view in the browser you get mixed results – in particular:
  • Changing background colours and text decorations (such as bolding or italics) works fine.
  • Changing fonts or font colours works in SharePoint Designer but doesn’t work in the browser.

As a result, you’ll end up with something like this when you view the list through the browser:

A quick web search revealed that I’m not the first person to encounter this, and I’ve yet to see a definitive answer, so here goes.

Short version – the problem is down to the way the default styles are structured in corev4.css. Row styles do not cascade down to individual cells (regardless of whether you append an !important flag). If you want to change the background colour, apply conditional formatting at the row level. If you want to change the font colour, and you don’t fancy messing around with CSS, apply conditional formatting at the column level.

Long version – read on for a more detailed explanation…

Using IE Developer Tools, you can take a look at how styles are applied to individual HTML elements on the page. The XSLT rule created by SharePoint Designer applies an inline style to a row (tr) element. If we use IE Developer Tools to look at how the row is styled, we can see that everything looks correct – the inline style takes precedence:

 

However, if we look at how the text within one of the individual cells is styled, you can see that our inline style at the tr level is getting overridden by a more specific style, defined by thems-vb2 class, at the td level.

Unfortunately there’s not much we can do about this. If you want to modify any of the styles defined by the ms-vb2 class, such as font, font size and font colour, you need to create a column-level rule rather than a row-level rule. The two types of rules work in exactly the same way in SharePoint Designer—when you create a column-level rule, you can still set conditions based on any field value, not just the column to which you are applying the conditional formatting. If you want to conditionally change the font colour of an entire row, you simply create a column-level rule on every column. This time, SharePoint Designer modifies the XSLT so that your formatting is rendered as an inline style on the column ( ) element when your conditions are met:

 
     

  …

This time the browser will render the view as expected. The following image shows the results of a column-level rule on the Target Pub Date column, in addition to the row-level rule described earlier.

If we take a look at the CSS, we can see that our inline column style is overriding the styles provided by ms-vb2.

In summary, there’s no real difference between row-level conditional formatting and column-level conditional formatting, other than the scope at which your inline styles are applied. In practice you may often need to use a combination of the two in order to realise a particular style or effect.

Change the Color of a Column in a List in SharePoint

In this article, we will know how to change the color of a column based upon the values in the column. It is something like “Color Indicator” in SharePoint.
 
Scenario:
We have a custom list used for Project Tracking. In the list, we have column named STATUSfor tracking the project.
Whenever an item in the list is updated with the status in the column, then the background color of the status column should automatically change depending upon the status. Hence it gives a proper UI for tracking the status.
 
Solution:
1. Create a custom list named “Project Tracking System” with the columns such as “Title”, “Description” and Status with the data type as shown below:
 

Columns with the data types to be created:

 
2. Now, we will insert 4-5 items in the list created.
In the above list, we can see that the status column is updated, but it would be good when we have background color of the each status separately. It is gives easy tracking to the users.
3. We can achieve this through JAVA SCRIPT.
4. Add a Content Editor Web part below the list as shown below:

5. Now in the content editor web part, add the below java script code (Open the tool pane -> Source Editor -> Place the Java Script -> Click Ok) and save the page.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
6. Now, you can see the status column background is changed depending upon the status inserted for each item as shown below:
It is gives good interface to the users and also we can categorize the status easily.

SharePoint: Color Coding SharePoint Lists

Color Coding SharePoint Lists – without custom web parts or server code deployments 

SharePoint does not have an out of the box way to set colors based on the data in a list or library. There are both third party web parts and open source projects, such as codeplex.com, that can color code lists, but these usually require installing code on the SharePoint web servers. In this article we will look at color coding lists just using the built-in Content Editor web part and some JavaScript. 

Each list will need a slightly different fragment of JavaScript to set the colors. 

Color coded calendars? 

For other lists and libraries you will find examples below to: 

  • Set color backgrounds for rows in task lists to show the status of the task 
    Color coded SharePoint task list
  • Set colors in libraries to show approval status 
    Color coded SharePoint task list (approval status)
  • Color coded SharePoint list(task status)
  • Set the color of a single column based on its value

 

To add the Content Editor web part and JavaScript: 

  • Display the view to color code (each view will need its own web part and JavaScript) 
  • Add a Content Editor web part 
    • Site Actions, Site Settings, Edit Page 
    • Add a Content Editor web part and move it below the calendar web part 
    • Move this web part so it is below the list you are color coding 
    • Click in the web part, click Edit, Modify Shared Web Part, and in the Appearance section change “Chrome” to “None”. 
  • Add the JavaScript 
    • Click Source Editor 
    • Type or paste the JavaScript (examples below) 

Example 1: Set the background color of a row based on data in the row 

To color code a row all we need is: 

  • A column to check (such as the Task Lists’ status column) 
  • JavaScript to find this item in a table TD tag 
  • JavaScript to assign a style to the TD’s parent row (TR) 
  • And of course, the web part described above to hold the JavaScript 

Here is the example for a task list: 

 

 

 

Code Notes:

  • x[i] is one of the table cells (TD) 
  • x[i].innerHTML is the contents of a cell (TD) (which may include additional HTML) 
  • x[i].parentNode is the row containing the cell (a TR) 
  • x[i].parentNode.style.stylename is used to set any valid style on the TR 

 

Example 2: Set the color of a field based on data in the field 

To color code a cell all we need is: 

  • A column to check (such as the Task Lists’ status column or a library’s approval status column) 
  • JavaScript to find this item in a table TD tag 
  • JavaScript to assign a style to the TD 

Here is the revised JavaScript fragment for a color coding a single cell:

if (x[i].className==”ms-vb2″) //find the TDs styled for lists 
{ 
  if (x[i].innerHTML==”Completed”) //find the data to use to determine the color 
  { 
    x[i].style.backgroundColor=’darkblue’; // set the background color 
    x[i].style.color=’white’; //set the font color 
  } 
} 

SharePoint Color Coded list based on a Field in the Row

SharePoint doesn’t provide an out of the box way of color coding lists. But, thank goodness, we can use a little scripting to edit the styling of our lists!
Mike Smith provided a great script that allows you to color the background of the row if the cell’s value matches the value it’s looking for. But, what if another field in the same row has one of the other values and throws off your color coding?


Case in point: color coding is thrown off because the Description field
can have the same value that is being used to color code on

  
Well, this script below will search only the cell index of the row that you would like to base your color coding on. In our case, we would like to search only on the Status field/column. To get started:
1. Add a content editor web part directly underneath the list
2. Open the source editor and place the script below into it
3. Modify the columnIndexToSearch and the columnSpan variables to match the cell/field index to search for and the number of cells in each row respectively.
Note: In this case, the attachment field counts as a cell. Since we are searching only on the Status, our columnIndexToSearch is 2 (0 = Attachment field and 1 = Title field). The total number of columns we are displaying on our list is 5. If you add or remove columns in the view, the color coding will get thrown off. So, make sure to update these variables if you do make updates to the list view.


Final Result: Color coded based on the Status column only