Insert a Data View as a form

Forms are a vital part of any Microsoft SharePoint Web application in which you want to collect data from users. Data Views build on ASP.NET form technology so that you can insert them either as read-only views of data or as forms in which users can write back to the data source by using the browser. With Microsoft Office SharePoint Designer 2007, you can quickly insert a Data View as a form so that users can make and save changes to these types of data sources: lists and libraries, database connections, and local XML files. Note that a Data View inserted as a form can be used with only these types of data sources.

This article shows you how to insert a Data View as a form. In addition, this article shows you how to create a sample XML file to use as a data source so that you can follow along with the example.

 Important   This article discusses creating a Data View in a SharePoint site that is located on a server running Windows SharePoint Services 3.0. This functionality is not available if your site is not located on a server running Windows SharePoint Services 3.0.

In this article


Before you begin

Office SharePoint Designer 2007 has two separate features that make it possible for users to edit the data in a Data View by using the browser:

  • Insert a Data View as a form     When you create a Data View, you can choose to insert it as a single-item or multiple-item form. The form is always in edit mode and displays either one record or many. Users can modify data and insert new records through the browser, but they cannot delete records. You might want a multiple-item form when users need to quickly edit the data in many records at one time.
  • Add links to an existing Data View     You can add links to an existing Data View so that users can edit, delete, or insert records in the data source. Users click the edit link for a record to put that item in edit mode. If you add links to a Data View that was inserted as a form, the links replace the form buttons. In addition, if you add links to a Data View that was inserted as a form, the Data View will no longer display form fields by default; it will only display data in a view. For more information, see the article Edit, delete, or insert records in a Data View.

After you insert a Data View as a form, you can filter, sort, and group the data, apply conditional formatting, or create formula columns. When users make changes to the data and then save those changes, any filter, sort order, conditional formatting, or formula column that apply automatically reflects the updated data. You can also add built-in form actions to the Save or Cancel buttons that appear on the form by default. You can find a link to more information about built-in form actions in the See Also section.

Top of Page Top of Page

Why insert a Data View as a form?

A Data View is a customizable view of a data source. You can insert a Data View into an ASPX page as either a view or a form. A Data View inserted as a view allows you to format the presentation of data, but not to edit the data itself.

However, if you insert the same Data View as a form, you can edit the data through the browser and your changes are written back to and stored in the original data source. With Office SharePoint Designer 2007, you can quickly create one of three types of forms from an existing data source:

  • A Single Item Form displays a single record as a form — with each field in its own row, and with the field name as the heading for that row — so that you can edit the data for one record at a time. The form provides navigation links that you can click to view the next or previous record.

Data View inserted as a single-record form

  • A Multiple Item Form displays multiple records as a form — with each field in its own column, and with the field name as the heading for that column — so that you can quickly edit the data for multiple records and then save the changes at the same time.

Data View inserted as a multiple-record form

  • A New Item Form displays blank fields for a single record — with each field in its own row, and with the field name as the heading for that row — so that you can add data to a data source one record at a time. You may want to include all the relevant fields for the record so that all of the data can be saved at the same time.

New Item Form for a Data View inserted as a form

Data Views inserted as forms can be created for SharePoint lists and libraries, database connections, and local XML documents. When you insert a Data View, Office SharePoint Designer 2007 retrieves data from a data source in the form of Extensible Markup Language (XML) and displays that data by using Extensible Stylesheet Language Transformations (XSLT). As with any Data View, you can modify a form by using Office SharePoint Designer 2007.

After you insert a Data View into your page, you can also use the WYSIWYG tools in Office SharePoint Designer 2007 to add or remove columns, change font formatting, or apply colors. When you format a Data View by using the WYSIWYG tools available in Office SharePoint Designer 2007, Extensible Stylesheet Language (XSL) is inserted directly into the HTML. While it is possible to edit the XSL directly in Code view, you can also use the formatting tools in Office SharePoint Designer 2007 to apply XSL quickly and easily without knowing XSL.

Top of Page Top of Page

Create an .xml file as a sample data source

Northwind Traders, a gourmet food distribution company, tracks their inventory in an XML file. When inventory is low, a team member calls the supplier for that product and places an order. You suggest that they insert a Data View as a form so that the team member who places the order can immediately update the units on order. That way Northwind Traders will always have the most up-to-date information on their current inventory.

The following procedures require using an .xml file as a data source. If you don't have an .xml file in your SharePoint site, you must first to create the Northwind Traders product list. After you create the list, you can insert a Data View as a form to update the data contained in the list.

Create Products.xml

  1. On the File menu, click Open Site.
  2. In the Open Site dialog box, browse to and select your SharePoint site, and then click Open.
  3. If prompted, in the Connect to dialog box, type your user name and password, and then click OK.
  4. On the File menu, click New.
  5. In the New dialog box, on the Page tab, click General in the leftmost pane, and then double-click Text File in the next pane to the right.

A new text file opens in your Web site.

  1. Copy the following lines of code by selecting them and then pressing CTRL+C.
<?xml version="1.0" encoding="utf-8"?>
<ProductsRoot>
    <Products>
        <ProductID>1</ProductID>
        <ProductName>Chai</ProductName>
        <SupplierID>1</SupplierID>
        <CategoryID>1</CategoryID>
        <QuantityPerUnit>10 boxes x 20 bags</QuantityPerUnit>
        <UnitPrice>18</UnitPrice>
        <UnitsInStock>39</UnitsInStock>
        <UnitsOnOrder>0</UnitsOnOrder>
        <ReorderLevel>10</ReorderLevel>
        <Discontinued>0</Discontinued>
    </Products>
    <Products>
        <ProductID>2</ProductID>
        <ProductName>Chang</ProductName>
        <SupplierID>1</SupplierID>
        <CategoryID>1</CategoryID>
        <QuantityPerUnit>24 - 12 oz bottles</QuantityPerUnit>
        <UnitPrice>19</UnitPrice>
        <UnitsInStock>17</UnitsInStock>
        <UnitsOnOrder>40</UnitsOnOrder>
        <ReorderLevel>25</ReorderLevel>
        <Discontinued>0</Discontinued>
    </Products>
    <Products>
        <ProductID>3</ProductID>
        <ProductName>Aniseed Syrup</ProductName>
        <SupplierID>1</SupplierID>
        <CategoryID>2</CategoryID>
        <QuantityPerUnit>12 - 550 ml bottles</QuantityPerUnit>
        <UnitPrice>10</UnitPrice>
        <UnitsInStock>13</UnitsInStock>
        <UnitsOnOrder>70</UnitsOnOrder>
        <ReorderLevel>25</ReorderLevel>
        <Discontinued>0</Discontinued>
    </Products>
    <Products>
        <ProductID>4</ProductID>
        <ProductName>Chef Anton's Cajun Seasoning</ProductName>
        <SupplierID>2</SupplierID>
        <CategoryID>2</CategoryID>
        <QuantityPerUnit>48 - 6 oz jars</QuantityPerUnit>
        <UnitPrice>22</UnitPrice>
        <UnitsInStock>53</UnitsInStock>
        <UnitsOnOrder>0</UnitsOnOrder>
        <ReorderLevel>0</ReorderLevel>
        <Discontinued>0</Discontinued>
    </Products>
    <Products>
        <ProductID>5</ProductID>
        <ProductName>Chef Anton's Gumbo Mix</ProductName>
        <SupplierID>2</SupplierID>
        <CategoryID>2</CategoryID>
        <QuantityPerUnit>36 boxes</QuantityPerUnit>
        <UnitPrice>21.35</UnitPrice>
        <UnitsInStock>0</UnitsInStock>
        <UnitsOnOrder>0</UnitsOnOrder>
        <ReorderLevel>0</ReorderLevel>
        <Discontinued>1</Discontinued>
    </Products>
 </ProductsRoot>
  1. In Office SharePoint Designer 2007, position the cursor at the top of the page, and then press CTRL+V to paste the code that you just copied onto the page.
  2. On the File menu, click Save As.
  3. In the Save As dialog box, in the File name box, type products.xml.
  4. In the Save as type list, click XML, and then click Save.

Top of Page Top of Page

Insert a Data View as a form

When you insert a Data View as a form by using the Data Source Details task pane, you first insert a Data View into the page. You then select a data source in the Data Source Library, a task pane that manages available data sources for a SharePoint site. After you select your data source, the Data Source Details task pane opens. In the Data Source Details task pane, you choose the fields that you want to display and then insert them into the Data View.

Data forms are based on ASP.NET 2.0 technology. To create a Data View, you must start with an ASP.NET page (.aspx file). In this example, you will create a new ASP.NET page, and then insert a Data View as a form by using the Data Source Details task pane.

  1. On the File menu, click New.
  2. In the New dialog box, on the Page tab, click General, and then double-click ASPX.

A new page with a FORM tag opens.

An ASP.NET form tag appears on the page.

  1. On the Data View menu, click Insert Data View.

An empty Data View is now displayed on the page, and the Data Source Library task pane opens.

An empty Data View Web Part

Now that you have inserted the Data View, you are ready to add data.

  1. In the Data Source Library task pane, locate your data source, click it, and then click Show Data.

In the example, under XML Files, click products.xml, and then click Show Data. If the XML Files heading is collapsed, click the plus sign (+) to expand it.

  1. In the Data Source Details task pane, click the fields that you want to insert in the Data View.

 Tip   To select multiple fields, hold down CTRL while you click them.

In the example, in the ProductsRoot folder, under Products, click ProductName. Press and hold down CTRL while you click UnitsInStock, UnitsOnOrder, and ReorderLevel.

Fields selected in the Data Source Details task pane

  1. Click Insert Selected Fields as, and then click Multiple Item Form to insert the selected data into the Data View as a form.

 Note   Single Item Form displays one record at a time as a form. Multiple Item Form displays multiple records, with each field in its own column and the field name as the heading for that column.

The fields that you selected in the Data Source Details task pane now appear in a form.

 Note   Because this example uses an .xml file, every field in the Data View is editable. However, depending on the type of data source, it is possible that some fields may not be editable. For example, if your data source is a SharePoint list and you choose to include in the form such system fields as Created By or Modified By, those fields are not editable.

The selected data displayed as a data form

After you insert a Data View as a form, you can use WYSIWYG tools such as the Formatting toolbar to modify fonts, align text, or apply colors. When you apply new formatting to a data point in your Data View, Office SharePoint Designer 2007 applies the formatting to all of the data at the same level in the XML by modifying the XSLT style sheet attached to the page. For example, in the previous illustration, if you select Chai and then click Bold on the Formatting toolbar, Office SharePoint Designer 2007 applies the same formatting to all of the content that appears in the ProductName field.

The same formatting applied to all of the data at the same level

  1. On the File menu, click Save As. In the Save As dialog box, in the File name box, type a name for your file, and then click Save.

Top of Page Top of Page

Edit the data by using the browser

After you save the page that contains the form, you can preview it in the browser and modify the data in the form.

Field types and data input

This example uses an XML file as the data source. Because an XML file is a plain text file, it is not possible to specify the types of values that individual fields must contain. For example, there is nothing to prevent you from entering and saving text in a field that should contain numbers, such as UnitsOnOrder.

However, if your data source is an SQL data source such as an SQL database or a SharePoint list or library, the field types may be specified in the data source itself. In such a case, if you use the form to enter text in a field that requires numbers and then click Save, an error message appears in the browser explaining that the data source control failed to execute the update command. This means that you are entering values in the form that the data source field cannot accept. If you receive such an error message, click Back in the browser, and then either click Cancel on the form to discard your changes, or enter values in the form fields that the data source can accept.

For this reason, when you design your form in Office SharePoint Designer 2007, you may want to include text in the column headers when a field requires specific types of input.

Using the form in the browser

  1. In Office SharePoint Designer 2007, on the File menu, click Preview in Browser, and then click the browser type and size that you want to use.

Keyboard shortcut  Click the page that you want to preview in the Folder List, and then press F12.

The page with the form appears in the browser.

The multiplie record form as it appears in the browser

  1. You can now modify any of the information that appears in a form field in the Data View. You can also change information in multiple fields in multiple records at the same time. When you are done modifying data in the form, either click Save to commit your changes to the data source or click Cancel to discard your changes.

To follow the example, in the ProductName column, in the field that contains the word Chai, position the cursor at the end of the word Chai, press the SPACEBAR once, and then type Tea Concentrate. In the UnitsOnOrder column, in the Chai record, type 40. In the UnitsOnOrder column, in the Chef Anton’s Cajun Seasoning record, type 35, and then click Save. The form with the updated records appears in the browser.

The data form with the updated records appears

Top of Page Top of Page

Suggested next steps

Data Views are powerful, fully customizable live views of data. Now that you have learned how to insert a Data View as a form, you might want to learn how to:

  • Filter data in a Data View    You can easily filter the data in a Data View so that the data displayed is exactly the data that you want to view. For more information, see Filter data in a Data View.
  • Sort and group data in a Data View    You can quickly sort or group the data in a Data View. For example, you can easily sort the list in alphabetical order. For more information, see Sort and group data in a Data View.
  • Apply conditional formatting to a Data View    You can apply specific formatting to a Data View when the data in the Data View meets certain conditions. For more information, see Apply conditional formatting to a Data View.
  • Create a formula column in a Data View    You can create a calculated column that displays the result of a calculation of data in a Data View. For example, you can multiply the unit price by the number of units in stock and display the total value of the items in a separate column. For more information, see Create a formula column in a Data View.
  • Modify columns in a Data View    You can quickly and easily add, remove, or rearrange columns in a Data View. For more information, see Modify the columns in a Data View.
  • Display sample data in a Data View    You can easily display sample data in a Data View. For more information, see Display sample data in a Data View.

Top of Page Top of Page

 
 
Applies to:
SharePoint Designer 2007