Create data views in SharePoint Designer

With SharePoint Designer 2010, you can quickly create highly customized interfaces to your business data sources using Data Views. A Data View is a live, customizable view of a data source, and it can be used to display data or write back data to a data source. Data Views can be used with a database query, XML document, Web services, server-side scripts, and SharePoint lists and libraries.

If your organization stores information in databases, you can connect to that database and use it as a data source from which to create a series of Data Views on a page for a dashboard-like experience. You can also use Data Views to display data from an external data, such a weather feed to add to your site.

This article introduces Data Views and how you can add them to your site using SharePoint Designer 2010.

In this article


What is a Data View?

A Data View is a live, customizable view of a data source that leverages Microsoft ASP.NET technology. SharePoint Designer 2010 retrieves data from a data source in the form of Extensible Markup Language (XML) and displays that data by using Extensible Stylesheet Language Transformations (XSLTs)

You can modify a Data View by using SharePoint Designer 2010. A Data View provides read and write access to a wide variety of sources, including database queries, XML documents, Web services, SharePoint lists and libraries, and server-side scripts. You can also create a Data View that displays data from multiple data sources.

After you insert a Data View into your page, you can also use the WYSIWYG tools in SharePoint Designer 2010 to add or remove columns, filter, sort, and group fields, and change font formatting and overall layout. When you format the Data View using these WYSIWYG tools, SharePoint Designer 2010 inserts the necessary Extensible Stylesheet Language (XSL) directly into the page so you don’t have to know how to write XSL. Of course, if you want to write the XSL directly, you can always open the page in Code view.

 Note    If you’re primarily working with lists and libraries as data sources, you can use Data Views or List Views to read and write data to those data sources. List Views are similar to Data Views, but they include the added benefit of full support for view customization in the browser. Learn more about List Views in the See Also section.

Top of Page Top of Page

Insert a Data View from the Ribbon

To create a Data View, you must first create or open a page (an ASP.NET page) in SharePoint Designer 2010. Then you add the Data View to the page. There are a few ways to create the Data View. The quickest way is to use the Data View option in the Ribbon where you simply select your data source with one click.

When using this option in the Ribbon, if you choose a list or library as the data source, a List View (XLV) is added to the page. If you choose a data source other than a list or library (such as an XML file, a database connection, a server-side script, or a Web service connection), a Data View (DFWP) is added to the page. Learn more about the differences between List Views and Data Views in the See Also section.

To create a Data View using the Ribbon, perform these steps:

  1. Open your site in SharePoint Designer 2010.
  2. In the Navigation pane, click Site Pages.
  3. Select the site page where you want to add the Data View.

 Note    If you didn’t have a page for the Data View, you need to create one – either an ASXP page or a Web Part Page. (See Creating SharePoint Pages in the See Also section.

  1. On the Page tab, in the Edit group, click Edit File.
  2. Click inside in the div or form box provided.
    In a Web Part Page, the div tag box looks like this:
    Open site in SharePoint Designer 2010
    In an ASPX page, the form box looks like this:
    Open site in SharePoint Designer 2010
  3. On the Insert tab, in the Data Views & Forms group, click Data View. Then select your data source.
    Open site in SharePoint Designer 2010
  4. The Data View is created on the page and will look similar to this.
    Open site in SharePoint Designer 2010

Top of Page Top of Page

Insert a Data View using the Data Source Details pane

In addition to using the Data View option in the Ribbon to select your data source, you can insert an empty Data View using the ribbon. When you insert an empty Data View, you select your data source and then specify how the fields should be added to the page using the Data Source Details task pane. For example, you can add the fields as a single item view or multiple item view.

When you use this method to create a Data View, you can select a number of data sources, including XML files, database connections, server-side script, Web service connections, and SharePoint lists and libraries). Unlike the previous set of steps, you’ll insert a Data View (DFWP) onto the page regardless of the data source being used. This means, you will create Data View (DFWP), not a List View (XLV) to a SharePoint list or library. Learn more about the differences between List Views and Data Views in the See Also section.

To create a Data View using the Data Source Details Task Pane, perform these steps:

  1. Open your site in SharePoint Designer 2010.
  2. In the Navigation pane, click Site Pages.
  3. Select the site page where you want to add the Data View.

 Note    If you didn’t have a page for the Data View, you need to create one – either an ASXP page or a Web Part Page. (See Creating SharePoint Pages in the See Also section.

  1. On the Page tab, in the Edit group, click Edit File.
  2. Click inside in the div or form box provided.
    In a Web Part Page, the div tag box looks like this:
    Open site in SharePoint Designer 2010
    In an ASPX page, the form box looks like this:
    Open site in SharePoint Designer 2010
  3. On the Insert tab, in the Data Views & Forms group, click Data View. Then choose Empty Data View.
  4. In the empty Data View placeholder that appears, click: Click here to select a data source.
    Open site in SharePoint Designer 2010
  5. In the Data Sources Picker dialog box, select your data source and click OK.
  6. The Data Source Details task pane displays.
    Open site in SharePoint Designer 2010
  7. In the task pane, select the fields that you want to show in the Data View.
    Tip To select multiple fields, hold down CTRL while you click them.
  8. Click Insert Selected Fields as and then choose one of the following options:
  • Single Item View to display a single record in a Data View.
  • Multiple Item View to display multiple records, with the fields in columns with headings for each column.
  1. Alternatively, you can drag the selected fields from the task pane directly onto the empty Data View placeholder on the page. (The fields will be added to the page as a multiple item view with the first five fields showing in the table.)
  2. The Data View is created on the page and will look similar to this.
    Open site in SharePoint Designer 2010

Top of Page Top of Page

Dragging data sources from the Navigation pane

Another way to create a Data View is to drag and drop a data source from the Navigation pane. With your ASPX page or a Web Part Page open in SharePoint Designer 2010, click the pushpinOpen site in SharePoint Designer 2010 button beside Data Sources or All Files. This displays files and available data sources at the bottom of the Navigation pane. From there, just click and drag the data source onto the page.

Similar to the behavior when using the Data View option in the Ribbon, adding a SharePoint list or library will result in a List View (XLV) being created on the page. Adding any other data source will result in a Data View (DFWP) being created.

Top of Page Top of Page

Suggested next steps

Once you create a Data View, you can start customizing it using the Data View tools in SharePoint Designer 2010. You can add and remove columns, filter data, apply conditional formatting, change the overall layout, and much more. See Customizing List and Data Views in the See Also section.

Top of Page Top of Page

 
 
Applies to:
SharePoint Designer 2010