Customizing the Data View Presentation
Once you have inserted a data view on your page, you can modify the selection and presentation of data by setting filters and group-by options, and configuring conditional formatting and columns as links. These options provide additional flexibility and almost endless opportunities for customizing and presenting data. You can customize your data views using the following methods:
Filtering: By filtering the data returned in your data view, you can present the data that users need.
Grouping and sorting: Grouping allows you to create distinct, expandable/collapsible containers for the data in your data view and to sort based on these grouping criteria.
Conditional formatting: You can format the data in your data views according to conditions so that data that needs particular attention because it’s met a threshold stands out, or you can downplay information or records that are not critical.
Creating hyperlinks: Linking back to source data or actions is important when you are presenting data so that users can research further or take action, especially if you are combining multiple data sources.
Connecting Web Parts: By connecting Web Parts, you can enable users to drill down on a particular item and see details or connected information. Connected Web Parts also allow you to use Web page space wisely because you can filter the range of information that needs to be displayed based on user interaction.
Modifying data view columns: If your data changes and columns are added or become relevant to the current task, you can add, delete, or modify the columns that appear.
Styling: The styling options available with SharePoint Designer and the Data View Web Part provide flexibility for the layout and presentation of your data.
Filtering your data
To configure a filter for your data, follow these steps:
1. | Open the page with the Data View Web Part using SharePoint Designer. |
2. | To open the data view common tasks menu, right-click the Data View Web Part and choose Show Common Control Tasks so that the menu shown in Figure 20.13 appears. Click the Filter link. Figure 20.13. The Data View Web Part customization menu
Or: To open the data view common tasks menu, left-click the > next to the top right corner of your Data View Web Part. Click the Filter link. Or: To edit using the top navigation data view menu in SharePoint designer, make sure the Data View Web Part that you want to modify is active/selected. Select Filter from the Data View Web Part menu in SharePoint designer. |
3. | Select the field that you want to filter from the Field Name field, the comparison type, and the value, as shown in Figure 20.14. Figure 20.14. Modifying the filter options for the Data View Web Part
You can add more than one filter criterion. If you have more than one, you must select whether the filters are AND so that they are cumulative and items have to meet all filters, or OR so that items have to meet only one of the filter criterion. You can mix AND and OR criteria so that the filter pulls all items that match the AND filters and all items that match the OR filter. The Data View Web Part provides comparison types and possible calculated values that are appropriate for the field. For example, if you choose a date field, SharePoint Designer suggests [Current Date] as a value option, or if your field is a text field, it includes begins-with and contains-as comparison types. |
4. | Click OK. |
5. | Choose Save from the File menu to save your Web Part page. |
Sorting and grouping your data
Grouping items allows you to present them in broad categories, and if you collapse your groups, to fit more items onto one page. For example, you can group your bug tracking items by region and by priority so that users can find the high-priority items in their region easily.
To configure sorting and grouping for your data, follow these steps:
1. | Open the page with the Data View Web Part using SharePoint Designer. |
2. | To open the data view common tasks menu, right-click the Data View Web Part and choose Show Common Control Tasks. Click the Sort and Group link. Or: To open the data view common tasks menu, left-click the > next to the top-right corner of your Data View Web Part. Click the Sort and Group link. Or: To edit using the top navigation data view menu in SharePoint designer, make sure the Data View Web Part that you want to modify is active/selected. Choose Sort and Group from the Data View Web Part menu in SharePoint designer. |
3. | Add the field or fields that you want to sort and /or group by from the column on the left as shown in Figure 20.15. You can add multiple fields and order them because the top field will be sorted first. Each field can be sorted in ascending or descending order. |
4. | Configure the Group Properties if you want to group by your sort fields. Selecting the Show group header check box enables grouping, and you can select whether you want to expand or collapse your groupings. If you select to Show Group Footer, the data view includes the count at the bottom of each grouping (for the first level of grouping). |
5. | If you want to show more than the 10 items that the data view configures by default because you are grouping the items, you must configure the paging options. To open the data view common tasks menu, right-click the Data View Web Part and choose Show Common Control Tasks. Click the Paging link. Or: To open the data view common tasks menu, left-click the > next to the top right corner of your Data View Web Part. Click the Paging link. Or: To edit using the top navigation data view menu in SharePoint designer, make sure the Data View Web Part that you want to modify is active/selected. Choose Paging from the Data View Web Part menu in SharePoint designer. |
6. | You can choose to show all items, to display items in sets of a certain size (this is the number of items shown at any time) or to limit the total number of items returned to a specific number. If you limit the total number of items, it will show only the number of items that you configure and there will not be a control for users to see the remaining items. |
7. | Choose Save from the File menu to save your Web Part page. |
Applying conditional formatting
Conditional formatting enables you to apply a particular format based on the value or combination of values for a field. There are so many scenarios in which this capability can be used, so we’ll just suggest a couple of examples to get the juices going.
In an issue tracking list, you can use conditional formatting to turn the rows in a view red if the priority of the issue is high and if the due date has passed. You can turn the rows yellow in the view if the priority of the issue is high and if the due date is in the next 48 hours.
Conditional formatting can also be used to show or hide columns. In this application, we can choose to hide the due date value if the issue is closed. If you are using the hide content capability, you will want the columns that you are hiding to be at the right side of your list because the cells will slide left if the column for that item is hidden.
1. | Open the page with the Data View Web Part using SharePoint Designer. |
2. | To open the data view common tasks menu, right-click the Data View Web Part and choose Show Common Control Tasks. Click the Conditional Formatting link. Or: To open the data view common tasks menu, left-click the > next to the top right corner of your Data View Web Part. Click the Conditional Formatting link. Or: To edit using the top navigation data view menu in SharePoint designer, make sure the Data View Web Part that you want to modify is active/selected. Choose Conditional Formatting from the Data View Web Part menu in SharePoint designer. |
3. | Click the column to which you want to apply the conditional formatting and click Create in the right-hand task pane. |
4. | Select whether you want to show content, hide content, or apply formatting. |
5. | Enter the condition criteria for the fields that will select the fields for which formatting should be applied, as shown in Figure 20.16. Figure 20.16. Entering the condition criteria for conditional formatting
|
6. | Click OK. |
7. | If you are applying formatting, select the formatting options that you want in the Modify Style dialog box. |
8. | Choose Save from the File menu to save your Web Part page. |
Connecting Data View Web Parts
Connecting your Data View Web Parts allows you to design Web Part pages where the data drives intelligent changes in other, related Web Parts. This allows you to filter values shown in the slave Web Parts based on the value selected in the master Web Part, so that users easily see the information they need for their choice and the page space is used wisely. For example, you can connect a customer list and writable view of a contact list so that users can view and update the contacts for a particular customer that they choose, as shown in Figure 20.17. You can connect a Data View Web Part to any other Data View Web Part(s) or any other connectable Web Part(s). However, the fields that you want to use to connect the data must be present on all connected parts.
Figure 20.17. Connected Web Parts that allow users to view and update the contacts for a particular customer
1. | Open the page with the Data View Web Parts that you want to connect using SharePoint Designer. |
2. | To open the data view common tasks menu, right-click the source Data View Web Part and choose Show Common Control Tasks. Click the Web Part Connections link. Or: To open the data view common tasks menu, left-click the > next to the top right corner of your source Data View Web Part. Click the Web Part Connections link. Or: To edit using the top navigation data view menu in SharePoint designer, make sure the source Data View Web Part that you want to modify is active/selected. Choose Web Part Connections from the Data View Web Part menu in SharePoint designer. |
3. | Select whether you want to Send Row of Data To, Get Filter Values From, or Get Parameters From. The Send Row of Data To option is typically used because it is logically more straightforward than clicking the target Web Part and selecting the Get Filter Values From option. |
4. | Click Next. |
5. | Choose the location where the connected Web Part resides by selecting Connect to a Web Part on this page if the Web Part is on the current page or Connect to a Web Part on another page in this web and entering the page URL if the Web Part is on another page. |
6. | Click Next. |
7. | Select the Web Part that you want as your target Web Part and select Get Filter Values From if you want to filter the list based on the value provided by the source Web Part. If you want to use the value in a parameter field, select “Get Parameters From” option. |
8. | Click Next. |
9. | Find the field in the target list (right-hand column) that matches the filter value you will send and pick the related column in the left column, as shown in Figure 20.18. Figure 20.18. Selecting the column in the source Web Part that matches the column in the target Web Part
|
10. | Click Next. |
11. | Select the column that you want to hyperlink so that, when clicked, it provides the filter value to the target Web Part. If you want to indicate which value is active, select Indicate current selection using and then select the column that you want to highlight to show which value is active, as shown in Figure 20.19, and click OK. Figure 20.19. Selecting the column that will indicate the current selected value
|
12. | Click Next. |
13. | Review the values and click Finish. |
14. | Choose Save from the File menu to save your Web Part page. |
Cross-Ref
For more information on connecting Web Parts, see Chapter 5.
Modifying columns
Because data views pull data from one or more sources, one of the most important aspects of customizing your data view is to link the data back to the source or to an action so that the user has the ability to find more detail. You should plan how to link columns so that they are most usable, especially with connected Web Parts or linked data sources. With connected Web Parts, the link in the source column controls the action in the target Web Parts, so you will probably want to configure the links to more detail in the target Web Part(s). In the case of linked columns that are merged, it is important to link your items to the source URL to direct the user to the correct source. With linked columns that are joined, you may want to configure more than one column to link to the data sources that are combined to create that view.
To make columns linkable, follow these steps:
1. | Open the page with the Data View Web Part using SharePoint Designer. |
2. | Select the column that you want to link and then left-click the > icon next to the first value of the column to activate the Common xsl: value-of Tasks dialog box, as shown in Figure 20.20. Figure 20.20. Using the Common xsl:value-of Tasks dialog box to format a column as a hyperlink
|
3. | Choose Hyperlink from the Format as selection list. |
4. | Enter the appropriate values in the Text to display field and the Address field. You can use variables to indicate the column values that you want to insert, as shown in the figure. Also, you can click the function icon to the right of the Text to the display field or Address field if you want SharePoint Designer to show you the available values. |
5. | Confirm that your data source is safe to trust for a hyperlink. |
6. | Click OK. |
7. | Choose Save from the File menu to save your Web Part page. |
You may want to modify the columns for your data view to add, delete, or reorder your columns, especially after you see how the Web Part is used. The ability to easily modify columns for the Data View Web Part is included in the SharePoint Designer data view controls. To add, delete, or reorder columns, follow these steps:
1. | Open the page with the Data View Web Part using SharePoint Designer. |
2. | To open the data view common tasks menu, right-click the Data View Web Part and choose Show Common Control Tasks. Click the Edit Columns link. Or: To open the data view common tasks menu, left-click the > next to the top right corner of your Data View Web Part. Click the Edit Columns link. Or: To edit using the top navigation data view menu in SharePoint designer, make sure the Data View Web Part that you want to modify is active/selected. Choose Edit Columns from the Data View Web Part menu in SharePoint designer. |
3. | Use the Edit Columns dialog box as shown in Figure 20.21 to add, remove, or reorder columns. Figure 20.21. Using the edit column control to add, delete, or reorder columns
|
4. | Click OK. |
5. | Select Save from the File menu to save your Web Part page. |
In addition to adding and removing columns, you should also format the columns for the content they include in case that the data view did not format them appropriately when adding them to the page. This includes formatting number columns, date columns, and text columns that include rich text tags so that they display properly. For example, Figure 20.22 shows a data view of an RSS feed that has been added to a Web Part page. The description field shows text that is marked up with formatting tags.
Figure 20.22. A Data View Web Part with rich text that is not formatted properly
To format this text as rich text, follow these steps:
1. | Open the page with the Data View Web Part using SharePoint Designer. |
2. | Select the column whose text you want to format and then left-click the > icon next to the first value of the column to activate the Common xsl:value-of Tasks dialog box, as shown in Figure 20.23. Figure 20.23. Using the xsl:value-of Tasks dialog box to format a column as rich text
|
3. | Select Rich Text from the Format as selection list. |
4. | Confirm that your data source is safe to trust for rich text. |
5. | Click OK. |
6. | Choose Save from the File menu to save your Web Part page. |
Styling data views
SharePoint Designer provides thirteen layouts to choose from your data view. Each option provides different advantages for presenting the data and utilizing page space, as described below.
Basic Table: This is the default layout when you insert data in your Data View Web Part. The basic table presents each selected column as a column in a table and each item as a single row.
Repeating Form: The repeating form displays the title for each item, inserts a separator line, and then lists the other selected columns underneath the title column and repeats this layout in a single column on the left side of the page.
Form Centered: The centered form displays the title and then each display column in a vertical fashion, similar to the repeating form layout, but the single column of items is centered.
Repeating Tabular Form: The repeating tabular form layout lists the titles for all the displayed columns in its own row and repeats for all items in the list.
Two-Column Repeating Form: The two-column repeating form shows each title and the column’s name in its own row, repeats this format for all items in a bordered cell, and displays in two-columns of items as shown in Figure 20.24. This layout provides a view that is not as long on the page as the repeating tabular form or repeating form.
Comma Separated: The comma separated layout provides a two-row view of items with the title on the first row and the values for the other columns in a comma separated list on the second row without column names.
Two-Column Comma Separated: The two-column comma separated layout formats the data in two rows, the first for the title and the second for the values in a comma separated format, and formats the Web Part into two columns of data.
Bulleted List: The bulleted list layout presents the titles for each item in a bulleted list and does not show the other columns.
Numbered List: The numbered list layout presents the titles for each item in a numbered list and does not show the other columns.
Plain List: The plain list layout presents the titles for each item in a separate row and does not show the other columns.
Horizontal List: The horizontal list layout presents the titles for each item in a comma-separated list on a single line or as many horizontal lines as it takes to display all the items for the data view.
Drop-down Menu: The drop-down menu layout presents the titles for each item in a drop-down menu and does not show the other columns.
Layout Table Form: The layout table form displays your selected fields in a single table cell, but provides additional table cells for you to use to customize the view and layout.
To select the layout for your Data View Web Part, follow these steps:
1. | Open the page with the Data View Web Part using SharePoint Designer. |
2. | To open the data view common tasks menu, right-click the Data View Web Part and choose Show Common Control Tasks. Click the Change Layout link. Or: To open the data view common tasks menu, left-click the > next to the top right corner of your Data View Web Part. Click the Change Layout link. Or: To edit using the top navigation data view menu in SharePoint designer, make sure the Data View Web Part that you want to modify is active/selected. Choose Change Layout from the Data View Web Part menu in SharePoint designer. |
3. | Select the desired layout from the options. |
4. | Choose Save from the File menu to save your Web Part page. |