Bob GermanPrincipal Architect

Building Next Generation Portals for Office 365

Thank YouEVENT 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!

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

Office 365 Video

Office 365 Video

Delve

Office 365 Video

Delve

“InfoPedia”

Office 365 Video

Delve “InfoPedia”

Custom

Office 365 Video

Delve “InfoPedia”

Microsoft hasn’t provided all the

hooks to build a custom NextGen

portal yet, but we can come

close!

What’s a NextGen Portal?Intelligent

SocialMobile

Ready-to-goUses Office 365 Services

Office Graph YammerOneDrive for Business Skype for Business Mail SharePoint Content

Management

Office Add-Ins Azure Media & other Azure PaaS

Services

Compliance Center

Tailor Made

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.

Goal SP as a Platform Challenges SP as aServiceCustom Branding •SharePoint Master Page •Almost rocket Science

•Breaks w/each new version of SharePoint

•Whole new UI using any technology you like

Custom Lists andLibraries

•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

Demo Application

Azure AD AuthNManaged API, Service Account

L E G E N D

Demo AppLOB ServicesO365 Services

@Bob1German

Office 365AzureActive

Directory

LOB Service LOB Service

Portal Website(ASP.NET MVC)

AngularJS Application

API Gateway(Web API)

demo

Office 365 ApplicationContracts 365

Azure AD and ADAL

Responsive UI

Accessing LOB Data

Accessing O365 Data

Office Graph

Office 365 Application

About Azure AD

1 TrillionAzure AD auths since the release of the service

50 MOffice 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)

Every Office 365 and Microsoft Azure customeruses Azure Active directory

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

Active Directory Authentication Library

Runs in many environmentsJavaScript.Net (Server or Client side, including modern apps/phone)iOSAndroidXamarinCordovaNode.jsJava

http://github.com/AzureAD

@Bob1German

demoAzure AD RegistrationADAL, ADAL.js

code reviewAzure AD RegistrationADAL, ADAL.js

Responsive Web DesignWeb pages that provide an optimal experience across a wide range of screen sizes

• Continually resizes – no extrahorizontal space

• Uses relative notstatic units

• Content flowssmoothly

@Bob1German

Office UI Fabric

• CSS system that allows buildingapplications that look like Microsoft Office 365 andMicrosoft Office

• Includes some aspects ofBootstrap (fluid grid system,etc.)

• Plays well with Bootstrap

FeaturesCommon components

Specialized components

TypographyColorIconsAnimationsResponsive gridLocalization

ButtonsDrop-down listsRadio buttonsCheck boxesForm fieldsSearch boxesToggle switchesText fields

ListsDialogs (with overlay)CalloutsNavigation barsPivotsPersonasTables

@Bob1German

code reviewResponsive UI with Bootstrap

Top 5 reasons to have an API Gateway

1. Simplifies cloud access to on-prem systems (VPN from cloud service instead of everyclient)

2. Allows use of a service account to access LOB systems (allows elevating privileges, connection pooling)

3. Limits access to only theLOB data needed ratherthan exposing the LOBsystem to the Internet

4. Allows caching5. Hides the details of LOB

system

API Gateway@Bob1German

Office 365AzureActive

Directory

LOB Service LOB Service

Portal Website(ASP.NET MVC)

AngularJS Application

API Gateway(Web API)

demoAccessing Line of Business Datavia Web API Gateway

code reviewAccessing Line of Business Datavia Web API Gateway

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)

code reviewAccessing Office 365 Data

User Files ConversationsPeople & Groups

Events

Silos of Information

@Bob1German

User Files ConversationsPeople & Groups

Events

COLLEAGUES

MESSAGES

EVENTS

FILES

EMAILS

Office Graph: Connecting the Silos

@Bob1German

Files ConversationsPeople & Groups

Events

LikeAction

ShareAction

AccessAction

FollowAction

ModifyAction

Actions and relationships

Data in the Office Graph

@Bob1German

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)

KQL Query

GQL Query

@Bob1German

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

code reviewAccessing the Office Graph

ResourcesOffice 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/1oC29x9Office UI Fabric http://bit.ly/1KKpNqeOffice Graph Queries http://bit.ly/1FdRpS0

@Bob1German

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

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/