.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
 
Sign In
Register
 
Win Surprise Gifts!!!
Congratulations!!!


Top 5 Contributors of the Month
david stephan

Home >> Articles >> SharePoint >> Post New Resource Bookmark and Share   

 Subscribe to Articles

Programmatically create web part for mobile in SharePoint2010

Posted By:Ravishankar       Posted Date: April 16, 2011    Points: 200    Category: SharePoint    URL: http://www.dotnetspark.com  

In SharePoint 2010 all mobile devices are redirected by default to the mobile SharePoint rendering engine.
 

In SharePoint 2010 all mobile devices are redirected by default to the mobile SharePoint rendering engine. The mobile rendering engine of SharePoint provides mobile users access to the sites with a completely stripped interface. Its main function is to list all libraries and to provide basic access to them.

1. Create a Visual Studio 2010 Visual Web Part Project

Add a new item as "Visual Web Part".

MobShare1.gif

Your solution will look like:

MobShare2.gif

2. Add your control in VisualWebPart1UserControl.ascx.cs

Open the class file "VisualWebPart1UserControl.ascx.cs" and add the following code to the load event:

namespace MobileWebPartDemo.VisualWebPart1
{
    public partial class VisualWebPart1UserControl : UserControl
    {
        TextBox txt;
        Label latest;
        Button btn;
        protected void Page_Load(object sender, EventArgs e)
        {
            StringBuilder strDiv = new StringBuilder();
            Literal heading = new Literal();
            Literal litHello = new Literal();
            txt = new TextBox();
            btn = new Button();
            latest = new Label();
            btn.Text = "Enter";
            btn.Click += new EventHandler(btn_Click);
            heading.Text = "Hello,You are in Normal browser now
"; litHello.Text = "Enter value: "; Controls.Add(heading); Controls.Add(litHello); Controls.Add(txt); Controls.Add(btn); Controls.Add(latest); } protected void btn_Click(object sender, EventArgs e) { latest.Text = "
Your entered value is: " + txt.Text + ""; } } }

3. Create the mobile (adapter) version of our web part

To add web part to the mobile version of the site we must provide SharePoint with a mobile optimized version of our web part. We do this by adding a new class. Microsoft calls this class an adapter.

Add a new class and name it "VisualWebPart1MobileAdapter.cs". Note that we added the name of our web part in front and added the text "MobileAdapter" at the end.

Microsoft recommends using the namespace "SharePoint. WebPartPages.MobileAdapters" so modify the namespace to use "Ravishankar.SharePoint.WebPartPages .MobileAdapters".

Our class should inherit the "WebPartMobileAdapter" class.

The adapter does not use the "OnLoad" event. Instead it uses the "CreateControlsForSummaryView" to render. Override this class and add the following code:

namespace Ravishankar.SharePoint.WebPartPages.MobileAdapters
{
    public class VisualWebPart1MobileAdapter : WebPartMobileAdapter
    {
        TextBox txt;
        Label latest;
        Button btn;
        protected override void CreateControlsForSummaryView()
        {
            //base.CreateControlsForSummaryView();
            StringBuilder strDiv = new StringBuilder();
            Literal heading = new Literal();
            Literal litHello = new Literal();
            txt = new TextBox();
            btn = new Button();
            latest = new Label();
            btn.Text = "Enter";
            btn.Click += new EventHandler(btn_Click);
            heading.Text = "Hello,You are in Mobile now
"; litHello.Text = "Enter value: "; Controls.Add(heading); Controls.Add(litHello); Controls.Add(txt); Controls.Add(btn); Controls.Add(latest); } protected void btn_Click(object sender, EventArgs e) { latest.Text = "
Your entered value is: " + txt.Text + ""; } } }

4. Add the adapter to the safe controls

Open the web.config file of SharePoint IIS site (example: C:\inetpub\wwwroot\wss\VirtualDirectories\80) and add the line below into the safe controls section. Replace the PublicKeyToken with your own key!



5. Configure the compat.browser file to use our mobile web part

Inside SharePoint IIS directory you will see a directory "App_Browsers" and inside that directory is a file called "compat.browser". Load this file in the editor.

At the top of this file you will find a "" section. Add the line below to this section:



Again, replace the PublicKeyToken with your own key! Save the configuration and exit the file.

6. Build the project, Add web part to the page

We finished the required steps to provide SharePoint with a web part that is optimized for the mobile page. Build the project and deploy. Add the web part in your page

Web Page Preview:

MobShare3.gif

Mobile View:

MobShare4.gif
 
To view the web site in mobile view, type a "?mobile=1" after the normal site url. For example: "http://localhost/pages/default.aspx?mobile=1".

And that's it. Enjoy!


 Subscribe to Articles

     

Further Readings:

Responses

No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend