• About Us
  • Blog
  • Basket
  • Account
  • Sign In
  •  

Blog

Published on Thursday, July 28, 2011

Using 51Degrees.mobi within Sharepoint

Introduction


The 51Degrees.mobi Framework is a comprehensive set of ASP.NET components designed to detect mobile devices, provide your web pages in a format that will work on them all, and improve performance compared to standard ASP.NET and Sharepoint. Our controls plug straight into Visual Studio, but that doesn’t mean other development environments should miss out on the ever growing mobile audience. Here are the steps that will enable 51Degrees.mobi controls to work on the Sharepoint platform. This guide uses the native Sharepoint 2010 manager, but other versions of Sharepoint should be similar.

Requirements

The guide assumes Sharepoint has been installed and that you're familiar with both that and ASP.NET.

Guide

Step 1


The first step is putting the Framework files and their dependencies in the right place. When using the Visual Studio to build a mobile web template this is done for you but in Sharepoint it has to be done manually. Create a mobile web project in Visual Studio using .NET 2 (to create the source files) and navigate to the web project directory and the Sharepoint site directory. My installation the directory was C:\inetpub\wwwroot\wss\VirtualDirectories\80. The App_Data, App_Themes, Images and bin folders all need to need to be copied from the project directory to the Sharepoint directory. 

The Framework also needs a licence file. If you are using the trial it can be found in the 51Degrees.mobi installation, typically at C:\Program Files (x86)\51Degrees.mobi\.Net Mobile Framework\Framework.lic. If you are not using a trial licence the licence key needs to put in a plain text file and named ‘framework.lic’. Either way, that file needs to be copied into the Sharepoint bin folder.

The Sharepoint web.config then needs extra configuration to cope with the Framework. Add these sections in the relevant places. The directories should already exist.
<System.webserver>/<modules>
        <modules runAllManagedModulesForAllRequests="true">
        <add name="51degrees.mobi Device Detector" type="FiftyOne.Foundation.Mobile.Detection.DetectorModule, FiftyOne.Foundation" />
 
<system.webserver>/<handler>
        <add name="Includes" verb="GET" path="I.axd" type="FiftyOne.Framework.Mobile.Includes.IncludesHandler, FiftyOne.Framework" />
        <add name="Image" verb="GET" path="P.axd" type="FiftyOne.Framework.Image.ImageHandler, FiftyOne.Framework" />
 
 
<system.web>/<pages>/<controls>
<add tagPrefix="mob" namespace="FiftyOne.Framework.Mobile.Controls" assembly="FiftyOne.Framework" />
 
<system.web>
        <trust level="Full" originUrl="" />
 
<Sharepoint>/<SafeControls>
        <SafeControl Assembly="FiftyOne.Framework" Namespace="FiftyOne.Framework.Mobile.Controls" TypeName="*" Safe="True" />


The last configuration line doesn't feature in other 51Degrees.mobi implementations. This tells the Sharepoint server that our controls are not malicious and are safe to be used.

Now that those changes are in place try to load your site. If it works the web.config is still valid. If it fails the web.config is probably malformed. Check it for duplicate sections and invalid syntax.

Step 2

Presuming there were no problems it is now time to add parts to pages.
The first barrier with using our controls in Sharepoint is that they don’t appear in the Web Parts menu. They instead need to be placed without any designer tools. The first step will be exposing a page’s source code.
Create a Sharepoint site (or load an old one, but this guide uses a completely new blog site) open a page to edit then edit with Sharepoint designer by selecting ‘Site Actions’ in top left hand corner and choosing ‘Edit in Sharepoint Designer’. While creating this guide I had a completely new Sharepoint installation so I was prompted to download and install the designer separately.


With this utility you can change page’s markup. This can be used to add ASP.NET components, or in our case, Mobile Toolkit components:

 
Before adding components mob prefix (as opposed to the asp prefix) needs to be tied to the assembly. Add the following line to the top of the page:

<% @ Register TagPrefix="mob" Assembly="FiftyOne.Framework" Namespace="FiftyOne.Framework.Mobile.Controls"%>

Finally, the
xmlns:mob="FiftyOne.Framework" attribute has to be added to ‘xsl:stylesheet’:

So that part of code will look like:
<Xsl>


And that page should now be able to display 51Degrees.mobi controls. They can either be setup using the code or by using the ASP.NET designer in the insert ribbon to drag and drop the controls where needed then changing the prefix later (from asp to mob).


The 51D control will not show in the design window, but will be rendered in the browser.

Design view:


From IE8:


And there it is! Mobile controls in Sharepoint. Of course to properly utilise the rich features of both 51Degrees.mobi and Sharepoint it may be necessary to create different templates. For instance, the screenshot above has four distinct panes (top pane, left pane, right pane and content pane), but many phone won’t have enough screen space to properly show this. 

Greater integration is in the pipeline so watch this space for more on 51Degrees.mobi in Sharepoint. 
Now that that is working, you’ll want to see here for more on controls and how to use them.



Comments (0)

Author: Products Team

Categories: Development

Tags: Framework, Sharepoint

Tom Holmes
>

Products Team

Other posts by Products Team
Contact author

Name:
Email:
Subject:
Message:
x

Tags

.NET 2013 2014 4G 51Degrees 5G A.C.Roma A7 ABI Acer Affiliate Marketing Alcatel Amazon AMP Analysis Analytics Android Android 5.0 Lollipop Android Kitkat Android Lollipop Android Media Stick Apache API Apple Apple TV Archos Asha Asian Market ASP.NET Asus Australia Big Data Black Friday Blackberry Blink Browser C C# Case Study CeBIT CES Chrome Cloud CMS combinations Comparison Competition CoolPad COTW Cron CSS3 Data Data Blog Data File Data Model Daydream Denver Design Desire Eye Desktop Detection Device Device Data Device Detection Device Intelligence Device Popularity Device property Device Types Device Use Display DoCoMo Doogee DotNetNuke Download Drupal Email EReader E-Reader Ericsson Evaluation Event Examples EXPLAY Rio Facebook feature Firefox Firefox OS Fly Foundation Framework France Galaxy S3 Galaxy S5 Galaxy Tab A Galaxy Tab A 8.0 Galaxy Tab A 9.7 Germany Global Google Google Daydream GSMA HAProxy Hardware Hisense HTC HTC ONE MAX HTC OS HTML5 HTTP Huawei HUAWEI. UPDATE HUDL Huwaei IBC Icemobile Prime 4.0 IE IFA IIS Image Optimiser Image Optimizer India Infographic Ingeniux Internet usage iOS iOS 7 iOS 8 ipad iPhone iPhone 6 IsEmailBrowser IsWebApp Italy Japan Java Javascript Jolla Kentico Keynote Kindle Kindle Fire Kindle Fire HD Leagoo Lenovo LG Location Log File Analysis LTE Lumia Map Memory Meta Data Mi 4S Micromax Microsoft Miia Style Mobile Mobile Analysis Mobile Analytics Mobile Devices Mobile Marketing Mixer Module Motorola MVC4 MWC MWC 2017 MWC16 MyPhone Native NET New Release News News Letter Nexus Nexus 6 Nexus 9 NFC NGINX Nokia Non-Mobile NVIDIA Omate On7 Opera Opera Mini Operating System Optimisation OS OSX 10.10 OTA Panasonic Patent PC Pebble Performance phablet phone PHP Poland Presentation Press Release Price Band PRIV PS4 Python QMobile QR Codes Redirection Research Reseller Responsive Images RESS Review reviews RIM Ringmark RWD Samsung Scala Screen Screen resolution Screen Size SEO Server Set Box Set Top Box Sharepoint Shark 1 SHIFT phones Sitecore SLUSH Smart TV Smartphone Smartphones Smartwatches Snapdragon Sony Sony Xperia Spain Swedish Beers Symbian Tablet Tablets Tesco Testing Top 5 TOTW TV UDS UK Umbraco Update updates US User Agent UserAgent User-Agent Vendors Version 3 VoLTE VR Wearable Web WebKit WebMatrix White Paper Widgets Widnows WiFi Wiko Wileyfox Windows Windows Phone Xbox XBox One Xiaomi Xperia Xperia z Yosemite Z10 ZenFon 2 ZOPO ZTE