Advanced Data Form Web Parts
In the first article of this series we introduced the components of a Data Form Web Part. One of the core components of a Data Form Web Part is the XSL which defines how the DFWP will render. You can customize the XSL to change how the DFWP is displayed but before we jump into customizing the XSL code let’s take a look at what SharePoint Designer can do for us.
Conditional Formatting
Data Form Web Parts support conditional formatting which allows you to apply formatting and visibility rules to html elements. To work with conditional formatting you’ll need to open the Conditional Formatting task pane on a page with a Data Form Web Part. To open the task pane, open the Common Data View Tasks menu by clicking on the caret in the top-right corner of our DFWP and then select Conditional Formatting:
Figure 1 – Opening the Conditional Formatting task pane
You should then see the Conditional Formatting task pane and usually one existing condition:
Figure 2 – The Conditional Formatting task pane
Note that the create button is disabled because we have not selected an HTML element to apply any conditional formatting to. Let’s create a new Conditional Formatting rule that will change a table row’s background color based on the color selected in the list. First, we need to select a row (which isn’t always as easy as it sounds). If you are lucky, you can position the mouse just right to give you the option to select a row. I find it is easier to simply select a cell and then choose select row from the menu:
Figure 3 – Selecting a Table Row
Once you have selected a row you should also see a selected <tr> in the Quick Tag Selector:
Figure 4 – The Quick Tag Selector
At this point you are ready to add a conditional formatting rule. Choose create from the Conditional Formatting task pane and choose Apply formatting...
Figure 5 – Opening the Conditional Formatting task pane
Next we need to define when the formatting will occur by defining the condition. In this case we’ll apply formatting when the Color field is set to Red:
Figure 6 – Adding Condition Criteria
Now we are presented with the Modify Style dialog. From here we can define what to do when our condition is met. In this case, we’ll just set the background color to red:
Figure 7 – Applying a style to your Conditional Formatting
Once we press OK, our conditional formatting is revealed using SharePoint Designer’s live preview:
Figure 8 – Live preview of Conditional Formatting in action
Behind the scenes
So what is really going on here? It isn’t Magic - it is XSL. Select your row again (if it isn’t already selected) and switch to the code view. The corresponding html for the row you selected should be selected in the code view as well:
Figure 9 – XSL <tr> definition
The part we’re really interested in is highlighted below:
Figure 10 – Conditional Formatting applying style to a <tr>
For those of you that don’t read XSL, the attribute tag is used to add an attribute to the parent tag. In this case it is adding a style attribute to our TR tag. The value of the style attribute is determined by the XSL "if" statement which determines if the @Color element is equal to the text value Red.
Digging into XSL
Now that we can see what’s going on, let’s change the XSL to make it a little more useful. We have several colors defined in our list so we probably don’t want to define a separate condition for each color. Another option is to use the XSL "choose" tag:
Figure 11 – Updating the XSL by hand
The XSL "choose" tag allows us to configure multiple conditions and results. The downside is that we lose the ability to see direct XSL customizations reflected in the Conditional Formatting task pane. It does, however, allow much more complex rendering:
Figure 12 – Conditional Formatting in action
Not just pretty tables, my friend
A lot of people that are new to the Data Form Web Part use conditional formatting and custom XSL to create dashboards with highlighted lines (etc), however, that’s not all the Data Form Web Part is good for. Some other examples I have seen include:
· Generating customized Mobile views of SharePoint lists
· Displaying Flash (.swf) files stored in a document library
· Generating JavaScript that interacts with page objects such as Google/Live Maps, Windows Media Player, etc
Conclusion
The ability to customize the XSL of a Data Form Web Part is what makes it such a powerful tool for displaying data in SharePoint. In my next article we will focus on the FORM in Data Form Web Part as we look at how to edit and save data using the Data Form Web Part.