1. Software services delivering SharePoint, Mobile, and Business Intelligence solutions Creating mobile applications that integrate with SharePoint 2013 on- premises and O365 web sites and the cloud Todd Baginski Canviz LLC

2. WHO IS THIS GUY? @toddbaginski http://www.canviz.com http://www.toddbaginski.com/blog http://sharepointpromag.com/blog/todd-baginski-sharepoint-development

3. Agenda What are my options? How do I make my own custom mobile applications? Authentication patterns SharePoint and O365 APIs Integration with Azure Let’s see some examples and dive into the code! Questions and Answers Discussion

4. Many mobile options exist! Out of the box mobile views Office Mobile Web Apps Image Renditions Responsive Designs Device Channels Custom Mobile Apps Mobile- enabled Web Sites

5. OUT OF THE BOX MOBILE VIEWS

6. Three’s a charm! ClassicPC ViewContemporary

7. Technically speaking, how do the views compare? ClassicContemporary HTMLHTML5 Shipped with SharePoint 2010 Still part of SharePoint 2013 Browsers that do not support HTML5 Ships with SharePoint 2013 Mobile Internet Explorer® version 9.0 or higher for Windows Phone 7.5 + Safari version 4.0 or higher for iPhone 4.0 + Android in GB + * Rendered for all smartphone mobile browsers Not easily extensible

8. OFFICE MOBILE WEB APPS

9. Productivity & BI On The Go! Mobile-enabled PerformancePoint Web Parts Excel Services SQL Server Reporting Services iOS ver 5.0+ Safari Browsers on iPads Android in GB + *

10. RESPONSIVE DESIGNS

11. How does a responsive design work? HTML / CSS3 / @media queries Page layout and design dynamically adapts to device 769-1180px641-768px0-640px

12. DEVICE CHANNELS

13. What Are Device Channels? New capability available in SharePoint 2013 Allow you to map specific views of your content to specific devices

14. Specific Views For Specific Devices ClientsSharePoint Web Site iPad 2+ Device Channel iPhone 4 Device Channel Default Device Channel iPhone 5 Device Channel

15. How Do Device Channels Work? Is UserAgent string included in a Device Channel? User browses to site iPad 4+ View Default Channel Yes No Is UserAgentString iPad 4+ ? Is UserAgentString iPhone 4+? Is UserAgentString Windows Phone 7.5+ ? iPhone 4+ View WP 7.5 + View

16. Even more options… and decisions Native Mobile Apps – Written in the native language for target device(s) Or written in a language which is compiled into the native language – Provides you the full API set associated with a device – Marketplace deployment possible Cross Device Compatible Mobile Apps – Written in HMTL5 / JQuery / CSS3 – API set may be limited, depending on device – Marketplace deployment possible Mobile-enabled web sites – Written in HMTL5 / JQuery / CSS3 – API set may be limited, depending on device – Not deployed to a marketplace

17. A Cross Device Compatible Mobile App? What’s that? Wrapped in native code which opens a web browser Same app, mostly the same HTML / JS / CSS Published to different Marketplaces / Devices

18. How do I make a Cross Device Compatible Mobile App? Native Code Wrappers – Apache Cordova (PhoneGap) / Xamarin – Visual Studio 2013 now includes project types for these! HTML5 / JQuery / CSS3 Supporting frameworks – JQuery Mobile – Knockout JS (MVVM) – And more….

19. Mobile-enabled Web Sites No marketplace deployment needed Any platform – HTML5 / JQuery / CSS – Responsive designs

20. Authentication Patterns SharePoint 2013 On-Premises – Forms Based Authentication – Claims Based Authentication – Proxy via Provider-hosted App O365 – O365 APIs Azure Active Directory – Proxy via Provider-hosted App – Active Directory Authentication Library Single Sign-On – User based access – App Based Access – Service-side authorization of users

21. CRUD Operations SharePoint 2013 On-Premises – ASMX Web Services – REST – CSOM O365 – O365 APIs – REST – CSOM

22. What are these new O365 APIs? Brand new (alpha) API set for O365 –.NET and JavaScript libraries NuGet packages – http://visualstudiogallery.msdn.microsoft.com/7e947621-ef93-4de7-93d3- d796c43ba34f http://visualstudiogallery.msdn.microsoft.com/7e947621-ef93-4de7-93d3- d796c43ba34f Support for many different project types in Visual Studio –.NET Windows Store Apps –.NET Windows Store Universal Apps – Windows Forms Applications – WPF Applications – ASP.NET MVC Web Applications – ASP.NET Web Forms Applications – Xamarin Android and iOS Applications – Multi-device Hybrid Apps – Windows Phone 8.1 Apps (version 1.1.728 onwards) Multi-Device Hybrid Apps (Preview) – http://msdn.microsoft.com/en-us/vstudio/dn722381.aspx http://msdn.microsoft.com/en-us/vstudio/dn722381.aspx – Requires Visual Studio 2013 Update 3

23. What can I do with O365 APIs? Capabilities – Registration with Azure Active Directory – Discovery Service Based on who you are, what do you have access to, and what level of access do you have? – Calendar (Exchange) – Contacts (Exchange) – Mail (Exchange) – My Files (SharePoint) – Sites (SharePoint) – Users and Groups (Azure Active Directory) REST based under the hood

24. Azure Mobile Services Notifications Data Stores – SQL – Table Storage O365 & SharePoint access Cloud-based sync to enable offline support

25. Mobile O365 SharePoint & Windows Azure Integration Demo Native WP8 App View Announcements – SharePoint List Data Submit Idea – Windows Azure SQL Database

26. Patterns used in the demo Data Sources – SharePoint Announcements List – http://.sharepoint.com/innovation /lists/Announcements – Windows Azure SQL Database Data Access Model – C# Code uses SP CSOM to read Announcements list – C# Code calls ASP.NET Web API – ASP.NET Web API uses Entity Framework to Query and Update Windows Azure SQL Database UI Model – XAML Controls Notifications – Azure Mobile Services

27. Android App Using O365 APIs Demo Written in C# Registration with Azure Active Directory Authentication with O365 APIs View Email with O365 APIs – Exchange Inbox Read Files with O365 APIs – SharePoint Document Library Edit List Items with O365 APIs – SharePoint List

28. Cross Device Compatible Mobile App Using O365 APIs Demo Wrapped in C# Written in JavaScript Registration with Azure Active Directory Authentication with O365 APIs View Email with O365 APIs – Exchange Inbox Read Files with O365 APIs – SharePoint Document Library Edit List Items with O365 APIs – SharePoint List

29. Summary There are several different ways to mobile enable SharePoint web sites Understanding the different options is essential to make sure you pick the correct implementation for each scenario SharePoint 2013 has many features which provide both out of the box and customizable mobile interfaces Custom apps and mobile-enabled web sites may be used to provide mobile capabilities which integrate with SharePoint sites and services The new O365 APIs make it easy to access SharePoint and other O365 services from mobile apps The new Visual Studio extensions make it easier than ever to create native and cross device compatible mobile apps

30. Helpful Related Resources Overview of mobile devices and SharePoint Server 2013 http://technet.microsoft.com/en- us/library/fp161351(v=office.15).aspx http://technet.microsoft.com/en- us/library/fp161351(v=office.15).aspx What's new for mobile devices in SharePoint Server 2013 http://technet.microsoft.com/en- us/library/fp161352(v=office.15).aspx http://technet.microsoft.com/en- us/library/fp161352(v=office.15).aspx Enabling Effective Device Channel JavaScript http://www.toddbaginski.com/blog http://www.toddbaginski.com/blog Deploy Office Web Apps Server http://technet.microsoft.com/en-us/library/jj219455(v=office.15) http://technet.microsoft.com/en-us/library/jj219455(v=office.15) Configure SharePoint 2013 to use Office Web Apps http://technet.microsoft.com/en-us/library/ff431687(v=office.15) http://technet.microsoft.com/en-us/library/ff431687(v=office.15)

31. Let’s discuss! Questions Answers Discussion

32. Thank You! Thanks for spending your valuable time with me at SharePoint Fest Denver 2014 today. I hope you enjoyed the session and learned a lot! How to contact me: Web Site: http://www.canviz.comhttp://www.canviz.com Blog: http://www.toddbaginski.com/bloghttp://www.toddbaginski.com/blog Twitter: @toddbaginski Email: todd.baginski@canviz.com