For years, SharePoint has been positioned as a web development platform, but it’s hard to build modern websites using SharePoint’s rigid UI, which is rooted in decade-old WebForms technology. These solutions often break when SharePoint is upgraded, either in a migration from SharePoint 2013 to 2016, or really at any moment with SharePoint online! In this session, you’ll learn how to follow the patterns Microsoft uses in its NextGen portals and build your own modern application using SharePoint and Office 365 as a set of services. These solutions are responsive and can be developed using contemporary ASP.NET MVC technology. Content is stored in SharePoint or Office 365, and is enhanced through the machine learning in Office Graph. You’ll even learn how to include your own line-of-business data without the need for complex BCS configurations. Join us and learn to make your own Next Generation portal backed by SharePoint and Office 365! 

1. Bob German
Principal Architect
Building Next Generation
Portals for Office 365

2. Thank You
EVENT Sponsors
We appreciated you supporting the
New York SharePoint Community!
• Diamond, Platinum, Gold, & Silver have
tables scattered throughout
• Please visit them and inquire about their
products & services
• To be eligible for prizes make sure to get your
bingo card stamped by ALL sponsors
• Raffle at the end of the day and you must be
present to win!

3. Agenda
NextGen Portals
SharePoint as a
Service
Developing a
Next Generation
Portal
Azure AD
and ADAL
Responsive
UI
Accessing
LOB Data
Accessing
O365 Data
Office
Graph
@Bob1German

4. Office 365 Video
Office 365
Video

5. Delve
Office 365
Video
Delve

6. “InfoPedia”
Office 365
Video
Delve “InfoPedia”

7. Custom
Office 365
Video
Delve “InfoPedia”

8. What’s a NextGen Portal?
Intelligent
Social
Mobile
Ready-to-go
Uses Office 365 Services
Tailor Made

9. Building Modern Applications with SharePoint
SharePoint as a Platform SharePoint as a Service
Line of Business Applications built on
SharePoint Sites
• Bring business data into SharePoint with
BCS or custom code
• SharePoint’s services: document
management, search, user profiles, office
web applications, etc.
• SharePoint is the web server: security,
hosting options, AAM’s, app model, etc
• SharePoint’s page model: web parts,
navigation, branding, publishing pages
Line of Business Applications that use
SharePoint for its Services Only
• Bring SharePoint into Business apps with
REST and CSOM
• SharePoint’s services: document
management, search, user profiles, office
web applications, etc.
• Your choice of web server
• Your choice of page model; mobile
ready/responsive, SPA’s, etc.

10. Goal SP as a Platform Challenges SP as aService
Custom Branding •SharePoint Master Page •Almost rocket Science
•Breaks w/each new version of
SharePoint
•Whole new UI using any technology
you like
Custom Lists and
Libraries
•Features and Templates •Lists break if solution that created
them is removed
•Provision lists using remote API’s
(“Remote Provisioning” pattern)
Custom Forms •InfoPath
•Modify OOB forms
•InfoPath became a dinosaur
•Forms are fragile, can break on
upgrade/migration
•Self-contained HTML and JavaScript
Custom Web Parts •Server side Web Parts and
Visual Web Parts
•One bad web part can bring down
the farm
•Too risky for cloud/multi-tenant
environments
•Browser based widgets
(“app script parts”)
•IFrames to external web sites
From Platform to Service
@Bob1German

11. Demo Application
Azure AD
AuthN
Managed API,
Service
Account
L E G E N D
Demo App
LOB Services
O365 Services
@Bob1German
Office 365
Azure
Active
Directory
LOB Service LOB Service
Portal Website
(ASP.NET MVC)
AngularJS Application
API Gateway
(Web API)

12. demo
Office 365 Application
Contracts 365

13. Azure AD
and ADAL
Responsive
UI
Accessing
LOB Data
Accessing
O365 Data
Office
Graph
Office 365 Application

14. About Azure AD
1 Trillion
Azure AD auths
since the release
of the service
50 M
Office 365 users
active every
month
>1 Billion
authentications every
day on Azure AD
More than
500 M
objects hosted
on Azure Active
Directory
Azure AD manages
identity data for
>5 M
organizations
86%
of Fortune 500
companies on Microsoft
Cloud (Azure, O365, CRM
Online and PowerBI)
Secure protocols
• OpenID Connect and OAuth 2.0
• App never captures user
credentials
• Supports Multi-factor AuthN and
federated user sign-in
• Long-term access through refresh
tokens
• Fine-grained access scopes
@Bob1German

15. Active Directory Authentication Library
Runs in many environments
• JavaScript
• .Net (Server or Client side, including modern apps/phone)
• iOS
• Android
• Xamarin
• Cordova
• Node.js
• Java
http://github.com/AzureAD
@Bob1German

16. demo
Azure AD Registration
ADAL, ADAL.js

17. code review
Azure AD Registration
ADAL, ADAL.js

18. Responsive Web Design
Web pages that provide an optimal experience across a wide
range of screen sizes
• Continually resizes –
no extra
horizontal space
• Uses relative not
static units
• Content flows
smoothly
@Bob1German

19. Office UI Fabric
• CSS system that allows building
applications that look like
Microsoft Office 365 and
Microsoft Office
• Includes some aspects of
Bootstrap (fluid grid system,
etc.)
• Plays well with Bootstrap
Features
Common
components
Specialized
components
Typography
Color
Icons
Animations
Responsive grid
Localization
Buttons
Drop-down lists
Radio buttons
Check boxes
Form fields
Search boxes
Toggle switches
Text fields
Lists
Dialogs (with
overlay)
Callouts
Navigation bars
Pivots
Personas
Tables
@Bob1German

20. code review
Responsive UI with Bootstrap

21. Top 5 reasons to have an API Gateway
1. Simplifies cloud access to
on-prem systems (VPN from
cloud service instead of every
client)
2. Allows use of a service account to
access LOB systems (allows elevating
privileges, connection pooling)
3. Limits access to only the
LOB data needed rather
than exposing the LOB
system to the Internet
4. Allows caching
5. Hides the details of LOB
system
API Gateway
@Bob1German
Office 365
Azure
Active
Directory
LOB Service LOB Service
Portal Website
(ASP.NET MVC)
AngularJS Application
API Gateway
(Web API)

22. demo
Accessing Line of Business Data
via Web API Gateway

23. code review
Accessing Line of Business Data
via Web API Gateway

24. Office 365 API’s
• Office Graph API (not to be confused with Office Graph!)
Great power in one endpoint
• Azure AD: users, groups, user photo*
• OneDrive (SharePoint coming soon!)
• Outlook (mail, calendar, contacts, notifications*)
• Video (portal, channels, video information, videos)
• Office Graph (trending,
SharePoint coming soon!
• SharePoint (sites, webs, lists, libraries, search including Office Graph
queries, user profiles, social feed, files, groups, roles, users, more)

25. code review
Accessing Office 365 Data

26. User Files Conversations People & Groups Events
Silos of Information
@Bob1German

27. User Files Conversations People & Groups Events
COLLEAGUES
MESSAGES
EVENTS
FILES
EMAILS
Office Graph: Connecting the Silos
@Bob1German

28. Files Conversations People & Groups Events
Actions and
relationships
Data in the Office Graph
@Bob1German

29. Office Graph Development Today
• Use SharePoint Search API with Graph Query Language (GQL)
• Available Acton Types:
PersonalFeed, Modified, OrgColleague, OrgDirect, OrgManager,
OrgSkipLevelManager, WorkingWith, TrendingAround, Viewed,
WorkingWithPublic
https://mytenant.sharepoint.com/_api/search/query
?Querytext=‘*’
&Properties=‘GraphQuery:actor(ME, action:1033)
@Bob1German

30. USERS FILES MAIL CALENDAR TASKSGROUPS
graph.microsoft.com
Insights and relationships from Office Graph
Office 365 Unified API and Office Graph
At its Build and Ignite
conferences, Microsoft
painted a vision of a
unified API with Office
Graph as its
foundation…
(future)
@Bob1German

31. code review
Accessing the Office Graph

32. Resources
Office 365 API’s and ADAL
Authentication
http://bit.ly/1RTF5sw
Introducing ADAL.JS http://bit.ly/1Hko4WI
Introduction to Office 365
Development
http://bit.ly/1qDmDbF
Getting Started tutorials
• Android
• Angular
• ASP.NET MVC
• iOS
http://bit.ly/1NlS6s5
Bootstrap 3 Getting Started http://bit.ly/1oC29x9
Office UI Fabric http://bit.ly/1KKpNqe
Office Graph Queries http://bit.ly/1FdRpS0
@Bob1German

33. Conference Materials
• Slides / Demo will be posted on Lanyrd.com
• http://lanyrd.com/2016/spsnyc
• Photos posted to our Facebook page
• https://www.facebook.com/sharepointsaturdaynyc
• Tweet Us - @SPSNYC or #SPSNYC
• Sign Up for our NO SPAM mailing list for all
conference news & announcements
• http://goo.gl/7WzmPW
• Problems / Questions / Complaints / Suggestions
• Info@SPSNYMetro.com

34. • Visit ExtaCloud’s booth for wrist bands!
Scallywag's Irish Pub
508 9th Ave, between 38th & 39th.
[6 minutes walk]
Scallywags also serves food.
http://www.scallywagsnyc.com/