Create Connectable SharePoint 2010 Web Parts In .NET

 

Enjoy free articles about SharePoint 2010 and InfoPath 2010 at www.walisystemsinc.com


In this article, we will continue to explore the working of web parts in SharePoint 2010. Following are the other articles of this series. If you have not seen them yet, I would recommend that you check them out first.

1.       InfoPath 2010 Web Part

2.       Connectable Web Parts In InfoPath 2010

In the second article Connectable Web Parts In InfoPath 2010 we created and published an InfoPath form and then used it to create connectable web parts. In this article, we will create connectable web parts from scratch using .NET. In the previous article, the focus was on creating and configuring InfoPath 2010 form in such a way that it can be used in InfoPath 2010 Web Part. InfoPath 2010 web part comes with SharePoint 2010 and is used to host InfoPath 2010 forms. If InfoPath form is configured correctly or in other words, if its fields have been exposed as parameters, it can be used in InfoPath 2010 web part. In this article we will create .NET web parts from scratch and then deploy them in SharePoint. We will create two web parts, one provider and one consumer. We will use same fields that we used in InfoPath form we created in previous article.

è You can download complete application/code from the following link:

http://walisystemsinc.com/sharepoint/art/dotnetwp/ConnectableWebParts.zip

è Web part deployment package (WSP) is in the following folder:

ConnectableWebParts.zip\ConnectableWebParts\ConnectableWebParts\bin\Debug\ConnectableWebParts.wsp

So, let’s begin. Here are the steps:

1.       Open Visual Studio 2010. Click New Project.

2.       Under Installed Templates, expand SharePoint node and select 2010. Select Empty SharePoint Project and enter ConnectableWebParts in the Name  box and click OK. You can change the Location if you want otherwise keep the default location selected.

3.       Select a site in What local site do you want to use for debugging. Select Deploy as a farm solution option and click Finish. This will create a new project for you.

4.       Right-click project name and select Add.  Select New Item. In Installed Templates, Under Visual C#, select Code and then select Interface. Enter IParams.cs in the Name box and click Add.

Figure 1: Add new item 

5.       In IParams.cs code, add public before interface IParams and then add a string parameters. Code will look like the following:

 

Figure 2: Interface

6.       Now we will create a provider web part. Right-click project name. Select Add. Select New Item. In Installed Templates, select Visual C#. Select SharePoint. Select 2010. Select Web Part. Enter ProviderWebPart in Name box and click Add.

7.       ProviderWebPart class inherits from WebPart. Add IParams after WebPart.

  

Figure 3: Provider Web Part Class

8.       Add following code to create fields and Submit button.

 

Figure 4: Properties

9.       Add get and set methods.

       [Personalizable]

        public string sFirstName

        {

            get

            {

                return inputFirstName;

            }

            set

            {

                inputFirstName = value;

            }

        }

       

        [Personalizable]

        public string sLastName

        {

            get

            {

                return inputLastName;

            }

            set

            {

                inputLastName = value;

            }

        }

        [Personalizable]

        public string sAddress

        {

            get

            {

                return inputAddress;

            }

            set

            {

                inputAddress = value;

            }

        }

        [Personalizable]

        public string sCity

        {

            get

            {

                return inputCity;

            }

            set

            {

                inputCity = value;

            }

        }

        [Personalizable]

        public string sState

        {

            get

            {

                return inputState;

            }

            set

            {

                inputState = value;

            }

        }

        [Personalizable]

        public string sZip

        {

            get

            {

                return inputZip;

            }

            set

            {

                inputZip = value;

            }

        }

        [Personalizable]

        public string sCountry

        {

            get

            {

                return inputCountry;

            }

            set

            {

                inputCountry = value;

            }

        }

        10. Modify CreateChildControls() method.

Figure 5: CreateChildControls()

11.   Handle Click event.

void _button_Click(object sender, EventArgs e)

        {

            if (firstName.Text != string.Empty)

            {

                sFirstName = firstName.Text;

                firstName.Text = string.Empty;

            }

            if (lastName.Text != string.Empty)

            {

                sLastName = lastName.Text;

                lastName.Text = string.Empty;

            }

            if (address.Text != string.Empty)

            {

                sAddress = address.Text;

                address.Text = string.Empty;

            }

            if (city.Text != string.Empty)

            {

                sCity = city.Text;

                city.Text = string.Empty;

            }

            if (state.Text != string.Empty)

            {

                sState= state.Text;

                state.Text = string.Empty;

            }

            if (zip.Text != string.Empty)

            {

                sZip = zip.Text;

                zip.Text = string.Empty;

            }

            if (country.Text != string.Empty)

            {

                sCountry = country.Text;

                country.Text = string.Empty;

            }

        }

 

12.   Create a method to return the iParams object.



Figure 6Connection Provier

13.   Now let’s create a Consumer web part. Just like you added a provider web part above, add a new web part and name it Consumer.

14.   Open Consumer.cs and add code to create objects for the provider.



Figure 7: Consumer web part properties

15.   Add a function that will build rows in a table. We will use a table to show the data retrieved from the provider web part.



Figure 8: BuildTableRow() Function

16.   Add values to the labels.



Figure 9: OnPreRender() Function

17.   Add code in CreateChildControls() method.

        protected override void CreateChildControls()

        {

            Controls.Clear();

 

            Table tbl = new Table();

            TableRow trFirstName = BuildTableRow();

            TableRow trLastName = BuildTableRow();

            TableRow trAddress = BuildTableRow();

            TableRow trCity= BuildTableRow();

            TableRow trState = BuildTableRow();

            TableRow trZip = BuildTableRow();

            TableRow trCountry = BuildTableRow();

 

            lblFirstName = new Label();

            lblFirstName.Text = "First Name";

            Controls.Add(lblFirstName);

           

            lblLastName = new Label();

            lblLastName.Text = "Last Name";

            Controls.Add(lblLastName);

           

            lblAddress = new Label();

            lblAddress.Text = "Address";

            Controls.Add(lblAddress);

           

            lblCity = new Label();

            lblCity.Text = "City";

            Controls.Add(lblCity);

           

            lblState = new Label();

            lblState.Text = "State";

            Controls.Add(lblState);

           

            lblZip =  new Label();

            lblZip.Text = "Zip";

            Controls.Add(lblZip);

           

            lblCountry = new Label();

            lblCountry.Text = "Country";

            Controls.Add(lblCountry);

            trFirstName.Cells[0].Text = "First Name";              

            trFirstName.Cells[1].ForeColor = System.Drawing.Color.Blue;

            trFirstName.Cells[1].Font.Bold = false;

            trFirstName.Cells[1].Font.Size = FontUnit.Small;

            trFirstName.Cells[1].Controls.Add(lblFirstName);

            

            trLastName.Cells[0].Text = "Last Name";

            trLastName.Cells[1].ForeColor = System.Drawing.Color.Blue;

            trLastName.Cells[1].Font.Bold = false;

            trLastName.Cells[1].Font.Size = FontUnit.Small;

            trLastName.Cells[1].Controls.Add(lblLastName);

           

            trAddress.Cells[0].Text = "Address";

            trAddress.Cells[1].ForeColor = System.Drawing.Color.Blue;

            trAddress.Cells[1].Font.Bold = false;

            trAddress.Cells[1].Font.Size = FontUnit.Small;

            trAddress.Cells[1].Controls.Add(lblAddress);

           

            trCity.Cells[0].Text = "City";

            trCity.Cells[1].ForeColor = System.Drawing.Color.Blue;

            trCity.Cells[1].Font.Bold = false;

            trCity.Cells[1].Font.Size = FontUnit.Small;

            trCity.Cells[1].Controls.Add(lblCity);

           

            trState.Cells[0].Text = "State";

            trState.Cells[1].ForeColor = System.Drawing.Color.Blue;

            trState.Cells[1].Font.Bold = false;

            trState.Cells[1].Font.Size = FontUnit.Small;

            trState.Cells[1].Controls.Add(lblState);

           

            trZip.Cells[0].Text = "Zip";

            trZip.Cells[1].ForeColor = System.Drawing.Color.Blue;

            trZip.Cells[1].Font.Bold = false;

            trZip.Cells[1].Font.Size = FontUnit.Small;

            trZip.Cells[1].Controls.Add(lblZip);

           

            trCountry.Cells[0].Text = "Country";

            trCountry.Cells[1].ForeColor = System.Drawing.Color.Blue;

            trCountry.Cells[1].Font.Bold = false;

            trCountry.Cells[1].Font.Size = FontUnit.Small;

            trCountry.Cells[1].Controls.Add(lblCountry);

           

            tbl.Rows.AddRange(new TableRow[]{

                trFirstName,

                trLastName,

                trAddress,

                trCity,

                trState,

                trZip,

                trCountry

            });

         

            this.Controls.Add(tbl);

        }

18.   Create a method to assign the IParams object from the provider web part to the private IParams object in the consumer web part.



Figure 10: Connection Consumer

19.   We have completed the code. Now it’s time to test the web parts. One way is to use F5 in Visual Studio if you want to debug and test the functionality. Second is to deploy the web part in SharePoint and then test it. I would recommend that you use F5 to deploy the web parts in SharePoint. This will automatically create the WSP for the web parts. Once the WSP has been created, you can deploy it to SharePoint using PowerShell. After the WSP has been created, open PowerShell. Go to Start > All Programs > Microsoft SharePoint 2010 Products and select SharePoint 2010 Management Shell.

20.   For convenience copy the WSP from the debug folder to a folder that is easily accessible. Go to project folder and then access bin\debug. Copy ConnectableWebParts.wsp to C:\Temp folder (or any other conveniently located folder).

21.   From Management Shell command prompt, run following command:

Add-spsolution –literalpath “C:\Temp\ConnectableWebParts.wsp”

Figure 11: Deploy web part

You will immediately see the result of the deployed. Deployed column will show False.

22.    Now run following command from the Management Shell command prompt:

Install-spsolution –identity connectablewebparts.wsp –webapplication http://yourserver –gacdeployment

Replace http://yourserver with your SharePoint Server (site) URL.

23.   Open SharePoint site. Select Site Actions and then View All Site Content.

24.   Click Create.

25.   Select Page from Filter (under Installed Items) and then select Web Part from the Type and click Create.

26.   Enter ConnectableWebParts in the Name box and click Create. Leave Site Assets selected in the Document Library drop down.

27.   Click Add a web part in the Header zone. Select Custom from Categories. Select ProviderWebPart from Web Parts and click Add.

28.   Click Add a Web Part in the Footer zone. Select Custom from Categories. Select Consumer from Web Parts and click Add.

29.   Hover mouse over Consumer web part heading. A small arrow will appear at the end of the row that contains the heading. Click the arrow, a menu will appear.  Select Connections > Get Consumer From > ProviderWebPart.



Figure 12: Get Consumer From

30.   Click Stop Editing button in the ribbon.

31.   Add data in the provider web part and hit Submit. Before submitting data, this is how the web parts will look:



Figure 13: Provider and Consumer Web Parts ready for use

After you submit data, Consumer web part will show values from the provider web part. This is how it will look:

Figure 14: Provider and Consumer Web Parts after Submission

So, this wraps up our demo of connectable web parts created in .NET and deployed in SharePoint 2010.