• USA : +1 973 910 5725
  • INDIA: +91 905 291 3388
  • info@tekslate.com
  • Login

Deploying and Testing the Web Part

To deploy and test the Web Part

  1. Press F5 to deploy the Web Part.
  2. Click Site Actions, and then click More Options.
  3. On the Create page, click Web Part Page, and then click Create.
  4. On the New Web Part Page page, for the Name, type DisplayMessageWebPartPage, and then click Create.
  5. Click Add a Web Part in the Header
  6. On the ribbon, click the Insert tab, and then click Web Part.
  7. In the Categories pane, click Custom.
  8. In the Web Parts pane, click DisplayMessageWebPart, and then click Add.
  9. On the ribbon, click the Page tab, and then click Stop Editing.

 

Creating the base Visual Web Part

 

  1. Create a new SharePoint 2010 Empty SharePoint Project. Name it MyWebPartProject.
  2. Once it’s been created, click on the project, choose Add > New Item.
  3. Choose the Visual Web Parttemplate and name it MyWebPart.

We’ve now have a very simple Web part that we can build, deploy, and add to our pages in SharePoint. Of course, it won’t show anything, but this it shows how simple it is to get a Web part skeleton setup to a compiled, deployable and usable state. Let me explain some of important files we’ll focus on:

 

  • MyWebPartUserControl.ascx
    This UserControl files take care of all the visual front-end controls and functionality. It’s associated MyWebPartUserControl.ascx.cs file takes care of the code-behind work.
  • MyWebPart.cs
    This file is the class that is used to handle all the behind-the-scenes functionality of your Web part. This where the Web Part is initialized, where it loads up, and references the UserControl.

 

All the other files that are in your project are necessary for the Web part to function, however you don’t need to touch any of other files to get a custom WebPart (even at a very customized level) working. For now, just focus on the MyWebPart.csMyWebPartUserControl.ascx and MyWebPartUserControl.ascx.cs files.

Add some functionality

  1. Add an asp Label Control named lbl_MySelectionto the ascx file.
  2. Open the ascx.csfile and override the OnPreRender method like such and add the following code to it:

protected override void OnPreRender(EventArgs e)
{
base.OnPreRender(e);
lbl_MySelection.Text = “Please make a selection.”;
}

  1. Deploy the project to your SharePoint instance
  2. Edit a page and add your Web part to the page

We should now see some text that says, “Please make a selection.” This demonstrates how and where to add custom code to interact with our UserControls’ form controls (in this case our lbl_MySelection label).

 

Web Part Properties

When you edit a Web part, and the Web part editor pops up in your browser, each one of those options are called properties. We can add our own properties and in real development environments they’re not a novelty but a necessity

Before we begin with the code, it’s important to understand that there are two major categories to Web part properties:

  • Standard Toolbox Properties
    These are standard text fields, checkboxes, or dropdown lists that are able to receive data from the user and push those values to the Webpart. These do not display dynamic data. For instance: You couldn’t use a standard dropdownlist property to display a list of items from a SharePoint list. This is because the there’s no way to bind data to the dropdownlist, it uses a hard-coded enum in your Web part .CS file (more on this in the example code below).

 

  • Custom Editor PartToolbox Properties
    These allow you to build up any type of asp control (or third party control) bind custom data to do (like list data from within SharePoint or an external database) and push these values to the Web part.

 

Creating Standard Toolbox Properties

  1. Open up your csfile.
  2. Right before the private const string _ascxPath …declaration, add the following code:

[WebBrowsable(true),
Category(“Miscellaneous”),
Personalizable(PersonalizationScope.Shared),
WebDisplayName(“Enter some text”)]
public string CustomTextProp { get; set; }

The Category seen here can be any existing category within the Web part editor tool pane, or you can type your own custom category. The WebDisplayName option is what the label will say above the property. And of course, the final line is the actual property.

If we deploy our project now, we will see our property show up in the Web part tool pane when editing the Web part, but it simply is a dummy property area. It doesn’t do anything because we haven’t tied the property to our MyWebPartUserControl. Let’s do that now…

  1. Open the ascx.csfile and right before the empty Page_Load() method, add the following property:

public MyWebPart WebPart { get; set; }

This will allow us to reference our other MyWebPart.cs class in this ascx code-beind class and ultimately expose the tool pane properties to us.

  1. Back in the csfile, locate the CreateChildControls() method and replace it with the following:

protected override void CreateChildControls()
{
MyWebPartUserControl control = Page.LoadControl(_ascxPath) as MyWebPartUserControl;
if (control != null)
control.WebPart = this;
Controls.Add(control);
}
}

 

This looks for our user control on the page and it’s not null, we set the WebPart property (which we created in the previous step). Then we add the usercontrol to the controls collection.

5. Switch back again to the MyWebPartUserControl.ascx.cs file. Locate the OnPreRender method and replace it with the following:

protected override void OnPreRender(EventArgs e)
{
base.OnPreRender(e);
if (this.WebPart != null && this.WebPart.CustomTextProp!=null)
{
lbl_MySelection.Text = this.WebPart.CustomTextProp.ToString();
}
}

This is the final piece to the puzzle. We’re setting the text field within our Web parts’ user control to the tool pane’s property text field.

Of course, you can do more than just text field type properties (the following code would be implemented in yourMyWebPart.cs file:

 

  • Checkboxes

[WebBrowsable(true),
Category(“Miscellaneous”),
Personalizable(PersonalizationScope.Shared),
WebDisplayName(“Checkbox Option Text”)]
public bool CustomCheckboxProp { get; set; }

 

  • Dropdown Lists

public enum ddlEnum { option1, option2, option3 }
[WebBrowsable(true),
Category(“Miscellaneous”),
Personalizable(PersonalizationScope.Shared),
WebDisplayName(“Dropdown List Display Text”)]
public ddlEnum ddlProp { get; set; }

 

As you can see so far, the standard tool pane properties are kind of limited; especially the dropdown list: we’re tied to the enumeration. What if we wanted some SharePoint list data feeding that dropdownlist Control? To create fully customized tool pane properties, we need to create our own “EditorPart” and here’s how to do it:

Interested in mastering SharePoint Training? Enroll now for FREE demo on SharePoint Training.

Creating custom EditorPart properties

We’re going to create our own custom DropDownList control EditorPart that feeds in some values from a custom SharePoint list.

  1. In your root SharePoint site, create a new custom list. You can keep the new custom list really simple, or you can add your own custom fields; doesn’t matter. If you’d like to use a already existing list, feel free to reference that list instead.
  2. Open your csfile and after the private const string _ascxPath declaration add the following code:

public string _OptionValue { get; set; }

  1. After the whole MyWebPart.cs class declaration, add the following class:

public class MyEditorPart : EditorPart
{
private DropDownList ddl_Options;
protected override void CreateChildControls()
{
base.CreateChildControls();
}
public override bool ApplyChanges()
{
EnsureChildControls();
MyWebPart webPart = WebPartToEdit as MyWebPart;
if (webPart != null)
webPart._OptionValue=ddl_Panels.SelectedValue.ToString();
return true;
}
public override void SyncChanges()
{
EnsureChildControls();
MyWebPart webPart = WebPartToEdit as MyWebPart;
if (webPart != null)
ddl_Options.SelectedValue = webPart._OptionValue .ToString();
}
}

 

This is the meat and potatoes, if you will, of what makes the custom EditorPart a reality. But there is some more tweaking to do in order for it all to work:

4. Locate the CreateChildControls()method you created in the code in the previous step. Replace what’s inside with the following:

 

base.CreateChildControls();
ddl_Options = new DropDownList();
lbl_Options = new Label();
lbl_Options.Text = “<strong>Choose:</strong><br />:”;
using (SPSite site = new SPSite(“http://” + Page.Request.Url.Host.ToString()))
{
using (SPWeb web = site.OpenWeb())
{
SPList Forms = web.Lists[“Side Panel Content”];
SPQuery qry = new SPQuery();
qry.Query = @”<Query><Where><Gt><FieldRef Name=’ID’ /><Value Type=’Counter’>0</Value></Gt></Where></Query>”;
SPListItemCollection SPLIC = Forms.GetItems(qry);
if (SPLIC != null && SPLIC.Count > 0)
{
foreach (SPListItem SPLI in SPLIC)
{
string OptionTitle = “”;
string OptionID = “”;
if (SPLI[“ID”] != null)
PanelID = SPLI[“ID”].ToString();
if (SPLI[“Title”] != null)
PanelTitle = SPLI[“Title”].ToString();
if (PanelTitle != “” && PanelID != “”)
ddl_Options.Items.Add(new ListItem(OptionTitle, OptionID));
}
}
}
}

Controls.Add(lbl_Panels);
Controls.Add(ddl_Panels);

 

  1. Now, back in your ascx.csfile, add the following line of code to your OnPreRender() method:

lbl_MySelection.Text = WebPart._OptionValue;

This will set the label in your Web part’s User Control to the value of the DropDown list in your custom EditorPart tool pane property.

For Indepth understanding of SharePoint click on

Summary
Review Date
Reviewed Item
Deploying and Testing the Web Part
Author Rating
5

“At TekSlate, we are trying to create high quality tutorials and articles, if you think any information is incorrect or want to add anything to the article, please feel free to get in touch with us at info@tekslate.com, we will update the article in 24 hours.”

0 Responses on Deploying and Testing the Web Part"

Leave a Message

Your email address will not be published. Required fields are marked *

Site Disclaimer, Copyright © 2016 - All Rights Reserved.