Tool Part for Visual Web Part – SharePoint 2010

Hi SharePoint Friends, 

I would like to discuss some cool stuffs for developing custom “Tool Parts” for SharePoint 2010 Visual web part.

“Tool Part” is nothing but the set of controls that are required for your web part which works based on the tool part properties. It will be available as a new section in the web part properties area.

There are two ways for developing a Visual Web part with custom tool part

1. Designing the entire tool part using the server side code.

2. Designing the tool part using user controls

In this part, I will drive you thru Option 1. R u ready, lets get started.

Step 1:

Create a “Empty Project” using Visual Studio 2010 and name it as “CustomToolpartOtion1” and choose the deployment type as a “Farm Solution”. You should see a similar project structure in VS 2010.

ProjectStructure

Step 2:

Open “VisualWebpartwithTP1.cs” file and write the below mentioned code.

propertydeclaration

The above mentioned code is to declare a property which has to be rendered in the web part properties window.

  • Category – To display under which category or section the property should be displayed. If there are multiple  properties then the category must be same and obviously it depends on your requirement.
  • Personalizable – To make the information available common across all the users accessing the site.
  • WebDisplayName – its nothing but the caption for the property defined.
  • WebDescription – It’s a detailed description about the property.

Step 3:

Open “VisualWebpartwithTP1UserControl.ascx.cs” and declare a property with the class name of the above mentioned “VisualWebpartwithTP1.cs” file. The declaration is to access the properties in the user control server side code.

webpartclasspropertydeclaration

Step 4:

Open “VisualWebpartwithTP1.cs” file and write the below mentioned code in the “CreateChildControls” method.

createchildcontrol_method

Basically we are declaring loading the user control with its type and assigning the declared property to “this” which means using the declared property, we will be able to access the custom tool part properties. Finally we are adding the controls to the page.

Step 5:

Open “VisualWebpartwithTP1UserControl.ascx” and add one label control just like the below mentioned.

LabelDeclaration

Step 6:

Now on the code behind file “VisualWebpartwithTP1UserControl.ascx.cs” assign the web part property to the above added “Label’s text property” on the “Page_Load” function.

Pageload_method

Step 7:

That’s it we are done with the coding. Rebuild the project and deploy it. After deploying add the web part to the page and edit the web part, now you will be able to see the custom properties. Enter any value in the textbox and click ok and then save the page to see the label which displays the value that you have entered in the web part properties and you can try to edit the values too.

Finalresult

Finalresult1

Download Source Code

Happy coding guys.

Cheers… Hot smile

Comments

  1. AnonymousSaturday, October 19, 2013 at 12:36:00 AM GMT+5:30

    Where is the toolpart tutorial in this ?

    ReplyDelete
  2. AnonymousTuesday, May 13, 2014 at 10:08:00 PM GMT+5:30

    je veux un exemple avec une classe toolPart indépendante, avec les méthodes ApplyChanges() et GetToolPart() détaillé svp,
    je veux savoir comment récupérer et utiliser la valeur entrée dans un textBox ...

    ReplyDelete

Post a Comment

Popular posts from this blog

PowerShell to update SharePoint Online User Profile property from Azure AD

Image
Hi Friends, in this post, I am gonna walk you through the steps to update the SharePoint Online User Profile property from Azure AD. You may think, why this is necessary since SharePoint online will sync automatically with Azure AD. The tricky part is the auto-sync may take up to 24 hrs to sync Azure AD to SharePoint UPS. The next tricky part is not all the AAD profile properties are synced to SharePoint UPS. Only a few of the properties are synced and below are the list of properties relevant to the profile that is synced to SharePoint UPS User Name First name Last name Name Office phone Department Job title Manager Office Office phone What about the other properties like 'Mobile Phone' that are relevant to the user??? What about if there is a drastic change in the Organization structure and you want the SharePoint UPS to reflect immediately??? To resolve all these obstacles and issues, we need to use PowerShell Now you understand why there i
Read more

SPFx - Office UI Fabric react DetailsList & PropertyFieldCodeEditor to show the CSV data

Image
Hi Friends, this is a series of the post explains different capabilities of the web part using SPFx. Using DateTime control PropertyFieldCollectionData Property Pane Control Using FilePicker and FileTypeIcon control Office UI Fabric react DetailsList & PropertyFieldCodeEditor to show the JSON data Office UI Fabric react DetailsList & PropertyFieldCodeEditor to show the CSV data  --> You are here In this post, I am gonna show you how we can use  DetailsList   from  UI Fabric  and  PropertyFieldCodeEditor  property pane control from PnP on the SPFx web parts. The code walkthrough shown below will display the ' CSV ' data in the DetailsList. Regarding the creation of the basic project stuff, please refer to the  blog post . I hope those who are familiar with SPFx would know how to create the project and add the dependent npm packages. The following are some of the pre-requisites for the solution to work. Used  SharePoint Yeoman generator  version 
Read more

SPFx - Office UI Fabric react DetailsList & PropertyFieldCodeEditor to show the JSON data

Image
Hi Friends, this is a series of the post explains different capabilities of the web part using SPFx. Using DateTime control PropertyFieldCollectionData Property Pane Control Using FilePicker and FileTypeIcon control Office UI Fabric react DetailsList &  PropertyFieldCodeEditor to show the JSON data --> You are here Office UI Fabric react DetailsList & PropertyFieldCodeEditor to show the CSV data In this post, I am gonna show you how we can use  DetailsList   from UI Fabric and PropertyFieldCodeEditor  property pane control from PnP on the SPFx web parts. The code walkthrough shown below will display the ' JSON ' data in the DetailsList. Regarding the creation of the basic project stuff, please refer to the  blog post . I hope those who are familiar with SPFx would know how to create the project and add the dependent npm packages. The following are some of the pre-requisites for the solution to work. Used  SharePoint Yeoman generator  version 
Read more