Web Interface Design with SharePoint Designer 2010

This chapter is from the book 

In This Chapter

• Introduction to SharePoint Designer
• Moving on from In-Browser Customization
• Opening SharePoint Sites in SharePoint Designer
• Exploring the SharePoint Designer Interface
• Accessing Content via the Navigation Pane
• Administrating Sites in SharePoint Designer
• More SharePoint Designer Configuration Options

In Part I, "Welcome to SharePoint Server 2010!" of the book, you learn how to customize SharePoint 2010 sites using in-browser tools. In Part III, "Styling and Designing SharePoint Sites," you learn how SharePoint Designer 2010 can extend the Web interface customizations and go beyond that which you can achieve using the browser to design and customize your SharePoint sites.

This chapter provides an overview of SharePoint Designer 2010. You will learn about the new user interface and how to use the product to access and work with existing SharePoint sites and create new SharePoint sites. If you have worked with SharePoint Designer 2007, this chapter explains the differences between SharePoint Designer 2007 and SharePoint Designer 2010, including redundant features.

Introduction to SharePoint Designer

SharePoint Designer 2010 is the ultimate tool for customizing, prototyping, and designing SharePoint 2010 sites. Built on ASP.NET 3.5, SharePoint Designer 2010 provides IT pros, information workers, and Web designers the ability to create code-free SharePoint 2010 solutions, including powerful integration capabilities with data sources such as SQL databases and Web services, business intelligence solutions via the Business Connectivity Services (BCS) model, and custom workflows that can be adapted to existing business processes. A what-you-see-is-what-you-get (WYSIWYG) interface enables Web designers to gain a more realistic view of design and customization ahead of deploying custom attributes to SharePoint sites, such as master pages and CSS files.

The scope of SharePoint Designer 2010 features includes:

• Code-free customizations
• Prototype design and customization
• Design and create SharePoint master pages and CSS files
• Modify and customize themed CSS files
• Style SharePoint list views, including conditional formatting and use of XSLT
• Create multiple forms for lists, such as edit and display forms
• Create new SharePoint sites
• Create new lists, document libraries, and site columns
• Add new SharePoint permission groups and modify group membership
• Create new publishing page layouts and new Web part pages
• Create declarative list and reusable workflows, including creation of custom workflow forms and approval tasks
• Import and export workflows to Visio 2010
• Connect to SQL server databases and other data sources and establish powerful querying and filtering between linked data sources
• Create interactive data connections to external data including create, read, update and delete (CRUD) operations
• Save sites as templates (WSP files) and export those WSP files for further development in Visual Studio 2010. Additionally, you can also export workflows to WSP for further development in Visual Studio 2010.

  NOTE

  Just as with SharePoint Designer 2007, SharePoint Designer 2010 is available from Microsoft as a free download and includes both the x64bit (http://www.microsoft.com/downloads/en/details.aspx?FamilyID=566d3f55-77a5-4298-bb9c-f55f096b125d&displaylang=en) and x32bit (http://www.microsoft.com/downloads/en/details.aspx?FamilyID=d88a1505-849b-4587-b854-a7054ee28d66&displaylang=en) versions of the product.

Who Is SharePoint Designer For?

I could potentially write a small manuscript on who could use SharePoint Designer 2010, along with all the types of scenarios and reasons for using it. But, typically, SharePoint Designer is seen as the ideal tool for web designers and information workers who are responsible for designing and customizing SharePoint sites. Site owners, or administrators, can take advantage of the new rich editing features in SharePoint Designer 2010 to administer sites and create new content, such as lists and document libraries. Developers will find SharePoint Designer an ideal tool for prototyping solutions, including creating and working with "codeless" solutions. They will also leverage the share capability between SharePoint Designer 2010 and Visual Studio 2010, including options to import custom workflows and prototyped sites into Visual Studio 2010 from SharePoint Designer 2010. Business analysts will love the extensible workflow opportunities in SharePoint Designer 2010 and will readily embrace the built-in workflow wizards and integration with Visio 2010 to create robust and reusable workflows.

Limitations of SharePoint Designer

Obviously, although SharePoint Designer 2010 is the ideal tool for customizing, designing, integrating additional functionality, and prototyping SharePoint sites, it does have several limitations. The key limitations are mentioned here.

SharePoint Designer is not Visual Studio, so it cannot be used in the following scenarios:

• As a compiler, that is, code compilation; it does not include a code behind (page) option and cannot attach .NET or SharePoint classes.
• As a tool for creating complex Web parts, Features, or Solutions, such as packages for deploying common customizations to SharePoint servers or across multiple SharePoint site collections.
• For the creation of workflow activities.
• As a debugger.
• To create Wiki pages.

Changes from SharePoint Designer 2007 to SharePoint Designer 2010

A major change between SharePoint Designer 2007 and SharePoint Designer 2010 is that SharePoint Designer 2010 includes much tighter integration with SharePoint 2010 sites and now includes the ability to create common site objects such as lists and document libraries, content types, and columns. Another major change is that SharePoint Designer 2010 can only be used with SharePoint 2010 sites, but SharePoint Designer 2007 could be used to customize and create both SharePoint Server 2007 and non-SharePoint websites.

The SharePoint Designer 2010 user interface has undergone significant changes. If you review, for a moment, the typical home page of SharePoint Designer 2007, as shown in Figure 7.1, you see some familiar sections including menus, task panes, and a working space in the middle of the page. SharePoint Designer 2007 leveraged task panes, those sections on either side of the main working space, significantly for editing purposes which meant consuming valuable screen real estate.

By comparison, the SharePoint Designer 2010 screen, shown in Figure 7.2, provides a new and fresher look to that of its counterpart shown in Figure 7.1. Although you can still use task panes for editing purposes, there is no longer that same level of dependency on using them. This is largely due to the fact that SharePoint Designer 2010, just like SharePoint 2010, includes the contextual ribbon interface, which can be leveraged for accessing common editing actions.

To gain an overall picture of changes between SharePoint Designer 2007 and SharePoint Designer 2010, let's quickly examine the new features and the features removed in SharePoint Designer 2010.

New or Improved Features

The following key features are new to, or improved in, SharePoint Designer 2010:

• Contextual ribbon interface
• A new backstage screen for managing common application configuration settings, uploading custom add-ons, and customizing the SharePoint Designer 2010 ribbon
• Manage existing site list and document library settings
• Create new lists and document libraries
• Create and work with site columns
• Style list and document library views using XSLT
• Reusable workflows are no longer limited to list-specific workflows
• Site Workflows are no longer required to be triggered on a list item
• Ability to export reusable workflows to Visual Studio 2010
• Import and export capabilities for workflow design with Visio 2010
• Replace list and document library forms with InfoPath forms (SharePoint Server 2010 Enterprise only)
• Add multiple forms to lists and document libraries and content types
• User permission capabilities including the ability to add new users to SharePoint groups, add new SharePoint groups, and assign existing site permission levels to SharePoint groups
• New slick editing and CSS tools, including the Skewer Click tool for quickly accessing a page's tag properties
• Create external content types and external lists with CRUD operations (previously known in SharePoint 2007 as the Business Data Catalog)

Features Removed

The following key features, previously included in SharePoint Designer 2007, have been removed in SharePoint Designer 2010:

• Solid dependency on use of task panes
• Import and export of Web packages
• Backup and restore sites and site collections
• The ability to attach a list or document library from within another site in a site collection when working with data sources
• Site usage reports
• Publish websites and file transfer protocol (FTP) functionality
• Layout table tools
• The ability to open non-SharePoint sites and Web pages outside of a SharePoint 2010 site

For a comprehensive description of changes in SharePoint Designer 2010, see http://technet.microsoft.com/en-us/library/cc179083.aspx.

Compatibility and Product Versions

The following are important factors when considering using SharePoint Designer to customize and design your SharePoint sites:

• The current version of SharePoint you are running.
• Whether, as part of your SharePoint Server 2007 or Windows SharePoint Services 3.0 to SharePoint 2010 upgrade, you might be required to also upgrade earlier customizations done using SharePoint Designer 2007 to SharePoint Designer 2010. This might include Data View Web parts, master pages, and CSS files.
• You have other, non-SharePoint, websites, such as ASP.NET 2 websites, that you also want to customize and design using SharePoint Designer.

In the first instance, you need to be aware that SharePoint Designer 2010 cannot be used with SharePoint Server 2007 or Windows SharePoint Services 3.0 sites. By the same token, SharePoint Designer 2007 cannot be used with SharePoint 2010 sites.

In the second instance, you should be aware that both SharePoint Designer 2007 and SharePoint Designer 2010 can co-exist on the same computer. However, this works best when you install SharePoint Designer 2010 first and then install SharePoint Designer 2007. Attempting to install SharePoint Designer 2010 on a computer where SharePoint Designer 2007 is currently installed instead attempts to upgrade SharePoint Designer 2007 to SharePoint Designer 2010.

In the third instance, SharePoint Designer 2010 is specifically for use with SharePoint 2010 sites and cannot be used to work with non-SharePoint sites, such as static HTML sites or other non-SharePoint web pages. Attempting to open a non-SharePoint page in SharePoint Designer 2010 results in a dialog as shown in Figure 7.3.

For customizing non-SharePoint sites, Microsoft Expression Web is recommended. However, be aware that Expression Web also cannot be used with SharePoint sites. If you attempt to open a SharePoint site or page using Microsoft Expression Web then a dialog displays as shown in Figure 7.4.

SharePoint Designer 2010 System Requirements

Like SharePoint Designer 2007, SharePoint Designer 2010 (both the 32-bit and 64-bit versions) is a free download from Microsoft. However, there are some core system requirements you should be aware of before installing SharePoint Designer 2010. These include

• Supported operating systems are Windows 7, Windows Vista Service Pack 1, Windows XP Service Pack 3, Windows Server 2003 and 2003 SP1, Windows Server 2003 R2 with MSXML 6.0 installed, Windows Server 2008, Windows Server 2008 R2
• The ASP.NET 3.5 framework must be installed
• A 500MHz processor or greater computer
• Approximately 256MB or greater memory allocation
• Approximately 2.5GB of disk space
• Browser support for previewing pages, including Internet Explorer 7 or greater and Firefox 3.5 or greater

SharePoint Designer Security and Permission Settings

One of the most frequently asked questions around deploying and using SharePoint Designer within an organization is around locking down access and/or controlling what users can do. For instance, IT administrators are often reluctant to give users access to SharePoint Designer because they are concerned with administrative overhead, such as accidental deletion of SharePoint sites or content or changes that cannot be easily undone, especially where access is given on a live and in-production SharePoint site. Although I strongly recommend that users be thoroughly trained in SharePoint Designer 2010 ahead of using it to customize and design SharePoint sites, SharePoint 2010 includes options around locking down access to SharePoint Designer to help avoid those kinds of issues explained earlier. In this section, you learn about the security settings that you can use to limit access to and editing of SharePoint sites in SharePoint Designer 2010.

How We Did It in SharePoint Designer 2007

If you've previously used SharePoint Designer 2007, then you might already be familiar with the concept of Contributor Settings. Although SharePoint Designer 2007 leveraged existing user permissions in SharePoint Server 2007 sites, limiting user access to editing features in SharePoint Designer 2007 meant additional configuration. Contributor Settings are redundant in SharePoint Designer 2010 and control of user access in respect to working with SharePoint Designer is now centralized via user permissions set on the respective SharePoint 2010 site.

Additionally, if you wanted to completely disable access to SharePoint Designer 2007 and stop users from opening SharePoint sites in SharePoint Designer, you needed to modify the respective site definition's onet.xml file, located in the Web front-end server, and add the parameter DisableWebDesignFeatures="wdfopensite" to the site definition's Project tag. Although this same parameter may be used in SharePoint 2010 site definitions, it is not necessary to use it in order to disable use of SharePoint Designer 2010 on a site collection. Access to SharePoint Designer 2010 can be blocked via settings in the Web interface.

Drilldown into Controlling Access to SharePoint Designer 2010

Locking down and controlling access to SharePoint Designer 2010 can be done via the Web interface, without the need for additional configuration in SharePoint Designer or accessing the Web front-end server to modify a SharePoint site definition's onet.xml file. In addition, access to SharePoint Designer 2010 can be locked down at either the Web application or site collection levels.

As Table 7.1 shows, controlling access to SharePoint Designer 2010 offers a flexible model and one that should be considered as part of your upfront SharePoint deployment considerations. For instance, controlling SharePoint Designer 2010 settings at Web application level means that any site collections created under that Web application inherits those settings. At the other end of the spectrum, the permission model is flexible enough to allow site owners to limit what users can do with SharePoint Designer 2010 on a site-by-site basis by leveraging SharePoint 2010 permissions.

Table 7.1. SharePoint Designer 2010 Permission Scopes

Permission Scope	Details
Web Application	Stop or limit use of SharePoint Designer 2010 in all Site Collections created under a Web application
Site Collection	Stop or limit use of SharePoint Designer 2010 in sites created within a Site Collection
Site (Web) Permissions	Limit access to SharePoint Designer 2010 on a site-by-site basis by leveraging SharePoint Groups and user permissions

Obviously, establishing the degree to which you need to lock down, or disable, SharePoint Designer is a critical part of your upfront design decisions and planning. For instance, if you have MySites deployed throughout your organization, you might want to allow users to edit their MySites in SharePoint Designer but not allow them to edit other sites. In this case, your upfront architecture, including Web application design, is important to ensure that you have that flexibility.

Let's review each of the SharePoint Designer 2010 permission scopes, commencing at the Web application level.

Web Application SharePoint Designer Settings

SharePoint Designer settings at the Web application level provide the greatest amount of control and can limit everyone, including site collection administrators, from opening sites in SharePoint Designer 2010. There are four lockdown settings available as shown in Figure 7.6 and Table 7.2. By default, when a Web application is created, all four options are enabled.

Table 7.2. SharePoint Designer Settings Explained

Setting	Associated Checkbox Description	Result
Allow SharePoint Designer in this Web Application	Enable SharePoint Designer	By unchecking this option, you effectively remove the option to edit sites within site collections under the current Web application in SharePoint Designer 2010 for all users, including site collection administrators.
Allow Site Collection Administrators to Detach Pages from the Site Template	Enable Detaching Pages from the Site Definition	Specify whether to allow site administrators to detach pages from the original site definition using SharePoint Designer. If you uncheck this option at Web application level, then site collection administrators, site owners, and designers are not able to modify pages created via the Web interface in SharePoint Designer. For instance, attempting to edit a Wiki page that has been created in the Wiki library in the Web interface is not possible and the option to Edit File in Advanced Mode is disabled.
Allow Site Collection Administrators to Customize Master Pages and Layout Pages	Enable Customizing Master Pages and Layout Pages	Specify whether to allow site collection administrators to customize Master Pages and Layout Pages using SharePoint Designer. Unchecking this option removes the Master Page and Page Layouts tab from the navigation pane in SharePoint Designer. If a user attempts to access and edit master pages via the All Files, _catalogs, master page, folder then they will be challenged if they attempt to open a master page or page layout. However, if you have a site already open in SharePoint Designer 2010 and then disallow this option at the Web application level, it actually does take effect as soon as you return to your existing SharePoint Designer session. The Master Page and Page Layouts tabs disappear from the left navigation, and you are challenged if you attempt to edit a master page through the All Files route. However, if you already have a master page checked out and open when this setting is disabled, you are able to still edit, save, check in, publish major, and approve.
Allow Site Collection Administrators to See the URL Structure of Their Web Site	Enable Managing of the Web Site URL Structure	Specify whether to allow site administrators to manage the URL structure of their website using SharePoint Designer. Unchecking this option removes the All Files tab from the navigation pane in SharePoint Designer, which then avoids access to viewing a site's files in entirety including hidden folders (those folders preceded by an underscore, such as _foldername.

To access SharePoint Designer settings at the Web application level, follow the steps listed below:

1. On the SharePoint Web front-end server, open the SharePoint Central Administration site.
2. On the home page of Central Administration, in the left-hand menu, click Application Management.
3. On the Application Management page, under Web Applications, click Manage Web Applications.
4. Click the Web application to which you want to apply SharePoint Designer settings, for example, SharePoint - 80.
5. In the ribbon, click the General Settings drop-down and click SharePoint Designer.
6. View available settings on the subsequent SharePoint Designer Settings dialog.
7. Click the X in the upper-right of the dialog to close and keep existing settings or uncheck one or more of the options and then scroll to the bottom of the dialog and click OK to save the updated settings. Remember, settings you choose at the Web application level are inherited by site collections under that Web application.

Table 7.2 summarizes each of the SharePoint Designer settings.

Site Collection SharePoint Designer Settings

Depending on SharePoint Designer settings at the Web application level, site owners and designers (or members of the SharePoint Designers group, or users with the Design permission level) are able to use SharePoint Designer to edit SharePoint sites. If one or more SharePoint Designer options have been disabled at the Web application level, then those options are disabled and not accessible at the site collection level.

For example, in Figure 7.7, SharePoint Designer has been enabled at the Web application level, but the other three options have been disabled. In this scenario, site owners and designers are not able to access those related features in SharePoint Designer, such as editing master pages and page layouts. However, site collection administrators continue to have full access to the full suite of SharePoint Designer editing capabilities.

The SharePoint Designer settings at site collection level are the same as those at the Web application level, with one main exception. If SharePoint Designer is disabled at the site collection level then the site collection administrator is still able to launch site collection sites (Webs) in SharePoint Designer 2010 and access all SharePoint Designer settings. This is also applicable where other SharePoint Designer features have been disabled at the site collection level; site collection administrators continue to have full access to editing sites in SharePoint Designer 2010. In other words, if you totally want to lock down access to SharePoint Designer, including access for site collection administrators, you need to lock it down at the Web application level.

To access SharePoint Designer settings at the site collection level, follow the steps below:

1. With the root site of your SharePoint site collection opened in the browser, click the Site Actions button and then click Site Settings.
2. On the Site Settings page, under Site Collection Administration, click SharePoint Designer Settings.

Site User Permissions and SharePoint Designer

In addition to options for locking down access to SharePoint Designer at the Web application and site collection levels, you may also leverage user permissions for granting or denying access to SharePoint Designer. In order to open a SharePoint Site in SharePoint Designer, a user must be a member of the SharePoint Designers group, or be within a SharePoint group that has the Design permission level assigned to it. Alternatively, the Design permission level can be applied directly to the user irrespective of group membership, which provides the following rights: Add and Customize Pages, Apply Themes and Borders, Apply Style Sheets, and Use Remote Interfaces. Additionally, SharePoint Designer must be enabled at both the Web application and site collection levels. By default, when a Web application is created, SharePoint Designer is enabled.

To help determine the currently logged in user, SharePoint Designer 2010 includes the option to check the current user, as shown in Figure 7.8. This is useful for working between different permission scenarios when customizing and designing in SharePoint Designer and you want to check visibility and permissions on certain actions.

Clicking the user icon reveals the identity of the current logged in user as shown in Figure 7.9, and also includes the option to close out of your current session and log in as a different user.

If you are not a member of the SharePoint Designer group (nor have Design permissions otherwise) and attempt to open a site in SharePoint Designer 2010 then the Edit Site in SharePoint Designer menu option is absent. SharePoint Designer options in the ribbon, although still present, are disabled.

Behavior exhibited when leveraging user permissions for controlling access to SharePoint Designer differs to that when disabling SharePoint Designer at the Web application or site collection levels. Where SharePoint Designer is disabled at the Web application or site collection levels, the Web interface options to edit in SharePoint Designer 2010, such as the option to Edit in SharePoint Designer via the Site Actions menu, are still present. Where a user has insufficient permission to edit sites in SharePoint Designer, those same SharePoint Designer editing options are absent or disabled, as shown in Figure 7.10 (the Modify View and Edit List options are disabled in the ribbon) and Figure 7.11 (the Site Action menu option to Edit Site in SharePoint Designer is absent).

If a user with insufficient permissions to edit a SharePoint site in SharePoint Designer attempts to independently launch a site in SharePoint Designer 2010 by directly opening the SharePoint Designer application from his own machine and then entering the site's URL, he receives the error dialog shown in Figure 7.12.

SharePoint Foundation 2010 Permissions

Unlike SharePoint Server 2010, in a SharePoint Foundation 2010 server there is no out-of-the-box SharePoint Designer group. However, there is a Design permission level, which equates to the same permission level assigned the SharePoint Designer group in SharePoint Server. If you are planning on leveraging user permissions to lock down access to SharePoint Designer in a SharePoint Foundation 2010 server you might consider creating a custom group named Designer for easy recognition and assignment.

Visual Behavior Based on SharePoint Designer Lockdown

Where SharePoint Designer has been disabled at the Web application level, a site collection administrator, site owner, or member of the Designer SharePoint group still sees the options to edit with SharePoint Designer in the Web interface. However, clicking one of those options results in a dialog as shown in Figure 7.13.

If SharePoint Designer has been disabled at the site collection level, site owners and members of the site's Designer SharePoint group are met with the same dialog when attempting to open a site in SharePoint Designer.

If the Enable Customizing Master Pages and Layout Pages option is disabled at the Web application level then site collection administrators, site owners, and members of the Designer SharePoint group see the dialog shown in Figure 7.14 when attempting to open a master page of page layout via the All Files tab in the navigation pane in SharePoint Designer.

Evolution of Web Design Tools

SharePoint Designer 2010 supersedes SharePoint Designer 2007. However, unlike SharePoint Designer 2007, SharePoint Designer 2010 is specifically geared toward customizing and designing SharePoint 2010 sites and cannot be used for working with non-SharePoint sites. Similarly, SharePoint Designer 2010 cannot be used with SharePoint Server 2007 sites.

Since SharePoint Portal Server 2001, in which there were limited design capabilities, an abundance of tools have entered the SharePoint marketplace. SharePoint Portal Server 2003 saw FrontPage 2003 used extensively for customizing pages, designing pages, and adding logic via the DataView Web part. SharePoint Server 2007 saw the introduction of SharePoint Designer 2007 for designing and customizing SharePoint master pages, page layouts, other types of pages, and CSS files. Included in SharePoint Designer 2007, we suddenly had a common set of ASP.NET controls, such as the gridview control, which you could leverage for extending features such as integration with external databases including Access databases. We also saw third-party and open-source tools for integrating Silverlight and ASP.NET 3.5 functionality into SharePoint sites.

In SharePoint 2010, there is not only SharePoint Designer 2010, but also other rich design integration tools, including InfoPath Designer 2010 for designing SharePoint list forms, Visio 2010 for designing and integrating workflows with SharePoint Designer, and Visual Studio 2010. To complement the user interface opportunities in SharePoint 2010, there is also Microsoft Expression Blend for customizing the Silverlight Web part skin. In addition, ASP.NET 3.5 functionality is natively built into SharePoint, which enables you to more easily add Web 2.0 type functionality to your SharePoint sites. But the Web design tool story doesn't end there.

If you're contemplating prototyping SharePoint sites then a definite tool of choice is Microsoft Expression Blend 4 Sketchflow, which includes SharePoint 2010 integration options.

If you are still involved in working with and customizing non-SharePoint sites, then the tool of choice is either SharePoint Designer 2007 or Expression Web.