SharePoint Himadrish

SharePoint designer has many features and one of the features is to design the SharePoint list and implement rule over there. You can implement bi-color on any SharePoint list by using SharePoint designer.

This article is to help you to understand how to design a list in a SharePoint page, implement rule on the list and accordingly change the layout and color of the different rows of the list based on the associated rule.

Let’s start with a example list having fields First Name, Last Name, Due Date, Pay Date and Pay Status. This list contains the information of the policy holders; who paid their policy amount and within the due date or after the due date or not paid etc. The objective is to quickly distinguish the list of users who are the Defaulters i.e. who pay after the Due Date. Similarly we need to classify who are in the list didn’t pay.

The basic and simple approach is to create different view for Defaulter and non-paid one. Using this view, we can easily find out the list of people, who are in the Defaulter category. However we can follow alternate approach as well. Instead We need every data will be in same list and we can distinguish those defaulter and non-paid people easily. Having said that, it clarifies, we can easily found the name of the person who didn’t pay their policy amount. So we need to tag those rows by using some color, let’s say background color, and display the entire list in the page.

Let’s see how to achieve the goal. Create the list in SharePoint and open the site in SharePoint Designer. Open the default.aspx page (or any page you have created) and drag the list into the page.

In the designer, you can find the he following XSLT after dragging the list. Check the filed name in XSLT i.e. First_x0020_Name. SharePoint replace the space in the filed name with _x0020_ in internal field name.

<tr><td class=”ms-vb”>
<xsl:value-of select=”@First_x0020_Name” /></td><td class=”ms-vb”>
<xsl:value-of select=”@Last_x0020_Name” /></td><td class=”ms-vb”>
<xsl:value-of select=”ddwrt:FormatDate(string(@Pay_x0020_Date), 1033, 5)” /></td><td class=”ms-vb”>
<xsl:value-of select=”ddwrt:FormatDate(string(@Due_x0020_Date), 1033, 5)” /></td><td class=”ms-vb”>
<xsl:value-of select=”@Pay_x0020_Status” /></td>
To implement rule on the SharePoint list, select one entire row and then go to the Condional Formating in the SharePoint Designer (left right corner). Click on Create >> Apply formatting

Condition Criteria Popup window appear. In this GUI you can define your rule. Select the field name ‘Pay Status‘ and Comparison as Equals. Go to the Value field, and select the value ‘Defaulter‘ from the drop down list and click on OK.

Next, you need to apply the STYLE for those rows where the specified rule will satisfy. In the Modified Style window, select the background under Category and select a background color. In this example background color is RED.

Click on OK. It’s done. In the designer the rule has been implemented.

Have a look on the XSLT, it has been modified and the new rule is reflected there:

<tr>
<xsl:attribute name=”style”>
<xsl:if test=”normalize-space(@Pay_x0020_Status) = ‘Defaulter’”>background-color: #FF0000; color: #00FF00;</xsl:if>
</xsl:attribute>
<td class=”ms-vb”>
<xsl:value-of select=”@First_x0020_Name” /></td>
<td class=”ms-vb”>
<xsl:value-of select=”@Last_x0020_Name” /></td>
<td class=”ms-vb”>
<xsl:value-of select=”ddwrt:FormatDate(string(@Pay_x0020_Date), 1033, 5)” /></td>
<td class=”ms-vb”>
<xsl:value-of select=”ddwrt:FormatDate(string(@Due_x0020_Date), 1033, 5)” /></td>
<td class=”ms-vb”>
<xsl:value-of select=”@Pay_x0020_Status” /></td>
<xsl:if test=”$dvt_1_automode = ‘1′” ddwrt:cf_ignore=”1″>
<td class=”ms-vb” width=”1%” nowrap=”nowrap”>
<span ddwrt:amkeyfield=”ID” ddwrt:amkeyvalue=”ddwrt:EscapeDelims(string(@ID))” ddwrt:ammode=”view”></span>
</td>
</xsl:if>

Now, refresh the SharePoint page and you may face the following error:

This Page has been modified since you opened it. You must open the page again.

Refresh page.
Troubleshoot issues with Windows SharePoint Services.

This might be because you are in shared view mode. Close your browser and open a new browser and check your site and here it goes.

Next step is to implement another rule on top of this rule. Need to use other color for those users who didn’t pay at all. Also need to implement paging on this SharePoint List.

How to implement paging in the SharePoint List

Select the list and there is one arrow in the top right corner of the list (fig: SharePointPaging.JPG). Click on this, ‘Data View Properties’ window let you to implement pagination in SharePoint. Click on the Paging tab and select the middle one i.e. Display items in sets of the size: and put the number you want to display  the records per page. In this example it is 7.

Click ok. Paging nation is done. Next do some interior decoration. Allow user to sort data through Date column i.e. by filed name. Click on Conditional Formatting in the Common Data View Task window. Select General tab and enable sorting and filtering option.

Finally, we need to implement another rule i.e. point out those user who didn’t pay. Need to follow the same process i.e. create a rule process. In Condition Criteria Popup window, we need to implement the new rule. Select filed name Pay Date and select the IsNull as comparison operator and click on OK.

In the Modified Style window, select the background as pink and click on OK. In the designer, it is reflected and the XSLT has been changed.

Modified XSLT:

<xsl:if test=”normalize-space(@Pay_x0020_Status) = ‘Defaulter’”>background-color: #FF0000; color: #00FF00;</xsl:if>
<xsl:if test=”normalize-space(@Pay_x0020_Date) = ””>background-color: #FF00FF;</xsl:if>

Finally save the file in SharePoint designer and refresh the SharePoint site and it looks like as below:

Hope this will help you.