Satish Srivastva's Blog

Just another WordPress.com weblog

Working With Data in SharePoint Designer 2010


The data view web part has been referred to by some, as the Swiss Army Knife of SharePoint. This flexible web part can be used to display and aggregate data from various sources. Organizations often have data dispersed on multiple platforms other than SharePoint. With the functionality leveraged by data view web parts, there is the potential for a singular repository accessible by the end users. Now the information and data of interest can all be displayed in one place – SharePoint.

Data View Web Parts

SharePoint Designer is the tool used to create data view web parts. In this article, the data view web part and its evolution will be introduced. The new interface and functionalities will also be covered.

Why create a data view web part in the first place? There are several reasons:

1. The data lives in another location besides a SharePoint list or library, such as a database, an XML file, or a web service.

2. The data exists within a SharePoint list or library, but the view needs to be customized further. Once the limitations of regular list views in the browser have been reached, customizations such as formatting can be taken to the next level.

3. The data exists in SharePoint, but not within the default list or library fields. Some data is only accessible through SharePoint’s built in web service layer, which can interact with servers, sites, and lists.

History

The data view web part has been around since SharePoint Portal Server 2003 and WSS 2.0. Back in 2003, Microsoft Office FrontPage was used to create data view web parts. With Microsoft Office SharePoint Server 2007 and WSS 3.0, FrontPage has evolved into SharePoint Designer. In regards to SharePoint 2010, which is currently in its Beta release, SharePoint Designer 2010 will be used for the creation of data view web parts. SharePoint Designer 2010 is not compatible with older versions of SharePoint. Figure 1 displays the new user interface.

Fig. 1: SharePoint Designer 2010 User Interface.

Step-By-Step

Data view web parts can easily be created by non-developers, and the three steps are: select a data source, pick the fields to display, and then customize the way the data is viewed. These steps will be covered below and the new SharePoint Designer 2010 capabilities will be highlighted.

Security Note: At the web application and site collection levels, there are SharePoint Designer Settings, in which to lock down the use of this software. Administrators have the option to disable the use of SharePoint Designer, or just certain aspects of it such as customizing master pages.

First, a data source is selected. The Data Source Library is the main interface for accessing and managing data sources within SharePoint sites. By default, all of the lists and libraries on the current site are listed as data sources. Once the SharePoint site has been opened in SharePoint Designer 2010, follow these steps to add additional data sources:

Click Data Sources in the left pane. This screen will display the Data Sources tab in the ribbon at the top of the screen, shown in Figure 2.

Fig. 2: List of Data Source Types.

On this screen, new data sources can be added, using the buttons in the ribbon. New data source types include Linked Data Sources, Database Connections, SOAP Service Connections, REST Service Connections, and XML File Connections. Note that a Linked Data Source is unique in that it merges or joins two or more data sources to create a new one.

Once the target data source exists in the list of the site’s data sources, the data view web part can be inserted on a page. Open an .ASPX web part page in SharePoint Designer, and put the cursor in the desired web part zone. In this example, the web part page is called “ExampleDVWP.aspx”. The Policies document library will be used, which contains all of the corporate policies. Click the Insert tab on the ribbon, and click Data View to choose a data source. See Figure 3.

Best Practice: Create a blank web part page on which to develop the data view web part. When complete, save the web part (see Figure 9), which can then be inserted in any location in the site collection. Using this practice helps avoid having a work in progress on production pages.

Fig. 3: Insert a Data View.

The Policies document library is selected, which automatically inserts the library on the page, with some default columns displayed.  When the data view web part is clicked on (selected), the contextual ribbon shows a List View Tools section. The Data Source Details pane can be displayed by clicking Data Source Details on the Options tab. This pane displays fields that exist within the current data source.

The Ribbon

The new ribbon interface is everywhere in Microsoft products now, and SharePoint Designer 2010 is no exception. “Ribbon” is the terminology that describes the panel at the top of the screen, which contains a set of contextual toolbars.

Fig. 4: The Options Tab.

In Figure 4, the List View Tools are displayed in the ribbon, which includes four tabs. These tabs are Options, Design, Web Part, and Table. All of the functionality of Share­Point 2007 is still here. One of the main differences between older versions, and SharePoint Designer 2010, is that settings are easier to find. When tasks need to be accomplished in this product, there are now less menus and dialogue boxes to click through.

The Options Tab

The Options tab contains some of the familiar data view concepts, such as filtering, sorting, grouping, paging, parameters, web part connections, and the ability to add and remove columns. There are also a few new items here that are worth mentioning.

Filtering

Narrow down the list of items returned, by specifying a subset of data.

Sorting

Determine the order in which the data is to be displayed

Grouping

Set groupings on data, according to data in one or more fields. These groupings can be collapsed or expanded.

Paging

Set the number of list items to be returned per page of data.

Parameters

Specify parameters coming from different sources such as cookies, form values and query string variables.

Formula Insert a formula into the data view web part, such the calculation of the sum of the data in two fields.

Web Part Connections

Connect web parts to each other to pass filter data or parameters.

Add/Remove Columns

Add or remove data fields to the view.

Conditional Formatting

When a selection has been made in the data view web part, the conditional formatting drop-down box will display options as to which content needs to be formatted. Once the content is chosen such as row, column, or selection, then the user is prompted to create the condition (rule). Conditional formatting is not a new feature, but the new interface makes this feature more readily accessible.

Inline Editing

When the Inline Editing toggle button is pressed, a new (seemingly empty) column will appear as the leftmost column in the data view web part. It won’t be apparent within this design view, but when the page is saved and previewed, the inline editing button will be displayed. When this new button is clicked, the fields in the row become editable directly in the list view. Note that the inline editing capability is also available when creating regular list views in SharePoint 2010, and is not limited to the data view web part.

Show List Item Menu

In the browser view of a document library, the list item menu associated with each record has typically been available on the Title field of each SharePoint list. In SharePoint Designer 2010, we now have the ability to choose the field(s) on which to display this menu. The options for this configuration are shown in Figure 5.

Fig. 5: Field-Leve Common Tasks.

Asynchronous Update

There is a new check box called asynchronous update. With this option enabled, the data becomes dynamic, and the Refresh Button and Refresh Interval options also become available. If the Refresh button is checked, an icon will be placed at the top right of the web part, for end users who choose to refresh the displayed data. Refresh Interval allows automatic data refresh at the interval you specify, as shown in Figure 6.

Fig. 6: Asynchronous Update Options.

Folder Scope

If there are folders in the data source, choose whether to display them, or display all list items without consideration for the folder structure.

The Design Tab

This tab contains options related to the design and formatting of the data view web part as a whole. This tab is displayed in Figure 7. Again, most of the options on this screen are not new, they are just easier to get to, with less clicks.

Fig. 7: The Design Tab.

Show/Hide

The ability to choose whether sample data is displayed is useful when working with a list that has no data displayed. The totals row check box will insert a row at the top of the data table, displaying a field that totals each column.

View Style

Choose the visual style of the data that is displayed. Examples are displayed on each button. Note that when changing the view style, the currently displayed list columns will be reset. It is a best practice to select a view style toward the beginning of the data view design, so that customizations will not be lost.

Toolbar

This is a web part setting. Choose to display the full web part toolbar, a summary toolbar, or none. An example of the summary toolbar is displayed in Figure 10.

Actions

Insert data view controls on the form, or customize the form’s XSLT code.

Preview

The preview section contains options to preview how the data will be displayed under various circumstances, such as determining how many sample items are displayed in the list during web part creation in SharePoint Designer. Some new items to note are the last three in Figure 8.

Fig. 8: Data View Preview Options.

‘No Matching Items’ Template

By default, when there are no items in the list or filtered view, the following text is displayed: “There are no items to show in this view of the “ListName” list. To create a new item, click “New” above.” In a document library, the default text is: There are no items to show in this view of the “LibraryName” document library. To create a new item, click “New” or “Upload” above.

This ‘No Matching Items’ template allows for customization of the page that is displayed when there are no items in the view. Not only edit the displayed text, but the page itself, which could include images, links, or any free-form customi­zations.

Edit Template

Only available when inline editing has been enabled on the Options Tab. The Edit Template is the page that end users see when inline-editing a list item.

Insert Template

Only available when inline editing has been enabled on the Options Tab. This is the form interface when end users are using inline editing to insert a new row of data in the list.

The Web Part Tab

The web part tab consists of web part properties from the familiar web part toolpane in the browser, and is displayed in Figure 9.

Fig. 9: The Web Part Tab.

Web part options are illustrated using the following screenshot of a web part in the browser. See Figure 10.

Fig. 10: Anatomy of a Web Part.

Web Part Title

The web part title can be configured. By default, this displayed title is the name of the data source, but can be changed. For example, the title of a filtered library view of items modified by me, can be changed to My Modified Documents. This makes the title more descriptive of the items contained in the current view. Use the Properties button to elicit the web part properties screen, which contains more settings.

Appearance

The chrome is the frame of the web part. The chrome type is an option to display the web part title, a border around the web part, neither, or both. The chrome state options are normal or minimized. Liken this setting to minimizing and maximizing windows in the operating system. If a web part is set as minimized by default, end users must click a button to maximize it in order to view the contents.

Size

By default, a web part is automatically sized to the part of the page in which it is added. Alternately, specific dimensions may be hard-coded.

Connections

Add new web part connections, and if web part connections already exist, click to “Manage Connections”.

Allow

This section contains options for actions that will be available for end users to take, when it comes to modifying the web part.

Save Web Part

The ability to save a web part from within SharePoint Designer is new. When saving a web part “To File”, there is simply a prompt to pick a location on the hard drive in which to save this .WEBPART file. When saving a web part directly to the site’s web part gallery, there is a prompt to configure the web part’s name and description for the gallery listing. See Figure 11, which displays the prompt that is shown when saving a data view web part of a document library called “Policies” to the site gallery.

Fig. 11: Save Web Part to Site Gallery.

After clicking OK to save the web part to the gallery, there is yet another prompt:

Do you want this web part to always show List data from the current Web site http://site.yourcompany.com? If you select No, the Web Part will show data from the list at the path Policies, relative to the site in which it is used.

What does this mean? Here are the two options available when saving the web part to the gallery:

1. Show list data from the current web site. This means that this exact list of the same “Policy” documents will be displayed when the web part is inserted anywhere in the site collection. In this case, there is only one “Policy” document library, and changes will be propagated to all instances of this web part.

2. Show data at the list relative to the site in which it is used. In this situation, there could be various departmental sites, each with their own “Policies” document library. Inserting this “Policies” web part would apply the current web part view to the “Policies” document library for that department.

The Table Tab

This tab consists of options for formatting the data table. See Figure 12.

Fig. 12: The Table Tab.

These table options are the same familiar options that exist within other Microsoft Office products, like Excel and Word.

Other New Functionalities

Besides the new data view web part tabs in SharePoint Designer 2010, there are some other new functionalities to take advantage of, which will be highlighted in the next sections.

Field Level

When right clicking on any field in the data view web part, there are several options. Tasks such as creating hyperlinks can be accomplished quicker in SharePoint Designer 2010, meaning fewer clicks. As shown in Figure 13, when Format item as is selected, and Hyperlink to, there are options to create links to the form’s New Item, Edit Form, or Display Form pages.

Fig. 13: Field-Level Formatting.

Quick Tag Editor

The Quick Tag Editor is a new option for quickly editing the code for just one element on the web part page. Select an item on the page, and on SharePoint Designer’s Home tab, click Quick Tag Editor, which is shown in Figure 14. The snippet of code related to the current selection is shown, with drop-down options to Edit Tag, Wrap Tag, or Insert HTML.

Fig. 14: Quick Tag Editor.

Skewer Click

Use the new Skewer Click button to select an element on the page, or its parents or children. For example, click the Skewer click button on the Home tab, and then click on a cell in a table on the web page. This will elicit a drop-down type menu that contains a selectable list of the elements on the page.

Conclusion

This has been a brief, high level overview of some new functionality with regards to creating data view web parts in SharePoint 2010, using SharePoint Designer 2010. Several new functionalities have been highlighted, along with basic instructions to get started with these web parts. The data view web part allows for advanced user interfaces to back end data to be built quickly and easily, with the ability to avoid custom programming.

When building custom solutions in SharePoint, data view web parts are very useful when appropriate. When the limitations of a regular list view have been reached, the data view web part is the next step. Once the limitations of a data view web part have been reached, custom programming may be required.

/*****Posted By  Satish Srivastva ****/

February 22, 2010 - Posted by | MOSS 2010, Sharepoint 2010

3 Comments »

  1. That’s great Satish, thanks for posting.

    Comment by Robert | February 22, 2010 | Reply

  2. Thank you for the help.
    Will this work in Windows 7?

    Comment by Install Software | February 27, 2010 | Reply


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: