List of Figures – SharePoint 2010 Web Parts in Action

List of Figures

Chapter 1. Introducing SharePoint 2010 Web Parts

Figure 1.1. Add Web Parts of different types to build a rich user interface.

Figure 1.2. The building blocks of a Web Part page and how they’re located in relation to one another

Figure 1.3. The default SharePoint 2010 Team Web is based on wiki pages. Wiki pages in SharePoint allow you to add Web Parts directly into the wiki content.

Figure 1.4. A Web Part consists of a content area surrounded by the chrome. All Web Parts also have a title and a menu containing a set of verbs. You can configure the title and the menu so they don’t display.

Figure 1.5. A Hello World Web Part, showing the default Web Part options menu in the right corner

Figure 1.6. Wiki pages in SharePoint 2010 can contain Web Parts within the wiki content.

Figure 1.7. You can use the new Silverlight-based Create dialog box to search for and add new items to your site. Notice the option to download new items and templates from If you don’t have Silverlight installed, you’ll see an HTML-based interface instead.

Chapter 2. Using and configuring Web Parts in SharePoint 2010

Figure 2.1. SharePoint 2010 includes the Ribbon toolbar, introduced in Office 2007. The Ribbon is context aware, which means it changes its contents depending on what the user is doing.

Figure 2.2. The Central Administration in SharePoint contains a Health Analyzer that analyzes the current state of the farm. If any critical errors are found, the Health Analyzer uses the status bar to notify administrators.

Figure 2.3. The Web Part Gallery contains all installed Web Parts for the current site collection and is used to locate and add Web Parts to pages.

Figure 2.4. You can configure, group, export, and manage the permissions for the Web Parts in the Web Part Gallery catalog, accessed from the Site Settings page.

Figure 2.5. The New Page dialog box used to create new pages uses the new Dialog Framework. It improves usability by reducing the number of page loads and makes the interface user friendlier and faster.

Figure 2.6. The Ribbon adapts to your current context. If you’re editing a Web Part page, the tools for editing content and adding new Web Parts appears. And if you select a Web Part when editing the page, the Web Part tools and, optionally, Web Part–specific tabs appear.

Figure 2.7. You edit the properties of a Web Part in the editor pane, which consists of Editor Parts. Each Web Part type has its own setup of Editor Parts.

Figure 2.8. Use the Configure Connection dialog box when connecting Web Parts to send values from one Web Part to another.

Figure 2.9. The status bar displays when the current page is edited in Personal view and this version of the page is only available to the current user.

Figure 2.10. The Maintenance View of a page can be used to close, reset, and delete Web Parts from the Shared or Personal Views when, for instance, a Web Part fails to load and makes the whole page inaccessible.

Figure 2.11. When you edit a page in SharePoint Designer, the Ribbon adapts to the editing context and makes the Insert tab visible. The Insert tab gives you access to the Web Part button, which is used to insert new Web Parts.

Chapter 3. Building Web Parts with Visual Studio 2010

Figure 3.1. The New Project dialog box in Visual Studio 2010 shows the available SharePoint 2010 templates and includes a brief description of the selected template.

Figure 3.2. The SharePoint Customization wizard when creating a Visual Web Part; note that the Deploy as a sandboxed solution option is disabled.

Figure 3.3. The Solution Explorer in Visual Studio 2010 allows you to navigate the files in your project.

Figure 3.4. A SharePoint project has a special properties tab for selecting and editing deployment configurations.

Figure 3.5. The first Visual Web Part project that prints the value of the text box in a label when the button is clicked

Figure 3.6. The Solution Explorer in Visual Studio shows you all the files and Features of your Web Part project. The Web Part files are grouped together into a SharePoint project item.

Figure 3.7. Use the Feature designer in Visual Studio to edit your Features. You can change the title, description, and scope as well as configure which items should be part of the Feature.

Figure 3.8. The Project Properties window shows the debugging URL and whether the project is a sandboxed solution. You can also use this window to specify which of the SharePoint project items you’d like to use when debugging the project.

Figure 3.9. Use the Server Explorer in Visual Studio 2010 to explore your SharePoint site collection and see the contents within it.

Chapter 4. Building the user interface

Figure 4.1. A Web Part has many events that are always performed in a specific order. Each event has its own purpose and should be used accordingly.

Figure 4.2. The event flow of a Web Part during a postback is slightly different from the flow during a normal load. Most significant is that the OnLoad event is executed after the CreateChildControls event.

Figure 4.3. A Web Part that loads an Editor Part adds a few new events to the normal event flow. The Web Part instantiates the Editor Part and the Editor Part eventually reads the properties from the Web Part.

Figure 4.4. When the changes made in an Editor Part are applied to the Web Part, the properties are pushed back to the Web Part after the OnLoad event.

Figure 4.5. The Designer view in Visual Studio shows a Visual Web Part with two validated text boxes, a button, and a result label.

Figure 4.6. The Visual Studio Solution Explorer can be used to add the SharePoint mapped folders in order to include the files that will be deployed to the SharePoint root.

Figure 4.7. The Toolbox in Visual Studio contains a few default SharePoint controls that you can use when building Web Parts.

Figure 4.8. The SharePoint SPGridView control can be used to create a data-bound grid that takes advantage of the SharePoint UI features.

Figure 4.9. The People Picker control allows end users to easily select and browse users and groups.

Figure 4.10. Use the People Picker control in your custom Web Parts to select users and/or groups.

Figure 4.11. Use the Internet Explorer 8.0 Developer Tools when you need to inspect the HTML and CSS elements.

Figure 4.12. Applying the standard SharePoint CSS classes to input elements will help your Web Part adapt to the SharePoint interface. The top elements have no styles attached and the lower elements use the default SharePoint CSS classes.

Figure 4.13. Web Parts can use custom style sheets to enhance the user experience.

Figure 4.14. CSS files are added to the project using the Layouts folder. By default, Visual Studio adds a subfolder to the Layouts folder with the name of your project.

Figure 4.15. Adding CSS files that contain themed CSS selectors to the correct folder structure under the Layouts folder

Figure 4.16. Web Parts with custom CSS styles can be configured so that they take advantage of the colors and fonts defined in the SharePoint theme.

Figure 4.17. Using catalog icons for the Web Parts enhances the Web Part Gallery experience and makes it easy for users to find the Web Parts.

Figure 4.18. Add images to the project using the SharePoint Images mapped folder. Visual Studio creates a subfolder using the name of your project.

Figure 4.19. Verbs can be added to the Web Part options menu to include actions in the Web Part. The verbs can invoke client-side JavaScript or server-side events.

Figure 4.20. SharePoint retrieves the custom verbs after the SaveViewState method is called on the Web Part before rendering it.

Figure 4.21. The server-side verb events are invoked before the CreateChildControls method. The verbs are retrieved two times in this flow: just before the verb events and then once again after the view state is saved.

Chapter 5. Making Web Parts customizable

Figure 5.1. Custom Web Part properties with the WebBrowsable attribute applied will be visible in the Miscellaneous section of the tool pane. The tool pane interface for the properties has been automatically generated by SharePoint based on the type of the properties.

Figure 5.2. The Tag Properties panel in SharePoint Designer can be used to change the values of a Web Part or a control. This figure shows the custom properties of the custom RSS Web Part in the Misc category.

Figure 5.3. The automatically generated tool pane of the RSS Web Part uses the attributes of the custom properties to generate the input fields and their descriptions.

Figure 5.4. Custom categories can be applied to properties using the SPWebCategoryName attribute.

Figure 5.5. A nonnconfigured Web Part should show a user-friendly interface that helps the user configure it.

Figure 5.6. Adding an Editor Part to the Web Part allows the developer to control the logic in the tool pane. The properties may appear both in a custom Editor Part and in the default interface if the WebBrowsable attribute is present on the property declaration.

Figure 5.7. Validators can be used in custom Editor Parts to validate the user input.

Figure 5.8. Custom Editor Parts can be used when properties are dependent on other properties. The Cache Time text box shown here is disabled because the check box isn’t selected.

Figure 5.9. Building a professional-looking interface for custom Editor Parts enhances the user experience.

Figure 5.10. Complex properties implemented with .NET type converters are automatically validated in the Editor Parts.

Figure 5.11. SharePoint Designer doesn’t allow invalid values for complex properties that have a custom type converter.

Figure 5.12. The custom runtime filter can be used to target Web Parts to specific groups within the site collection.

Chapter 6. Web Part resources and localization

Figure 6.1. The _layouts folder and other folders are mapped to the physical paths in IIS as virtual directories.

Figure 6.2. Adding the SharePoint mapped folders

Figure 6.3. Web Parts that use the /_layouts/images folder to store images must be deployed as farm solutions because sandboxed solutions don’t allow files to be written to the file system.

Figure 6.4. Using the Properties window of a project item in Visual Studio, you can configure how the item is going to be deployed and to which location.

Figure 6.5. The Resource editor in Visual Studio allows you to add resource items and values.

Figure 6.6. The Feature can be localized using Feature local resource files.

Figure 6.7. The Web Part Gallery uses the default language settings of the site for the groups and Web Parts added to the site collection.

Figure 6.8. A correctly localized Web Part property contains a localized title, description, and category.

Figure 6.9. Embedded resources in the project will be compiled to culture-specific satellite assemblies.

Figure 6.10. The Package designer lets you add existing assemblies, which you’ll find necessary when deploying satellite assemblies.

Figure 6.11. The Layouts folder mapped to the _layouts virtual directory contains one culture-specific folder for each installed language.

Figure 6.12. Using Visual Studio Code Analysis helps you avoid common mistakes such as forgotten culture-specific conversions.

Chapter 7. Packaging, deployment, and security

Figure 7.1. Feature Event Receivers are added to a Feature by right-clicking the Feature in the Solution Explorer and selecting Add Event Receiver.

Figure 7.2. By default, users with only Contributor permissions aren’t allowed to add custom Web Parts that aren’t specifically marked as safe for scripting.

Figure 7.3. Use the Safe Control Entries dialog box to modify the Safe Control elements of the package manifest. You can add and remove entries and edit their properties—for instance, you can mark a Web Part as Safe Against Script.

Figure 7.4. PowerShell is the tool to use when you administer SharePoint. It can be used to view already installed solutions and deploy new ones.

Figure 7.5. The Solution Gallery in a site collection is used to manage the sandboxed solutions. Solutions can be activated, deactivated, and upgraded, and the current resource use is shown for the entire site collection and each solution.

Figure 7.6. Use the Properties window to change the deployment target between full trust and partial trust solutions.

Chapter 8. Tools for troubleshooting and logging

Figure 8.1. The default error page in SharePoint 2010 doesn’t show any information about the error but instead shows a correlation id that you can use when searching for the error in the logs.

Figure 8.2. The logging levels for the trace and event logs is configured in Central Administration.

Figure 8.3. Using PowerShell to search for logged events related to a specific correlation id makes it easier to find the source of any problems.

Figure 8.4. Sandboxed solutions that fail don’t show the default SharePoint error page. If debugging is enabled, the complete call stack is shown, which allows you to find the source of the exception. The stack traces are usually long for sandboxed solutions because several processes are involved.

Figure 8.5. The first time a solution is debugged in a new web application using Visual Studio, you’re asked to enable the debugging.

Figure 8.6. When the Developer Dashboard is set to On Demand mode, users can turn the dashboard on and off by clicking the icon in the upper-right corner.

Figure 8.7. The Developer Dashboard in SharePoint 2010 shows the details of a specific request.

Figure 8.8. The Developer Dashboard shows all the monitored scopes and their execution time. This allows you to locate the parts of the Web Part that can be causing a bottleneck.

Figure 8.9. Asserts and critical events are shown in the Developer Dashboard; you can click on them for more details.

Figure 8.10. When ASP.NET tracing is enabled in the Developer Dashboard, the ASP.NET trace is shown at the bottom of the page.

Figure 8.11. Fiddler inspects all outgoing and incoming web traffic.

Chapter 9. Programming and caching for performance

Figure 9.1. Using composite images instead of multiple images in combination with CSS sprites can improve the application performance and reduce the server load.

Figure 9.2. Using CSS sprites that show a specific part of a composite image in Web Parts will reduce the load on the servers and improve the performance of SharePoint. When you hover the mouse over the image in the figure, the image will change—not by loading a new image but by shifting the focus on the sprite image to show another part of it.

Figure 9.3. Building Web Parts that read data from SharePoint can be resource intensive; if possible, they should use caching to improve performance.

Figure 9.4. You can configure caching of files in IIS 7.0 using the Output Cache feature. This rule will cache all PNG files for one hour for a site using anonymous authentication.

Chapter 10. Dynamic interfaces in Web Parts

Figure 10.1. The RSS Web Part has a button that makes a partial update of the page, refreshing only the contents of the specific Web Part.

Figure 10.2. Notification messages can be used to inform the user about asynchronous events. This figure shows notification messages from the RSS Web Part.

Figure 10.3. Use the status bar to give the users information, warnings, and error messages. In this figure, the status bar which appears in red on your screen (“Feed not found” in figure above) shows that errors have occurred in the RSS Web Part.

Figure 10.4. Modal dialogs can be created in SharePoint 2010 using the dialog framework. By using modal dialogs, you can provide a better end-user experience and a faster solution.

Figure 10.5. You can extend the Ribbon with new tabs, groups, and controls that interact with SharePoint and Web Parts.

Figure 10.6. You should use CSS sprites, which use images combined into one image file, when adding images to controls in the Ribbon to improve performance and reduce request load on the server.

Figure 10.7. Ribbon tabs can be made contextual so that they’re visible only when specific Web Parts are selected.

Chapter 11. The Client Object Model and Silverlight Web Parts

Figure 11.1. The SharePoint Silverlight Web Part is available in all SharePoint editions and can be used to add Silverlight applications to your pages. You’ll find the Silverlight Web Part in the Media and Content category in the Web Part Gallery.

Figure 11.2. The Silverlight Web Part configured to use the Task Count Silverlight application, which shows the number of tasks in the Tasks list of the current site.

Figure 11.3. The Silverlight XAML designer in Visual Studio 2010 makes the design of the Silverlight application easy.

Figure 11.4. The editor pane of the Silverlight Web Part allows you to set the Silverlight application using the Configure button and supply custom initialization parameters to the application using the text field.

Figure 11.5. To include output files from other Visual Studio projects, use the Project Output References dialog box. Here you can add the output from a Silverlight project into a SharePoint project and add the XAP file as an ElementFile.

Figure 11.6. Preconfigured Web Parts can be added to a Visual Studio solution using an Empty SharePoint Project Item and then be deployed to the farm.

Figure 11.7. By default Silverlight can’t use the Client Object Model in custom Web Parts—they need to be initialized with the proper parameters.

Chapter 12. Making Web Parts mobile

Figure 12.1. A Windows 7 Phone that uses the mobile interface to read a blog post. The blog post is paginated so that only a minimal amount of information is transferred for each request.

Figure 12.2. All lists in SharePoint can be accessed from the mobile interface. The mobile forms also allow users to add new or edit existing items.

Figure 12.3. The Web Parts in the mobile view of a Web Part Page can be configured. You can specify the order and which Web Parts to show.

Figure 12.4. Browsing SharePoint 2010 using an iPad gives you access to the full SharePoint 2010 interface instead of the mobile version. Notice that the Silverlight Web Part doesn’t show the Silverlight application.

Figure 12.5. Control adapters are used to create a mobile representation of a Web Part. The Windows Mobile 6.5 phone in this figure shows the number of tasks from the Task Count Web Part using text rather than the Silverlight application.

Figure 12.6. The Task Count Web Part, using the summary view of the control adapter. Clicking the icon in front of the Web Part title switches to the detailed view shown in figure 12.4.

Figure 12.7. The Safe Control Entries property of SharePoint Project Items in Visual Studio 2010 allows you to easily add new safe Control entries.

Figure 12.8. Check the Monitoring section in the Central Administration for the status of the timer jobs.

Figure 12.9. The control adapters are deployed as web application–scoped Features and are activated and deactivated from Central Administration.

Figure 12.10. The Page Author Web Part in the standard web interface shows a link that you can click to contact the author via email.

Figure 12.11. The control adapter for the Page Editor Web Part renders a phone call supported link for devices with phone support instead of a link that sends an email.

Chapter 13. Design patterns and testability

Figure 13.1. In a tightly coupled application, the classes are directly referencing each other. This makes the classes dependent on each other and makes it harder to replace classes and layers.

Figure 13.2. In loosely coupled systems, the dependent class uses an interface to communicate with its services. This arrangement allows for easier updates of the services, even during runtime, and a clear separation of layers in the application.

Figure 13.3. The Passive View design pattern divides the application into three layers; the Presenter stays in the middle updating the View with information and data from the data Model.

Figure 13.4. The Supervising Controller pattern is similar to the Passive View pattern but allows the View to make simple calls and data binding to the Model.

Figure 13.5. A Web Part based on the Passive View pattern displaying links to all lists within a SharePoint site

Figure 13.6. The Class Diagram designer in Visual Studio 2010 is a great tool to use when working with decoupled objects to visualize the system design.

Figure 13.7. Using multiple services for a class requires custom code that handles the request for the correct service during runtime.

Figure 13.8. Using a service locator allows for dynamic changes during runtime of services. The service locator is a shared service within the application that handles registration and location of services.

Figure 13.9. By supplying an alternative Model to the Site Lists Web Part, you modify its appearance to show libraries instead of lists without editing the View or Presenter classes.

Figure 13.10. Adding the injection of the Model into the Presenter’s constructor allows you to implement multiple Models to be used by the same Presenter and View.

Figure 13.11. Visual Studio 2010 allows developers and testers to select from many different test project items, ranging from custom tests, to unit-tests, to fully automated interface tests.

Figure 13.12. The Create Unit-tests wizard generates stubs for the test methods, to which you then add the test logic.

Figure 13.13. Use the Test Results window to inspect the status of the test runs and to get more information about failed tests.

Figure 13.14. The Code Coverage tool in Visual Studio lets you see exactly what parts of the code executed during the tests.

Chapter 14. Connecting Web Parts

Figure 14.1. The provider Web Part implements an interface that acts as a contract for the connection. The consumer Web Part uses this interface to retrieve or exchange information with the provider.

Figure 14.2. Web Parts can be connected in many ways, depending on how the connection endpoints are configured.

Figure 14.3. Using the Web Part options menu, you can create Web Parts connections.

Figure 14.4. SharePoint Designer 2010 can be used to configure Web Part connections. The rich interface in SharePoint Designer makes the connection experience easier.

Figure 14.5. The Security For Web Part Pages dialog box in Central Administration lets you enable or disable the functionality for connecting Web Parts.

Figure 14.6. A provider Web Part that accepts a text input—in this example a URL to an RSS feed—and sends the value of the text box to any connected Web Part consumers

Figure 14.7. The Web Part Manager connects Web Parts during a page load (HTTP GET) immediately after the OnLoad event and before the CreateChildControls event.

Figure 14.8. Web Part connections are established after the postback events during a postback (HTTP POST) and immediately before the OnPreRender event.

Figure 14.9. To connect the Feed Input connection provider with the RSS Web Part, select Connections in the Web Part options menu, and then select the name of the connection and finally the name of the Web Part.

Figure 14.10. By using the built-in connection interfaces, you can connect custom Web Parts to the out-of-the-box Web Parts such as List Web Parts. Notice the Select column in the List Web Part; it appears when a List Web Part is acting as a provider Web Part.

Figure 14.11. Some Web Part connection interfaces require that you configure the connections. If necessary, SharePoint will show a dialog box that asks you to configure the connection.

Figure 14.12. Using the SharePoint defined interfaces for connections allows you to create filter Web Parts that can be connected to almost any Web Part.

Chapter 15. Building pages and dashboards

Figure 15.1. Use SharePoint Designer 2010 to create and edit Web Part pages and then export them to a file that can be imported to a Visual Studio project.

Figure 15.2. Web Part zones are positioned in the ASPX pages and are preferably positioned using DIV elements and CSS classes.

Figure 15.3. A page can be installed prefilled with Web Parts and connections to make it easier for end users to configure their sites.