SharePoint 2010 General Lab for Developers (Part 5/5)

sergefacebook_thumb1_thumb_thumb

 

Starter files and solutions files can be found here.

In his exercise we will create a web part that retrieves the prerequisite courses of a specific course.

The course code will be a property exposed in a custom toolpart.

Add the following folders (Controls and Webparts) in the CourseSitefeatures project:

clip_image002

In this folder, add a SharePoint project item from the WebPart template and name the class CoursePrerequisites.

Open the generated elements.xml file and set the Group Value to Course Site web parts:

clip_image004

Make sure you understand the details of this elements.xml file: a file coursePrerequisites.webpart will be loaded into the web part catalog list, which is located in _catalogs/wp and of based on the list template 113.

Open the web part file and modify the Title and Description properties and add a new property CatalogIconImageUrl as following:

clip_image006

Add a new feature named CourseSiteWebParts, set the scope to Site; Hidden must be true, and make it dependent on CourseSiteFeature. Add the CoursePrerequisites SharePoint project item into this feature.

Go to your site collection root site, select Site Settings-Galleries-Web Parts and you will find the coursePrerequisites.webpart file. Edit this file and you will see the following properties values :

clip_image008

Add the web part into a web part page to make sure everything is ok (you will notice the picture we specified in the .webpart file):

clip_image010

Add the CourseCode property :

clip_image012

Set the ToolboxItemAttribute to true.

Deploy the project, add the web part to a page and make sure the Course Code property shows up in the web part property page.

We are now going to use an editor part.

Add the CourseEditorParts.cs file from the (starter files) into the CoursePrerequisites item as following:

clip_image014

Analyze the editor part code.

We will now associate the editor part with the Web part : in the web part class, override the CreateEditorParts function:

clip_image016

Since we don’t want to use the default property layout, set the WebBrowsable attribute of the CourseCode property to false :

clip_image018

Deploy your web part and check the web part property page

clip_image020

The web part will now display the prerequisite information by invoking a web service which is provided in your starter files. Create an IIS web site (with the IIS administration console) that points to your web service folder; the web site description can be “Course Web Services”. In the IIS console, authorize any users by clicking on the web site Edit permissions settings (in the Actions panel):

clip_image022

Add Authenticated Users (don’t do this in production!):

clip_image023

Make sure your web service is correctly configured by invoking it from the browser:

clip_image025

Click on the GetPrerequisites hyperlink and type GSP10-6 in the parameter text box :

clip_image027

You should get the following answer:

clip_image029

In your project, add a Service Reference to this web service .

When the following window shows up, click on Advanced :

clip_image031

And click on add Web reference, and name the web reference litware.

Add an SPGridView member to your web part class

clip_image033

Replace the existing CreateChildcontrol() implementation with the one provided in your starter files (snippet1.txt); add also the SelectedIndexChanged(…) function.

Test your work by setting GSP10-6 in the course code property (in the web part property page) :

clip_image035

Your web part should look like this:

clip_image037

Make sure you are jumping to the corresponding site when you click on Jump to Site.

Now we want this web part to be automatically visible in the page describing the course when we create a dedicated course site :

clip_image039

Go to the createcoursite.aspx codebehind and add the following code:

clip_image041

Deploy your project, create a new course site and check the Description tab.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s