The Data View is a very flexible Web Part that you can create only by using SharePoint Designer . Like other Web Parts, a Data View follows these rules:
● It can be placed inside and outside EmbeddedFormField controls or Web Part zones .
● It has standard properties shared by all Web Parts, such as Title, Height, Width, and Frame State .
● Depending on the settings of the Web Part zone properties, a Data View can be relocated to other Web Part zones by using the browser .
● Web Part properties can be accessed through the browser’s Web Part tool pane .
● When inside a Web Part zone, a Data View supports personal and shared views . Additionally, you can edit the XSLT and the parameters passed to the XSLT without need-ing to open the page in SharePoint Designer .
The Data View and the XLV Web Part are very similar in their functionality . The XLV Web Part is used to display and modify content stored in SharePoint lists and libraries and can be created by using the browser or SharePoint Designer . The XLV Web Part is based on list views and can easily be modified in the browser or configured to use an XSLT . Data Views can be used to display and modify content in data sources, including lists and libraries . Like the XLV Web Part, a Data View uses XSLT to present data and can be modified or deleted by using the browser . However a Data View can only be created by using SharePoint Designer, and unlike SharePoint Designer, the browser provides little help in writing XSLT .
In this exercise, you create an XLV Web Part and a Data View that display the contents of a list .
SET UP Using SharePoint Designer, open the site you created from the
SPDSBSPracticeSite Starter.wsp practice file for this book. The practice file is located in the Chapter05 practice file folder. Turn off the ASP.NET Non-Visual Controls option if it is still on by using the Visual Aids command on the View tab.
1.
In the Navigation pane, click Site Pages . Click the icon to the left ofCreateDVWP.aspx, and then on the Pages tab, click Edit File in the Edit group . Tip You can open a page in edit mode by double-clicking the icon to the left of the file name in the Site Pages gallery.
The CreateDVWP page opens in edit mode .
2.
Click Wiki Content .A purple border labeled PlaceHolderMain (Custom) surrounds a number of rect-angles . The top rectangle contains the text Wiki Content, and the other rectrect-angles have faint dotted borders .
Note The CreateDVWP page is a Wiki page. The top rectangle is the area that is contained in the EmbeddedFormField control and can be modified when you click Edit Page in the browser. The bottom rectangle is a Web Part zone. Although Web Parts placed in this zone can be modified by using the browser, Web Parts cannot be added or deleted from this zone with the browser. To clearly see these two rectangles in SharePoint Designer, add some text to the page when you create a Wiki page in the browser.
3.
Click inside the rectangle below the rectangle that contains the text Wiki Content . The Web Part zone labeled Bottom appears .4.
On the Insert tab, click Data View in the Data Views & Forms group, and then click SalesReport .Troubleshooting If the Data View command on the Insert tab is not active, you have not clicked inside the faint dotted rectangle.
The SalesReport XLV is created on the page, and the <WebPartPages:XsltListView WebPart> tag is highlighted in orange on the Quick Tag Selector on the workspace status bar . Within the XsltListViewWebPart control, an HTML table appears with a number of columns, such as Customer, Brand, and Material, together with the list data in the body of the table as HTML rows and cells .
Note The XLV Web Part uses the default list view as a basis for displaying columns and content. You can then use the commands on the Design tab to modify the initial presentation of the data.
Edi Fi e
Da a View
5.
On the List View Tools, Web Part tab, in the Web Part Title box, delete SalesReport and type Sales Report XLV Web Part .Tip Whenever you add a Web Part to a page, always give the Web Part a unique title that describes the purpose of the Web Part. This acts as an aide-memoire when you or other team members modify the page and helps when you identify Web Part connections.
6.
In the top rectangle, click below the text Wiki Content so that an empty <p> tag appears . On the Insert tab, click Data View in the Data Views & Forms group, and then click Empty Data View .A Data Form Web Part control is added to the page, and the
<WebPartPages:DataFormWebPart> tag is highlighted in orange on the Quick Tag Selector .
7.
Click Click here to select a data source . The Data Source Picker dialog box opens .Da a View
8.
Under Lists, click SalesReport, and then click OK .The Data Source Details task pane opens, and to the right of Row, [1/30] denotes that the list contains 30 list items . The 1 indicates that the value of the first item is displayed below Row .
Tip Unlike when you add an XLV Web Part, when you create a Data View, no criteria are used to display the list items. If you want your team members to easily amend the columns and the list item criteria in the browser, use the XLV Web Part when working with lists and libraries.
9.
In the Data Source Details task pane, to the right of Row, click the Next arrow to view the second list item’s value .The text in the square brackets to the right of Row indicates you are now viewing the second of 30 list items .
Tip You can use the Next and Previous arrows to review the contents of the list without displaying the list in a browser.
10.
In the Data Source Details task pane, click Customer . While holding down the CTRL key, click the fields in the following order, Brand, ListPrice, Quantity Purchased, and Total Purchased . Then click Insert Selected Fields as, and click Multiple Item View .An HTML table appears in the DataFormWebPart control with the Customer, Brand, Quantity Purchased, ListPrice, and Total Purchased columns in the order you selected them, displaying sets of 10 items . The ListPrice column number is underline in red, indicating a possible spelling error . If the red underline is not displayed, click ListPrice . Tip If you find that you added more columns than you need, click Add/Remove
Columns on the Options tab to remove them.
11.
On the Options tab, click Data Source Details in the Data group . The Data Source Details task pane closes .12.
Right-click the CreateDVWP.aspx tab, and then click Save . Click Yes to reload the page to see the results of the save operation .CLEAN UP Leave SharePoint Designer open if you are continuing to the next exercise.
Nex
Save