SharePoint Designer: Visual Touch Using Using Conditional Formatting

By | May 4, 2011

English:

Conditional formatting now becomes easier using SharePoint Designer 2010. We can create intelligent view which able to highlight some important pointer in the display. There are 3 types of conditional formatting:

1. Show content , show content based on the pre-specified conditions
2. Hide content , hide content based on the pre-specified conditions
3. Apply formatting , apply formatting based on the pre-specified conditions.

 

Visual Touch for Easy Reading

Imagine, that you have developed a workflow that uses task list to assign task to the users. The standard task list, may look like this:

NormalTask

Actually there is nothing wrong with the task list web-part. However, since there isn’t any pointer on important information in the task list – then the message may not be conveyed efficiently to the reader.

Using conditional formatting, we will be able highlight overdue tasks, so that the task will get more attention from the user. In the picture below, we add red hand icon, if the task is overdue.

ConditionalFormattingTask

 

So, how would we do that?

Following step-by-step will show how to create conditional formatting using SharePoint Designer 2010. I will demonstrate how to add red-hand icon to the overdue task.

 

1. Open original task list view in SharePoint Designer 2010.

TaskListView

 

2. Select Title column tag and then create conditional formatting by selecting Apply formatting….

TaskListView2

 

3. Define formatting condition as follows:

Due Date  <  [Current Date]     And

Status      <>  ‘Completed’

 

TaskListView3

and then click Set Style.

 

4. I have uploaded the icon in Site Assets gallery, so that I can use it as background-image.

TaskListView4

And finally I have configure my style to:

background-image: url(‘../../SiteAssets/Pointer_red_22x17.gif’); background-repeat: no-repeat; background-position: left bottom; text-indent: 20px

5. Save the changes, and you’ve done with the conditional formatting.

 

Finally, adding visual touch using conditional formatting is also adding more value to the user. It will make the information more knowledgeable than plain presentation.

One thought on “SharePoint Designer: Visual Touch Using Using Conditional Formatting

Leave a Reply