blog.frederique.harmsze.nl my world of work and user experiences

August 31, 2010

[SPD2010] Conditional formatting – highlighting what’s hot

Filed under: SharePoint — Tags: , , — frederique @ 20:59

As I’ve said before: SharePoint lists are powerful, and we use them to great effect, for example, to keep track of our tasks in project sites.
On the homepage, we typically display the tasks that are most relevant for the user: the tasks assigned to me, the ones whose deadline is nearest displayed at the top. High priority tasks are either in a separately filtered webpart, if there is enough room, or mixed in with the rest and hopefully the displayed priority label draws enough attention.

However, any users, especially ones familiar with Excel, have asked me to highlight the overdue high priority tasks. Or to highlight the status of projects that are in trouble in a long programme management list. Good point. And fortunately, in 2010 I have that in my toolbox: SharePoint Designer 2010 that is.

Conditional formatting with SharePoint Designer 2010
SharePoint Designer 2010 allows me to highlight list items that are important according to my criteria, as a no-code solution, without any programming. Just follow the wizards.


  1. Open the page where you want to highlight these important list items. In my example, I open the task dashboard page.

  2. I put the cursor in the task list, and the ribbon displays the option Conditional formatting.

  3. I want to highlight the task that is important, so I select Format Row.
    Conditional formatting: an option in the ribbon for the selected list

    Conditional formatting: an option in the ribbon for the selected list


  4. In the Conditional Criteria pop-up, I set the criteria for the tasks I consider important enough to highlight: overdue high prio tasks. So Priority is High and the Due Date is less than the current date.

  5. Click the Set Style button, to determine what these overdue high priority tasks should look like.
    Condition criteria pop-up

    Condition criteria pop-up


  6. In the Modify Style pop-up, I set the background color to red and the fond type to bold, so that these tasks will really stand out. At the bottom of the pop-up, I can see a preview of the result.
    Modify style pop-up

    Modify style pop-up


  7. I already had some tasks entered in my project site. So as soon as I click OK, SharePoint Designer shows WYSIWYG what those tasks look like; you don’t have to go to the browser. But you can also see it in the browser.Br>
    Conditionally formatted list seen in the browser

    Conditionally formatted list seen in the browser



In this manner, you can combine criteria. In my example, I made sure that overdue high priority tasks are bright red, and overdue tasks of lower priority are a lighter color, but still more visible that the standard white tasks that haven’t met their deadline yet.
It took me a few trials and errors to find out would be most clear, but fortunately, you can easily change the conditional formatting.

Changing the conditional formatting

Changing the conditional formatting, based on the WYSIWYG presentation in SharePoint Designer

In the example discussed above, we highlighted entire rows, drawing attention to an important task as a whole. But you can also apply this conditional formatting to specific fields, which correspond to cells in the displayed list.

For example, in a project lists we consider the status of different aspects, such as the schedule and the resources of a project. These add up to an overall status, but we also want to see immediately what the status of these aspects are. For that, we put conditional formatting at the level of the cell: instead of indicating that we want to format a row, we select the TD cell element and then choose the option Format selection. And then we can set the style to visualise literally of that aspect of the project is in the red.

Conditional formatting on specific fields

Conditional formatting on specific fields: is this specific aspect of the project in the red or is it green?


A nice way to help the users handle their information overload, by ensuring they see what’s most important for them.

July 23, 2010

[SharePoint Designer 2010] Alternative options for list forms

Filed under: SharePoint — Tags: , , — frederique @ 23:33

SharePoint lists are powerful. For instance, team members can enter their tasks in a task list on their site and update them as they go, so that the entire team can monitor how they are doing. In another example, we created a projects list, where projects managers entered the main information about their project and updated the status of their projects regularly. That allowed higher level management to keep track of the program as a whole.

In these lists, we can include many fields, to capture all relevant information. Great.

However, if you are not careful, you end up confronting the poor user with a huge edit form, even if he only needs to update a status field at that time. In the old SharePoint, we could only change the order of the fields and add descriptions to give the form some structure and highlight the fields that are most important most of the time.

In 2010 (not just the year, I mean the SharePoint), we can create alternatives for adding and editing these list items, in addition to the default forms. We can even promote our new edit form to the default option. Also, we can put a version of the form to create a new item directly on the homepage of our site.

How to create alternate edit options
For instance, we need a short version of the form for editing tasks, that the team members can use to do a quick update, without being hampered by fields that are irrelevant at that point. How to do that?

Open the site in SharePoint Designer 2010 and click to the tasks list. On the right hand side of the summary page, you see the forms that are available in the list, such as the default edit form EditForm.aspx.

Summary of the Tasks list in SharePoint Designer 2010, with  the Forms section

Summary of the Tasks list in SharePoint Designer 2010, with the Forms section

Click the New button in the forms section and enter the settings of the new edit form we want:

  • An edit form,
  • Set as the default, so that the edit icon in the list opens this new Update Task form.
  • Select ‘create link in the list item menu and ribbon’ so that this option also appears in the list item menu, in addition to the standard Edit Item. And type in the label that should be displayed in that menu.
Settings of the new list form in SharePoint Designer 2010

Settings of the new list form in SharePoint Designer 2010

When you click OK, UpdateTask.aspx is added under the heading Forms. To determine what the user should see in that Update Task form, click that form name.

To remove unwanted fields, click Add/Remove columns in the ribbon. Or simply remove that row in the table. In addition, you can format the form to highlight the most important field, such as the status label in the screenshot below.

Customizing the new list form in SharePoint Designer

Customizing the new list form in SharePoint Designer

Once we have saved this customized form, it is available in the site.

The new edit option in the list item menu in the site

The new edit option in the list item menu in the site

And clicking on the edit icon opens the short form we just created.

The customized short form Update Task in the site

The customized short form Update Task in the site

How to put the New item form directly on the page
For the edit options discussed above, the user has to click an edit icon or open the list item menu to start editing. For creating new items, we sometimes want the user to start typing directly on the page, without clicking any New Item buttons.
SharePoint Designer 2010 allows us to do that: insert the actual form on the homepage of your site or on a specially created dashboard page. How to do that?

Open the page where you want to add that new item form in SharePoint Designer (Edit file).
Put your cursor where the form should appear, click Insert > New Item Form in the ribbon, and Select your list.

InSert the new item list form directly on a page in SharePoint Designer 2010

InSert the new item list form directly on a page in SharePoint Designer 2010

Then you can customize the form that has landed on the page. The default version of the ne w task form is very sober, so we add the field Assigned To. We remove the fields Modified and Modified by in the same pop-up window.

Adding and removing columns to customize the form on the page

Adding and removing columns to customize the form on the page

Once you save the page, you see this quick form for creating new tasks on the page.

Quick form for new tasks directly on the page in the site

Quick form for new tasks directly on the page in the site

So with SharePoint 2010, we can give users options to add and edit their tasks and other items more quickly and easily.

June 23, 2010

DIWUG slides 22 juni : SharePoint 2010 [dutch]

Filed under: SharePoint — Tags: , , — frederique @ 07:41

This is for the Dutch Information Worker User Group, hence the Dutch talk and slides http://www.diwug.nl

Dit zijn de slides die ik gisteravond heb laten zien in mijn DIWUG presentatie (ppt, 4MB):

No-code information worker solutions met SharePoint Designer 2010
Kenniswerkers willen effectief en efficiënt samenwerken. Met SharePoint 2010 kunnen hiervoor nog betere oplossingen gerealiseerd worden. En met SharePoint Designer 2010 kunnen we die oplossingen gebruikersvriendelijker inrichten en uitbreiden, zonder te programmeren.
In deze sessie kijken we vanuit een functioneel perspectief naar een paar van dit soort oplossingen en hoe je ze kunt configureren met SharePoint Designer 2010.
Spreker: Frédérique Harmsze – Macaw

Powered by WordPress