Uses of SharePoint Designer 2010
You can use SPD 2010 to achieve the following:
• Customize the look and feel of the application.
• Create and manage data sources such as lists.
• Create views and forms to work with the data sources.
• Create custom workflows.
You look at the first three items in this hour. Workflows were already covered in Hour 15, “Understanding SharePoint 2010 Workflows.”
Customize the Look and Feel of the Application
Often the default master page is not sufficient to address all your needs. Suppose you are creating a SharePoint site for a client, and you have to change the branding based on client requirements. SPD 2010 provides a lot of functionalities to help you address all your UI needs. The following sections look into some of the commonly used UI functionalities in SPD.
Modifying/Creating Master Pages in SPD
You already learned about master pages in Hour 7, “Understanding SharePoint 2010 Server Side Development.” You now look at modifying master pages in SharePoint Designer 2010.
Create and Manage Data Sources
SharePoint allows the creation of data sources from the designer itself. The most common sources of data in SharePoint are list and libraries. SharePoint has some generic templates for creating basic lists such as Announcements, Tasks, and so on. You also have the option of creating custom lists.
Try It Yourself: Create Custom Lists Using SPD 2010
1. Open the website http://splearn in SPD 2010.
2. Select Lists and Libraries in the Navigation pane, as shown in Figure 19.3.
Figure 19.3. Selecting Lists and Libraries
3. Select Custom List from the Ribbon pane, as shown in Figure 19.4.
Figure 19.4. Selecting Custom List
4. Name the list Authors and select A Custom List to Store Authors for the Description. Click OK.
Modifying Site Layouts Using SPD 2010
This section explains how you can edit the site layout using SPD 2010. To edit site layouts, first begin by making a copy of your home page. In this example, change the position of Add Document under the Shared Documents web part, as shown in Figure 19.5.
Figure 19.5. Shared Documents web part
Try It Yourself: Edit Site Layout in SPD 2010
1. Navigate to Site Pages under the Navigation section.
2. Make a copy of Home.aspx.
3. Rename the file to New_Home.aspx.
4. Select New_Home.aspx from the Navigation section.
5. Check Out the file.
6. Click Edit File from the Galleries section.
7. Switch the designer to Split mode.
8. Select Add Document from the designer.
9. Add align="right” as a property to the <td> housing the Add Document control, as shown in Figure 19.6.
Figure 19.6. Modifying site layout in SPD 2010
10. Save the page.
11. Now navigate to New_Home.aspx, and you can see that the changes are reflected in the page, as shown in Figure 19.7.
Figure 19.7. Modified site layout
Creating Site Columns
Site columns are a fundamental element of SharePoint 2010. These are defined at the site level once and can be reused again and again.
Try It Yourself: Create Site Columns
1. Open http://splearn in SPD 2010.
2. Select Site Columns from the Navigation pane, as shown in Figure 19.8.
Figure 19.8. Site Columns in SharePoint Designer
3. Select New Column from the ribbon control, as shown in Figure 19.9, and select Hyperlink or Picture from the drop-down.
Figure 19.9. New Site Column
4. Name the column Picture and set “Pic of the Author” as the description.
5. Click OK.
You just created a new site column named Picture whose scope is the site splearn. You can use this site column throughout the site wherever you need a picture to be embedded in a list.
Creating Content Types Through SPD 2010
You learned about content types in Hour 12, “Enterprise Content Management—Understanding Document Management.” SPD 2010 also allows you to create new content types, and these can be added to lists and libraries at the site level. A content type created at a site level is accessible throughout the site/site collections.
Try It Yourself: Create a Content Type in SharePoint Designer 2010
1. Open http://splearn in SPD 2010.
2. Navigate to Content Types in the Navigation pane.
3. Click Content Type from the new section, and the Create a Content Type dialog box appears, as shown in Figure 19.10.
Figure 19.10. The Create a content type dialog box
4. Enter the name of the content type in the Name field.
5. Enter a description in the Description field.
6. From the Select Parent Content Type From list, select the group from which you want to select the parent content type.
7. From the Select Parent Content Type drop-down, select the content type on which you want to base your content type.
8. To create the content type under a new group, select the New Group button and enter the new group name.
9. To create the content type under an existing group, select the Existing Group button and choose the existing group from the drop-down.
10. Click OK to create a new content type.
1. Open http://splearn in SPD 2010.
2. Navigate to Content Types in the Navigation pane.
3. Select the content type to be edited.
4. Under Content Type Information in the Galleries section, click Name to edit the name of the content type, click Description to update the description, and select the new group from the Group drop-down to update the group.
5. Click Save to update the changes.
Adding Data View Through SPD 2010
A data view web part allows you to display data from SharePoint lists with filtering, grouping, and desired formatting. You can add a DataView web part to a page through SPD 2010.
Try It Yourself: Add DataView through SPD 2010
1. Open http://splearn in SPD 2010.
2. Navigate to Site Pages in the Navigation pane.
3. Create a new page named DataViewExample.aspx.
4. Select Data View under the Insert tab, as shown in Figure 19.11.
Figure 19.11. Adding a data view web part
5. Select the list for which the data view needs to be added.
6. Save the page.
7. Navigate to the DataViewExample.aspx file in the browser.
1. Open http://splearn in SPD 2010.
2. Navigate to Site Pages in the Navigation pane.
3. Navigate to DataViewExample.aspx.
4. Select the DataView web part and click Add or Remove columns, as shown in Figure 19.12.
Figure 19.12. Adding and removing columns in the DataView web part
5. To add a new field, select the column under Available Fields and click Add.
6. To remove a particular field, select the column from Displayed Fields and click Remove.
7. To change the order of the columns, select the column under Displayed Columns and select Move Up or Move Down.
8. Click OK.
Filter Data View
The DataView web part comes with built-in filtering capabilities. In this section you see how you can add filtering to your DataView web part:
Try It Yourself: Filter Data View Using SPD 2010
1. Open the view in SPD 2010.
2. Click Filter under the Options tab. The Filter Criteria dialog box appears, as shown in Figure 19.13.
Figure 19.13. The Filter Criteria dialog
3. Under the Field Name select the field you want to filter.
4. Select the operator you want to use under the Comparison column.
5. Type the criteria for filtering under the Value box.
6. To add another criteria, click the And/Or box and select the operator.
7. Select the Click Here to Add a New Clause link to add new criteria.
8. Repeat steps 3 through 6.
9. Click OK.
Sorting and Grouping
Try It Yourself: Sort Data View
1. Click Sort and Group in the Options tab. The Sort and Group dialog box appears, as shown in Figure 19.14.
Figure 19.14. The Sort and Group dialog
2. From Available Fields, select the fields to be sorted on and click Add.
3. Under Sort Properties, select how the fields are to be sorted (Ascending or Descending).
4. If sorting is to be applied on multiple fields, select the columns from the Available Fields.
5. To change the sort order, click Move Up or Move Down.
6. Click OK.
Paging in a DataView Web Part
Try It Yourself: Page a Data View
1. Click Paging under the Options tab as shown in Figure 19.15.
Figure 19.15. Paging options
2. Choose the number of records to be displayed per page.