Rich vs. Reach: Understanding Your SharePoint Mobility Options July 25, 2012
Mobile + SharePoint Session Objectives • Apply the Rich / Reach spectrum to your mobile initiatives • Understand the approaches for taking SharePoint mobile • Identify the platforms for apps and how to integrate these platforms with SharePoint
Mobile + SharePoint Mobile + SharePoint Timeline June, 2007 February, 2008 February, 2011 November, 2010 Original Apple opens Apple App Store Windows Phone iPhone App Store, passes 10 billion Released Available App SDK • SharePoint/Office app downloads, Mobile Events Hub HTML5 Working November, 2006 SharePoint Draft published 2007 in 3 June, 2009 by W3C Gartner Released Magic • /m Mobile Sites • Mobile Views Quadrants • Search • Portals Released • Enterprise • V4 UI, Fluent Ribbon Content • jQuery Support Management • Client Side Object Model SharePoint Events
Mobile + SharePoint Mobile + SharePoint Strategy
Mobile + SharePoint The Rich / Reach Spectrum Reach Rich Broadest Focused Audience Experience The Goal The Goal Your app or site reaches the broadest Your app or site provides an immersive audience of users, regardless of experience that takes full advantage of the device, platform, or form factor capabilities of the user’s device Benefit: Lower total cost of Benefit: Enables a full range of usage maintenance, flexible to support new devices / scenarios, can deliver a better UX platforms Downside: Requires decisions about devices to Downside: Lowest common denominator build for and support, potentially results in approach, Higher testing cycle time multiple codebases if multiple platforms are required
Mobile + SharePoint Mobile+SharePoint Choices Reach Rich Broadest Focused Audience Experience Extend to Build Sites for Third Party Build Apps for Mobile Mobile App Options Mobile
Mobile + SharePoint Architecture Option #1: Extend to Mobile Reach Rich Broadest Focused Audience Experience Goal Tactics and Tools Make existing SharePoint Conditional CSS with User Agent detection or @Media CSS3 class targeting Websites more mobile- in Custom Master Page friendly jQuery Mobile and ASP.NET Mobile Framework Strategy Either make existing pages Limitations mobile-friendly or create Application pages must align with full-browser pages and only show an pages in your sites to alternate rendering enhance the experience SharePoint’s default pages are very command-dense and information- dense, so presenting a compelling and complete mobile UX is difficult
Mobile + SharePointRightpoint SharePoint ™ Mobile UI Framework
Mobile + SharePointNew Balance iNB Mobile: HTML5 publishing site withconditional CSS and mobile user agent detection
Mobile + SharePointGeneral Mills Brands-On-The-Go: Tablet-Friendly SharePoint Mobile Web UIthrough Custom Master Page loading CSS based on User Agent ERP
Mobile + SharePoint Architecture Option #1: Extend to Mobile – How To Do It Technique #1: Mobile-Friendly Custom Master Page 1. Ensure that non-mobile pages are shown for mobile devices: • Add following code to web.config (i.e. via a feature) <browserCaps> <result type="System.Web.Mobile.MobileCapabilities, System.Web.Mobile, Version=22.214.171.124 , Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a"/> <filter>isMobileDevice=false</filter> </browserCaps> or edit ASP.NET *.browser files on web servers 2. Start with Starter Master Pages for SharePoint: http://startermasterpages.codeplex.com/ 3. Target specific styles to mobile browsers by either: • Use CSS3 @media queries in supplemental CSS to target browser experience based on viewport, etc., see http://caniuse.com/#feat=css-mediaqueries for specific mobile browser support, or • Load CSS conditionally based on user agent
Mobile + SharePoint Architecture Option #1: Extend to Mobile – How To Do It Technique #2: Add alternate pages with jQuery Mobile functionality 1. Check out jQuery Mobile: http://jquerymobile.com 2. Check out ASP.NET Mobile Framework: http://amf.codeplex.com 3. Use ASP.NET Mobile Framework, and SharePoint server API to create custom web parts to render content from sites, lists/libraries, and list items. 4. The functionality behind the screenshots from the previous slide are used as a basis for Rightpoint to make future specific customizations on a web part / page as needed. 5. This is a good approach if you can redirect a mobile user on a site to specific mobile pages that give you more control than the SharePoint OOTB mobile experience.
Mobile + SharePoint Architecture Option #2: Build Sites for Mobile Reach Rich Broadest Focused Audience Experience Goal Tactics and Tools Create ASP.NET (MVC) Mobile ASP.NET MVC or WebForms Website UI, leverage existing SharePoint Client Object Model (CSOM) functionality and data using CSOM jQuery Mobile or other mobile JS frameworks and façade services Strategy Limitations Build a new site and leverage Different devices need to be tested services/data from existing site. Security groups may need to be involved to ratify architecture Makes sense when existing pages don’t align to the needs of a mobile experience and you still need to support a variety of mobile devices
Mobile + SharePointArchitecture Option #2 Topology Mobile Website Internal SharePoint Environment
Mobile + SharePointJones Lang LaSalle - OneView Projects
Mobile + SharePoint Architecture Option #2: Build Sites for Mobile – How To Do It Best Practices / Tips: Flow Authentication Credentials through to SharePoint 1. User authentication should be done via forms authentication, and subsequent service invocations to SharePoint should use those credentials 1. Based on your SharePoint implementation, consider SSO and SAML options to minimize having to re- authenticate with each service request 2. Obviously, the ASP.NET website should be only hosted in HTTPS/SSL 3. Or, if you are heavily using the CSOM, consider configuring the site and SharePoint for Kerberos and the ClientContext should flow the credentials from the client browser through to the service invocation. This is a bit tricky to set up, so budget for some time. 2. If you are not familiar, become familiar with the Client Side Object Model: http://msdn.microsoft.com/en- us/library/ff798388.aspx 3. If CSOM isn’t meeting your needs, consider developing a service and deploying on SharePoint as a feature, and invoking that service.
Mobile + SharePoint Architecture Option #3: Buy Apps/Sites for Mobile Reach Rich Broadest Focused Audience Experience Goal Tactics and Tools Provide functionality to mobile users Harmon.ie, Colligo, SharePlus, MobileEntree that is met by existing third party products, i.e. harmon.ie. This functionality typically aligns with a Limitations subset of SharePoint OOTB Some product assume that your SharePoint environment is functionality for traversing and already exposed to the internet. That may not be the case. In all working with sites, lists, and libraries. cases, check carefully to ensure that the product’s features match your needs. Strategy Determine your needed capabilities and cross-reference with existing apps.
Mobile + SharePoint Architecture Option #3: Buy Apps/Sites for Mobile • Product features typically align with document library, workflow, and search capabilities • Different apps are supported on different devices, but typically most new devices are supported, with a focus on iOS devices. • e.g. A search for SharePoint in the Apple App Store yields 97 results
Mobile + SharePoint Architecture Option #4: Build Apps for Mobile Reach Rich Broadest Focused Audience Experience Goal Tactics and Tools Create an app; an app is focused PhoneGap (http://phonegap.com) on a specific set of tasks that MonoTouch, Mono for Android (C#/Mono for iOS or Android – take advantage of the device http://xamarin.com/monotouch or http://xamarin.com/monoforandroid) Strategy iOS: xCode, Apple Developer/Enterprise License Target the device: iOS Windows Phone: Visual Studio/MSDN (iPad/iPhone), Windows Phone/Windows 8, Android, etc. Limitations Determine your app development PhoneGap doesn’t provide a full set of app capabilities, and stack based on your platform developing native ties you to a platform; know your features and choose carefully
Mobile + SharePointArchitecture Option #4 Topology Mobile Website – WCF services, etc. Internal SharePoint Environment
Mobile + SharePointGroundwork – Property Appraisals iPhone App
Mobile + SharePoint Architecture Option #3: Build Apps for Mobile – How To Do It Best Practices / Tips: 1. A portal website and an app are not the same thing. Build your apps for specific purposes: 1. Employee Directory 2. Insight/Action into a specific workflow (Approve/Reject from mobile device, potentially using Camera or GPS) 3. Mobile-ready BI dashboard (i.e. to replace emailed reports, etc.) 4. Specific mobile rendering of main page content Note: Each of these would be a separate app. Avoid putting too many features into an app 2. Plan upfront for scenarios in which the app should be updated 3. If the device is not maintained by your organization’s IT, strongly consider avoiding the storage of any company data on the device, and always authenticate the user upon app startup 4. Consider a hybrid option of wrapping a mobile-friendly site in an app. For instance, the News Feed and many other screens of the Facebook iOS app are really just showing web pages on a browser window inside the app. For iOS apps, check out the UIWebView class.
Mobile + SharePoint Apps / Sites Decision Tree Assuming a buy App • Offline vs. build decision Specific • Camera was made, and Features • GPS build was • Unique UX chosen… ? Yes Select App No Platform / Extend Site Device Can work Yes in existing UI? No Build App Build Site
Mobile + SharePoint Key Takeaways • Use the Rich / Reach Spectrum and the 4 target topologies as a tool to elicit requirements to determine target architecture • Use the Apps / Sites Decision Tree to determine the best fit option
thank you firstname.lastname@example.org email@example.comInternal use only Jeff Willinger 312.622.2300