Your Federal Quarterly Tax Payments are due April 15th Get Help Now >>

Microsoft Office SharePoint Designer 2007 - Data Form by ggh14149

VIEWS: 93 PAGES: 16

									Hands-on Lab Overview

   1. Introduction

  HOL481: Microsoft Office SharePoint Designer 2007 - Data Form Web Part
   2. Technologies Highlighted

             Microsoft® Office SharePoint® Designer 2007
             Microsoft® Windows® SharePoint® Services 3.0
             Data Form Web Part
   3. Audience

           Developer – 400 level

   4. Scenario

          The lab is broken in to two stand alone segments. Creating a dashboard and creating a read/write data form web part.

   5. Purpose of Hands-on Lab

          This lab will give the participant an understanding of how Microsoft Office SharePoint Designer 2007 can customize SharePoint pages
          and applications using the Data Form Web Part.


Hands-on Lab

Discussion Points                                                           Actions taken

Exercise 1 – Create a Dashboard

This section covers how a site administrator can create a code free
dashboard site using Office SharePoint Designer 2007, Data View Web Parts
and out of the box Windows SharePoint Services 3.0 Web Parts.

                                                                                 Login using the following credentials:
                                                                                          o Username: administrator

                                                                            1
                                                                                           o Password: pass@word1
                                                                                           o Log on to: LITWAREINC
                                                                                 Wait for the Warmup Script to complete and the popup window to close.
                                                                                 Start SharePoint Designer: StartAll ProgramsMicrosoft
                                                                                  OfficeSharePoint Designer 2007
                                                                                 Open Internet Explorer
Convert to Data View                                                            In Internet Explorer select the Favorites SPD  Projects
                                                                                Return to SharePoint Designer
This section covers customizing a Data View Web Part that has been created      Select the Open Site option in the File menu
based on a List View Web Part. The first step in the process is converting      Enter http://moss.litwareinc.com/sites/spd/projects in the Site name text
the List View Web Part to a Data View Web Part. Once this has been done,          box
the display of the view can be altered using XSLT.                              Double-click on default.aspx and wait for the page to load
                                                                                Right-click on the Projects List Web Part in design surface of SharePoint
Using Split View to edit and configure Data View Web Parts allows a user to       Designer
gain the benefits of the menu driven Office SharePoint Designer 2007            Select the Convert to XSLT Data View option
interface and the power and flexibility of directly modifying the underlying
                                                                                Wait for it to complete, then click the Edit Columns… link
code.
                                                                                Add the ResellerID column
Converting the List View Web Part provides a starting point for the Data        Click the Ok button
View. Using the Common Tasks for the Data View columns can be added or          Select the Page  Split option from the View menu
removed.                                                                        In the Design area place the cursor in the cell containing the Status column
                                                                                  header




                                                                                  In the Code View area select and copy the content of the xsl:call-template tag
                                                                                  In the Code View highlight ResellerID just below the xsl:call-template tag




                                                                                  Paste the xsl:call-template
                                                                               2
                                                                                    Replace the fieldname, fieldtitle and displayname with ResellerID




SQL Data Views                                                                      Select the Right Web Part zone

This section covers creating a Data View Web Part bound to Microsoft SQL
Server 2005 data. This shows the flexibility of the Data View Web Part to
connect to multiple data repositories and display the data consistently.

Using the Reseller database in the AdventureWorksDW sample it is simple to
begin the process of customizing a Dashboard view. Data is pulled real-time
from the SQL database to show how the Data View presentation will look as
it is being designed.

Office SharePoint Designer 2007 allows the user to combine powerful HTML
design elements with the XSLT data transformation in a single design
interface. This allows the user to smoothly integrate their information into a
SharePoint site.

Data View Web Parts can also take advantage of additional input parameters          Select the Insert Data View option from the Data View menu
that are passed in through Web Part connections or query strings. These             Expand Database Connections in the Data Source Library pane
additional parameters can be used to drive dynamic changes in the content           Click on AdventureWorksDW Reseller and select the Show Data option
that is displayed, and give the capability to experience and interactive            Drag the ResellerName in to the Data View on the design surface
interface all without needing to write custom code.
                                                                                    Click on the fly out button for the Data View Web Part




                                                                                    Click on the Paging link and select the Limit total number of items displayed
                                                                                     to option

                                                                                 3
   Set the limit to 1
   Click the Ok button
   Click on the ResellerName text in the Data View
   Right-click the ResellerName and select Delete  Delete Rows
   Right-click the remaining table cell and select the Table Properties option
   Change the Columns to 2 and the Rows to 2
   Click the Ok button
   Place the cursor at the end of Blue Yonder Airlines and press the Enter key to
    make a new line
   Drag BusinessType under Blue Yonder Airlines in the upper left hand corner
    of the table




   Type Contact Information in the lower left hand cell and make it bold
   Type Enter to make sure there is a new line under Contact Information
   Drag AddressLine1 under Contact Information
   Type Enter to make sure there is a new line under Address1
   Drag Phone under AddressLine1




   Type Reseller Information in the upper right hand cell and make it bold
   Type Enter to make sure there is a new line under Reseller Information
   Type In business since: and drag YearOpened on to the line
   Type Enter to make sure there is a new line under YearOpened
   Type Company Size: and drag NumberOfEmployees on to the line
   Type Enter to make sure there is a new line under NumberOfEmployees
   Type Annual Sales: and drag AnnualSales on to the line
   Type Enter to make sure there is a new line under AnnualSales
   Type Bank: and drag BankName on to the line


4
   Type Business Relationship in the lower right hand cell and make it bold
   Type Enter to make sure there is a new line under Business Relationship
   Type Customer since: and drag FirstOrderYear on to the line
   Type Enter to make sure there is a new line under FirstOrderYear
   Type Last order placed in: and drag LastOrderYear on to the line
   Type Enter to make sure there is a new line under LastOrderYear
   Type Primary product line: and drag ProductLine on to the line
   Type Enter to make sure there is a new line under ProductLine
   Type Order frequency: and drag OrderFrequency on to the line
   Type Enter to make sure there is a new line under OrderFrequency




5
   Click on the Data View fly out button
   Click on the Parameters… link
   Click on the New Parameter button
   Set the Name to ResellerID
   Change the Parameter Source to Query String
   Click on the Conditional Formatting… link
   Click on the drop down for the current rule and select the Delete option
   Highlight the lower right table cell
   Click the Create button and select the Apply Formatting option
   Click on Click here to create a new clause…
   Set the Field Name to AnnualSales
   Set the Comparison to Less Than
   Set the Value to 10000
   In the Modify Styles wizard select the Background menu and set the
    background-color to red
   Click the Ok button
   Click on the Data View fly out button
   Click on the Data View Properties… link
   Check the Display text if no matching items are found checkbox
   Set the display text to No reseller’s selected.
   Click the Ok button
   Click on the Web Part Connections link
   Select Get Parameter From from the drop down

6
                                                                                  Click the Next button twice
                                                                                  Select Project List from the Target Web Part dropdown
                                                                                  Click the Next button
                                                                                  Set the Columns in Projects List to Reseller ID for the ResellerID input
                                                                                  Click the Next button
                                                                                  Select Reseller ID from the Create a hyperlink on drop down
                                                                                  Click the Next button
                                                                                  Click the Finish button
                                                                                  Click on the Data View fly out button
                                                                                  Click on the Filter: link
                                                                                  Click on Click here to create a new clause…
                                                                                  Set the Field Name to ResellerKey
                                                                                  Set the Value to [ResellerID]
                                                                                  Click the Ok button

Add Data Form                                                                     Click on the Left Web Part zone
                                                                                  Select the Insert Data View option from the Data View menu
This section covers how to create a Data Form Web Part that allows a user to      Click Project Submissions in the Data Source Library
submit and edit data to the data repository to which the Web Part is bound.       Select the Show Data option
This takes advantage of the Data View Web Part’s ability to both read and         Select the Title, ResellerKey, MinimumPaymentAmount, LastOrderMonth
write data to its data repository.                                                 and LastOrderYear columns
                                                                                  Click the Insert Selected Fields as… button
                                                                                  Select the New Item Form option
                                                                                  Type Ctrl-S to save

Exercise 2 – Read/Write Data View Web Part

In this exercise you will get an overview of Office SharePoint Designer 2007
improvements to the Data View Web Part including Write Support,
Related/Linked Data Sources, new Visual Web Developer Asp.Net 2.0 style
UI and XPath tools.

Create Data View                                                                  If it is not still running from Exercise 1 start SharePoint Designer: Start All
                                                                                   ProgramsMicrosoft OfficeSharePoint Designer 2007
                                                                                  Open the web site FileOpen Site…
                                                                                   http://moss.litwareinc.com/sites/template
                                                                                  Create a new page:
                                                                                    FileNewASPX
                                                                                  Insert a Data View Web Part:
                                                                                    Open the Data Source Library task pane: Task Panes  Data Source
                                                                                          Library
                                                                                    Expand the XML Files category, click on Products.xml, and select Show
                                                                                          Data
                                                                               7
                                 Click in the design surface, to set the insertion point.
                                 In the Data View Details task pane, select the fields “ProductName,
                                  UnitsInStock, UnitsOnOrder, and ReorderLevel” by holding the Ctrl key and
                                  clicking each value.
                                 Click the Insert Selected Fields as… button and select Multiple Item View




Insert a Formula Column      Insert a Formula Column that shows the total inventory value (the product of
                              UnitPrice and UnitsInStock)
                               Open the Action Panel by clicking the small triangle in the upper right of the
                                  data view.




                                 Select the option Edit Columns…

                          8
       Select Add Formula Column… and click Add >> to launch the XPath
        Expression Builder




       Double click or drag and drop UnitsPrice on the data tree.
       Click to the right of UnitPrice in the Edit XPath Expression: text area. Type
        “*” and then use the data aware IntelliSense to select UnitsInStock. Notice
        the live preview area towards the bottom of the dialog.




9
                                     Click OK in the XPath Expression Builder dialog.
                                     Click OK Edit Columns dialog.
                                     Switch to “Split View” by clicking the Split tab at the lower left of the design
                                      surface. In the “Design View” half, highlight the text that says “UnitPrice *
                                      UnitsInStock”. Notice the granular selection within the XSLT in “Code
                                      View”. Delete this text and type the words “Inventory Value.”
                                     Return to “Design View” by clicking the Design tab at the lower left of the
                                      design surface.

Add Conditional Formatting       Add conditional formatting to highlight low inventory
                                   Click next to one of the data values in the first row of your view. Using the
                                     Quick Tag Selector, select the whole row by clicking the TR button.




                             10
        Right click on the highlighted row and select Conditional Formatting…




        In the Conditional Formatting task pane, click Create and select Apply
         Formatting
        Click on the Click here to add a new clause… area to open the Condition
         Criteria dialog.
        Click on the Advanced… button to open the Advanced Condition dialog
        In the Edit the XPath expression section type: UnitsInStock <
         ReorderLevel




        Click OK in the Advanced Condition dialog




11
        Click OK in the Condition Criteria dialog
        The Modify Style dialog will appear, in the Category listbox, click
         Background.
        Set background-color to “#FFDDEE”.




12
                               Click OK.

Turn on Editing Mode       Open the Action Panel by clicking the small triangle in the upper right of the
                            data view.




                           Select Data View Properties… on the Action Panel

                           Select the Editing tab and check all the Check Boxes to enable auto-modes
                            then click OK.
                       13
    Save the page by typing Ctrl+S then press the Save button in the Save As
     dialog
     Now you are able to preview in the browser by pressing F12
      In the browser, click on the “Edit” hyperlink next to “Chai”
      Change the ProductName to “Chai Tea” and click the “Save” hyperlink
      Close the browser.

    In SharePoint Designer in the Data Source Details section press the Refresh
     data source link at the bottom to refresh the design page. Notice that the new
     value, Chai Tea, now appears in the design surface.

    Change the formatting of a template auto-mode.
      Open the Action Panel by clicking the small triangle in the upper right of the
        data view.




        In the Data View Preview: drop down, select “Edit Template”.
        The design surface now shows what appears when someone clicks Edit in
         the browser.
        Click on the first textbox, and using the Quick Tag Select, click on the <tr>
         to select the entire row.




        Launch the Quick Tag Editor: <tr> drop down  Edit Tag… or Ctrl+Q
        In the Quick Tag Editor add a style attribute to set the background-color to
         “ccccff”

14
                                              You have styled the edit template. Check it out in the browser to see your
                                               changes.
                                              Before the next section lets change the view back to the default.
                                              Open the Action Panel by clicking the small triangle in the upper right of the
                                               data view.




                                            In the Data View Preview: drop down, select “Default”.
                                          Use a consistent look and feel across pages with master pages
                                            Format  Master Page  Attach Master Page…
                                            Make sure Default Master Page is selected, and click OK.
                                            Make sure the entry reads (Body) | PlaceHolderMain
                                            Click OK.
                                            Save the page (Ctrl+S) and preview in the browser (F12).
                                            In the browser, click on the “Edit” hyperlink next to “Chai Tea” and notice
                                              the new formatting.

Bonus: Insert a Data View as a form       Create a new page in SharePoint Designer:
                                            Open SharePoint Designer
                                            FileNew  ASPX
                                          Insert a Data View Web Part:
                                            Open the Data Source Library task pane: TaskPane  Data Source
                                               Library
                                            Expand the XML Files category, click on Products.xml, and select Show
                                               Data
                                            Click in the design surface, to set the insertion point.
                                            In the Data View Details task pane, select the fields “ProductName,
                                               QuantityPerUnit, UnitPrice, UnitsInStock, and UnitsOnOrder” by holding the
                                               Ctrl button and clicking each value.
                                            Click the Insert Selected Fields as… button and select Single Item Form

                                      15
                                                                           Use a consistent look and feel across pages with master pages
                                                                             Format  Master Page  Attach Master Page…
                                                                             Make sure Use default Master Page is checked, and click OK.
                                                                             Make sure the entry reads (Body) | PlaceHolderMain
                                                                             Click OK.
                                                                           Save the page by typing Ctrl+S then press the Save button in the Save As
                                                                            dialog
                                                                            Now you are able to preview in the browser by pressing F12



Conclusion

   I.    Conclusion

         You’ve seen how Microsoft Office SharePoint Designer 2007 has amazing support for the Data Form Web Part that makes creating
         rich, powerful forms easier than ever. What was shown in this lab just scratches the surface of what these features can do and there are
         many more features that makes Microsoft Office SharePoint Designer 2007 the essential editing application for your Microsoft Office
         SharePoint site.




                                                                       16

								
To top