Hands-On Lab

Creating a Visual Web PartSandboxed Solution for SharePoint Online

Lab version: 1.0

Last updated:1/14/2019

Contents

Overview

System Requirements

Setup

Task 1 – Create SharePoint Site

Task 2 – Create SharePoint Online Site

Task 3 – Prepare Code Snippets

Task 4 – Create Visual Studio Toolbox Snippets

Exercise 1: Create a Visual Web Part Sandboxed Solution

Task 1 – Creating the Visual Web Part

Task 2 – Developing the Visual Web Part

Task 3 – Testing the Visual Web Part

Task 4 – Test Sandboxed Solution Compile Time Checking

Exercise 2: Deploy and Test in SharePoint Online

Task 1 – Package and Deploy to SharePoint Online

Summary

Overview

Lab Time: 20 minutes

Lab Folder: C:\%Office365TrainingKit%\Labs\2.1\Source\Before

Lab Overview: Sandboxed Solutions allow you to create SharePoint Online solutions that are easy to develop, deploy and administer. In this lab you will learn how to create a Visual Web Part in a sandboxedsolution and deploy that solution to SharePoint Online using the Visual Studio 2010.

The Visual Studio 2010 SharePoint PowerTools provide two pieces of important functionality to SharePoint Online developers:

  • A Sandboxedsolution compatible Visual Web Part SharePoint project template.
  • Sandboxedsolution compatibility compile-time checking.

The Visual Web Part you will create queries a SharePoint list from the SharePoint Online site as an example of a common scenario.

System Requirements

You must have the following items to complete this lab:

  • SharePoint 2010
  • Visual Studio 2010
  • SharePoint Designer 2010
  • Visual Studio 2010 SharePoint Power Tools
  • SharePoint Online site

◦Note: You will need administrator access to an SPOsite collection to perform the steps in this lab.

Setup

Task 1 – Create SharePoint Site

In this task, you will create a sub site for this lab in your SharePoint on-premise site.

  1. Navigate to your top-level SharePoint site, e.g.,
  2. From Site Actions, choose New Site.
  3. Choose the Team Site template.
  4. Enter Lab02 for the name of the site to create.
  5. The site will be created at
  6. Click Create to create the site.

Task 2 – Create SharePoint Online Site

In this task, you will create a sub site for this lab in your SharePoint Online site.

  1. Navigate to your top-level SharePoint Online site, e.g.,
  2. From Site Actions, choose New Site.
  3. Choose the Team Site template.
  4. Enter Lab02 for the name of the site to create.
  5. The site will be created at
  6. Click Create to create the site.

Note:You have to be an administrator on your SharePoint Online website to perform the tasks in this lab, e.g., creating and publishing a SharePoint Designer workflow to the SharePoint Online site.

Task 3 – Prepare Code Snippets

This lab contains code snippets that you will use to complete the solution. You can either copy the snippets from the lab script itself or install the code snippets so that you can access them directly from Visual Studio.

  1. Browse to C:\%Office365TrainingKit%\Assets\Code Snippets\CSharp.
  2. Select all the files in this directory and copy them to your clipboard by pressing [Ctrl]+[a] and then [Ctrl]+[c].
  3. Browse to ..\Documents\Visual Studio 2010\Code Snippets\Visual C#\My Code Snippets
  4. Press [Ctrl]+[v] to paste the code snippet files into this directory.

Note:To reduce typing, you can right-click where you want to insert source code, select Insert Snippet, select My Code Snippets and then select the entry matching the current exercise step.

Task 4 – Create Visual Studio Toolbox Snippets

Some code snippets that are used in this lab can’t be formatted as Visual Studio snippets. Instead you will create them as text snippets in the Visual Studio Toolbox.

  1. Open Visual Studio 2010.
  2. Open the Toolbox.
  3. Add a tab called Lab02.
  4. Browse to C:\%Office365TrainingKit%\Assets\Code Snippets.
  5. From Visual Studio, open Demo2_1_1.txt and select all its contents.
  6. Drag the contents into the Lab02 tab.
  7. Rename the item to 2.1.1.

Exercise 1: Create a Visual Web Part Sandboxed Solution

Task 1 – Creating the Visual Web Part

In this task, you will create a sandboxedsolution compatible Visual Web Part project.

  1. Start Visual Studio 2010.
  2. Click File New Project.
  3. In the New Project dialog, under Installed Templates, select Visual C# > SharePoint2010and select Empty SharePoint Project as the template.

Note:There is no project template for a sandboxedsolution compatible Visual Web Part, so we started with the Empty SharePoint Project template.

  1. In the Name: textbox, enterSandboxVWP.
  2. In the Location:textbox, enter C:\%Office365TrainingKit%\2.1\Source\Beforeand clickOK.
  3. In the SharePoint Customization Wizard, enter the URL of the on-premises site you created for this session, e.g. .
  4. Select Deploy as a sandboxed solutionand clickFinish.
  5. In theSolution Explorer, right-click the SandboxVWP project and select Add New Item.
  6. In the Add New Item – SandboxVWP dialog, select the Visual Web Part (Sandboxed) item and clickAdd.

Note: A Visual Web Part is made up of an ASP.NETuser control file (.ascx extension) and its code behind file. Like any other user control, you can use the Visual Studio design surface to drag and drop controls onto your user control. When the new user control opens in Visual Studio, you will be in “Source” view of the user control.

The Visual Web Part (Sandboxed) project item is part of the Visual Studio 2010 SharePoint Power Tools to allow you to create a sandboxed-compatible Visual Web Part. A normal Visual Web Part cannot be sandboxed, as it needs to work outside the sandbox in order to load the underlying user control for the Visual Web Part.

Task 2 – Developing the Visual Web Part

In this task, you will add functionality to the Visual Web Part.

  1. In the Solution Explorer, double-click to open the VisualWebPart1 project item.
  2. Switch to Source view to edit the markup of the visual web part.
  3. Add the following markup to the body of the page to add a label, drop down list, button, and a GridView control to the body of the visual web part.

(Toolbox code snippet 2.1.1)

HTML

<p>

Select List:

<asp:DropDownList ID="ddlLists" runat="server" />

</p>

asp:Button ID="Button1" runat="server" OnClick="Button1_Click"

Text="Populate Grid!" />

<p>

<asp:GridView ID="gridListItems" runat="server" />

</p>

  1. Click the Design button to toggle into designview. The visual web part should now look like:

  1. Open the code behind of the visual web part by right-clicking anywhere on the design surface and selecting View Code.
  2. Add the following using directives to the top of the code behind file to reference the proper LINQ namespaces.

(Code Snippet 2.1.2)

C#

using System.Linq;

using System.Collections.Generic;

  1. Locate the Page_Loadevent handler of the visual web part and add the following code:

(Code snippet 2.1.3)

C#

if (!Page.IsPostBack)

{

SPWeb web = SPContext.Current.Web;

varListNames = fromSPList list inweb.Lists

wherelist.BaseTemplate !=

SPListTemplateType.DocumentLibrary

selectlist.Title;

ddlLists.DataSource = ListNames;

ddlLists.DataBind();

}

This code uses LINQ to get the list of Lists in the current SharePoint site and present them in the dropdown list by binding the results of the LINQ query to the dropdown list control.

  1. Switch back to the Design view of the visual web part.
  2. Double-click on the Populate Grid!button to create the event handler for the button’s click event.
  3. Locate the Button1_Click eventhandler add the following code:

(Code Snippet 2.1.4)

C#

SPListSourceList =

SPContext.Current.Web.Lists.TryGetList(ddlLists.SelectedValue);

SPQueryqry = newSPQuery();

qry.ViewFieldsOnly = true;

qry.ViewFields = "<FieldRef Name='Title' /<FieldRef Name='Author' />";

qry.RowLimit = 20;

gridListItems.DataSource = SourceList.GetItems(qry).GetDataTable();

gridListItems.EmptyDataText =

string.Format(

"The {0} list does not contain any items!",

SourceList.Title);

gridListItems.DataBind();

This code will present a dropdown list of choices containing the name of each list in the site which is not a Document Library. When the user picks a list and clicks the button, the Author and Title values from 20 items from that list will be presented in the grid.

This code takes the list that the user selects in the dropdown list and uses CAML to retrieve 20 items. It then converts the SPListItemCollection results from the SPQuery to a DataTable, and binds the results to the grid.

Task 3 – Testing the Visual Web Part

In this task, you will test theVisual Web Part sandboxedsolution.

  1. Hit F5 to deploy the package to your local SharePoint 2010 instance and debug the project.

Visual Studio 2010 will compile and deploy the project, activate the feature and open the specified SharePoint site in a browser window.

  1. Click the Edit icon at the top of the page to put the page in Edit mode:
  1. Click the Insert tab in the Ribbon
  1. Click the Web Partribbon button to insert the web part.
  2. Under Categories select Custom, and under Web Parts select VisualWebPart1 Title. Click Add to add the web part to the page.

The web part is now added to the page and is ready to test.

  1. Clickthe Save button to save the changes you made to the page.
  1. To test the web part, select a list in the drop down list and click the Populate Grid! button.

The grid should show the items from the list or a message that the list does not contain any items.

Task 4 – Test Sandboxed Solution Compile Time Checking

In this task, you will use the Visual Studio 2010 SharePoint Power Tools to perform sandboxedsolution compatibility compile-time checking.

  1. Close the browser and return to Visual Studio 2010.
  2. In Solution Explorer, double-click the VisualWebPart1.ascx file to open it in Design view.
  3. Add a Label and DateTimeControlto the user control from the toolbox:

  1. Hit F5 to redeploy the solution and launch a browser to debug the solution.

The compiler will throw an error because the SharePoint DateTimeControl is not available in the sandboxedsolution subset object model.

  1. Remove the Label and DateTimeControlcontrols that were added in the steps above.

Exercise 2: Deploy and Test in SharePoint Online

Task 1 – Package and Deploy to SharePoint Online

In this task, you will test theVisual Web Part sandboxedsolution in SharePoint Online.

  1. InSolution Explorer, select SandboxVWP, right-clickand selectPackage to package up the solution.
  2. LaunchInternet Explorer and navigate to your SharePoint Online site.
  3. Click Site Actions and then select Site Settings.
  1. Click on the Solutions link in the Galleries section to view the site collection’s solution gallery.
  1. Click on the Solutions tab in the ribbon and click the Upload Solution button.
  1. Browse to C:\%Office365TrainingKit%\Labs\2.1\Source\Before\SandboxVWP\bin\Debug\SandboxVWP.wsp and click Open and OK.
  2. In the Solution Gallery – Activate Solution dialog, click the Activate button on the Ribbon to activate the solution.
  3. Browse to the Lab02 site.
  4. Click the Edit icon at the top of the page to put the page in Edit mode:
  1. Click the Insert tab in the Ribbon
  2. Click the Web PartRibbon button to insert the web part.
  1. Under Categories select Custom and under Web Parts select VisualWebPart1 Title and click Add to add the web part to the page.

The web part is now added to the page and is ready to test.

  1. Clickthe Save button to save the changes you made to the page.
  1. To test the web part, select a list in the drop down list and click the Populate Grid! button.

The grid should show the items from the list or a message that the list does not contain any items.

Note: The web part should perform the same in SharePoint Online as it did in on-premise.

Summary

Sandboxed solutions allow you to quickly develop and deploy solutions to SharePoint Online without the need for administrative privileges. In this lab you built a Visual Web Part in a sandboxedsolution using the Visual Studio 2010 SharePoint PowerToolsand deployed it to SharePoint Online.