SharePoint 2010 access from iPad/iPhone
Microsoft SharePoint 2010 supports several modern, standards based; XHTML 1.0 compliant browsers such as Internet Explorer 8, Firefox 3.6 and Safari 4.x. SharePoint and IPad do not mix well together. SharePoint is fundamentally intranet desktop oriented software, it's not built for mobile, and it certainly not built for internet social online collaboration. There are 2 options available to access SharePoint from iPad/iPhone.
1. Access via Browser like Safari
2. Third party client applications
There are several partners and 3rd party developers that provide mobile access solutions for SharePoint 2010 content, including Apple iPhone/iPad, through client applications. You can find many of these in the Apple iPhone/iPad App Store. This paper will address the only the first option.
Access for SharePoint
Out of the box SharePoint 2010 provides the ability to render mobile views of the default SharePoint templates. These mobile views are usually acceptable for an intranet or extranet deployment but they are not well suited for a public facing site. Just like any other project, the key to a successful implementation is planning. When building public facing SharePoint 2010 web sites you have complete flexibility in determining what HTML, style sheets and ECMAScript is used for rendering the site. A designer and developer can use basic web standards or they can utilize the latest HTML 5 constructs. Building a public facing web site with SharePoint that can be easily viewed on mobile devices requires a good understanding of mobile device capabilities.
Access options
OOB Features
We can just use the OOB features by tweaking the SharePoint configuration. SharePoint 2010 provides basic mobile views for lists and libraries. However in most cases this would probably not be acceptable for a public facing site.
Using the mobile view
SharePoint Server 2010 mobile features support access by web browser enabled mobile devices like the Apple iPad to view and navigate to SharePoint pages, document libraries, list data, content, and Office documents using Office Web Apps. By adding the Apple iPad’s Safari USERAGENT string to SharePoint 2010’s compat.browser file, SharePoint 2010 can detect the Apple iPad and automatically redirect to a mobile view (lightweight web interface).
How to add Apple iPad to compat.browser:
- To add or update mobile browsers, you will need to edit the compat.browser file.
- You can find the file under <system>\inetpub\wwwroot\wss\VirtualDirectories\80\App_browsers\compat.browser.
- To add the iPad useragent, edit the compat.browser file and append this after the iPhone section:
<!-- iPad Safari Browser -->
<!-- sample UA "Mozilla/5.0 (iPad; U; CPU OS 4_2_1 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8C148 Safari/6533.18.5" -->
<browser id="iPadSafari" parentID="AppleSafari">
<identification>
<userAgent match="iPad" />
<userAgent match="Mobile" />
</identification>
<capabilities>
<capability name="isMobileDevice" value="true" />
<capability name="canInitiateVoiceCall" value="true" />
<capability name="optimumPageWeight" value="1500" />
<capability name="requiresViewportMetaTag" value="true" />
<capability name="supportsTouchScreen" value="true" />
<capability name="telephoneNumberDetectionDisabled" value="true" />
</capabilities>
</browser>
- Restart Internet Information Services (IIS) by typing the following at the command prompt, and then press ENTER: iisreset /noforce
Using the standard view
For branded publishing web sites you may want to present the full web interface to the Apple iPad. In this case, you can disable the automatic redirect by setting the isMobile attribute to “false.”
Non OOB way
Depends on the requirement we can create some form of a mobile only version of your site which caters to your expected visitors.
Device Orientation Detection
When developing for the iPhone, iPad and other mobile devices, the first thing we have to do is obviously detect it, so we can apply specific code or styles to it. The following code snippets will detect iPhones and iPads using various methods, depending on your situation you can use one or a combination of these methods.
JavaScript
Whether your developing a web application or just making a iPhone compatible version of your website it can be very beneficial to target specific JavaScript to help create a rich interactive UI.
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i) || (navigator.userAgent.match(/iPad/i))) {
alert('SharePoint Mobile Website');
} CSS
Browser sniffing can be useful, but for many reasons it isn’t the best practice to detect a browser as there are many types of mobile device out there and you don’t want to have to target your code at every specific device. My preferred option is to target css to a device with and orientation with css, this can make design complicated as you have to think about how your layout will adjust however
If you’re looking for a cleaner way to apply CSS styles to the iPhone or small mobile devices only, you should use the following.
@media screen and (max-device-width: 480px){
} If you choose to create a mobile view of your SharePoint 2010 internet site you will next need to select one or more methods for building the site, and determine how a user will navigate it.
- Customizing the out of the box mobile home pages
- Creating mobile adapters for out of the box web parts
- Create custom field rendering controls for mobile pages
- Use SharePoint variations along with custom master pages and CSS for mobile devices
- Custom ASP.NET application that pulls content from SharePoint 2010
- Use a 3rd party solution to assist in the creation of SharePoint 2010 mobile sites
Customizing the out of the box mobile home pages
SharePoint 2010 has a mobile page rendering system that utilizes templates to determine how the header, contents and footer are displayed. By creating your own rendering templates you can change the default out of the box mobile home pages to meet your needs.
Creating mobile adapters for out of the box web parts
Many of the default SharePoint web parts have a basic mobile view that is displayed when a device accesses a mobile page. If you have your own custom web parts you will need to create a mobile adapter in order for them to properly display on a mobile page.
Create custom field rendering controls for mobile pages
SharePoint 2010 allows developers to build custom field rendering controls for mobile pages. These custom field rendering controls gives the developer full control over how fields are displayed in the display, edit, and new forms of a list.
Use SharePoint variations along with custom master pages and CSS for mobile devices
A feature called Variations that was originally designed to enable multilingual sites could be used for managing a separate view for mobile devices. The Microsoft ECM Blog states “Variations is a SharePoint feature that facilitates the management and maintenance of content that can be served to multiple audiences. These audiences can vary in terms of different languages, countries, or regions, but they can also represent different brands or devices.” Using variations along with a custom mobile master page and CSS style could provide a mobile version of a public facing SharePoint site.
Custom ASP.NET application that pulls content from SharePoint 2010
Some organizations have decided to write a custom ASP.NET web application specifically for mobile devices. These web applications utilize the SharePoint 2010 server and/or client object model for retrieving content that will be rendered in the mobile view. This method of creating a mobile site is much more involved, but it does give a lot of flexibility in how the mobile site will render and function.
Use a 3rd party solution to assist in the creation of SharePoint 2010 mobile sites
There are multiple 3rd party solutions created by Microsoft partners that can be used to help build out mobile versions of public facing web sites. These solutions provide frameworks that can be used to build full featured mobile websites based upon content stored and managed in SharePoint 2010.
Viewing reports and scorecards
Cumulative Update 2011-12 (CU 2011-12) for Microsoft SharePoint Server 2010 enables organizations to view certain kinds of reports and scorecards on Apple iPad devices that use the iOS 5 Safari browser. This article describes what business intelligence content users can view on iPad, how to configure reports and scorecards to be displayed correctly, and how to navigate business intelligence content on iPad. http://technet.microsoft.com/en-au/library/hh697482.aspx
Rich Content Edit
Mobile Safari does not support enough features as Safari does. It’s a trimmed down version of Safari, one of the attribute it does not support earlier was contentEditable. This attribute is widely used in SharePoint, in Google Docs, in TinyMCE and etc. After the iOS 5.x release now iPad/iPhone devices support rich edit controls.
HTML5 Support
HTML5 is the latest and greatest update to the ancient markup language. It has many drastic changes that could revolutionize the web. It is the future of many platforms and you can rest assured, the next version of SharePoint will use it. We did some web browser testing and found an interesting result: the updated version of Mobile Safari in iOS 5 has the highest HTML 5 compatibility of any mobile browser. For the test we ran HTML5Test.com's suite of compatibility tests, which examines how strictly browsers adhere to the standards in place for HTML5. They found out that iOS 5's version of Mobile Safari is the best among all mobile browsers. iOS 5 has 36 percent more HTML5 capabilities baked in than its predecessor iOS 4.3.
Enabling HTML5 support for SharePoint
In order for your SharePoint site to support HTML5, you need to
1. Change the master page to allow HTML5
Replace the following
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
With
<!DOCTYPE html>
2. Remove forced IE 8 rendering
<meta http-equiv="X-UA-Compatible" content="IE=8"/>
3. In the website add a new Content Editor webpart on the page where you want the HTML 5 to be displayed. Open the HTML editor for the contents
4. Put your HTML 5 code into the HTML Source window that appears, click OK
Authentication options
- Citrix / Remote Desktop appliance app
- credentials dialog in the browser via https
- Forms based Claims Based Authentication
Anonymous sites can’t be accessed from mobile devices unless we disable the viewformpageslockdown feature.
Security considerations
- iPad passes embedded video requests to QuickTime for rendering
- QuickTime lacks support for any proxy or authentication methods, and iPads cannot join a domain
- Video files must be anonymously accessible
Flash support
Apple devices never supported Flash animated presentations and Flash-based content. However, with Adobe Flash Media Server 4.5 and Adobe Flash Access 3.0, you can now watch Flash video on iPad and iPod.
iPad lacks support for
- Silverlight
- right-mouse-button command
- inability to EDIT documents
- Scroll
Design Consideration
Planning is the key for building successful mobile accessible web sites with SharePoint 2010. When designing a mobile website we may need to build a site navigation system that fits the capabilities of the devices users are expected to use. Some mobile devices are touch screen and allow a person to navigate a web site just as if they were using a mouse on a desktop or laptop computer. Other mobile devices only have a series of arrow keys and a select button. These two different forms of navigation can have a significant impact on how you choose to design your mobile sites. Careful thought and planning is required here in order to ensure that all of your visitors have an enjoyable experience.
References
http://msdn.microsoft.com/en-us/library/bb802539.aspx
http://msdn.microsoft.com/en-us/library/ee539079.aspx
http://msdn.microsoft.com/en-us/library/bb862011.aspx
http://msdn.microsoft.com/en-us/library/ms464268.aspx
http://msdn.microsoft.com/en-us/library/bb802700.aspx
