SharePoint 2010 Developmnet

Transcription

1 SharePoint 2010 Developmnet Delavnica Uroš Žunič, Kompas Xnet 165

2 VSEBINA DOKUMENTA LAB 01 GETTING STARTED WITH SHAREPOINT LAB 02 VISUAL STUDIO SHAREPOINT TOOLS LAB 04 SHAREPOINT 2010 USER INTERFACE ADVANCEMENTS LAB 06 LINQ TO SHAREPOINT LAB 07 CLIENT OBJECT MODEL LAB 08 -WORKFLOW LAB 14 DEVELOPING A SANDBOXED SOLUTION WITH WEB PARTS Page 2

3 Hands-On Lab Lab Manual Lab 01 Getting Started with SharePoint 2010 Page 3

4 Information in this document, including URL and other Internet Web site references, is subject to change without notice. This document supports a preliminary release of software that may be changed substantially prior to final commercial release, and is the proprietary information of Microsoft Corporation. This document is for informational purposes only. MICROSOFT MAKES NO WARRANTIES, EITHER EXPRESS OR IMPLIED, AS TO THE INFORMATION IN THIS DOCUMENT. The entire risk of the use or the results from the use of this document remains with the user. Complying with all applicable copyright laws is the responsibility of the user. Without limiting the rights under copyright, no part of this document may be reproduced, stored in or introduced into a retrieval system, or transmitted in any form or by any means (electronic, mechanical, photocopying, recording, or otherwise), or for any purpose, without the express written permission of Microsoft Corporation. Microsoft may have patents, patent applications, trademarks, copyrights, or other intellectual property rights covering subject matter in this document. Except as expressly provided in any written license agreement from Microsoft, the furnishing of this document does not give you any license to these patents, trademarks, copyrights, or other intellectual property. Unless otherwise noted, the example companies, organizations, products, domain names, addresses, logos, people, places and events depicted herein are fictitious, and no association with any real company, organization, product, domain name, address, logo, person, place or event is intended or should be inferred Microsoft Corporation. All rights reserved. Microsoft, MS-DOS, Windows, Windows NT, Windows Server, Visual C# and Visual Studio are either registered trademarks or trademarks of Microsoft Corporation in the United States and/or other countries. The names of actual companies and products mentioned herein may be the trademarks of their respective owners. Page 4

5 Lab 01 Getting Started with SharePoint 2010 Estimated time to complete this lab: 45 minutes The project files for this lab are in the C:\Student\Labs\01_Roadmap folder Lab Objective Lab Overview: In this lab you will begin your work with SharePoint 2010 and become familiar with the Virtual Machine (VM) that you will be using. You will get experience working with the SharePoint 2010 Central Administration site as well as working with a standard team site. This will allow you to experience the new user interface concepts introduced in SharePoint 2010 such as the server-side ribbon and in-place item editing. You will also get a chance to write and test C# code using the SharePoint Foundation 2010 object model. Note that we are purposefully delaying any work with the new Visual Studio 2010 Tools for SharePoint 2010 until the next lab because this new tool set is the focus of the next lecture. At the end of this lab you will also get some hands-on experience working with PowerShell and the new SharePoint 2010 PowerShell Snap-in. Additional Resources This lab includes the following additional resources: Starter Files C:\Student\Labs\01_Roadmap\StarterFiles Files that can be used to help complete the labs. Source Code C:\Student\Labs\01_Roadmap\Solution Completed lab source code in C# for Lab01_OM. Resources C:\Student\Presentations\01_Roadmap Supporting presentations for the topics in this lab. Getting Started Locations This Hands-On Lab contains a number of additional resources in fixed locations. By default, it is assumed that the base HOL directory is C:\Student and that the labs and additional resources are located under this directory. The default working folder for this lab is C:\Student\Labs\01_Roadmap. Copying code samples from Word document Copying and pasting code from this Word document to Visual Studio is only safe for the sections of formatted code, e.g.: Console.WriteLine("This is safe code!"); Page 5

6 Code not in these sections may contain Unicode or other invisible characters that are not valid XML or C#/VB code, e.g.: Console.WriteLine( This is NOT safe code!! ); Lab Setup Instructions In the lab setup you will execute a PowerShell script that will create a new SharePoint site collection. 1. Start the Virtual Machine in Hyper-V. 2. Log on to the Virtual Machine as the local administrator with a user name of Kompasxnet\administrator and a password of Pa$$w0rd. 3. Open Windows Explorer and browse to the location C:\Student\Labs\01_RoadMap, in the folder double click SetupLab01.bat. 4. Verify the site created successfully message, and then press a key to close the prompt. The setup script launches a PowerShell script that creates a sample SharePoint site at the location that you will use in the next exercises. Exercise 1 Creating a Site Collection in SharePoint Central Administration In this exercise you will review an existing SharePoint site collection and then create a new SharePoint site collection using the SharePoint Central Administration site. Task 1 Explore the Central Administration site In this task you will use the SharePoint Central Administration site to review existing site collections. 1. Click Start All Programs Microsoft SharePoint 2010 Products SharePoint 2010 Central Administration. Internet Explorer starts and the SharePoint Central Administration Site appears. You will now review some of the features in this site. 2. On the left-hand side of the screen, in the Quick Launch bar, click System Settings. The System Settings page appears. Review the system settings available on this page. 3. On the Quick Launch bar, click Monitoring. The Monitoring page appears. Review the monitoring options available on this page. 4. On the Quick Launch bar, click Application Management. The Application Management page appears. Review the options available on this page. 5. In the Site Collections section, click View all site collections. A list of site collections for the selected Web Application appears. 6. Choose from the Web Application drop down. 7. Review the site details in the right hand pane. Leave Internet Explorer running; you will use it in the next exercise. Page 6

7 Task 2 Create a new site collection In this task you will create a new site collection and browse to the newly created site. This site will be used in later exercises. 1. On the Quick Launch bar, click Application Management. The Application Management page appears. 2. In the Site Collections section, click Create site collections. The Create Site Collection page appears. 3. In the Title field, type Xnet Sales Site 4. In the Description field, type My first SharePoint 2010 site collection 5. In the URL field, type 6. In the Template Selection field, on the Collaboration tab, click Team Site. 7. In the Primary Site Collection Administrator User Name field, type Kompasxnet\administrator 8. In the Secondary Site Collection Administrator User Name field, leave the value blank. 9. In the Quota Template dropdown list, select the value No Quota. Figure 1 - Site Creation Details Page 7

8 10. Click OK. The new site provisioning process begins. When the site collection provisioning process has completed a confirmation page is provided with a hyperlink to navigate to the new site. Figure 2 - Site Creation Confirmation 11. On the Top-Level Site Successfully Created page click the hyperlink to navigate to the new site collection. The new site collection opens in a new window. Leave the new site collection window open; you will use it in the next exercise. Figure 3 - Site Creation Confirmation Page 8

9 Exercise 2 Working with the SharePoint 2010 Ribbon and In-place Editing In this exercise you will work with the site collection created in Exercise 1. You will: Experience the new paradigm for in-place editing by adding and viewing list items. Work with a Web Part page so you can experience how the SharePoint 2010 user interface has changed the way users manage Web Parts. Task 1 Modifying the Home page content In this task you will modify text and the default image on the home page. 1. Ensure you are viewing the Xnet Sales Site that you created in the previous exercise. Note that the home page is not default.aspx but rather a wiki page named Home.aspx. This is a wiki page located inside a library named SitePages. 2. Near the top left of the page, click the Site Actions menu, and then click Edit Page. The site enters edit mode with the cursor indicating the current insert point. Figure 4 - The Site Actions menu 3. Select the text Welcome! and then press [Delete]. Then type Xnet Sales Site. Note the ribbon commands update to provide contextual commands editing text. Page 9

10 Figure 5 - The Ribbon Control 4. Select the text Xnet Sales Site and use the font toolbar to change the font to 36pt and Font Color Red. 5. Click the graphic on the right-hand side of the page and press [Delete]. 6. On the ribbon, under Editing Tools, click the Insert tab. 7. Click the Picture button. The Add Picture dialog box appears. Note that the Add Picture dialog box enables you to select an image which will be automatically uploaded and stored in a document library named Site Asset Library. 8. Click Browse and navigate the following file: C:\Student\Labs\01_Roadmap\starterfiles\FrontPage.jpg then click Open. 9. On the Add Picture dialog, click OK. 10. On the ribbon, under Editing Tools, click the Format Text tab. 11. On the ribbon, click Save. Page 10

11 Task 2 Modifying Site Settings In this task you will explore settings available for the site from the Site Actions menu. 1. Click the Site Actions menu, and then click Site Settings. This page contains links to numerous administrative features. Figure 6 - Site Settings 2. In the Look and Feel section, click Title, description and appearance. The Title, Description and Appearance page appears. This page enables you to change the title and description you entered in the previous exercise. 3. In the Logo URL and Description section, in the URL textbox, type the following: /_layouts/images/unknownperson.png Page 11

12 4. Click OK. The Site Settings page appears. The image in the ribbon has been updated. Figure 7 - Modified Logo Task 3 Using the server-side ribbon In this task you will use the server-side ribbon and review the contextual controls that appear for items that are selected. 1. On the Quick Launch bar, in the Lists section, click Tasks. The task list is displayed, and is currently empty. The tasks list has an associated server-side ribbon with tabs including Browse, Share & Track, Items and List. 2. On the Ribbon, click List. The ribbon displays contextual controls for the List task. Figure 8 - List Ribbon 3. On the Ribbon, click Items. The ribbon displays contextual controls for the Items task. Figure 9 - Items Ribbon Page 12

13 Task 4 Creating a Task and a dependent Task item In this task you will use the new dialog platform to create a task and a dependent task. 1. Click the dropdown arrow on the New Item button, and then click Task. The Tasks - New Item dialog box displays. Figure 10 - Tasks - New Item Dialog 2. In the Title textbox, type Learn how to develop on SharePoint In the Priority dropdown list, select (1) High. 4. In the Status dropdown list, select In Progress. 5. In the % Complete textbox, type In the Assigned to textbox, type Kompasxnet\administrator 7. In the Description textbox, type Find out how to develop useful solutions. 8. In the Start Date textbox, type 5/24/ In the Due Date textbox, type 5/27/ On the toolbar, click Save. The newly created task appears in the list. 11. Click the dropdown arrow on the New Item button, and then click Task. 12. In the Title textbox, type Develop Solutions on SharePoint Page 13

14 13. In the Predecessors list box, select how to develop on SharePoint 2010 and click Add. 14. In the Priority dropdown list, select (1) High. 15. In the Status dropdown list, select Not Started. 16. In the % Complete textbox, type In the Assigned to textbox, type Kompasxnet\administrator 18. In the Description textbox, type Begin developing solutions on SharePoint In the Start Date textbox, type 28/5/ Leave the Due Date textbox blank. 21. On the toolbar, click Save. The newly created task appears in the list. Figure 11 - List of Tasks Task 5 Editing a Task In this task you will observe the in-place editing behavior as you edit a task. 1. Point to the Learn how to develop on SharePoint 2010 task, and then click the dropdown arrow that appears. Page 14

15 Figure 12 - In-Place Editing 2. Click Edit Item. Note that no page post backs occur; the task can be edited in-place. 3. Modify the % Complete textbox so that it reads 5 4. Click Save. Task 6 Add a Web Part to a page In this task you will add a Web Part to a Web Part page using the new user interface for managing Web Parts. 1. In Internet Explorer type following URL: This URL opens a Web Part page that does not have a direct link on a newly created site. Note the ribbon options that are available for this Web Part page. 2. Note that the ribbon on this page has three tabs titled Browse, Page and Edit Tools. Click on each of these tabs and see how the contextual controls on the ribbon change for each of these tabs. 3. Click on the Insert tab that takes you into the mode for adding, modifying and deleting Web Parts from the page 4. Delete the Shared Documents Web Part in the zone by clicking on the Delete command on the Web Part menu. Page 15

16 Figure 13 - Deleting a Web Part 5. Click the OK button on the Message from webpage dialog. 6. Place your cursor below the Welcome message 7. On the ribbon, in the Page Tools section, click Insert. 8. Click on the Web Part button which is shown below. Figure 14 - Deleting a Web Part 9. At this point you should see the new SharePoint 2010 UI for adding new Web Parts to a page. Select Lists and Libraries in the left-hand section and then select Tasks in the right-hand section. Once you have select the Tasks list, make sure the drop-down box on the far right bottom (shown below) has the Left zone selected, then click the Add button to add the Web Part instance to the page. Figure 15- Web Part Interface Page 16

17 10. Save your changes by selecting the Save button on the ribbon. Now that you have completed this exercise, you should have a page that looks like the one shown below. Xnet Sales Site Figure 16- Tasks web part on the site. Page 17

18 Exercise 3 Working with PowerShell Scripts In this exercise you will use the PowerShell console to gain experience using PowerShell commands. You will then use the PowerShell add-in for SharePoint 2010 to provision a SharePoint site. Task 1 Using the PowerShell Console In this task you will use the PowerShell console to review the format of a PowerShell script. You will then verify the execute permissions that are configured on the Virtual Machine. 1. Launch the PowerShell console from Windows Start menu. You ll find the PowerShell shortcut in the Start menu called Windows PowerShell V2 (CPT3). Select the Windows PowerShell V2 (CPT3) shortcut, not the ISE shortcut. Please note that in this step you should be launching the PowerShell console from standard PowerShell menu item and not SharePoint-specific menu item under Administrative Tools. 2. At the PowerShell command prompt, type the following text: Set-Location c:\student\labs\01_roadmap\powershell\ 3. Press [Enter]. The current folder of the PowerShell console reflects the new path. This location has several PowerShell Scripts (*.ps1 files) that will be used in this exercise. 4. At the PowerShell command prompt, type the following text: Get-ChildItem 5. Press [Enter]. PowerShell lists the scripts contained in the current location. Page 18

19 6. At the PowerShell command prompt, type the following text: Notepad Hello.ps1 7. Press [Enter]. Review the contents of the hello.ps1 PowerShell file. 8. Close Notepad. 9. At the PowerShell command prompt, type the following text:.\hello.ps1 10. Press [Enter]. The script runs and a simple message is output to the PowerShell console. PowerShell Execution Policy If the PowerShell scripting support on the machine has the execution policy of restricted, the script will not run. If the execution policy has been changed to unrestricted, the console will prompt you whether to run the script or not. When writing and testing PowerShell scripts, it is easiest to change the execution policy to Bypass so that scripts can freely run without any user prompts. If your machine will not execute the.\hello.ps1 script use the following instruction at the PowerShell command prompt: Set-ExecutionPolicyByPass 11. Leave the PowerShell console open; you will use it in a later task. Page 19

20 Task 2 Using the PowerShell Console to load the SharePoint Snap-in In this task you will prepare the PowerShell environment to run SharePoint scripts. 1. In the PowerShell command prompt that you left open in Task 1, type the following: Notepad LoadSharePointSnapin.ps1 2. Press [Enter]. Review the code and note the call to the Add-PSSnapin cmdlet. This loads the snap-in for SharePoint 2010 named Microsoft.SharePoint.PowerShell. 3. Close Notepad. 4. At the PowerShell command prompt, type the following text:.\loadsharepointsnapin.ps1 5. Press [Enter]. At this point the PowerShell commagnds for SharePoint have been enabled. 6. At the PowerShell command prompt, type the following text: Get-Command -PSSnapin Microsoft.SharePoint.PowerShell 7. Press [Enter]. A list is returned of all the commands supported by SharePoint. 8. At the PowerShell command prompt, type the following text: Get-Command -PSSnapin Microsoft.SharePoint.PowerShell -Verb Get 9. Press [Enter]. A list is returned of all of the Get commands supgeported by SharePoint. 10. At the PowerShell command prompt, type the following text: Get-Command -PSSnapin Microsoft.SharePoint.PowerShell >SP2010Cmdlets.txt 11. Press [Enter]. This time the full list of commands are piped to a new text file. 12. At the PowerShell command prompt, type the following text: Notepad SP2010Cmdlets.txt 13. Press [Enter]. The commands are opened in notepad. 14. Close Notepad. Page 20

21 Task 3 Using the PowerShell Console to create a SharePoint site In this task you will use the PowerShell console to create a SharePoint site. 1. At the PowerShell command prompt, type the following text: Get-Help New-SPSite 2. Press [Enter]. The details for the New-SPSite command are shown. You will now create a SharePoint site using the New-SPSite object. 3. At the PowerShell command prompt, type the following text: new-spsite -URL -OwnerAlias Kompasxnet\administrator -Template STS#1 -Name Lab01C 4. Press [Enter]. When the PowerShell script completes, open Internet Explorer and review the newly created site at Figure 17 - Creating a SharePoint Site Collection from PowerShell Task 4 Using a PowerShell Script to create a SharePoint site In this task you will use and existing PowerShell script to create a SharePoint site. 1. At the PowerShell command prompt, type the following text: Notepad CreateSite.ps1 2. Press [Enter]. Review the details in the script file. 3. Close Notepad. 4. At the PowerShell command prompt, type the following text: Page 21

22 .\CreateSite.ps1 Lab01D 5. Press [Enter]. When the PowerShell script completes a success message is returned. 6. Type Exit and press [Enter] to leave PowerShell. 7. Type Exit and press [Enter] to close the command Prompt. 8. Use Internet Explorer to open the site Verify the newly created site. Exercise 4 - Programming with the SharePoint 2010 Object Model In this exercise you will create a new console application that uses the SharePoint Foundation 2010 object model to create new lists and add items to a SharePoint 2010 site. Task 1 Configure a C# Console Project to use the SharePoint Object Model In this task you will configure a Visual Studio 2010 C# project to use the SharePoint object model. 1. Open Internet Explorer and navigate to the site This blank site was created in the Lab Setup. This is a team site. 2. Click Start All Programs Microsoft Visual Studio 2010 Microsoft Visual Studio On the Start page, in the Projects section, click New Project. Figure 18 - Visual Studio Start Page Page 22

23 3. Click the Target Framework dropdown at the top of the page and select.net Framework 3.5. This step enables you to add references to the SharePoint object library. SharePoint 2010 is based on.net 3.5 and not version In the Installed Templates section, in the Visual C# group, click Windows, then click Console Application. 5. In the Name textbox, type Lab01_OM 6. In the Location textbox, type c:\student\labs\01_roadmap and then click OK. Figure 19 - Template Selection 7. In the Solution Explorer window, right-click Lab01_OM, and then click Properties. 8. Click the Build tab. 9. In the Platform target dropdown list, select x64 or Any CPU. Page 23

24 Figure 20 - Setting Platform Target x In the Solution Explorer window, right-click References, and then click Add Reference. 11. Click the Browse tab, and then browse to the following location: C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\ISAPI. 12. Click Microsoft.SharePoint.dll and then click OK. Figure 21 - Setting a Reference to Microsoft.SharePoint.dll 13. In the Solution Explorer window, right-click References, and then click Add Reference. 14. Click the.net tab. 15. Click System.Web and then click OK. Page 24

25 Task 2 Enabling the Developer Dashboard in a Console Application In this task you will modify the code in the Console application to enable the Developer Dashboard on a SharePoint Site. You will then alter the code and disable the dashboard. 1. In the Solution Explorer window, double-click Program.cs. 2. Paste the following code to replace the code in Program.cs : using System; using Microsoft.SharePoint; using Microsoft.SharePoint.Administration; namespace Lab01_OM { class Program { static void Main() { SPWebService contentservice = SPWebService.ContentService; SPDeveloperDashboardSettings developerdashboard = contentservice.developerdashboardsettings; developerdashboard.displaylevel = SPDeveloperDashboardLevel.On; developerdashboard.update(); Console.WriteLine("Developer Dashboard updated."); } } } Note: if your contentservice variable turns out to be null, you have to check your project properties. Good chance you haven t selected the x64 platform. 3. Press [CTRL] + [F5] to run the console application. 4. Press a key to close the console application. 5. Return to the Internet Explorer window that you left open in Task 1 at the following site: 6. Press [F5] to refresh Internet Explorer. Scroll to the bottom of the page, and note that the developer dashboard is enabled. Page 25

26 Figure 22 - Developer Dashboard Page Footer 1. In Visual Studio, update the single line of code so that the DisplayLevel value is set to Off. The code should look as follows: using System; using Microsoft.SharePoint; using Microsoft.SharePoint.Administration; namespace Lab01_OM { class Program { static void Main() { SPWebService contentservice = SPWebService.ContentService; SPDeveloperDashboardSettings developerdashboard = contentservice.developerdashboardsettings; developerdashboard.displaylevel = SPDeveloperDashboardLevel.Off; developerdashboard.update(); Console.WriteLine("Developer Dashboard updated."); } } } 7. Press [CTRL] + [F5] to run the console application. 8. Press any key to close the console application. 9. Return to Internet Explorer. 10. Press [F5] to refresh Internet Explorer. Scroll to the bottom of the page, and note that the developer dashboard is now disabled. Page 26

27 Task 3 Using the SPSite object in a Console application In this task you will write code that programs against the top-level site you created at the beginning of this exercise. In this task you will: Modify the Main method in program.cs to create a new SPSite object to program against the new site collection. Structure your code inside a using construct so that your code makes an implicit call to the Dispose method to prevent leakage. Obtain a reference to the SPWeb object for the top-level site and print the Title property of the site to the console window. 1. Return to Visual Studio. 2. In the Solution Explorer window, double-click Program.cs. 3. Paste the following code to replace the code in Program.cs : using System; using Microsoft.SharePoint; using Microsoft.SharePoint.Administration; namespace Lab01_OM { class Program { static void Main() { string targetsiteurl = " using (SPSite sitecollection = new SPSite(targetSiteUrl)) { SPWeb site = sitecollection.rootweb; Console.WriteLine(site.Title); Console.ReadLine(); } } } } 4. Press [CTRL] + [F5] to run the console application. 5. The console application runs and displays the SharePoint site title. Figure 23 - SharePoint Site Name in Console Application 6. When the site title is displayed, press [ENTER] to close the application. Page 27

28 Task 4 Creating Lists and Web Parts from Console application In this task you will: Add existing source files containing utility classes that program against the SharePoint 2010 object model. Modify the Main method in the console application to programmatically create a Task, Announcement and Web Part. 1. Return to Visual Studio. 2. In the Solution Explorer window, right-click the project Lab01_OM, and then click Add Existing Item. Figure 24 - Project Right-Click Options 3. Browse to the following location: C:\Student\Labs\01_Roadmap\StarterFiles. 4. Click Lab01_Utilties.cs and then click Add. The Lab01_Utilties.cs source file contains three utility classes named TasksListFactory, AnnouncementsListFactory and WebPartPageDesigner. The first two classes contain code to create new list instances and to populate them with sample data. The third class named WebPartPageDesigner programs against a class named SPLimitedWebPartManager which is Page 28

29 provided by the SharePoint 2010 object model to delete and add Web Part instance from a target Web Part Page. 5. Paste the following code to replace the code in Program.cs : using System; using Microsoft.SharePoint; using Microsoft.SharePoint.Administration; namespace Lab01_OM { class Program { static void Main() { string targetsiteurl = " using (SPSite sitecollection = new SPSite(targetSiteUrl)) { SPWeb site = sitecollection.rootweb; string TasksListTitle = "Tasks"; string TasksListDescription = "Xnet Tasks"; TasksListFactory.Create(site, TasksListTitle, TasksListDescription); string AnnouncementsListTitle = "Announcements"; string AnnouncementsListDescription = "Xnet Announcements"; AnnouncementsListFactory.Create(site, AnnouncementsListTitle, AnnouncementsListDescription); } WebPartPageDesigner.ClearAll(site, "home.aspx"); WebPartPageDesigner.AddXsltListViewWebPart(site, "home.aspx", "Tasks", "Left"); WebPartPageDesigner.AddXsltListViewWebPart(site, "home.aspx", "Announcements", "Left"); } } } 6. Press [F5] to run the console application. The Console application adds two new lists to the target site and two new web parts to the home page to display the contents of these two lists. 7. Return to Internet Explorer and refresh the page Review the modifications made by the console application. Page 29

30 Figure 25 - Site Modifications Lab Summary In this lab you performed the following tasks. Explored the Central Administration site Created a new Site Collection using Central Administration Used the SharePoint Ribbon and In-place editing Created tasks and dependent tasks Used PowerShell scripts from the console and Integrated Scripting Environment Debugged PowerShell scripts in the Integrated Scripting Environment Used PowerShell to create a SharePoint site Built a console application and programmed against the SharePoint 2010 object model Created lists and Web Parts from a Console application Page 30

31 Hands-On Lab Lab Manual Lab 02 Visual Studio SharePoint Tools Page 31

32 Lab 02 Visual Studio SharePoint Tools Estimated time to complete this lab: 45 minutes The project files for this lab are in the C:\Student\Labs\02_VS2010_SPT folder. Lab Objective This lab will introduce you to the Visual Studio 2010 SharePoint Tools (SPT). In the lab you will: Become familiar with the standard project structure used by SharePoint Tools. Create and test a project that contains a Feature, a Feature Receiver and a Web Part. Configure SharePoint Tools deployment options. Debug a SharePoint Tools project by single-stepping through the code in your solution. Additional Resources This lab includes the following additional resources: Starter Files C:\Student\Labs\02_VS2010_SPT\StarterFiles Files that can be used to help complete the labs. Source Code C:\Student\Labs\02_VS2010_SPT Completed lab source code in C# for XnetWebParts code. Resources C:\Student\Presentations\02_VS2010_SPT Supporting presentations for the topics in this lab. Getting Started Locations This Hands-On Lab contains a number of additional resources in fixed locations. By default, it is assumed that the base HOL directory is C:\Student and that the labs and additional resources are located under this directory. The default working folder for this lab is C:\Student\Labs\02_VS2010_SPT. Copying code samples from Word document Copying and pasting code from this Word document to Visual Studio is only safe for the sections of formatted code, e.g.: Console.WriteLine("This is safe code!"); Code not in these sections may contain Unicode or other invisible characters that are not valid XML or C#/VB code, e.g.: Console.WriteLine( This is NOT safe code!! ); Page 32

33 Lab Setup Instructions In the lab setup you will execute a PowerShell script that will create a new SharePoint site collection. 8. Start the Virtual Machine in Hyper-V. 9. Log on to the Virtual Machine as the local administrator with a user name of Kompasxnet\administratorand a password of Pa$$w0rd. 10. Open Windows Explorer and browse to the location C:\Student\Labs\ 02_VS2010_SPT, in the folder double click SetupLab02.bat. 11. Verify the site created successfully message, and then press a key to close the prompt. The setup script launches a PowerShell script that creates a sample SharePoint site at the location that you will use in the next exercises. Exercise 1 Creating a SharePoint 2010 Project In this exercise you will create an empty project and focus on aspects of the Visual Studio 2010 SharePoint Tools that are common across all projects. You will change the properties of the project and properties of the project's main feature. Task 1 Starting Visual Studio with Administrator Privileges In this task you will use verify the blank site created as part of the site setup, and then start Visual Studio with Administration privileges. 12. Open Internet Explorer and browse to the site This is the site created in the lab setup. Note the site is a blank top level site. Leave Internet Explorer open, you will use it later I this exercise. 13. Click Start All Programs Microsoft Visual Studio In the group of programs, right-click Microsoft Visual Studio 2010 and click Run as Administrator. This enables Visual Studio debugger to work correctly when attaching to the SharePoint worker process. Page 33

34 Figure 26 - Visual Studio Run as Administrator 14. On the Start page, in the Project section, click New Project. 15. In the Target Framework dropdown at the top of the page ensure.net Framework 3.5 is selected. 16. In the Installed Templates section, in the Visual C# group, expand the SharePoint group, click 2010, and then click Empty Project. 17. In the Name textbox, type XnetWebParts. 18. In the Location textbox, type C:\Student\Labs\02_VS2010_SPT and then click OK. Figure 27 - Creating XnetWebParts Page 34

35 19. In the SharePoint Customization Wizard, in the What local site do you want to use for debugging? textbox, type Select the Deploy as a farm solution option. Figure 28- SharePoint Customization Wizard 21. Click Finish. Task 2 Reviewing the project nodes In this task you will examine the four nodes created in a SharePoint 2010 project. The nodes Properties and References are standard on Visual Studio projects, whereas Features and Package are unique to projects created with Visual Studio 2010 SharePoint Tools. 22. Right-click the Features node and choose Add Feature. A feature with the name Feature1 is added. Right-click on this node and click Rename. Rename this feature to Main Page 35

36 Figure 29 - Renaming the Feature1 Node 23. In Solution Explorer, right-click Main and click View Designer. Figure 30 Viewing Feature Designer 24. In the Title textbox, type Xnet Web Parts. 25. In the Description textbox, type My very first project using the Visual Studio 2010 SharePoint Tools. 26. Click the Scope dropdown list and then click Site. Note: Web Parts deployment requires a feature which activates at site collection scope in order to properly deploy Web Part description files. Page 36

37 Figure 31 - Setting Feature Properties Task 3 Adding images to a SharePoint 2010 Project SharePoint tries to ensure best practice by adding images to a project specific sub-folder in the images containing folder. This avoids naming conflicts with images that Microsoft deploys in the Images location. 27. In Solution Explorer, right click XnetWebParts, click Add and then click SharePoint Images Mapped Folder. Figure 32 - SharePoint "Images" Mapped Folder 28. In Solution Explorer, in the Images node, right-click XnetWebParts and click Add Existing Items. 29. Browse to the folder C:\Student\Labs\02_VS2010_SPT\StarterFiles and, holding the [CTRL] key, select the files named FeatureIcon.gif, SiteIcon.gif and WebPartIcon.gif. Page 37

38 30. Click Add. Figure 33 - XnetWebParts Images 31. In Solution Explorer, expand Features, right click Main and click View Designer. This enables the properties sheet for the Xnet Web Parts feature. 32. In the Properties sheet for the feature, in the Image URL property, type XnetWebParts\FeatureIcon.gif. Figure 34 - Setting the Image URL Property 33. Click Save. Page 38

39 Exercise 2 Adding a Feature Event Receiver In this exercise you will add a feature receiver. This will automatically execute during feature activation and feature deactivation. In this exercise you will: Obtain the SPSite reference which points to the site collection in which the feature is being activated. Obtain a SPWeb reference which points to the top-level site. Query the top-level site's Title property and store the value as a name/value pair inside the SPWeb.Properties collection. Modify the site's Title property with a creative text value of "VS2010 SPT Rocks!" Modify the site's SiteLogoUrl property to point to SiteIcon.gif inside the Images folder. Task 1 Editing the project In this task you will edit the project code to make use of an event receiver. 34. In Solution Explorer, expand Features, right click Main and click Add Event Receiver. Figure 35 - Adding an Event Receiver 35. Main.EventReceiver.cs opens in the editing window. Note the code stubs and the unique GUID in your solution. Page 39

40 Figure 36 - Main.EventReceiver.cs with GUID 36. Uncomment the method named FeatureActivated and FeatureDeactivating. Then remove all the extraneous comments. Your code should looks as follows: using System; using System.Runtime.InteropServices; using System.Security.Permissions; using Microsoft.SharePoint; using Microsoft.SharePoint.Security; namespace XnetWebParts.Features.Main { { } [Guid("XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX")] // your GUID will be different public class MainEventReceiver : SPFeatureReceiver public override void FeatureActivated(SPFeatureReceiverProperties properties) { } public override void FeatureDeactivating(SPFeatureReceiverProperties properties) { } } 37. Add following code between the braces {} in the FeatureActivated method: SPSite sitecollection = properties.feature.parent as SPSite; if (sitecollection!= null) { // save top site's original Title and SiteLogoUrl SPWeb site = sitecollection.rootweb; site.properties["originaltitle"] = site.title; site.properties.update(); // update the Title and SiteIconUrl site.title = "VS 2010 SPT Rocks"; site.sitelogourl = "_layouts/images/xnetwebparts/siteicon.gif"; site.update(); } 38. Add following code between the braces {} in the FeatureDeactivating method: Page 40

41 SPSite sitecollection = properties.feature.parent as SPSite; if (sitecollection!= null) { // restore top site's original Title and SiteLogoUrl SPWeb site = sitecollection.rootweb; site.title = site.properties["originaltitle"]; site.sitelogourl = string.empty; site.update(); } 39. On the File menu, click Save all. 40. In Solution Explorer, right-click on the XnetWebParts and click Build. Figure 37 - Building the Project 41. At the bottom of the Visual Studio Window, click Output to see the results of the build. Verify the code builds correctly. Leave the project open, you will deploy and test the code in the next Exercise. Figure 38 - Build Results Page 41

42 Exercise 3 Deploying and Debugging SPT Projects In this exercise you will deploy your solution and then activate it on the SharePoint site collection. Finally you will debug the solution. Task 1 Review deployment options and Output window results. 42. In the Solution Explorer window, right-click XnetWebParts and click Properties. 43. Click the SharePoint tab. 44. In the Active Deployment Configuration dropdown list, click No Activation. 45. In the Edit Configurations list box, click No Activation and then click View. This displays the deployment configuration steps. Figure 39 - Viewing Deployment Configuration Steps 46. Click OK to close the dialog. 47. Save changes Page 42

43 48. Ensure the output window is visible at the bottom of the screen, then in Solution Explorer window, right click XnetWebParts and choose Deploy. Review the steps that are specified in the Output window. Figure 40 Output results from the Deploy 49. Leave the Visual Studio project open, you will return to it in a later task. Task 2 Reviewing the feature in the SharePoint site collection The solution package for the XnetWebParts project has been deployed on the local SharePoint. In this task you will test the work. 50. Open Internet Explorer and browse to Click the Site Actions menu, and then click Site Settings. 52. In the Site Collection Administration section, click Site Collection Features. In the list of Features, review the Xnet Web Parts feature and its custom icon. Figure 41 - Xnet Web Part 53. To the right of the Xnet Web Parts feature, click Activate. (if it s not activated already) Page 43

44 54. In the title bar to the top left of the features, click Home. Review the new site Icon and title. Figure 42 - Site Title and Icon 55. Click the Site Actions menu, and then click Site Settings. 56. In the Site Collection Administration section, click Site Collection Features. 57. To the right of the Xnet Web Parts feature, click Deactivate. 58. On the warning page click Deactivate this feature. Figure 43 - Deactivate Feature Warning 59. In the title bar to the top left of the features, click Home. The site icon and title have returned to the default. Figure 44 - Default Site Title and Icon Page 44

45 Task 3 Debugging the project In this task you will use Visual Studio 2010 to debug your project. You will create breakpoints and then step through the code. 60. Return to Visual Studio In Solution Explorer, expand the Features branch. 62. Right-click Main.EventReceiver.cs and click View Code. 63. Locate the cursor in the line SPWeb site = sitecollection.rootweb; on the toolbar click Debug, and then click Toggle Breakpoint (or F9 as short cut). Figure 45 Breakpoint in the Code 64. On the Visual Studio menu, click Debug and then click Start Debugging. The solution builds and a new instance of Internet Explorer is launched. Page 45

46 65. In the Debugging Not Enabled message box, click OK. Note. This happens only for the first time particular web application is used for debugging Figure 46 - Debugging Not Enabled Message 66. Click the Site Actions menu, and then click Site Settings. 67. In the Site Collection Administration section, click Site Collection Features. 68. To the right of the Xnet Web Parts feature, click Activate. Visual Studio Editor opens and the code stops at the breakpoint. 69. Press [F11] to step through the code. 70. Return to Visual Studio on the menu click Debug, then click Stop Debugging. 71. Locate the cursor in the breakpoint line and click [F9] to Toggle the breakpoint off. Page 46

47 Exercise 4: Creating, Deploying and Testing Web Parts In the remaining exercises you will add two new SharePoint Items to the project using the Web Part template. Note that the Web Part template is just one of the many different SharePoint Item (SPI) types included with the Visual Studio 2010 SharePoint Tools. Task 1 Creating a Web Part In this task you will add a Web Part to the project. You will edit the XML files to specify a different category for the part. 72. In the Solution Explorer window, right click XnetWebParts, click Add, and then click New Item. 73. In the Installed Templates section, in the Visual C# group, expand the SharePoint group, click 2010 and then click Web Part. 74. In the Name textbox, type HelloPart. Figure 47 - Adding a Web Part Page 47

48 75. Click Add. The HelloPart node is added to Solution explorer with three files, Elements.xml, HelloPart.cs and HelloPart.webpart. Figure 48 HelloPart on the Solution Explorer 76. Right-click HelloPart.webpart and click Open. 77. Edit the property with name="title" so that the Title is as follows: <property name="title" type="string">the "Hello" Web Part</property> 78. Edit the property with name="description" so that the Title is as follows: <property name="description" type="string">a most compelling Web Part</property> 79. Locate the cursor in front of the </properties> tag and press [Enter]. 80. In the space you have just created, paste the following code: <property name="chrometype" type="chrometype">titleandborder</property> <property name="catalogiconimageurl" type="string">_layouts/images/xnetwebparts/webparticon.gif</property> <property name="titleiconimageurl" type="string">_layouts/images/xnetwebparts/webparticon.gif</property> 81. Right-click Elements.xml and click Open. 82. Modify the Value in the Group property to Xnet Web Part Page 48

49 83. The file should look as follows: <?xml version="1.0" encoding="utf-8"?> <Elements xmlns=" > <Module Name="HelloPart" List="113" Url="_catalogs/wp"> <File Path="HelloPart\HelloPart.webpart" Url="HelloPart.webpart" Type="GhostableInLibrary"> <Property Name="Group" Value="Xnet Web Part" /> </File> </Module> </Elements> 84. Right-click HelloPart.cs and click Open 85. Modify the code so that it looks as follows: using System; using System.Runtime.InteropServices; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using Microsoft.SharePoint; using Microsoft.SharePoint.WebControls; namespace XnetWebParts.HelloPart { public class HelloPart : WebPart { protected Label lbloutput; protected override void CreateChildControls() { lbloutput = new Label(); lbloutput.text = "Hello Web Part"; Controls.Add(lblOutput); } } } 86. In Solution Explorer, right-click on the XnetWebParts and click Build. Verify the code builds correctly. Page 49

50 87. In Solution Explorer, right-click on the XnetWebParts and click Deploy. The solution package is retracted and then deployed. Leave Visual Studio open; you will use it in a later exercise. Figure 49 - Deployment Retraction Task 2 Using the Web Part In this task you will use the newly created web part in the SharePoint site. 88. Open Internet Explorer and browse to Click the Site Actions menu, and then click Site Settings. 90. In the Site Collection Administration section, click Site Collection Features. 91. To the right of the Xnet Web Parts feature, click Activate. 92. Click Home to move back to the front page of the site 93. On the tab, click Page 94. On the ribbon, click Edit Page. 95. Click in the Left web part zone, and from the ribbon, under Page Tools, click Insert. Page 50

51 Figure 50 - Page Tools, Insert Ribbon 96. On the ribbon, click Web Part. The Categories list includes the Xnet Web Part category that you created in this exercise. Figure 51 - Xnet Web Part Category 97. In the Categories list, click Xnet Web Part. 98. In the About the web part section, review the Description and click Add. 99. The new web part appears in the left Web part area. Figure 52 Web part on the page Page 51

52 Exercise 5 - Creating a Visual Web Part with AJAX Behavior In this exercise you will add a second Web Part using the Visual Web Part template. This makes it possible to create the UI for a Web Part using an ASP.NET User Control and the Visual Studio User Control Designer. You will use the UpdatePanel control from ASP.NET AJAX to give your Web Part a Web 2.0 user experience eliminating postbacks. Task 1 Adding a new Web Part In this task you will add a Visual Web Part to the project. Ensure you add the Visual Web Part object and not a Web Part object In the Solution Explorer window, right click XnetWebParts and click Add then click New Item In the Installed Templates section, in the Visual C# group, expand the SharePoint group, click 2010 and then click Visual Web Part In the Name textbox, type ListInspector. Figure 53 - Adding a Visual Web Part Page 52

53 103. Click Add. The ListInspector node is added to Solution explorer with files, Elements.xml, ListInspector.cs, ListInspector.webpart, ListInspectorUserControl.ascx and ListInspectorUserControl.ascx.cs. Figure 54 - ListInspector node Task 2 Modifying properties in the Web Part files In this task you will modify the Title and Description in the XML file. You will also add image URLs for new properties and set the ChromeType Right-click ListInspector.webpart and click Open Edit the property with name= Title so that the Title is as follows: <property name="title" type="string">list Inspector Web Part</property> 106. Edit the property with name= Description so that the Title is as follows: <property name="description" type="string">a Web Part which shows all the lists in the current site and allows you to get several of its property values.</property> 107. Locate the cursor in front of the </properties> tag and press [Enter] In the space you have just created, paste the following code: Page 53

54 <property name="chrometype" type="chrometype">titleandborder</property> <property name="catalogiconimageurl" type="string">_layouts/images/xnetwebparts/webparticon.gif</property> <property name="titleiconimageurl" type="string">_layouts/images/xnetwebparts/webparticon.gif</property> 109. Under the ListInspector node, right-click Elements.xml and click Open Modify the Value in the Group property to Xnet Web Part 111. The file should look as follows: <?xml version="1.0" encoding="utf-8"?> <Elements xmlns=" > <Module Name="ListInspector" List="113" Url="_catalogs/wp"> <File Path=" ListInspector\ListInspector.webpart" Url="ListInspector.webpart" Type="GhostableInLibrary"> <Property Name="Group" Value="Xnet Web Part" /> </File> </Module> </Elements> Task 3 Adding references to the ListInspectorUserControl In this task you will add an assembly reference to the XnetWebParts project for the assembly named System.Web.Extensions. This reference is required when developing Visual Web Parts that use the UpdatePanel control from ASP.NET AJAX In Solution Explorer, right click XnetWebParts and then click Add Reference In the Add Reference dialog, on the.net tab, click System.Web.Extensions and click OK. Page 54

55 Figure 55 - Add Reference to System.Web.Extensions 114. In Solution Explorer, right click ListInspectorUserControl.ascx and then click View Designer. The Editor opens in Design view. You will switch between design and code view for this control using the options below the editing window To the left of the editing window, expand the Toolbox Expand the AJAX Extensions group. Figure 56 - AJAX Extensions Toolbox 117. Click and drag an UpdatePanel onto the Design pane. Page 55

56 Figure 57 - Update Panel on Design Pane 118. Below the editing pane, click Source Locate the cursor in front of the </asp:updatepanel> tag and press [Enter] In the space you have just created, paste the following code: <ContentTemplate> <!-- paste text from ListInspectorTable.txt here to create HTML table layout --> </ContentTemplate> 121. Using Windows Explorer, open the file C:\student\Labs\02_VS2010_SPT\StarterFiles\ListInspectorTable.txt 122. Copy the contexts of the text file and switch back to Visual Studio Paste the contents of the text file where indicated replacing the comment. Ensure the <ContentTemplate> tags are left intact Below the editing pane, click Design. Ensure the table layout renders correctly. Figure 58 - Rendering Table Layout in Design Pane Task 4 Preparing the Web Part code In this task you will add code to the Web Part. You will: Add a using statement to import the Microsoft.SharePoint namespace Delete any pre-existing members from the class definition In Solution Explorer, right click ListInspectorUserControl.ascx.cs and then click Open Replace the existing code block with the following: Page 56

57 using System; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using Microsoft.SharePoint; namespace XnetWebParts.ListInspector { public partial class ListInspectorUserControl : UserControl { protected Guid SelectedListID = Guid.Empty; protected bool UpdateListProperties = false; protected void lsllists_selectedindexchanged(object sender, EventArgs e) { } protected override void OnPreRender(EventArgs e) { } } } Task 5 Editing the Web Part code In this task you will modify the code block you pasted in the last task. You will: Add a protected file named SelectedListID based on the GUID type. Add a protected file named UpdateListProperties based on the bool type. Add a method named lsllists_selectedindexchanged Locate the lsllists_selectedindexchanged code block, and paste the following between the braces {}: SelectedListID = new Guid(lstLists.SelectedValue); UpdateListProperties = true; 128. Locate the OnPreRender code block, and paste the following between the braces: Page 57

58 if ((lstlists.selectedindex > -1) & (!UpdateListProperties)) { SelectedListID = new Guid(lstLists.SelectedValue); } lstlists.items.clear(); SPWeb site = SPContext.Current.Web; foreach (SPList list in site.lists) { ListItem listitem = new ListItem(list.Title, list.id.tostring()); lstlists.items.add(listitem); } if (SelectedListID!= Guid.Empty) { lstlists.items.findbyvalue(selectedlistid.tostring()).selected = true; } if (UpdateListProperties) { SPList list = SPContext.Current.Web.Lists[SelectedListID]; lbllisttitle.text = list.title; lbllistid.text = list.id.tostring().toupper(); lbllistisdocumentlibrary.text = (list is SPDocumentLibrary).ToString(); lbllistishidden.text = list.hidden.tostring(); lbllistitemcount.text = list.itemcount.tostring(); lnklisturl.text = list.defaultviewurl; lnklisturl.navigateurl = list.defaultviewurl; } 129. In Solution Explorer, right-click on the XnetWebParts and click Build. Verify the code builds correctly In Solution Explorer, right-click on the XnetWebParts and click Deploy Open Internet Explorer and browse to Click the Site Actions menu, and then click Site Settings In the Site Collection Administration section, click Site Collection Features To the right of the Xnet Web Parts feature, click Activate. If the web part is already activated, then deactivate and activate it. The feature activation provisions the Web Part Description file into the Web Part Gallery In Internet Explorer, open the page On the tab, click Page On the ribbon, click Edit Page Click in the Left web part zone, and from the ribbon, under Page Tools, click Insert 139. On the ribbon, click Web Part In the Categories list, click Xnet Web Part In the Web Parts list, select List Inspector Web Part. Page 58

59 Figure 59- List Inspector Web Part 142. In the About the web part section, review the Description. Figure 60 - Web Part Description 143. Click Add The new web part appears in the left Web part area Click Stop Editing. Page 59

60 146. Test the web part functionality. Notice how we are using Ajax to avoid unnecessary page post backs Lab Summary In this lab you performed the following tasks: Created a Visual Studio SharePoint Tools project. Added a Feature Event Receiver. Verified the Build of a project. Verified the Deployment and Retraction of a project. Debugged a SharePoint Tools project. Created a Visual Web Part project using AJAX behavior. Deployed, activated and tested your Web Parts in a SharePoint Site Collection. Page 60

61 Hands-On Lab Lab Manual Lab 04 SharePoint 2010 User Interface Advancements Page 61

62 Lab 04 SharePoint 2010 User Interface Advancements Estimated time to complete this lab: 45 minutes The project files for this lab are in the C:\Student\Labs\04_SharePointUI folder Lab Objective In this lab you will create and customize SharePoint 2010 lists for storing ideas for new toys that company can manufacture. While creating and using this list you will use various new features of SharePoint, SharePoint Designer and InfoPath. Additional Resources This lab includes the following additional resources: Starter Files NA There are no starter files for this lab. Source Code C:\Student\Labs\04_SharePointUI\Solution C# Solution files for the MyRibbonizedWebPart. Resources C:\Student\Presentations\04_SharePointUI Supporting presentations for the topics in this lab. Getting Started Locations This Hands-On Lab contains a number of additional resources in fixed locations. By default, it is assumed that the base HOL directory is C:\Student and that the labs and additional resources are located under this directory. The default working folder for this lab is C:\Student\Labs\04_SharePointUI. Copying code samples from Word document Copying and pasting code from this Word document to Visual Studio is only safe for the sections of formatted code, e.g.: Console.WriteLine("This is safe code!"); Code not in these sections may contain Unicode or other invisible characters that are not valid XML or C#/VB code, e.g.: Console.WriteLine( This is NOT safe code!! ); Page 62

63 Lab Setup Instructions In the lab setup you will execute a batch file that will create a new SharePoint site collection at the location 1. Start the Virtual Machine in Hyper-V. 2. Log on to the Virtual Machine as the local administrator with a user name of Kompasxnet\administratorand a password of Pa$$w0rd. 3. Open Windows Explorer and browse to the location C:\student\Labs\04_SharePointUI, in the folder double-click SetupLab04.bat. 4. Verify the site created successfully message and then press [Enter] to close the prompt. The setup script launches a PowerShell script that creates a sample SharePoint site at the location that you will use in the next exercises. Exercise 1 Managing a SharePoint 2010 List In this exercise you will create a new SharePoint 2010 list using the new SharePoint Designer user interface. You will then add columns and items to the list using the AJAX capabilities of SharePoint Task 1 Creating a SharePoint 2010 List in SharePoint Designer In this task you will use the SharePoint 2010 Designer to create a list that records new toy ideas for the Xnet organization. 5. Click Start All Programs Microsoft Office Microsoft Office SharePoint Designer Microsoft Office SharePoint Designer 2010 starts. Figure 61 - SharePoint Designer Click Cancel at the Microsoft Office Activation Wizard prompt. Page 63

64 7. In the Open SharePoint Site section, click Open Site. The Open Site dialog appears. 8. In the Site name textbox, type Figure 62 - Specifying a Site 9. Click Open, and then click Cancel at the permission prompt (if shown). The SharePoint Designer opens. 10. In the Navigation pane on the left side of the screen, click Lists and Libraries. Page 64

65 Figure 63 - The Navigation Pane 11. On the ribbon, on the List and Libraries tab, click Custom List. The Create list or document library dialog appears. 12. In the Name textbox, type New Toy Ideas 13. In the Description textbox, type Stores information about possible new toys. Figure 64 - Create List or Document Library Interface 14. Click OK. The New Toy Ideas list appears in the List and Libraries tab. Page 65

66 Figure 65 - New Toy Ideas appears in list 15. In the main window, in the List section, click New Toy Ideas. The new Toy Ideas overview page appears. Figure 66 - List Overview Page 16. In the Settings section, check the Require content approval for submitted items checkbox. 17. In the Settings section, uncheck the Allow Attachments checkbox. Click OK in the Disabling attachments warning dialog. Figure 67 - Disabling Attachments Warning 18. On the Quick Launch bar, available at the upper left portion of the ribbon, click Save. Page 66

67 Figure 68 - Quick Launch Toolbar Save Option 19. On the Ribbon, on the List and Libraries tab, click Preview in Browser and choose Windows Internet Explorer 8.0 (32 bit) with the (Default Size) option. Figure 69 - Preview in Web Browser from the Ribbon 20. Internet Explorer opens the site and displays the empty list. Leave SharePoint Designer and Internet Explorer open, you will return to them both in later tasks. Task 2 Creating list columns in Internet Explorer In this task you will use the SharePoint 2010 Ribbon in Internet Explorer to create new columns for the New Toy Ideas list. Note the Ajax style refresh that takes place as new columns are added. 21. In the Internet Explorer window, on the ribbon, under List Tools, click List. Figure 70 - List Tools, List Option Page 67

68 22. In the Settings group, click Create Column. Figure 71 - Settings, Create Columns 23. The SharePoint Create Column dialog appears. Figure 72 - SharePoint Create Column Dialog 24. In the Column Name textbox, type Age Group 25. In the Field Type option list, select Choice. 26. In the Require that this field contains information option list, Click Yes. 27. In the Type each choice on a separate line input box: On the first line type 1 to 3 On the second line type 3 to 6 On the third line type 6 to 9 On the fourth line type 9 and over Page 68

69 28. Leave all other fields with their default values and click OK. The new column appears in the headings for the list. Figure 73 - New Column as List Heading 29. On the ribbon, in the Settings group, click Create Column. 30. In the Column Name textbox, type Required Investment 31. In the Field Type option list, select Single line of text. 32. In the Require that this field contains information option list, Click Yes. 33. Leave all other fields with their default values and click OK. The new column appears in the headings for the list. 34. On the ribbon, in the Settings group, click Create Column. 35. In the Column Name textbox, type Existing Product 36. In the Field Type option list, select Yes/No. 37. Leave all other fields with their default values and click OK. The new column appears in the headings for the list. 38. On the ribbon, in the Settings group, click Create Column. 39. In the Column Name textbox, type Alternatives 40. In the Field Type option list, select Multiple lines of text. 41. Leave all other fields with their default values and click OK. The new column appears in the headings for the list. 42. On the ribbon, in the Settings group, click Create Column. 43. In the Column Name textbox, type Due Date 44. In the Field Type option list, select Date and Time. 45. Leave all other fields with their default values and click OK. The new column appears in the headings for the list. You have finished creating columns for this list. Leave Internet Explorer open, you will use it in the next task. Page 69

70 Task 3 Creating List items In this task you will use the SharePoint 2010 Ribbon in Internet Explorer to create new list items. 46. On the ribbon, under List Tools, click Items and click the New Item dropdown. Figure 74 - List Tools, Item, New Item 47. Click New Item in the dropdown. The New Item dialog appears. 48. In the Title textbox, type Nuclear powered action figure 49. In the Age Group option list, select 9 and older. 50. In the Required Investment textbox, type Miniaturized nuclear power plant. 51. Uncheck the Existing Product checkbox. 52. Leave all other fields with their default values, and on the ribbon, click Save. The new item appears in the list, note the Ajax style refresh. Leave Internet Explorer open, you will use it in a later task. Figure 75 - New List Item Page 70

71 Exercise 2 Customizing the All Items view In this exercise you will modify the default All Items view of the list. Task 1 Enabling inline editing In this task you will edit the Allitems.aspx page in SharePoint Designer to enable inline editing. 53. Switch to the SharePoint Designer that you have open from Exercise On the New Toy Ideas list overview page, in the Views group, click All Items. The AllItems.aspx page is opened in the editor. Figure 76 - The View Page Opens 55. On the ribbon, click the View tab. 56. On the ribbon, in the Page Views group, notice the different view options on the editing Page 71

72 57. In the design view for the AllItems.aspx page select the central web part showing items from the Toy Idea list. When selected the WebPart XsltListViewWebPart is highlighted and the List View Tools Ribbon appears. Figure 77 - Selecting XsltListViewWebPart 58. On the List View Tools ribbon, click the Options tab. 59. On the ribbon, in the Edit group, click Inline Editing. This enables inline editing of the list from the Web browser. 60. On the ribbon in the Quick launch, click Save. 61. Leave SharePoint Designer open, and return to the Internet Explorer session that you left open after Task Refresh the browser window. The changes made in SharePoint designer now appear on the page with the inline-editing control appearing after the last item in the list. 63. Click the New Item button that is displayed in the main window below the first item in the list. The in-line editing is enabled. Page 72

73 Figure 78 - Inline Create Option Button 64. In the Title textbox, type Rocket-fueled Buggy 65. In the Age Group option list, select 3 to In the Required Investment textbox, type Rocket boosters and non-exploding fuel. 67. Uncheck the Existing Product checkbox. Figure 79 - Inline Creation 68. Click the Save icon displayed on the left of the new list item. Note the Ajax enabled refresh of the list items. 69. Point to the left of the Rocket-fueled Buggy list item, and click the pencil icon that appears. The list item can be edited directly. Figure 80 - Inline Editing 70. In the Title textbox, change the text to Rocket-fueled buggy with support wheels. 71. To the left of the Title textbox, click the Save icon. Page 73

74 72. In the list of items, click Nuclear powered action figure. The New Toy Ideas dialog appears. Figure 81 - New Toy Ideas Dialog 73. On the ribbon, click Approve/Reject. 74. On the Approve/Reject dialog, in the Approval Status option list, click Approved. This item will become visible to all users. 75. Click OK. Leave Internet Explorer open, you will use it later in the task. Task 2 Configuring Sort and Group and Conditional Formatting In this task you will group the items by age group and then format the approved items in a contrasting color. 76. Switch to SharePoint Designer that you left open earlier in the Exercise. 77. Ensure that the AllItems.aspx page is open and the XsltListViewWebPart is selected. 78. On the List View Tools ribbon, click the Options tab. 79. On the ribbon, in the Filter, Sort and Group section, click Sort and Group. The Sort and Group dialog appears. 80. In the Sort Order list, click ID and click <<Remove 81. In the Available fields list, click Age Group and click Add>> 82. In the Group Properties section, check the Show group header checkbox. Page 74

75 Figure 82 - Sort and Group Dialog 83. Click OK. The design screen refreshes with the new grouping. 84. In the editor window, select the first data row by clicking and dragging across the row. Figure 83 - First Row Selected 85. In the Tag Selector, just below the design pane, click <tr> to ensure the whole row is selected. Figure 84 - Ensure <tr> is Selected 86. On the ribbon, in the Filter, Sort and Group group, click Conditional Formatting, choose Format Row. The Condition Criteria dialog appears. 87. In the Field Name dropdown list, select Approval Status. 88. In the Comparison dropdown list, select Equals. 89. In the Value dropdown list, select Approved. Page 75

76 Figure 85 - Condition Criteria 90. Click Set Style. The Modify Style dialog appears. 91. In the Category list, click Background. 92. In the Background-color box, type Green (or choose from the color palette). 93. Click OK. 94. Click Save in the Quick Launch toolbar. 95. Return to the Internet Explorer window you opened earlier and refresh the page. Leave SharePoint Designer and Internet Explorer open, you will return to them both in the next exercise. Figure 86 - Conditional Formatting Page 76

77 Exercise 3 Creating InfoPath forms In this exercise you will modify the edit and display forms used by the New Toy Ideas list. In previous versions of SharePoint the forms needed to be designed and deployed by developers and system administrators. SharePoint 2010 allows forms to be customized by Information Workers using InfoPath. 96. Switch to SharePoint Designer. 97. In the left hand navigation menu, click Lists and Libraries. 98. In the main window, in the List section, click New Toy Ideas. The new Toy Ideas overview page appears. 99. On the ribbon, in the List Settings tab, click Design Forms in InfoPath and choose Item. InfoPath will open with a generated form. Figure 87 - InfoPath Designer 100. Select the text Title, replace with the text Please describe your idea for a new toy Select the text Age Group, replace with the text Which age group is the new toy meant for? 102. Select the text Required Investment, replace with the text Are there any new investments Xnet needs to make? 103. Select the text Existing Product, replace with the text Are there existing vendors for this type of product? 104. Select the text Alternatives, replace with the text What are the current alternatives to this product? Page 77

78 105. Select the Title Textbox. Figure 88 - Defining the Form, Selecting the Title textbox 106. On the ribbon, on the Properties contextual tab, expand Shading and choose Light Orange Select the Age Group dropdown list On the ribbon, expand Shading and choose Light Orange Select the Required Investment control On the ribbon, click Control Properties. The Text Box Properties dialog appears On the Text Box Properties dialog, click the Display tab Check the Multi-line checkbox and press OK. Figure 89 - Textbox Properties Page 78

79 113. Stretch the text box to be as multiline text box 114. Select the Alternatives control In the ribbon, in the Rules section, click Add Rule. The Rules task pane appears On the Rules task pane, expand New and choose Formatting On the Rules task pane, in the Details for textbox, type Disable when no existing product In the Condition section, click None In the Condition dialog, Select Existing product, Is equal to, FALSE and click OK. Figure 90 - Setting the Condition 120. On the Rules task pane, in the Formatting section, check the Disable this control checkbox. Figure 91 - Rule Interface 121. Click the top right close control on the Rules task pane to close it 122. Click the File menu at the top left of the screen Choose Quick Publish Your form is published to your SharePoint site. Page 79

80 124. Switch to Internet Explorer On the ribbon, in the Items tab, click New Item. The InfoPath form appears. Figure 92 - InfoPath Form 126. Close SharePoint Designer and Internet Explorer. Page 80

81 Exercise 4 Creating a Ribbon enabled Web Part In this exercise you will create a Web Part which adds a command to the ribbon. The command will be enabled when the Web Part is selected. Note In this exercise you will edit XML documents. It is important to case all the characters correctly. Editing in an incorrect location will result in the either the controls not being visible or result in runtime errors. Task 1 Creating the Visual Studio Solution In this task you will create the Visual Studio project. 1. Click Start All Programs Microsoft Visual Studio 2010 Microsoft Visual Studio On the Start page, in the Projects section, click New Project. 3. In the Installed Templates section, in the Visual C# group, expand the SharePoint group, click Then click Empty Project. 4. In the Name textbox, type MyRibbonizedWebPart. 5. In the Location textbox, type C:\student\labs\04_SharePointUI. Figure 93 - Configuring the Project 6. Leave other fields with their default values and click OK. The SharePoint Customization Wizard appears. Page 81

82 7. In the What local site do you want to use for debugging? combobox, type 8. Click the Deploy as a farm solution option box. Figure 94 - SharePoint Customization Wizard 9. Click Finish. 10. In the Solution Explorer window, right click Features and choose Add Feature 11. Right-click Feature1 and click View Designer. 12. In the Designer window, click the Scope dropdown list and click Site. Figure 95 - Setting Scope to Site 13. In the Solution Explorer window, right-click MyRibbonizedWebPart, click Add and then click New Item. 14. In the Installed Templates section, in the SharePoint group, with 2010 selected, click Web Part. 15. In the Name textbox, type WebPart1. Page 82

83 Figure 96 - Adding the WebPart1 Web Part 16. Click Add. The Web Part is added to the project. 17. In the Solution Explorer window, right-click MyRibbonizedWebPart, click Add and then click New Item. 18. In the Installed Templates section, in the SharePoint group, with 2010 selected, click Empty Element. 19. In the Name textbox, type RibbonActions. 20. Click Add. Task 2 Adding a <CustomAction> element In this task you will edit the Elements.xml document to prepare it for a custom action by adding the <CustomAction> element Ensure you are in the editor for the Elements.xml file of the RibbonActions 128. Place the cursor before the closing </Elements> tag in the file and press [Enter] In the space you have just created, paste the following code: <CustomAction Id="MyRibbonCustomization" Location="CommandUI.Ribbon"> </CustomAction> Page 83

84 Task 3 Adding the Ribbon XML to the Custom Action element In this task you will create the Ribbon XML markup within the <CustomAction> element. You will: Create a child element named <CommandUIExtension>. Create a new group and add a button to this group. Past the new code into the <CustomAction> emlement Note Take special care to name the Template, TemplateAlias and Command attributes correctly as these reference elements outside of the XML markup. 1. Ensure you are in the editor for the Elements.xml file. 2. Place the cursor before the closing </CustomAction> tag in the file and press [Enter] 3. In the space you have just created, paste the following code: <CommandUIExtension> <CommandUIDefinitions> <CommandUIDefinition Location="Ribbon.WebPartPage.Groups._children"> <Group Id="Ribbon.WebPartPage.MyRibbonWebPart" Sequence="20" Description="Custom ribbon group" Title="Ribbon WebPart" Template="Ribbon.Templates.Flexible2"> <Controls Id="Ribbon.WebPartPage.MyRibbonWebPart.Controls"> <Button Id="Ribbon.WebPartPage.MyRibbonWebPart.DemoButton" Command="demoAction" Description="a demo action" Image16by16="/_layouts/images/edit.gif" Image32by32="/_layouts/images/placeholder32x32.png" LabelText="Demo Action" TemplateAlias="o2" Sequence="10" /> </Controls> </Group> </CommandUIDefinition> <!-- Here comes another custom action --> </CommandUIDefinitions> <!-- Here comes the UI handler --> </CommandUIExtension> 4. Add 3 other <CommandUIDefinition> elements directly under the comment below the first <CommandUIDefinition>. These will take care of the sizing of the new group and button. Locate the text Here comes another custom action and replace that line with the following xml element. The Location attribute needs to be set to Ribbon.WebPartPage.Scaling._children Page 84

85 <!-- Here comes another custom action --> <CommandUIDefinition Location="Ribbon.WebPartPage.Scaling._children"> <MaxSize Id="Ribbon.WebPartPage.MyRibbonWebPart.MaxSize" Sequence="20" GroupId="Ribbon.WebPartPage.MyRibbonWebPart" Size="LargeLarge" /> </CommandUIDefinition> <CommandUIDefinition Location="Ribbon.WebPartPage.Scaling._children"> <Scale Id="Ribbon.WebPartPage.MyRibbonWebPart.MediumMedium" Sequence="30" GroupId="Ribbon.WebPartPage.MyRibbonWebPart" Size="MediumMedium" /> </CommandUIDefinition> <CommandUIDefinition Location="Ribbon.WebPartPage.Scaling._children"> <Scale Id="Ribbon.WebPartPage.MyRibbonWebPart.Popup" Sequence="50" GroupId="Ribbon.WebPartPage.MyRibbonWebPart" Size="Popup" /> </CommandUIDefinition> 5. When the user clicks the new ribbon button, a message will be displayed using Javascript. Locate the comment Here comes the UI Handler and place following code right below it. The Command attribute must be the same as the one specified in the button definition. The CommandAction contains the javascript to be executed. <!-- Here comes the UI handler --> <CommandUIHandlers> <CommandUIHandler Command="demoAction" CommandAction="javascript:alert('hello');" /> </CommandUIHandlers> Task 6 Adding a Jscript file to the solution In this task you will add a Jscript file to the solution. 1. In the Solution Explorer window, right-click MyRibbonizedWebPart and then click Add and then choose SharePoint Layouts mapped folder. The folder will be added to your project along with a separate subfolder dedicated to your project s content. 2. In the Solution Explorer window, in the Layouts folder, right click MyRibbonizedWebPart and choose Add, and then click New Item. 3. In the Installed Templates section, in the Visual C# group, click Web, then click Jscript file. Page 85

86 4. In the Name textbox, type MyRibbonizedWebPart.js. Figure 97 - Adding the JScript File 5. Click Add. a. The file is added to the solution and is opened in the editor pane. Task 7 Developing the MyRibbonizedWebPart.js Jscript file In this task you will add code to the newly added Jscript file. 1. Register the namespace for the customization. Add the following script to the MyRibbonizedWebPart.js file. Type.registerNamespace('MyRibbonizedWebPart'); 2. Next, create a function that will serve as the constructor for the JavaScript page component. The client-side ID of the Web Part is passed in as the sole argument. This allows the page component to have knowledge of the Web Part that it provides commands for. Add the following script to the end of the MyRibbonizedWebPart.js file: MyRibbonizedWebPart.MyWebPartComponent = function(id){ MyRibbonizedWebPart.MyWebPartComponent.initializeBase(this); this._id = id; } 3. Next, create the class prototype for the page component class. The prototype should adhere to the interface defined by the CUI.Page.PageComponent class, but since we will be deriving from an existing implementation of this class you do not have to provide all the methods defined by Page 86

87 CUI.Page.PageComponent. Add the following script to the end of the MyRibbonizedWebPart.js file: MyRibbonizedWebPart.MyWebPartComponent.prototype = { _id: null, get_webpartisselected: function() { return this._id === SP.Ribbon.WebPartComponent.get_activeWebPartId(); }, getglobalcommands: function() { return null; }, canhandlecommand: function(commandid) { return false; }, handlecommand: function(commandid, properties, sequence) { return false; } } 4. Next, register the class and set the inheritance structure. The page component needs to derive from the built-in CUI.Page.PageComponent class. Add the following script to the end of the MyRibbonizedWebPart.js file: MyRibbonizedWebPart.MyWebPartComponent.registerClass( 'MyRibbonizedWebPart.MyWebPartComponent', CUI.Page.PageComponent); 5. Next, you need to indicate to the ScriptManager that the MyRibbonizedWebPart.js script was loaded. Add the following script to the end of the MyRibbonizedWebPart.js file: if( typeof(sys)!= "undefined" && Sys && Sys.Application ){ Sys.Application.notifyScriptLoaded(); } NotifyScriptLoadedAndExecuteWaitingJobs("MyRibbonizedWebPart.js"); 6. Within the getglobalcommands function, replace the text return null; with the following: var basecommands = new Array(); Array.add(baseCommands, 'webpartpagemyribbonwebpart'); Array.add(baseCommands, 'demoaction'); return basecommands; Page 87

88 7. Within the canhandlecommand function, replace the text return false; with the following: if(commandid == 'webpartpagemyribbonwebpart') { return true; } if (commandid == 'demoaction') { return this.get_webpartisselected(); } return MyRibbonizedWebPart.MyWebPartComponent.callBaseMethod( this, 'canhandlecommand', [commandid]); 8. Within the handlecommand function, replace the text return false; with the following: if (commandid == 'webpartpageribbonwebpart') { return true; } else if (commandid == 'demoaction') { alert('you clicked ' + this._id); return true; } return false; 9. Click the File menu and click Save All. Task 8 Modifying the WebPart1 class In this task you will add code to the WebPart1 class In the Solution Explorer window, in the WebPart1 group, right click WebPart1.cs, and click Open Replace the contents between the { } of the public class WebPart1 with the following code: Page 88

89 protected override void RenderContents(HtmlTextWriter writer) { writer.write("hello World"); } protected override void OnPreRender(EventArgs e) { ScriptLink.RegisterScriptAfterUI(this.Page, "CUI.js", false, true); ScriptLink.RegisterScriptAfterUI(this.Page, "SP.Ribbon.js", false, true); string script initribbonwebpart{0}(){{ CUI.Page.PageManager.get_instance().addPageComponent( new MyRibbonizedWebPart.MyWebPartComponent('WebPart{0}')); SP.Ribbon.PageManager.get_instance().addPageComponent( new MyRibbonizedWebPart.MyWebPartComponent('WebPart{0}')); }} ExecuteOrDelayUntilScriptLoaded( initribbonwebpart{0}, 'MyRibbonizedWebPart.js');"; script = String.Format(script, ClientID); ScriptLink.RegisterScriptAfterUI( Page, "MyRibbonizedWebPart/MyRibbonizedWebPart.js", false, true); Page.ClientScript.RegisterStartupScript( typeof(webpart1), "initializescript", script, true); } base.onprerender(e); 132. In Solution Explorer window, right click MyRibbonizedWebPart, click Add, and choose SharePoint Mapped Folder. The Add Sharepoint Mapped Folder dialog appears Expand Template and then click XML. Figure 98 - Selecting SharePoint Mapped Folder 134. Click OK. Page 89

90 135. In the new XML folder, right-click MyRibbonizedWebPart, click Add and then click New Item In the Installed Templates dialog, expand Visual C# and click Data and then click XML File In the Name textbox, type MyRibbonizedWebPart.xml. Note, the filename before the extension must match the name of the JavaScript file Click Add In the Editor window add the following contents to the XML file: <Script OnDemandKey="ribbon"> <File>CUI.js</File> <File> SP.Ribbon.js</File> </Script> 140. In the Solution Explorer window, right-click MyRibbonizedWebPart and click Deploy Open Internet Explorer and browse to Note. we are intentionally using the default.aspx page, not the home.aspx, since the xml tags are now dependent on the ribbon id s, which are defined correctly on the default.aspx page 142. On the ribbon tab, click Page 143. On the ribbon, click Edit Click the Left web part area to enable the Page Tools menu, and then click Insert On the ribbon, click Web Part In the Categories section, click Custom and choose WebPart In the About the Web Part dialog, click Add. The web Part is added to the page Click the newly added web part On the ribbon, click Demo Action. The action you have created appears. Note. Depending on the build, this exercise might have issues on the code it s using. Lab Summary In this lab you: Created a SharePoint list in SharePoint Designer Created list columns in Internet Explorer Created items for the list Edited the All Items view in SharePoint Designer Enabled inline editing Configured Grouping and Conditional Formatting Page 90

91 Created an InfoPath Form to create content Crated a Ribbon XML file to add a custom action Hands-On Lab Lab Manual Lab 06 LINQ to SharePoint 2010 Page 91

92 Lab 06 LINQ to SharePoint Estimated time to complete this lab: 45 minutes The project files for this lab are in the C:\Student\Labs\06_LINQ folder Lab Objective LINQ to SharePoint is a technology for querying SharePoint lists that relieves the developer from having to write CAML queries. In this lab you will: Create lists for use with LINQ. Create a web part for accessing the list data using LINQ. Additional Resources This lab includes the following additional resources: Starter Files NA There are no starter files for this lab. Source Code C:\Student\Labs\06_LINQ\Solution C# Solution files for the LINQLists and LINQListsPart exercises. Resources C:\Student\Presentations\06_LINQ Supporting presentations for the topics in this lab. Getting Started Locations This Hands-On Lab contains a number of additional resources in fixed locations. By default, it is assumed that the base HOL directory is C:\Student and that the labs and additional resources are located under this directory. The default working folder for this lab is C:\Student\Labs\06_LINQ. Copying code samples from Word document Copying and pasting code from this Word document to Visual Studio is only safe for the sections of formatted code, e.g.: Console.WriteLine("This is safe code!"); Code not in these sections may contain Unicode or other invisible characters that are not valid XML or C#/VB code, e.g.: Page 92 Console.WriteLine( This is NOT safe code!! );

93 Lab Setup Instructions In the lab setup you will execute a PowerShell script that will create a new SharePoint site collection. 1. Start the Virtual Machine in Hyper-V. 2. Log on to the Virtual Machine as the local administrator with a user name of Kompasxnet\administratorand a password of Pa$$w0rd. 3. Open Windows Explorer and browse to the location C:\Student\Labs\06_LINQ, in the folder double-click SetupLab06.bat. 4. Verify the site created successfully message and then press [Enter] to close the prompt. The setup script launches a PowerShell script that creates a sample SharePoint site at the location that you will use in the next exercises. Exercise 1 Creating List Data In this exercise you will create a feature to provision lists. Because LINQ code is tied to specific list schemas, your solutions will often contain a list-provisioning component. Task 1 Create a Visual Studio project with an EventReceiver In this task you will add an Event Receiver to a Visual Studio project. 1. Open Internet Explorer and browse to the site This is the site created in the lab setup. Note the site is a blank top level site. Leave Internet Explorer open, you will use it later in this exercise. 2. Click Start All Programs Microsoft Visual Studio 2010 Microsoft Visual Studio On the Start page, in the Projects section, click New Project. 4. In the Installed Templates section, in the Visual C# group, expand the SharePoint group, click Then click Empty Project. 5. In the Name textbox, type LINQLists. Page 93

94 6. In the Location textbox, type C:\Student\Labs\06_LINQ Figure 99 - Creating the LINQLists Project 7. Leave other fields with their default values and click OK. The SharePoint Customization Wizard appears. 8. In the What local site do you want to use for debugging? combobox, type 9. Click the Deploy as a full-trust solution option box. Figure SharePoint Customization Settings Page 94

95 10. Click Finish. 11. In the Solution Explorer window, right click Features and choose Add Feature 12. Right-click the Feature1 file just created, click Add Event Receiver. Figure Adding an Event Receiver The event receiver is added to the project and is opened for editing. Page 95

96 Figure Event Receiver in Edit Pane Task 2 Create a Visual Studio project with an EventReceiver In this task you will add code to the Receiver class to help with the creation of fields in the lists. 1. Place the cursor before the first // Uncomment text in the public class Feature1EventReceiver and press [Enter]. 2. In the space you have just created, paste the following code: Page 96

97 private void FixupField(SPList splist, string fieldinternalname) { FixupField(spList.Fields.GetFieldByInternalName(fieldInternalName)); } private void FixupField(SPField spfield) { // This method takes an InternalName of a field in a SPList and makes // some changes to get the desired behavior spfield.showindisplayform = true; spfield.showineditform = true; spfield.showinlistsettings = true; spfield.showinnewform = true; spfield.showinversionhistory = true; spfield.showinviewforms = true; // Add field to default view SPView defaultview = spfield.parentlist.defaultview; defaultview.viewfields.add(spfield); defaultview.update(); } spfield.update(); Task 3 Define the FeatureActivated method In this task you will enable the FeatureActivated method and add code to the method. 1. Locate the commented out FeatureActivated method, and remove the comments. The code should look as follows: public override void FeatureActivated(SPFeatureReceiverProperties properties) { } 2. Place the cursor before the close brace } in the code and press [Enter]. 3. In the space you have just created, paste the following code: Page 97

98 using (SPWeb spweb = (SPWeb)properties.Feature.Parent) { //Projects List Guid plistguid = spweb.lists.add("projects", "Company Projects", SPListTemplateType.GenericList); spweb.update(); //Projects List columns SPList plist = spweb.lists[plistguid]; plist.onquicklaunch = true; SPField ptitleidfield = plist.fields["title"]; FixupField(pList, plist.fields.add("description", SPFieldType.Text, false)); FixupField(pList, plist.fields.add("due Date", SPFieldType.DateTime, false)); SPFieldDateTime duedatefield = (SPFieldDateTime)pList.Fields["Due Date"]; duedatefield.displayformat = SPDateTimeFieldFormatType.DateOnly; duedatefield.update(); plist.update(); // Employees List Guid elistguid = spweb.lists.add("employees", "Employees", SPListTemplateType.GenericList); spweb.update(); //Employees List columns SPList elist = spweb.lists[elistguid]; elist.onquicklaunch = true; SPField titleidfield = elist.fields["title"]; titleidfield.title = "Fullname"; titleidfield.update(); FixupField(eList, elist.fields.add("jobtitle", SPFieldType.Text, false)); FixupField(eList, elist.fields.add("team", SPFieldType.Text, false)); FixupField(eList, elist.fields.add("contribution (in Milestones)", SPFieldType.Number, false)); string projectfieldinternalname = elist.fields.addlookup("project", plistguid, false); SPFieldLookup projectfield = (SPFieldLookup)eList.Fields.GetFieldByInternalName( projectfieldinternalname); projectfield.lookupfield = ptitleidfield.internalname; FixupField(projectField); elist.update(); // Project Manager field (Project to Employee lookup) string employeefieldinternalname = plist.fields.addlookup( "Primary Contact", elistguid, false); SPFieldLookup managerfield = (SPFieldLookup)pList.Fields.GetFieldByInternalName( employeefieldinternalname); managerfield.lookupfield = titleidfield.internalname; FixupField(managerField); plist.update(); } Page 98

99 Task 4 Define the FeatureDeactivating method In this task you will enable the FeatureDeactivating method. 1. Locate the commented out FeatureDeactivating method, and replace with the following code: public override void FeatureDeactivating(SPFeatureReceiverProperties properties) { using (SPWeb spweb = (SPWeb)properties.Feature.Parent) { SPList emplist = spweb.lists["employees"]; emplist.delete(); spweb.update(); SPList projlist = spweb.lists["projects"]; projlist.delete(); spweb.update(); } } Task 5 Build and test the project In this task, you will build the project and confirm that the LINQList feature is activated. 1. Click Save All. 2. Press [CTRL] + [F5] to build, deploy, and run the solution. After a few seconds, Internet Explorer appears and displays the site. 3. From Internet Explorer, on the Site Actions menu, click Site Settings. 4. On the Site Settings page, in the Site Actions section, click Manage site features. Page 99

100 Figure Site Settings 5. On the Site Features page, verify that LINQList Feature1 is active. 6. Click Home in the top left of screen. On the Quick Launch bar you will see two new lists, Projects and Employees. Page 100

101 7. In the Quick Launch bar, click Projects. 8. On the ribbon, in the List Tools tab, click Items. 9. On the Items ribbon, click New Item. 10. In the Title textbox, type Future 11. In the Description textbox, type Nuclear Powered Toys 12. In the Due Date, type 6/1/2010 You will need to leave the Primary Contact empty at this point. You will return to it when you have created an Employee. 13. In the Quick Launch bar, click Employees. 14. On the ribbon, in the List Tools tab, click Items. 15. On the Items ribbon, click New Item. 16. In the Fullname textbox, type Jane Evans 17. In the JobTitle textbox, type Designer 18. In the Team textbox, type Office 19. In the Contribution (in Milestones) textbox, type In the Project dropdown list, click Future. 21. Save item and start new item creation 22. In the Fullname textbox, type Alberto Hatin Page 101

102 23. In the JobTitle textbox, type Engineer 24. In the Team textbox, type Engineering 25. In the Contribution (in Milestones) textbox, type In the Project dropdown list, click Future. 27. In the Quick Launch bar, click Projects. 28. In the Dropdown menu against the Future project, click Edit Item. Figure Editing the Project List Item 29. In the Primary Contact dropdown list, click Jane Evans. 30. Close Visual Studio. Exercise 2 Creating Entities by Using the SPMetal Utility In this exercise you will use SPMetal to create entities for use in your code. Task 1 Use the SPMetal utility to create the entities code file In this task you will create the entities.cs file using the SPMetal tool. You will then make use of this file in a later Exercise. 1. Click Start and then click Command Prompt. 2. At the command prompt, type the following text (on one line): CD C:\Program Files\Common Files\Microsoft Shared\web server extensions\14\bin and press [ENTER]. 3. At the command prompt, type the following command: SPMetal /web: /code:entities.cs /language:csharp 4. Press [Enter]. Page 102

103 Figure SPMetal Results Page 103

104 5. From the command prompt, type Notepad entities.cs. This is the file created from the SPMetal utility. 6. In Notepad, click the File menu, then choose Exit. 7. In the command prompt, type Exit and press [Enter]. Page 104

105 Exercise 3 Creating a Web Part that uses LINQ In this exercise you will create a web part that queries the lists you created earlier. The web part will create a view of the lists on the SharePoint site collection. Task 1 Creating a Visual Studio Project In this task you will create a Visual Studio Project. 1. Click Start All Programs Microsoft Visual Studio 2010 Microsoft Visual Studio On the Start page, in the Projects section, click New Project. 3. In the Installed Templates section, in the Visual C# group, expand the SharePoint group, click Then click Visual Web Part. 4. In the Name textbox, type LINQListsPart. Figure Creating the LINQListsPart Project 5. Leave other fields with their default values and click OK. The SharePoint Customization Wizard appears. Page 105

106 6. In the What local site do you want to use for debugging? combobox, type 7. Click Finish. Page 106

107 Task 2 Configuring the new application In this task you will configure the new application and edit the code. 1. In the Solution Explorer window, right-click LINQListsPart, click Add, and then click Existing Item. 2. Browse to the C:\Program Files\Common Files\Microsoft Shared\web server extensions\14\bin folder. 3. Click Entities.cs and then click Add. Figure Adding the Entities.cs File 4. In the Solution Explorer window, right-click References, and then click Add Reference. 5. Click the Browse tab. 6. Browse to the following folder: C:\Program Files\Common Files\Microsoft Shared\web server extensions\14\isapi 7. Click Microsoft.SharePoint.Linq.dll, and then click OK. 8. In the Solution Explorer window, under VuisualWebPart1, right click VisualWebPart1UserControl.ascx and click Open. 9. On the next empty line at the end of the file, add the following code: <asp:literal ID="display" runat="server"></asp:literal> 10. In Solution Explorer, expand the VisualWebPart1 node, expand VisualWebPart1UserControl.ascx, right click VisualWebPart1UserControl.ascx.cs and click Open. 11. Place the cursor at the top of the file, before the first using statement in the file, and then press [ENTER]. 12. In the space you have just created, paste the following code: Page 107

108 using System.Text; using System.Linq; using Microsoft.SharePoint.Linq; 13. Locate the Page_Load method of the web part, place the cursor before the closing } in the Page_Load method and press [Enter] A space is added as shown below. protected void Page_Load(object sender, EventArgs e) { } 14. In the space you have just created, paste the following code: StringBuilder writer = new StringBuilder(); try { using(entitiesdatacontext dc = new EntitiesDataContext(" { var q = from emp in dc.employees where emp.project.duedate < DateTime.Now.AddYears(5) orderby emp.project.duedate select new { emp.title, Contact = emp.project.primarycontact.title }; writer.append("<table border=\"1\" cellpadding=\"3\" cellspacing=\"3\">"); foreach (var employee in q) { writer.append("<tr><td>"); writer.append(employee.title); writer.append("</td><td>"); writer.append(employee.contact); writer.append("</td></tr>"); } } } catch (Exception x) { writer.append("<tr><td>"); writer.append(x.message); writer.append("</td></tr>"); } finally { writer.append("</table>"); display.text = writer.tostring(); } 15. Press [CTRL] + [F5]. The application builds and Internet Explorer starts by showing the New Web Part Page functionality. Move back to debug site front page at url On the Site Actions menu, click Edit Page. 17. On the Editing Tools tab, click Insert. Page 108

109 18. On the Insert ribbon, click Web Part. The SharePoint 2010 User Interface for adding Web Parts appears. 19. In the Categories section on the left of the screen, click Custom. 20. In the Web Parts section in the middle of the screen, ensure VisualWebPart1 Title is selected. Figure VisualWebPart1 21. In the About the Web Part section, in the Add Web Part To dropdown list, ensure Rich Content is selected. 22. Click Add. The Web Part lists the Employees in the SharePoint Site Collection with the primary contact of the project they are associated with. Figure Web Part Display on Welcome Page 23. On the Page tab, click Save. 24. Close Internet Explorer Page 109

110 Task 3 Setting a Breakpoint in a Visual Studio 2010 Web Part 1. Switch back to Visual Studio In the Editor window, ensure VisualWebPart1USerControl.ascx.cs is the open file. 3. Place the cursor at the line beginning with the text StringBuilder. 4. Press [F9]. This configures a breakpoint in the code. Figure Configuring a Breakpoint 5. From the Visual Studio 2010 toolbar, click Debug and then click Start Debugging. 6. Move to demo site front page from the New Web Part Page functionality shown by default 7. When your breakpoint is reached, press [F11] to step through the code. Page 110

111 Figure Stepping Through Code 8. From the Visual Studio 2010 toolbar, click Debug and then click Stop Debugging. 9. Close Visual Studio and Internet Explorer. Lab Summary In this lab you performed the following tasks: Created a Visual Studio project with an EventReceiver Defined a FeatureActivated method Built and tested the project Created entities code file using the SPMetal Utility Created a Web Part that uses LINQ Deployed, tested and debugged the solution Page 111

112 Hands-On Lab Lab Manual Lab 07 Client Object Model Page 112

113 Lab 07 Client Object Model Estimated time to complete this lab: 45 minutes The project files for this lab are in the C:\Student\Labs\07_ClientOM folder Lab Objective The Client Object Model extends the familiar server-side object model to the client. The Client Object Model comes in two flavors:.net and JavaScript. The.NET model can be used with console applications, Windows applications, and Silverlight applications. The JavaScript model is used in client scripting. In this lab, you ll make use of the Client Object Model to build applications. Additional Resources This lab includes the following additional resources: Starter Files NA There are no starter files for this lab. Source Code C:\Student\Labs\07_ClientOM\Solution C# Solution files for the ListPrinter and ProjectManager projects. Resources C:\Student\Presentations\07_ClientOM Supporting presentations for the topics in this lab. Getting Started Locations This Hands-On Lab contains a number of additional resources in fixed locations. By default, it is assumed that the base HOL directory is C:\Student and that the labs and additional resources are located under this directory. The default working folder for this lab is C:\Student\Labs\07_ClientOM. Copying code samples from Word document Copying and pasting code from this Word document to Visual Studio is only safe for the sections of formatted code, e.g.: Console.WriteLine("This is safe code!"); Code not in these sections may contain Unicode or other invisible characters that are not valid XML or C#/VB code, e.g.: Console.WriteLine( This is NOT safe code!! ); Page 113

114 Lab Setup Instructions In the lab setup you will execute a PowerShell script that will create a new SharePoint site collection. 1. Start the Virtual Machine in Hyper-V. 2. Log on to the Virtual Machine as the local administrator with a user name of Kompasxnet\administrator and a password of Pa$$w0rd. 3. Open Windows Explorer and browse to the location C:\student\Labs\07_ClientOM, in the folder double-click SetupLab07.bat. 4. Verify the site created successfully message, and then press [Enter] to close the prompt. The setup script launches a PowerShell script that creates a sample SharePoint site at the location that you will use in the next exercises. Exercise 1 Retrieving Lists In this exercise you will create the first part of a Windows application for printing SharePoint lists as Word documents. In this exercise, you will retrieve the available lists from a SharePoint site. Task 1 Designing the Windows Form interface In this task you will design the interface for the Windows Form application. 5. Open Internet Explorer and browse to the site This is the site created in the lab setup. Note the site is a blank top level site. Leave Internet Explorer open, you will use it later I this exercise. 6. Click Start All Programs Microsoft Visual Studio 2010 Microsoft Visual Studio On the Start page, in the Projects section, click New Project. 8. In the Installed Templates section, in the Visual C# group, click Windows, and then click Windows Forms Application. 9. Ensure that the.net Framework version has been set to 3.5 Figure 112 Choosing correct.net Framework version 10. In the Name textbox, type ListPrinter Page 114

115 11. In the Location textbox, type C:\student\Labs\07_ClientOM. Figure Creating a Windows Form Application 12. Click OK. 13. In the Solution Explorer window, right-click ListPrinter and then click Add Reference. 14. Click the Browse tab, and then browse to the following location: C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\ISAPI. 15. Click Microsoft.SharePoint.Client.dll and, holding down the [CTRL] key, click Microsoft.SharePoint.Client.Runtime.dll Page 115

116 Figure Adding References 16. Click OK. The references are added to the Solution Explorer window under References. 17. Click the Toolbox to the left of the editor pane and click the pin icon. 18. Expand Common Controls, then click and drag a TextBox control onto Form1. Page 116

117 Figure Designing the Form 19. Pull the right hand edge of the TextBox further to the right to make the box wider. This control will be used to enter a web address. 20. Click the Toolbox to the left of the editor pane and expand Common Controls, then click and drag a ListBox control onto Form1. Place the ListBox below the TextBox you have already added. Pull the bottom edge of the ListBox towards the bottom of the form to make the box longer. This control will show lists available in the site specified in the TextBox. 21. Click the Toolbox to the left of the editor pane and expand Common Controls, then click and drag a Button control onto Form1. Page 117

118 22. In the right-hand properties window change the Text property from Button1 to Show Lists. Figure Setting Properties Your form should look similar to the following example: Figure Completed Form Task 2 Adding code to the Windows Form application In this task you will add code to the Windows Form Application. You will add code for the button control. 23. Double-click the Button control to open the code window. 24. Place the cursor at the top of the file, after the last using statement in the file, and then press [ENTER]. Page 118

119 25. In the space you have just created, paste the following code: using ClientOM = Microsoft.SharePoint.Client; 26. Add the following code between the braces in the button1_click event. listbox1.items.clear(); using (ClientOM.ClientContext ctx = new ClientOM.ClientContext(textBox1.Text)) { ClientOM.Web site = ctx.web; ctx.load(site); ctx.load(site.lists); ctx.load(site, x => x.lists.where(l => l.title!= null)); ctx.executequery(); foreach(clientom.list list in site.lists) { listbox1.items.add(list.title); } } 27. Press [CTRL] + [F5]. The application builds and the form appears. 28. In the TextBox control, type and then press the Show Lists button. Lists from the Lab07 site are returned. Figure Running the Show Lists Application Click the Close icon in the top-right of the Form1 application. Page 119

120 Exercise 2 Printing a List Task 1 Modifying to the Windows Form application In this task the form will be modified to include a new button that will save the lists to Word using OpenXML. 29. In the Solution Explorer window, right-click Form1.cs and click View Designer. Form1 appears in the editor window. 30. Click the Toolbox to the left of the editor pane and expand Common Controls, then click and drag a Button control onto Form In the right-hand properties window change the Text property from Button1 to Print Lists. 32. In the Solution Explorer window, right-click ListPrinter and click Add Reference. 33. Click the Browse tab, and then browse to the following location: C:\Program Files\Reference Assemblies\Microsoft\Framework\v Click WindowsBase.dll and click OK. The references are added to the Solution Explorer window under References. 35. In the Solution Explorer window, right-click ListPrinter and click Add Reference. 36. Click the.net tab, and then click DocumentFormat.OpenXml and click OK. 37. With Form1 in Design mode, double-click the Print List button. The code window opens. 38. Add the following code to the end of the using statements at the top of the file: using DocumentFormat.OpenXml; using DocumentFormat.OpenXml.Packaging; using DocumentFormat.OpenXml.Wordprocessing; Page 120

121 39. Add the following code between the braces in the button2_click event. if (listbox1.selectedindex > -1) { //Context using (ClientOM.ClientContext ctx = new ClientOM.ClientContext(textBox1.Text)) { //Get selected list string listtitle = listbox1.selecteditem.tostring(); ClientOM.Web site = ctx.web; ctx.load(site, s => s.lists.where(l => l.title == listtitle)); ctx.executequery(); ClientOM.List list = site.lists[0]; //Get fields for this list ctx.load(list, l => l.fields.where(f => f.hidden == false && (f.canbedeleted == true f.internalname == "Title"))); ctx.executequery(); //Get items for the list ClientOM.ListItemCollection listitems = list.getitems(clientom.camlquery.createallitemsquery()); ctx.load(listitems); ctx.executequery(); //DOCUMENT CREATION CODE GOES HERE } } MessageBox.Show("Document Created!"); Page 121

122 40. Add the following code to the file, replacing the text //DOCUMENT CREATION CODE GOES HERE. //Create the document using (WordprocessingDocument package = WordprocessingDocument.Create("c:\\" + listbox1.selecteditem.tostring() + ".docx", WordprocessingDocumentType.Document)) { Body body = new Body(); Table table = new Table(); //Columns TableRow colrow = new TableRow(); foreach (ClientOM.Field field in list.fields) { TableCell colcell = new TableCell(); colcell.append(new Paragraph(new Run(new Text(field.Title)))); colrow.append(colcell); } table.append(colrow); //Rows foreach (ClientOM.ListItem item in listitems) { TableRow datarow = new TableRow(); Text(dataVal)))); } foreach (ClientOM.Field field in list.fields) { TableCell datacell = new TableCell(); string dataval = string.empty; try { dataval = item[field.internalname].tostring(); } catch{ dataval = "-"; } datacell.append(new Paragraph(new Run(new } datarow.append(datacell); table.append(datarow); body.append(table); //Build document package package.addmaindocumentpart(); package.maindocumentpart.document = new Document(body); package.maindocumentpart.document.save(); package.close(); } 41. Press [CTRL] + [F5]. The application builds and the form appears. Page 122

123 42. In the TextBox control, type and then press the Show Lists button. Lists from the Lab07 site are returned. 43. Click the User Information List item returned in the application and click the Print List button. Figure Running the Print List Feature A new Microsoft Word document will be created in the root of the C: drive with a name that matches that of the selected list. 44. Right-click the Windows Start button, and click Explore. 45. Browse to the root of the C: drive, and locate the newly created Word Document. Page 123

124 46. Open the Word Document and review its contents. Note: some lists will have more text than others. Figure Results from Hires List 47. Close Microsoft Word. Lab Summary In this lab you performed the following tasks. Created a Windows Form based application that retrieves lists from a SharePoint Site Collection Used OpenXML to output contents of the list to Word Page 124

125 Hands-On Lab Lab Manual Lab 08 -Workflow Page 125

126 Lab 08 Workflow Estimated time to complete this lab: 60 minutes The project files for this lab are in the C:\Student\Labs\08_workflow folder Lab Objective The Office 2010 platform has a new level of integration between the different workflow development tools. Visio 2010, SharePoint Designer 2010, and Visual Studio 2010 can all work together to create a complete workflow. By combining all three, power users and developers can work together to structure an organization s processes. In this lab you will: Use Visio to create the high level process. Export the Visio model to SharePoint Designer 2010 Use SharePoint Designer 2010 to complete the detail Export from SharePoint Designer 2010 to a WSP file Import the WSP file into Visual Studio 2010 Additional Resources This lab includes the following additional resources: Starter Files C:\Student\Labs\08_Workflow\Starter Starter files for the Timesheet application. Source Code C:\Student\Labs\08_Workflow\Solution Solution files for the Timesheet lab including the Visio drawing, WSP file and completed Timesheet Visual Studio project. Resources C:\Student\Presentations\08_Workflow Supporting presentations for the topics in this lab. Getting Started Locations This Hands-On Lab contains a number of additional resources in fixed locations. By default, it is assumed that the base HOL directory is C:\Student and that the labs and additional resources are located under this directory. The default working folder for this lab is C:\Student\Labs\08_ workflow. Copying code samples from Word document Copying and pasting code from this Word document to Visual Studio is only safe for the sections of formatted code, e.g.: Page 126

127 Console.WriteLine("This is safe code!"); Code not in these sections may contain Unicode or other invisible characters that are not valid XML or C#/VB code, e.g.: Console.WriteLine( This is NOT safe code!! ); Lab Setup Instructions In the lab setup you will execute a PowerShell script that will create a new SharePoint site collection. 1. Start the Virtual Machine in Hyper-V. 2. Log on to the Virtual Machine as the local administrator with a user name of Kompasxnet\administratorand a password of Pa$$w0rd. 3. Open Windows Explorer and browse to the location C:\student\Labs\08_Workflow, in the folder double-click SetupLab08.bat. 4. Verify the site created successfully message, and then press [Enter] to close the prompt. The setup script launches a PowerShell script that creates a sample SharePoint site at the location that you will use in the next exercises. Exercise 1 Creating the workflow In this first exercise you will setup the workflow and add a task process. Task 1 Create a Workflow in Visio 2010 In this task you will use Microsoft Visio to design a workflow. You will then save this drawing and use it in SharePoint Designer in the next Exercise. 5. Click Start All Programs Microsoft Office Microsoft Visio Microsoft Visio starts. 6. Click Cancel at the Microsoft Office Activation Wizard prompt, if shown. Page 127

128 Figure Visio In the Template Categories In the middle of the screen click Flowchart. 8. In the list Available Templates, click Microsoft SharePoint Workflow and press [Enter]. Figure Microsoft SharePoint Workflow Template 9. In the SharePoint Workflow Terminators section, drag a Start shape to the left of the diagram. Page 128

129 Figure SharePoint Workflow Terminators 10. In the SharePoint Workflow Terminators section, drag a Terminate shape to the right of the diagram. Figure SharePoint Workflow Terminators 11. Expand the SharePoint Workflow Conditions. Figure SharePoint Workflow Connectors Page 129

130 12. In the SharePoint Workflow Conditions section, drag a Compare Data Source shape to the diagram. 13. Double-click the newly added shape and change the name to Check if manager approval is needed. 14. If the SharePoint Workflow Action category isn t visible, click the separator bar between the shapes and the categories and drag it down. Figure Revealing the SharePoint Workflow Action Category 15. In the SharePoint Workflow Action section, drag a Log to History List shape to the diagram. 16. Double-click the newly added shape and change the name to Log Manager approval required. 17. In the SharePoint Workflow Action section, drag a Log to History List shape to the diagram and release under the last shape. 18. Double-click the newly added shape and change the name to Log automatically approved. 19. In the SharePoint Workflow Action section, drag a Log to History List shape to the diagram and release to the right of the last two shapes. 20. Double-click the newly added shape and change the name to Log submission to HR. 21. Hover over the source shapes, click and drag an Arrow to the target shapes. The diagram should look as follows: Page 130

131 Figure Visio Workflow 22. Right-click the connection from Check if manager approval is needed to Log Manager approval required and select Yes. 23. Right-click the connection from Check if manager approval is needed to Log automatically approved and select No. Figure 128 Setting Approval Paths 24. Click the Save icon, and save the process diagram to C:\Student\Labs\08_Workflow\lab with a filename of Timesheet Submission Workflow.vsd 25. In the menu click Process, and then in the ribbon click Export. Page 131

132 Figure Exporting the Workflow 26. Save the exported workflow to C:\Student\Labs\08_Workflow\lab and provide the name Timesheet Submission Workflow.vwi 27. Leave Visio open, you will return to it later in this lab. Page 132

133 Exercise 2 Building Workflows with SharePoint Designer 2010 In this exercise you will import the Visio workflow into SharePoint Designer and complete it. This includes defining the parameters of each step as well as adding some new steps. At the end you will publish your complete workflow and export it back to Visio. Task 1 Adding Logic with SharePoint Designer In this task you will import the Visio workflow to SharePoint Designer. 28. Click Start All Programs Microsoft Office Microsoft Office SharePoint Designer Microsoft Office SharePoint Designer 2010 starts. 29. Click Cancel at the Microsoft Office Activation Wizard prompt, if shown. 30. In the Open SharePoint Site section, click Open Site. The Open Site dialog appears. 31. In the Site name textbox, type Figure Opening SharePoint Designer Page 133

134 32. Click Open. Click cancel if you are prompted at a permission prompt. SharePoint Designer opens. Figure SharePoint Designer 33. In the left hand navigation bar, click Workflows. The Globally Reusable workflows are displayed. Figure Workflows Page 134

135 34. On the ribbon, click Import from Visio 35. In the Import Workflow from Visio Drawing click Browse and open the folder C:\Student\Labs\08_Workflow\lab 36. In the folder click Timesheet Submission Workflow.vwi and then click Open. 37. On the Import Workflow from Visio Drawing dialog, click Next. 38. In the Workflow name textbox, verify the name is Timesheet Submission Workflow. 39. In the Choose the type of workflow to import as, click Reusable Workflow. 40. In the Run on items inheriting from this type Dropdown list, select Time Sheet. 41. Click Finish to import the workflow. The Timesheet Submission workflow is displayed. Review this workflow it is the workflow you defined in Visio. Page 135

136 Figure The Workflow in SharePoint Designer Task 2 Creating Local Variables In this task you will create local variables to store the maximum number of hours before approval is required and the employee name. 42. On the ribbon, click Local Variables. Figure Local Variables 43. In the Workflow Local Variables dialog box, click Add. 44. In the Name textbox, type EmployeeName 45. In the Type dropdown list, click String. Page 136

137 46. Click OK. 47. Click Add. 48. In the Name textbox, type MaxHours 49. In the Type dropdown list, click Integer. 50. Click OK. 51. In the Workflow Local Variables dialog, click OK. Page 137

138 Task 2 Setting Workflow Variables In this task you will set the workflow variables. For the EmployeeName you will first set an EmployeeID. This will be replaced later with the employee s real name requested from the HR System. 52. Place the cursor just above the first If statement in the workflow. 53. On the ribbon, click Action and then click Set Workflow Variable. Figure Editing the Workflow 54. Click the Workflow Variable link and click Variable:EmployeeName. 55. Click the Value link and click the [fx] button Figure Specifying a Statement 56. In the Data Source dropdown list, click Current Item. 57. In the Field from source dropdown list, click EmployeeID. Figure Providing a Lookup 58. Click OK. Page 138

139 59. Place the cursor just below the action you have added and before the first If statement in the workflow 60. On the ribbon, click Action and then click Set Workflow Variable. Figure Defining the Rule 61. Click the Workflow Variable link and select Variable:MaxHours. 62. Click the Value link, type 40 and press [Enter]. 63. In the first If statement, click the first value hyperlink and then click the [fx] button. 64. In the Data Source dropdown list, click Current Item. 65. In the Field from source dropdown list, click Hours. 66. Click OK. 67. Click the this test hyperlink and click is greater than. 68. Click the second value hyperlink and then click the [fx] button. 69. In the Data Source dropdown list, click Workflow Variables and Parameters. 70. In the Field from source dropdown list, click Variable:MaxHours. 71. Click OK to close the dialog. Page 139

140 Figure Defining the Rule 72. In the Log manager approval required section, click the this message hyperlink, and click the ellipses button [ ] 73. In the String Builder dialog, type the text The time sheet for 74. Leave a space at the end of this text. 75. Click the Add or Change Lookup button. The Lookup for string dialog appears. Figure Logging Results 76. In the Data Source dropdown list, click Workflow Variables and Parameters. 77. In the Field from source dropdown list, click Variable:EmployeeName. Page 140

141 78. Click OK. 79. Finish the message by typing requires manager approval. 80. Click OK to close the dialog. 81. In the Log automatically approved section Click the this message hyperlink, and click the ellipses button [ ] 82. In the String Builder dialog, type the text The time sheet for 83. Leave a space at the end of this text. 84. Click the Add or Change Lookup button. The Lookup for string dialog appears 85. In the Data Source dropdown list, click Workflow Variables and Parameters. 86. In the Field from source dropdown list, click Variable:EmployeeName. 87. Click OK. 88. Finish the message by typing does not require manager approval. 89. Click OK to close the dialog. 90. In the Log submission to HR item, click the this message hyperlink, and type The time sheet has been submitted to HR. 91. Press [Enter]. Figure Defining the Rule 92. In the workflow breadcrumb, click the first Timesheet Submission Workflow. Figure The Breadcrumb Page 141

142 93. In the Settings section, enable the Show workflow visualizations on status page checkbox. Figure Show workflow visualization 94. In the ribbon, click Publish. 95. In the ribbon, click Associate to Content Type and select Timesheet. Note: If the list of content types is blank perform the following. Save the workflow, then click the Content Types section in the left-hand Navigation section, this will refresh the content types. Then click Workflows in the Quick launch bar and click your workflow again. If this does not help open up your browser and move the site ( /lab08). Move to Site Settings Site Content types Locate Time Sheet content type and manually associate the workflow we just created to the content type from the workflow settings. 96. When the browser window loads, scroll to the bottom of the page and click Next to create the association and then click Save. Task 3 Test Visio Web Access for workflow status view 97. Launch Internet Explorer and open In the Quick Launch bar, click Timesheets. Page 142

143 Figure The Time Sheets Document 99. On the ribbon tab, click Documents Tab On the ribbon, click New Document. The new document loads In the EmployeeID textbox, type 1 Page 143

144 102. In the Hours textbox, type 38 Figure Completing the Document 103. Click Save. If prompted for credentials type kompasxnet\administratorand Pa$$w0rd. Ensure the properties have saved properly. In the current VM they may be removed. If so right-click the document and Edit Properties In the new document s dropdown menu, click Workflows. Page 144

145 Figure Starting the Workflow 105. Click Timesheet Submission Workflow. The initiation page loads 106. On the initiation page, click Start. The workflow will start. Page 145

146 107. In the Timesheet list click the completed link on the item and review the Workflow History. Figure 147 Review in the Workflow Visualization 108. In the Quick Launch bar, click Timesheets On the ribbon tab, click the Documents Tab On the ribbon, click New Document. The new document loads 111. In the EmployeeID textbox, type In the Hours textbox, type 42. Note: this value requires workflow requires approval. Figure Setting a Value Requiring Approval 113. Click Save. Page 146

147 114. Provide a unique document name, for example, Doc Verify the properties are saved In the Doc2.docx dropdown menu, click Workflows Click Timesheet Submission Workflow. The initiation page loads 118. On the initiation page, click Start. The workflow will start In the Timesheet list click the completed link on the item and review the Workflow History. Keep in mind you will need to approve the task for a timesheet with hours greater than 40. Figure Workflow History Page 147

148 Task 4 Synchronizing Changes with Visio In this task you will export the changes to the workflow definition back to Visio Switch back to SharePoint Designer and verify the workflow is still in the active window In the ribbon, click Export to Visio. Figure Exporting to Visio 122. Save the updated.vwi file to C:\Student\Labs\08_Workflow\Lab\Timesheet Submission Workflow.vwi Switch to Microsoft Visio On the Process ribbon, click Import Select the C:\Student\Labs\08_Workflow\Lab\Timesheet Submission Workflow.vwi file. The Visio diagram is now updated to include the Set Workflow Variable task added in SharePoint Designer. Page 148

149 Figure The Imported Visio Diagram Exercise 3: Developing Workflows with Visual Studio 2010 In this exercise you will build a workflow in Visual Studio 2010 that submits the timesheet information to the back end HR system and places the payment reference back into the original time sheet. 1. Open Visual Studio 2010 and create a new workflow project: 2. Select the Sequential Workflow template in the Visual C# " SharePoint " 2010 templates folder and give it the name VSSubmissionWorkflow. 3. Verify the URL. The workflow should be deployed to Indicate that the workflow must be deployed as a farm solution. Figure 152 Setting the solution options Page 149

150 4. In the wizard set the workflow name to Timesheet Submission VS and select the List Workflow radio button. Click the Next button. Figure 153 Specifying workflow name 5. Clear the check box indicating a workflow association should be created on deployment. An association will be created manually to test the association page. Figure 154 Specifying lists used for debugging Page 150

151 6. Click the Finish button. 7. Add a new Code Activity from the Windows Workflow v3.0 section of the toolbox. 8. Add it immediately following the onworkflowactivated1 activity. 9. Set the name of the new code activity to SubmitToHR using the Properties window. 10. Double-click the activity to generate the ExecuteCode event handler. 11. Add the following code to simulate the calculation of a payment reference using a Guid, to be sure to have a unique reference. Save this reference in the time sheet on which the workflow runs. private void SubmitToHR_ExecuteCode(object sender, EventArgs e) { SPListItem item = workflowproperties.item; item["payment Ref"] = Guid.NewGuid().ToString(); item.update(); } 12. At this time you are going to deploy the workflow 13. Setup the auto association parameters that will tell Visual Studio to automatically associate your workflow with the Time Sheets list when it is deployed. 14. Select Workflow1 in the solution explorer. 15. In the Properties window, set the Auto Associate property to True. 16. In the History List property click the [...] button to start the wizard. 17. On the next page select a list of Time Sheets in the first dropdown and click Next. Page 151

152 Figure 155 Specifying lists 18. On the final page check the first check box and clear the rest and click Finish. 19. Deploy the workflow to SharePoint and verify that it works. 20. Right click the project in solution explorer and click Deploy. 21. When the deployment is complete, open Internet Explorer and navigate to Click the drop down menu on one of the documents in the list and select Workflows. 23. Click the Timesheet Submission VS link to start the workflow. 24. When the workflow is complete verify the Payment Ref was assigned and then click the Completed link. 25. Verify the workflow history. Page 152

153 Figure 156 Viewing workflow history Exercise 4: Adding Association Forms in Visual Studio 2010 In this exercise you will add an association form to the timesheet submission workflow. This form will allow configuring an hourly rate. 26. Move back to Visual Studio 27. Add a new association form to the Workflow1 workflow. 28. Right click on the Workflow1 folder and click Add >>New Item. 29. Make sure that you select the workflow node and not the project node because you will be able to add an association form but it will never be associated with the workflow. 30. Select Workflow Association Form from Visual C# >> SharePoint >> 2010, name it AssociationForm.aspx and click Add. 31. In the asp:content control with the ID of Main, add the following markup to create the page just above the AssociateWorkflow button. <table> <tr> <td>hourly rate:</td> <td> <asp:textbox ID="HourlyRateTextBox" runat="server" /> </td> </tr> </table> 32. Right click the markup window and choose View Code. 33. Add the following code to GetAssociationData method to save the hourly rate settings to the association data. Replace the comment and base class call private string GetAssociationData() { double rate = 0.0; double.tryparse(hourlyratetextbox.text, out rate); return rate.tostring(); } 34. Add a new code activity to the workflow to parse the association data and calculate the amount to pay. 35. Open Workflow1 in the designer. Page 153

154 36. Drag a new code activity from the toolbox and drop it between the onworkflowactivated1 activity and the SubmitToHR activity. 37. Rename the activity to InitializeAssocData. Figure 157 Viewing workflow definition in VS designer 38. Double-click the InitializeAssocData activity to generate the event handler. 39. Add the following code to retrieve the association data from the association form and to calculate the due amount based on the hours filled out on the time sheet and the hourly rate specified in the association form. Page 154

155 private void InitizalizeAssocData_ExecuteCode(object sender, EventArgs e) { // retrieve the association data from the association form OnWorkflowActivated activity = this.activities["onworkflowactivated1"] as OnWorkflowActivated; string associationdata = activity.workflowproperties.associationdata; // retrieve the hourly rate from the association data double amounttopay = 0.0; double.tryparse(associationdata, out amounttopay); // retrieve the list item SPListItem item = workflowproperties.item; // get the hours on the timesheet int hours = 0; int.tryparse(item["hours"].tostring(), out hours); } // calculate and save the amount to pay item["payment Amount"] = amounttopay * hours; item.update(); 40. Deploy the workflow to SharePoint by right clicking the project in solution explorer and clicking Deploy. 41. Use the new association page to fill out an hourly rate. 42. Open Internet Explorer and navigate to Click Library Settings in the Library ribbon tab. 44. Click the Workflow Settings link in the Permissions and Management section. 45. Click the Timesheet Submission VS link to manage the workflow association. 46. Click Next to view the custom association page. 47. Enter a value an amount and click Association Workflow. Page 155

156 Figure 158 Using initialization form on the site 48. Navigate back to Use the drop down menu on a timesheet for second document (Doc2) on the list and choose Edit Properties link to change the hours to Save changes 51. Click the drop down menu on one of the documents in the list and select Workflows. 52. Click the Timesheet Submission VS link to start the workflow. When the workflow is complete, you should see that a payment amount is calculated. Lab Summary In this lab you performed the following tasks: Created a workflow in Visio Exported the workflow for use in SharePoint Designer Created rules and local variables in SharePoint Designer Activated Visio on the site and tested workflow Synchronized changes back to Visio Created workflow also in Visual Studio Deployed and tested the Visual Studio workflow Page 156

157 Hands-On Lab Lab Manual Lab 14 Developing a Sandboxed Solution with Web Parts Page 157

158 Lab 14 Developing a Sandboxed Solution with Web Parts Estimated time to complete this lab: 45 minutes The project files for this lab are in the C:\Student\Labs\14_sandboxedsolutions folder Lab Objective The support for sandboxed solutions provides an important new deployment mechanism for SharePoint. With a development methodology that is the same for full solutions the key focus point is not on what to build, but on what can be built. In this lab exercise you will construct a basic Web Part that will call into the SharePoint API to retrieve some information. Next it will try and use SPSecurity to try to elevate privileges. The third and last action that is added is an attempt to initiate a HTTP connection to an external site. Additional Resources This lab includes the following additional resources: Starter Files NA There are no starter files for this lab. Source Code C:\Student\Labs\14_sandboxedsolutions \Solution Completed lab source code in C# for the SandboxedWebPart project. Resources C:\Student\Presentations\14_sandboxedsolutions Supporting presentations for the topics in this lab. Getting Started Locations This Hands-On Lab contains a number of additional resources in fixed locations. By default, it is assumed that the base HOL directory is C:\Student and that the labs and additional resources are located under this directory. The default working folder for this lab is C:\Student\Labs\14_sandboxedsolutions. Copying code samples from Word document Copying and pasting code from this Word document to Visual Studio is only safe for the sections of formatted code, e.g.: Console.WriteLine("This is safe code!"); Code not in these sections may contain Unicode or other invisible characters that are not valid XML or C#/VB code, e.g.: Console.WriteLine( This is NOT safe code!! ); Page 158

159 Lab Setup Instructions In the lab setup you will execute a PowerShell script that will create a new SharePoint site collection. 1. Start the Virtual Machine in Hyper-V. 2. Log on to the Virtual Machine as the local administrator with a user name of Kompasxnet\administratorand a password of Pa$$w0rd. 3. Open Windows Explorer and browse to the location C:\Student\Labs\14_SandboxedSolutions in the folder double click SetupLab14.bat. 4. Verify the site created successfully message, and then press a key to close the prompt. The setup script launches a PowerShell script that creates a sample SharePoint site at the location that you will use in the next exercises. Exercise 1 Creating a Visual Studio 2010 Project In this exercise you will create a SharePoint project and set it for Sandboxed deployment. Task 1- Setup Visual Studio Project 5. Click Start All Programs Microsoft Visual Studio 2010 Microsoft Visual Studio On the Start page, in the Projects section, click New Project. 7. In the Installed Templates section, in the Visual C# group, expand the SharePoint group, click Then click Empty Project. 8. In the Name textbox, type SandboxedWebPart. 9. In the Location textbox, type C:\Student\Labs\14_sandboxedsolutions Figure Sandboxed Solution Page 159

160 10. Leave other fields with their default values and click OK. The SharePoint Customization Wizard appears. 11. In the What local site do you want to use for debugging? combobox, type Click the Deploy as a sandboxed solution option box. Figure Specify Sandboxed Solution 13. Click Finish. 14. In the Solution Explorer window, right-click SandboxedWebPart and then click Add and then choose New Item. 15. In the Installed Templates section, in the SharePoint group, with 2010 selected, click Web Part. 16. In the Name textbox, type WebPart Click Add. The WebPart1.cs file opens in the code editor. Task 2 Adding Code to the Web Part In this task you will add code to the WebPart class that renders a button. When the button is pressed the number of lists in the current web will be returned. 18. Locate the WebPart1 class. 19. In the CreateChildControls method replace the code between the braces with the following: Page 160

161 Label message = new Label(); Controls.Add(message); Controls.Add(new WebControl(HtmlTextWriterTag.Br)); Button testbutton1 = new Button(); testbutton1.text = "Test 1"; testbutton1.click += delegate { message.text = String.Format("This site contains {0} lists", SPContext.Current.Web.Lists.Count); }; Controls.Add(testButton1); Task 3 Debugging the New Code In this task you will start the code in debug mode and add the web part to the page. 20. On the toolbar menu, click Debug, and then click Start Debugging. Internet Explorer loads. 21. In Internet Explorer, browse to On the ribbon, click the Page tab, and then click Edit. 23. Place cursor just above the Shared Documents web part by clicking the editor zone, and on the ribbon, under Editing Tools, click the Insert tab. 24. On the ribbon, click Web Part. 25. In the Categories section, click Custom. 26. In the Web Parts list section, click WebPart1. Figure Adding the Web Part to the page Page 161

162 27. In the About the Web Part section, click Add. The web part is added to the page 28. On the ribbon, click Save under the Page. 29. In WebPart1 WebPart, click the Test 1 button. The WebPart displays the number of lists in the current site. Figure Testing WebPart1 30. Close Internet Explorer to stop debugging. Exercise 2 Calling SPSecurity In this second exercise you will add code to the Web Part that will call SPSecurity. You will re-deploy and test the Web Part by starting debugging from Visual Studio. Task 1 Add Code Using the SPSecurity Object In this task you will add code to the CreateChildControls method that uses the SPSecurity object. When typing this code you will notice that Visual Studio s IntelliSense will not recognize SPSecurity as a valid object as it knows the object is unavailable in a sandboxed solution. When the entire line is typed out it won t add a red underline indicating a syntax error as you are still building against the full SharePoint object model. 31. In the WebPart.cs file, add the following code to the end of the CreateChildControls class, after the Controls.Add(testButton1); line and before the closing brace. Page 162

163 Button testbutton2 = new Button(); testbutton2.text = "Test 2"; testbutton2.click += delegate { try { SPSecurity.RunWithElevatedPrivileges( delegate { using (SPSite sitecollection = new SPSite(SPContext.Current.Site.ID)) { SPWeb site = sitecollection.openweb(spcontext.current.web.id); message.text = String.Format("This site contains {0} lists", site.lists.count); } }); } catch (Exception e) { message.text = e.message; } }; Controls.Add(testButton2); 32. On the Debug menu click Start Debugging. Internet Explorer loads. 33. In Internet Explorer, browse to Figure Test Button 2 in the Web Part Page 163

164 34. On WebPart1, click Test 2 button. An exception is thrown that your code handles. It shows that this Web Part, which is running in the sandbox, cannot include a reference to the SPSecurity type. Figure Exception Error 35. Close Internet Explorer to stop debugging. Exercise 3: Calling a CAS secured method In this exercise you will add code to the Web Part that tries and perform a CAS security protected task. In this example an HTTP connection is attempted. Task 1 Adding HttpWebRequest Code In this task you will add code that attempts an HttpWebRequest. This is blocked in the sandbox. 36. In the WebPart.cs file, add the following code to the end of the CreateChildControls class, after the Controls.Add(testButton2); line and before the closing brace. Button testbutton3 = new Button(); testbutton3.text = "Test 3"; testbutton3.click += delegate { try { System.Net.HttpWebRequest.Create(" } catch (Exception e) { message.text = e.message; } }; Controls.Add(testButton3); 37. On the Debug menu click Start Debugging. Internet Explorer loads. 38. In Internet Explorer, browse to Page 164

165 Figure Test Button 3 in the Web Part 39. On WebPart1, click Test 3 button. An exception is thrown that your code handles. It shows that the sandbox is running in a special CAS policy that blocks all System.Net.WebPermission demands, as the HttpWebRequest object does. Figure 166 -Exception Error 40. Close Internet Explorer to stop debugging Lab Summary In this lab you performed the following tasks: Created a Sandboxed Visual Studio Solution Created and tested a simple Web Part Called SPSecurity in the code to check the exception is handled by your code Called a CAS secured method to check the exception is captured in your code Page 165