17.2. Using the Data Form Web Part

The SharePoint Designer user interface for working with the Data Form Web Part is mostly spread across three task panes: the Data Source Library, Data Source Details, and Conditional Formatting. The Data View top menu also provides the access points to most of the user interface for working with the Data Form Web Part.

NOTE

For more on the Data Source Library task pane, see Chapter 15.

17.2.1. Creating views of data

Inserting views of data on Web pages for SharePoint data sources is made quite simple by the SharePoint Designer user interface. You use the Data Source Details task pane to insert views on SharePoint Web pages.

17.2.1.1. Inserting data views

Following are the common steps that apply to all data sources for inserting views:

  1. In the Data Source Library, click the data source you want to create a view of. A menu of action items for that data source opens.

  2. Click the Show Data menu option to open the Data Source Details task pane. The Data Source Details task pane shows the data associated with the selected data source and is the playground for inserting the Data Form Web Part as a view or a form. The representation of data in the Data Source Details task pane is mostly hierarchical. By default, you should see the first row of data from the data source with all the available columns. As shown in Figure 17.2, you can navigate between rows by using the arrows next to the top repeating node.

    Figure 17.2. Navigating between rows of data in the Data Source Details task pane

  3. You can select multiple columns for inserting as a view or form by holding Ctrl and then clicking on the columns. Alternatively, you can select multiple consecutive columns by clicking the first column, holding Shift, and then clicking the last column.

  4. Click the Insert Selected Fields as button in the Data Source Details task pane to open a list of menu options that allow you to insert the selected columns as a view or a form. Alternatively, as shown in Figure 17.3, you can insert a view of data by right-clicking the repeating node and then choosing the specified layout from the popup menu.

    NOTE

    The menu options in the Insert Selected Fields as button are contextual. That is, depending on the nature of the data source, you might not see some of these menu options. For example, you can't insert forms for linked data sources. So, the menu options for inserting forms aren't enabled when working with linked data sources.

  5. Choose the way you want to insert the DataFormWebPart by choosing a menu option from the Insert Selected Fields as menu. The DataFormWebPart is inserted on the Web page at the location where the cursor is placed.

Figure 17.3. Inserting a formatted view of data by using the menu option for the repeating node

As shown in Figure 17.4, when you insert the DataFormWebPart on the Web page by using the previous steps, the Common Data View Tasks menu appears in the Design view. This menu forms one of the access points to modify the properties of the DataFormWebPart. You can show or hide the menu by clicking on the small arrow at the top-right corner of the DataFormWebPart.

New for the Data Form Web Part is the ability to insert subviews and joined subviews of related data sources. If you have multiple data sources related to each other, such as two tables in a database having a master-detail relationship, you can quickly insert an aggregated view of data by using the Data Form Web Part. Combined with some DHTML effects by using Behaviors in SharePoint Designer, you can enhance the Data Form Web Part to create a dynamic view of data.

NOTE

A master-detail relationship implies that for every row in the master table, there are a number of related rows in the details table.

Figure 17.4. The Common Data View Tasks menu

17.2.1.2. Creating subviews

The following exercise shows how you can display a combined view of data from a linked data source by using the Data Form Web Part. As a prerequisite, you need to create a linked data source by using the Data Source Library task pane, which joins two tables in a database that have a master-detail relationship.

  1. Open your Web page in SharePoint Designer and then place the cursor at the location where you want to insert the DataFormWebPart as a view.

  2. Click Linked Data Source in the Data Source Library task pane and then click Show Data to open the Data Source Details, which shows the associated data from the linked data source. As shown in Figure 17.5, you should see the combined view of data from your linked data source. In this example, the master table is shown at the top in the hierarchy, while the details table is shown at the bottom. Both the tables have arrows that allow for navigation between rows in the Data Source Details task pane.

  3. As shown in Figure 17.6 , select the columns you want to display from the master table and then choose Insert Selected Fields as Single Item View. A single-item view of the columns selected is inserted, with paging of rows enabled by default. After you insert the view, the HTML code for the view is formatted by using <table> tags.

    Figure 17.5. A linked data source opened in the Data Source Details task pane

    Figure 17.6. Inserting a single-item view from the Data Source Details task pane

  4. Place the cursor inside the view you inserted in step 3.

  5. Using the Quick Tag Selector, locate and click the top <tr> tag inside the table inserted for the view. The tag and its content are highlighted in the Design view.

  6. Right-click on the highlighted content and then choose Modify Split Cells. This step is illustrated in Figure 17.7. Clicking on the Split Cells menu option opens the Split Cells dialog box.

  7. Using the Split Cells dialog box, split the selected cell into two columns. Place the cursor inside the newly created column.

  8. As illustrated in Figure 17.8 , select the columns you want to insert as a subview and then choose Insert Selected Fields as Subview. A multiple-item subview of the selected columns is inserted inside the existing view.

  9. Save the Web page and then preview it in a browser. Figure 17.9 shows the completed result of these steps. You can move between the rows of the master table by using the paging links. This automatically changes the association in the subview to reflect the related data.

While this view looks compelling, you can further enhance it by implementing dynamic effects by using Behaviors in SharePoint Designer.

Figure 17.7. Splitting the HTML table row for inserting a subview

Figure 17.8. Inserting a subview inside the main view of data

Figure 17.9. A master-detail view created by using the DataFormWebPart subview feature

17.2.1.3. Creating dynamic data views

The next exercise takes you through the steps to create a dynamic view of related data by using the Data Form Web Part as well as Behaviors and Layers. To be able to comfortably move around, ensure that the Behaviors and Layers task panes are enabled in the SharePoint Designer interface. The idea is to create a view of the master table in such a way that when you hover over the rows of the master table, the corresponding records from the details table are shown dynamically:

  1. Insert a multiple-item view of rows from the master table by using the Data Source Details task pane.

  2. Place the cursor in the second column of any row of the table that's inserted in step 1 and then choose Insert HTML Layer. This is shown in Figure 17.10. Because the XSL templates applied to the data view are recursive, one layer is inserted in each row of the data view. The cursor is placed by default in one of the layers.

    Figure 17.10. Inserting layers in the rows of a data view

  3. As shown in Figure 17.11 , use the Data Source Details task pane to insert a subview of details table inside the layers. Again, due to the recursive nature of the XSL applied to the view, a corresponding subview is inserted in each layer, cluttering the Design view with a number of multiple-item subviews.

  4. Switch to the Layers task pane, right-click on any layer listed in the task pane, and then choose Set Visibility:Hidden from the popup menu. The default setting for all layers changes to Hidden.

  5. Select the <tr> tag associated with a table row of the master table data view inserted in step 1. This is important because selecting the wrong <tr> tag might cause the functionality to be impaired.

    Figure 17.11. Inserting a subview inside a layer in the Data view

  6. Switch to the Behaviors task pane and then choose Insert Change Property to open the Change Property dialog box, as shown in Figure 17.12.

  7. Click the Select Element radio button and then choose div in the Element Type dropdown menu and the ID of any layer in the Element ID dropdown menu.

  8. Click the Visibility button, click the Visible radio button, click OK, and then click the Restore on mouseout event check box.

  9. Click OK, save the Web page, and then preview it in a browser. As shown in Figure 17.13, you now have a dynamic view in which when you hover over a row in the main view, a subview appears with the corresponding records from the related table.

SharePoint Designer provides a no-code user experience for working with the DataFormWebPart. Later in this chapter, I discuss the advanced formatting of data displayed by data views by using the SharePoint Designer user interface.

Figure 17.12. Associating a behavior with a table row in the view for the master table

Figure 17.13. A dynamic master-detail view by using DHTML effects

17.2.2. Working with data forms

The Data Form Web Part enables you to create Web pages with forms that allow users to add and modify data stored in SharePoint data sources. Using the Data Source Details task pane, you can insert single-item, multiple-item, and new item forms. The following exercise takes you through the steps to create a complete interface of inserting, editing, and deleting data within a SharePoint data source by using the Data Form Web Part:

  1. Open the Web page where you want to insert the DataFormWebPart for interfacing with your data source.

  2. Click the data source in the Data Source Library task pane and then click Show Data to display the Data Source Details task pane.

  3. Select the columns you want to use for the data form and then choose Insert Selected Items as Single Item Form. The DataFormWebPart is inserted on the Web page and shows the Common Data View Tasks menu.

  4. Click the Data View Properties link in the Common Data View Tasks menu to open the Data View Properties dialog box.

  5. Click the Editing tab and then click all the check boxes, as shown in Figure 17.14.

  6. Save the Web page and then preview it in a browser.

Figure 17.14. Enabling inserting and editing for data forms by using the Data View Properties dialog box

You now have all the capabilities to interface with the data source in a single control. By default, the Data Form Web Part shows the first row of data in the data source. Clicking the Edit link allows you to change the selected item. Clicking the Delete link allows you to delete the item, and clicking the Insert link allows you to add new items to the data source.

If you use the Data Form Web Part to add, modify, or delete data from a data source in a manner that might result in inconsistencies in the data source, you might receive errors. The data source might not allow the Data Form Web Part to perform the incorrect operation to avoid problems. For example, if you use the Data Form Web Part to delete a row of data in a master table that has related records in the corresponding details table, the database server might disallow the operation.


17.2.3. Creating custom list forms

Out-of-the-box SharePoint lists and libraries have a set of item forms that allow for creating new items as well as displaying and modifying existing items. For each content type associated with a list or library, you can have a set of item forms. These item forms facilitate item creation and modification for the associated content type.

NOTE

Content Types, introduced in WSS v3 and MOSS, define the nature and behavior of the content that can be stored in items. For example, the Document content type allows for creation of items that can store documents and related metadata. If you have multiple content types associated with a list, you can create items based on these content types and then store them in the list.

As shown in Figure 17.15, the item forms reside on Web pages that are stored within a list or library. These Web pages form the supporting files for a list or library.

Supporting files are used whenever you're working in the SharePoint user interface to create, modify, or display items. For example, the NewForm.aspx file is used to create a new item in the SharePoint list. By default, supporting files are created at the time of creation of the list or library by using templates provided by SharePoint sites. So, essentially, the look and feel of these pages are pretty standard across lists and libraries. The item forms on the supporting files are implemented by using the List Form Web Part offered by SharePoint. While you can make some modifications to the appearance of the List Form Web Part, it's still not as extensible as the Data Form Web Part.

Using SharePoint Designer, you can create customized supporting files by using the powerful capabilities of the Data Form Web Part and then change the supporting file associations to make the lists and libraries start using the files you created. This section discusses the recommended practices to create and associate customized supporting files with SharePoint lists and libraries.

Before you begin, it's very important to know that you should never delete the existing ListFormWebPart or the default supporting files associated with a list or library. While SharePoint Designer doesn't disallow you from deleting these files or the ListFormWebPart, this operation can lead to a complete loss of the editing capabilities for the list, which is recoverable only by either re-creating the list or restoring it from backups.


Figure 17.15. Supporting files for Announcement lists

Follow these steps to create a customized supporting file by using SharePoint Designer. In this exercise, you create a custom edit form Web page and associate it with your list:

  1. Open your SharePoint site in SharePoint Designer and then open the Folder List task pane.

  2. Expand the Lists folder and the list you want to create a custom edit item form Web page for.

  3. Select the existing EditForm.aspx and then press Ctrl+C (copy) and Ctrl+V (paste) to create a copy of the EditForm.aspx at the same location.

  4. Rename the copy of the EditForm.aspx to CustomEditForm.aspx and then open it in the Design view. The default ListFormWebPart exists on CustomEditForm.aspx.

  5. Right-click on the ListFormWebPart and then choose Web Part Properties from the popup menu to open the property editor for the Web part.

  6. Expand the Layout section and then click the Close the Web Part and Hidden check boxes, as shown in Figure 17.16.

  7. Click OK. The ListFormWebPart is now grayed out. If you save the Web page and browse to it now, the ListFormWebPart isn't shown on the Web page.

  8. Place the cursor at the bottom of the closed ListFormWebPart and then choose Insert SharePoint Controls Custom List Form. The List or Document Library Form dialog box, as shown in Figure 17.17, opens.

  9. Select the list and content type associated with the list for which you want to create the custom edit item form, click the Edit item form radio button, and then click OK. A DataFormWebPart is inserted on the Web page. The XSL of this DataFormWebPart has been created to match the look of the default ListFormWebPart. However, you're free to use SharePoint Designer to modify the appearance of the DataFormWebPart to suit your requirements.

    Figure 17.16. Hiding the existing ListFormWebPart

    Figure 17.17. The List or Document Library Form dialog box

  10. Save the CustomEditForm.aspx Web page.

  11. In the Folder List task pane, right-click on the list you're working with and then choose Properties from the popup menu. The List Properties dialog box opens.

  12. Click the Supporting Files tab in this dialog box. As shown in Figure 17.18, the Supporting Files tab allows you change the item forms for a particular list content type. Ensure that the content type for which you want to change the edit item form is selected in the Content type specific forms dropdown menu.

    Figure 17.18. Changing supporting files by using the List Properties dialog box

  13. Click Browse next to the Edit item form text field, choose CustomEditForm.aspx , and then click OK.

    NOTE

    Although the folder content type is listed as a choice in the Content type specific forms dropdown menu, it can't be really used in SharePoint Designer for changing the item form associations. Ensure that you select this content type while changing supporting file associations.

  14. Click Apply and then OK in the List Properties dialog box to change the supporting file association.

Now, when you try to edit an item based on the content type for which you changed the edit item form, the new CustomEditItem.aspx is displayed for use. As mentioned earlier, you can modify the look and feel of the Data Form Web Part in SharePoint Designer and implement customized branding and formatting to your item form pages just like any other Web page inside a SharePoint site.

17.2.4. Using data view controls

The SharePoint Controls section in the Toolbox task pane hosts a number of controls especially for use in the Data Form Web Part. While the Data Form Web Part uses these controls internally for many operations, you can use the Toolbox task pane to insert and configure these controls manually for specific operations.

For example, while filling a new item form, you might want to have your user choose from a list of existing values (a lookup) rather than having to type them manually. In such a case, you can replace the default text fields with a Data View DropDownList control and configure it to show the values from a data source. The following exercise shows how you can accomplish this by using the Data View controls:

  1. On a SharePoint site, create a new Web page and then insert a new item form for a data source, such as an XML file, by using the New Item Form menu option in the Data Source details task pane. The Data Form Web Part uses the text box controls by default for columns.

  2. Delete the text box for the column that you want to create a lookup for.

  3. Switch to the Data Source Library task pane and then click the data source from where the values of the lookup should be retrieved.

  4. Click the Insert Data Source Control menu option to insert a data source control for this data source on the Web page.

  5. Using the Toolbox task pane, double-click the Data View DropDownList control to insert it at the location of the cursor. As shown in Figure 17.19, the Common DVDropDownList Tasks menu opens in the Design view.

  6. Click the Data Fields link in the Common DVDropDownList Tasks menu to open the Change Data Bindings dialog box.

    Figure 17.19. The Common DVDropDownList Tasks menu

  7. In the Select a field to save values to dropdown menu, select the column for which you want to use the lookup for, choose the data source inserted in step 4, and then specify the data fields to be used for display text and the value of the lookup.

  8. Click OK, save the Web page, and then preview it in a browser.

Rather than having to manually type the value of the column, the user can pick it from a lookup. You can use the similar approach to work with other Data View controls provided in the Toolbox task pane.

One interesting data view control that I want to mention is the Form Action Button (and Form Action Hyperlink). When you insert a data form on the Web page, the action buttons (such as Save, Cancel, Edit, etc.) that are inserted actually have form actions associated with them. If you right-click the Save button and then choose Form Actions from the popup menu, in the Form Actions dialog box that opens, the chosen action for the Save button is Commit. This is shown in Figure 17.20.

The Actions List shows the available actions that you can associate with the buttons. The following actions are available to you when working with Data View Form Actions buttons. Note that you can have multiple form actions associated with a form action button:

  • Commit: Updates the data from the form inside the associated data source

  • Refresh: Removes the changes made to the data inside the forms and refills it with the data from the data source

  • Cancel: Cancels the changes that were made to the data

  • Navigate to source: Takes the user to the page that's specified by the query string variable Source

  • Navigate to page: Takes the user to the page specified. When you choose this option, the Settings button becomes enabled in the Form Actions dialog box, allowing you to specify the target page.

  • Custom Action: Allows you to start a workflow when the form action button is clicked. The Settings button in the Form Actions dialog box takes you to the SharePoint Designer's Workflow Designer interface.

NOTE

For more on creating workflows, see Chapter 20.

Figure 17.20. The Form Actions dialog box

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.191.189.23