Jean Paul's Blog

There are 2 types of People in the World, One who Likes SharePoint and..

  • Microsoft MVP

  • MindCracker MVP

  • CodeProject MVP

  • eBook on SharePoint 2010

  • eBook on Design Patterns

  • eBook on Windows Azure

  • NLayers Framework @ CodePlex

  • MSDN Forums

  • .Net vs. Java

    Due to Public Demand

Posts Tagged ‘webparts’

SharePoint 2010 Built-in Web Parts

Posted by JP on August 18, 2012

In this article we can explore the following inbuilt Web Parts inside SharePoint 2010.  The site collection used here is having Team Site template.

·         Announcements

·         Links

·         Team Discussion

·         Content Editor

·         Relevant Documents

·         Note Board

·         Organization Browser

·         Site Users

Testing the Web Parts

You can create a new Site Page for testing the Web Parts.

image

After creating the page use the Edit Page option and from the Insert tab click on the Web Part button.

image

After inserting the specified web part you can use the Save & Close button from the Page tab to save changes.

image

Announcements Web Part

We can start playing with the Announcements Web Part.

Purpose:  This web part can be used to track upcoming events, status updates or other team news.

Group: Lists and Libraries

image

In Action

Following is the saved page after inserting the web part.

image

Note: From this group you can add any existing list or library.  This is a more convenient way of showing multiple lists in a page.  If you cannot see an Announcements from the above group, go to the Lists and create a new list using template Announcements.


 

Links Web Part

Purpose:  This web part can be used for creating links to Web pages that your team members will find interesting or useful.

image

In Action

Following is the saved page after inserting the web part.

image

Team Discussion Web Part

Purpose:  This web part can be used to list to hold newsgroup-style discussions on topics relevant to your team.

image

In Action

Following is the saved page after inserting the web part.

image

Content Editor Web Part

Purpose:  This web part can be used to use rich content.  So this web part helps in adding formatted text, tables, hyperlinks, and images to a Web Part Page

image

In Action

Following is the saved page after inserting the web part.

image

For adding formatted text you can use the Edit Page option and the Format Text tab is visible like below:

image

Note: You can include JavaScript code in this web part and thus provides higher control over the entire page if required.


 

Playing around more with Content Editor Web Part

Now let us try to do more with the Content Editor Web Part.  Our aim is to call a JavaScript method from inside the Content Editor Web Part. (in turn it is calling Java Script from SharePoint)

Following are the steps involved:

1.       Create a new Java Script file

2.       Upload it to the Site Assets library

3.       Add a Content Web Part

4.       Modify the HTML Source

5.       Play the action

Create a new file and name it as JavaScript.js (attached).  Insert  the following contents inside it.

alert(‘A message from Java Script inside SharePoint 2010.. How is that?’);

Add the file into the Site Assets library in SharePoint.  Site Assets is a pre-created folder in the site which is used to store CSS, JavaScript and other site asset files.  You can find it over Libraries > Site Assets.

image 


 

Now add a new Content Editor Web Part and click on the Format Text tab > HTML button > Edit HTML Source link.

image

Add the following code in the appearing dialog box:

<script src="../SiteAssets/JavaScript.js" type="text/javascript"></script>​​​​​​

Now click OK to the dialog, go to the page click the Save button and refresh the page.  You should see the following dialog box from Java Script.

image

 

Note: Please note that the SiteAssets folder name is referred without spaces.

Relevant Documents Web Part

Purpose:  This web part shows the documents that are relevant to the current user.  Basically it will be remembering the documents the current user had dealt with and provides a convenient piece of feature.

image

In Action

Following is the saved page after inserting the web part.

image

Note Board Web Part

Purpose:  This web part can be used to enable users to leave short, publicly-viewable notes about this page.  Adding on the home page it helps in notifying all users on active events / messages.

image

In Action

Following is the saved page after inserting the web part.

image

Organization Browser Web Part

Purpose:  This web part displays each person in the reporting chain in an interactive view optimized for browsing organization charts.

image

In Action

Following is the saved page after inserting the web part.

image

Site Users Web Part

Purpose:  This web part can be used to to see a list of the site users and their online status.

image

In Action

Following is the saved page after inserting the web part.

image

References

            http://tinyurl.com/sp2010-customwebpart

http://tinyurl.com/sp2010-cntedt

http://tinyurl.com/sp2010-wpjs

Summary

In this article we have explored the Built-in WebParts in SharePoint 2010.  I believe the knowledge will give you good decision edge while developing SharePoint solutions.

Advertisements

Posted in SharePoint | Tagged: , , , , | Leave a Comment »

SharePoint 2010 – Connected WebParts

Posted by JP on June 14, 2012

In this article we can explore Connected Web Parts which is an advance SharePoint Web Part feature. The connected web parts denote communication between 2 web parts.

clip_image002

The connected web part resolves the following requirements:

· Master Web Part and Slave web part data exchange

· Data Selection and Data Display web part communication

Summary of the application is:

· There are 2 web parts

· Web Part 1 has a drop down list for selecting Car

· Web Part 2 displays the car picture based on selection

Steps Involved

Following are the steps involved in creating connected web parts:

1. Create Project

2. Create Communication Interface

3. Create Web Part 1 (Provider) implementing Interface

4. Create Web Part 2 (Consumer)

5. Build and Deploy

Create Project

We can experiment with a Car showcase application where there are 2 web parts.

· The first web part allows selecting a Car from the drop down list.

· The second web part displays the image of the car.

For starting with create a new Web Part project inside Visual Studio.

clip_image004

Remove the default VisualWebPart1 web part. We will be adding our own web parts.

Create Interface

For communication between the 2 web parts we need to create an interface. Please create the following interface, which returns the selected Car name:

public interface ICar

{

string Car { get; }

}

Create Provider Web Part implementing Interface

Now you can create a new web part named CarSelectionWebPart. Expand the webpart item and Inside the User Control (CarSelectionWebPartUserControl.ascx) class file:

1. Add a drop down list control

2. Place the following code

public partial class CarSelectionWebPartUserControl : UserControl

{

protected void Page_Load(object sender, EventArgs e)

{

if (!this.IsPostBack)

{

DropDownList1.Items.Clear();

DropDownList1.Items.Add("Camry");

DropDownList1.Items.Add("Figo");

DropDownList1.Items.Add("Diablo");

}

}

// Property to expose selected car outside

public string Car

{

get;

set;

}

// Set the Car property

protected void Button1_Click(object sender, EventArgs e)

{

if (DropDownList1.SelectedItem != null)

Car = DropDownList1.SelectedItem.Text;

}

}

Inside the CarSelectionWebPart.cs (web part class file) add the following code:

// Property to return the selected Car

public string Car

{

get

{

return (_control as CarSelectionWebPartUserControl).Car;

}

}

// Special Purpose Attribute to denote ICar interface is provided

[ConnectionProvider("Car")]

public ICar GetCar()

{

return this;

}

The ConnectionProvider attribute and the interface of the method denotes that this web part provides data for ICar interface. The Connection Provider also says that the name is Car (in string).

Create Consumer Web Part

Now we can create the consumer web part which will get the selected Car to display the car picture. Add a new web part and name it as CarDisplayWebPart. Place an image control on the user control of the web part. Inside the class view of user control add the following method.

// Set the image to url

public void SetImage(string car)

{

if (car == "Camry")

Image1.ImageUrl = "/_layouts/images/ConnectedWebParts/Camry.png";

else if (car == "Figo")

Image1.ImageUrl = "/_layouts/images/ConnectedWebParts/Figo.png";

else if (car == "Diablo")

Image1.ImageUrl = "/_layouts/images/ConnectedWebParts/Diablo.png";

}

Now add Images Mapped Folder and place 3 image files (Camry.png, Figo.png, Diablo.png) inside the folder as shown below:

clip_image006

Build and Deploy

Now build the project and use the Deploy command. Open the SharePoint site in edit mode and add the above 2 web parts into it. You are now ready with the following 2 web parts.

clip_image008

Set Connection

Use the context menu of CarDisplayWebPart to set the connection to provider web part.

clip_image010

Testing the Web Parts

Now stop editing the web page and refresh the site. Select a car from the first web part and the car picture is displayed on the second web part.

clip_image012

This concludes our article on Connected Web Parts creation.

Debugging the Web Parts

You can debug the application, by executing the project in Debug mode. Any break points set will get executed.

clip_image014

References

http://msdn.microsoft.com/en-us/library/ms469765.aspx

http://rtmgroupq8.com/en/add-image-to-sharepoint-visual-web-part

Summary

In this article we have explored the Connected Web Parts feature of SharePoint Web Parts. In real world scenarios there could be multiple web parts communicating with each other through connected web parts. SharePoint also supports AJAX enabled web parts which provide a better communication between web parts. The attachment contains the source code of the web parts we discussed.

Posted in C# | Tagged: , , | 2 Comments »

SharePoint 2010 – More on Web Parts

Posted by JP on June 13, 2012

In this article we can explore more features regarding Web Parts programming.

Images Mapped Folder

In real world scenario we need to locate an image file from the server web folder. We can use the Server.MapPath() pointing to the root (~). But this is not that easy with web parts as the web parts are not always deployed into the bin folder.

(While development the web part assembly is not placed inside the inetput folder)

We can deploy web part to Solution Gallery, Global Assembly Cache and the web application bin directory. For simplicity we can use the Images Mapped Folder to place the image files needed by the web part.

Creating Image File Loading Project

Now we can create a web part and experiment the image loading functionality. Create a new SharePoint > 2010 > Visual Web Part project.

clip_image002

Select the SharePoint default web site in the next dialog.

Create Images Mapped Folder

For adding image files we need to use a special mapped folder. Right click on the project and use the SharePoint Images Mapped Folder from the Add menu.

clip_image004

Copy an Image File inside the Folder

Now create an image file and paste inside the folder.

clip_image006

Create Image control to load the Image File

Double click to open the VisualWebPart1UserControl.asx.

clip_image008

Now place a button and image control on the web part user control.

On the button click event place the following code :

protected void Button1_Click(object sender, EventArgs e)

{

Image1.ImageUrl = "/_layouts/images/ImageFileInWebPart/Jellyfish.jpg";

}

Please note that the url starts with _layouts folder.

Execute the Web Part

Now you can execute the web part and it will get deployed to the site. Open a page in edit mode and use the Add Web Part option. Locate our new web part and add it to the page.

Try playing with the button click and you will be getting the image file displayed as shown below:

clip_image010

References

http://rtmgroupq8.com/en/add-image-to-sharepoint-visual-web-part

http://msdn.microsoft.com/en-us/library/cc768621.aspx

Summary

In this article we have explored more features regarding Web Parts. The Images mapping is an essential feature and will take extra time in real world development scenarios if we does not grasp the feature. The source code attached contains the examples we discussed.

Posted in C# | Tagged: , , | Leave a Comment »

SharePoint 2010 – Web Parts Programming

Posted by JP on June 11, 2012

In this article we can explore Web Parts one of the important extensible tool inside SharePoint. Using Visual Studio we can create Web Parts.

What are Web Parts?

Web Parts are user customizable regions inside a SharePoint web page. It is an ASP.NET custom control which inherits from System.Web.UI.WebControls.WebPart. A Web Part needs the following to work with:

· WebPartZone

· WebPartManager

We can create Web Part using the following ways:

1. Inside SharePoint

2. Using Visual Studio

clip_image002

Creating Web Part using Visual Studio

Now we can try creating Web Part using Visual Studio 2010. Create a new Visual Web Part project from the SharePoint 2010 templates.

clip_image004

In the next page select the site and click Finish button.

Inside the Solution Explorer, open the Visual Web Part User Control. This control represents the User Interface of the web part.

clip_image006

Add a label and change the text of it.

clip_image008

Building

Now build the project and once it succeeds, use the Deploy option of project.

clip_image010

Wait for a few minutes and our Web Part gets deployed into the SharePoint site.

Steps in Manual Deployment

Following are the steps in manual deployment:

1. Create Web Part

2. Sign the Assembly

3. Copy to bin/GAC folder

4. Add to SafeControl list of web application

To our help, Visual Studio does all these activities.

Viewing the Web Part

For viewing the web part use the Edit Pate from any page and access the Add Web Part dialog.

clip_image012

Inside the Custom category we can see the newly created web part. Click on the Add button and you can see the web part as shown below.

clip_image014

Rendering Web Part

The rendering of the web part is done by the class named VisualWebPart1. You can see the CreateChildControls() method inside it.

protected override void CreateChildControls()

{

Control control = Page.LoadControl(_ascxPath);

Controls.Add(control);

}

Here the User Control (ASCX) is rendered to the web part using Controls.Add() method.

Note: In this example we have just used the label control. We can use the other ASP.NET controls inside web parts.

Kinds of Web Part

There are 2 kinds of web parts:

1. Classic Web Parts (Add new item > Web part)

2. Visual Web Parts (Add new item > Visual Web part)

Tool Parts

Along with the web part, we can associate specific controls in the properties area of the web part. The Edit Web part command brings the Tool window on the right side.

clip_image016

If we add a custom control or property into the above area it is called as Tool Part.

· We are experimenting with adding a Tool part consisting of following controls:
Drop Down List with existing List Names

· Text Box control to capture the Customer Name

Following are the activities involved:

· Add a CustomerName property inside Web Part

· Create a custom class inheriting ToolPart

· Render Controls inside ToolPart

Following are the modifications inside VisualWebPart class:

public override ToolPart[] GetToolParts()

{

ToolPart[] allToolParts = new ToolPart[3];

WebPartToolPart standardToolParts = new WebPartToolPart();

CustomPropertyToolPart customToolParts = new CustomPropertyToolPart();

allToolParts[0] = standardToolParts;

allToolParts[1] = customToolParts;

allToolParts[2] = new MyToolPart();

return allToolParts;

}

protected override void Render(HtmlTextWriter writer)

{

base.Render(writer);

writer.Write(CustomerName);

}

[Browsable(false),

Category(“CustomToolPart”),

DefaultValue(“Default Name”),

WebPartStorage(Storage.Personal),

Personalizable(PersonalizationScope.User),

FriendlyName(“Customer Name”),

Description(“The name of the customer”)]

public string CustomerName

{

get;

set;

}

Following is the definition of ToolPart class:

public class MyToolPart : Microsoft.SharePoint.WebPartPages.ToolPart

{

private DropDownList _dropDownList;

protected override void CreateChildControls()

{

Panel panel = new Panel();

dropDownList = new DropDownList();

_dropDownList.ID = “id2”;

// Populate lists inside DropDownList control

SPListCollection lists = SPContext.Current.Web.Lists;

foreach (SPList list in lists)

_dropDownList.Items.Add(list.Title);

TextBox textbox = new TextBox();

textbox.ID = “id3”;

panel.Controls.Add(_dropDownList);

panel.Controls.Add(textbox);

Controls.Add(panel);

base.CreateChildControls();

}

public override void ApplyChanges()

{

VisualWebPartProject1.VisualWebPart1.VisualWebPart1 webpart = (VisualWebPartProject1.VisualWebPart1.VisualWebPart1)this.ParentToolPane.SelectedWebPart;

webpart.CustomerName = “You selected: ” + _dropDownList.SelectedValue;

}

}

Build and Deploy the project and use the Edit Web Part option. You can see the new controls in the Tool Part panel as shown below:

clip_image018

Select a List item and click the Ok button. You can see the List item name displayed in the web part as shown below:

clip_image020

Custom Properties for Web Part

You might have noticed that the Web Part custom property having some attributes. Each of them are described below:

Following is an example code for custom property:

Property Description
Browsable If false, the property is not displayed on the web part property pane
DefaultValue Default Value for the property
WebPartStorage Shared, Personal and None are the enumeration members
FriendlyName The name for the property for display purposes
Description The tooltip about the property

References

http://msdn.microsoft.com/en-us/library/microsoft.sharepoint.webpartpages.webpart.aspx

http://archive.msdn.microsoft.com/DataAccessWebPart

http://www.zimmergren.net/technical/how-to-custom-web-part-properties-toolpart

http://msdn.microsoft.com/en-us/library/dd584174(v=office.11).aspx

Summary

In this article we have explored Web Parts creation, data access, connectable web parts etc. In real world scenarios Web Parts provide a handy tool for the developer. The attachment contains the source code we discussed.

Posted in C# | Tagged: , , | 2 Comments »