SharePoint 2013Apps, Apps, Apps

Andy Van Steenbergen

About me

Andy Van SteenbergenSenior SharePoint consultant @ OrdinaSP Competence Center LeadLesgever @ CVO Antwerpen

@Meligo#SharingIsCaring

Blog.meligo.be

MicrosoftExtendedExpertTeamMember

Let’s start

SharePoint

So why the need for Apps in SharePoint?

Sites

Vie

ws

Columns

Libra

riesPages

List

sWeb Parts

WorkflowsM

ast

er

Pag

es

SolutionsFe

atu

res

Conte

nt Ty

pes

Docu

ments

So why the need for Apps in SharePoint?

Sites

Vie

ws

Columns

Apps

Libra

riesPages

List

sWeb Parts

WorkflowsM

ast

er

Pag

es

SolutionsFe

atu

res

Conte

nt Ty

pes

Docu

ments

App Hosting

App Web (from WSP)

HostwebSharePoint-hosted

AppReuse (lists, out-of-box web

parts)Client side technologies and

declarative workflows

Provider-hosted App

“Bring your own server hosting infrastructure”

SharePoint

Web

Get remote events from SharePoint Use CSOM/REST + OAuth

Cloud-hosted apps

Your Hosted

Site

Auto-hosted AppWindows Azure + SQL

Azure provisioned automatically as apps

are installed

Azure SharePoint Web

SharePoint Office Store

SharePoint App Catalog

Web Browser

Anatomy of a SharePoint Hosted app

Manifest

Code

JS CSS

HTML ASPX

Reasons to use SharePoint hosted apps

INHERENT MULTI-TENANCY

& ISOLATION

NO ADDITIONALCOST

NO NEED FOR ADDITIONAL

INFRASTRUCTURE

AUTHENTICATION IS AUTOMATIC

SYMMETRIC IN OFFICE 365AND ON-PREM

The isolated domain

http://app-bdf2016ea7dacb.contosoapps.com/sites/Biwug/Poll

Host web

http://intranet.contoso.com/sites/Biwug

App webPoll App

/Poll

App prefix (tenant)

App ID

App domain

Host web

App name

http://app-bdf2016ea7dacb.contosoapps.com/sites/Biwug/Poll

SharePoint component isolation1 app installation = 1 “app web”

App webs are isolated in their own domain:

Leverages web browser same-origin policy for script isolation

Host web

App web

https://contoso.sharepoint.com/site/

https://contoso-appUID.sharepoint.com/site/app/

Apps for Office

What are Apps for Office?

Content Area

Also known as Agaves . . .

Task Pane

Apps for Office: Supported typesApplication Supported types

Excel 2013 •Task pane•Content

Excel Web App •Content

Word 2013 •Task pane•Content

Outlook 2013 •Mail (content)

Outlook Web App •Mail

PowerPoint 2013 •Task pane•Content

Project Professional 2013 •Task pane•Content

App Shapes for Office

Task Pane

App adjacent to the document

ContentApp in the body of the document

Mail Inline Pane on an email or appointment item

App Shapes for Office

Task Pane

App adjacent to the document

ContentApp in the body of the document

Mail Inline Pane on an email or appointment item

App Shapes for Office

Task Pane

App adjacent to the document

ContentApp in the body of the document

Mail Inline Pane on an email or appointment item

Apps for Office: Spectrum

Pro DevPower User

Familiar Toolset Across Skill Levels

Access Services 2013

The easiest way for a non-developer to build and

publish apps for SharePoint

Visual Studio 2012

A great end-to-end development experience for highest customization

“Napa” Office 365 Development Tools

A lightweight, in-browser development experience

Apps for Office

Apps for SharePoint

From Developer to End User

Dev center

submission

Office Store

Integrated

Office Store

DirectVendor/

IT projects

SharePointApp

Catalog

TRIAL/ PURCHASE

TRIAL/PURCHASE

Office and SharePoint

Developer

End users

IT admin

ServerClient

Bro

wse

r Hos

t

Common App Architecture

Web Server H

ostClient-side Logic

HTML / CSS / Javascript

Office JS SharePoint JS (CSOM)

SharePoint&

Exchange

Server-side LogicAny language

Office

Web

App

s

Win

RT

Mac

Mob

ile

Win

32

APPProvider-hosted

Oth

erE.

g. L

AM

P

IIS /

ASP

.Net

Win

dow

sAzu

re

CSOM REST

On-premises

IE

Chr

ome

Fire

Fox

Safa

ri

Tier 1 Tier 2

OtherECMAScript 5

Online

SharePoint

SQL

Workflow

Autohosted

SQL

Web Sites

Clie

nt A

PIs Server

APIsO

ther

Dev

ices

& C

lient

s

3rd P

arty

Ser

vice

s

Development ToolsVisual Studio 2012, Napa or any standard Web development tool

ServerClient

Bro

wse

r Hos

t

Common App Architecture

Web Server H

ost

SharePoint JS (CSOM)

SharePoint&

Exchange

Server-side LogicAny language

APPProvider-hosted

Oth

erE.

g. L

AM

P

IIS /

ASP

.Net

Win

dow

sAzu

re

CSOM REST

On-premises

IE

Chr

ome

Fire

Fox

Safa

ri

Tier 1 Tier 2

OtherECMAScript 5

Online

SharePoint

SQL

Workflow

Autohosted

SQL

Web Sites

Clie

nt A

PIs Server

APIsO

ther

Dev

ices

& C

lient

s

3rd P

arty

Ser

vice

s

Office JS

Office

Web

App

s

Win

RT

Mac

Mob

ile

Win

32

Client-side LogicHTML / CSS / Javascript

Development ToolsVisual Studio 2012, Napa or any standard Web development tool

Parts of the App for Office

App

App ManifestWeb Page<XML>HTML/CSS/JS

Office Javascript API Overview

Document

Office.context

CustomXmlParts

Bindings

Settings

R/WSelection Selection

Mailbox

Properties & Settings

User Profile

EWS

Item

Project

Tasks

Project Info

Outlook App - Behind the scenes

Manifest deployed to ExchangeApp added manifest saved to user’s mailboxExchange 2013 is required for mail apps

Exchange Serverwith app manifests

Cloud Servicewith app HTML + JS

User running Outlook

Outlook loads Office JS libraryClicking on app tab loads the app’s HTML and JSApps must reference Office.js and use it to interact with Outlook

Outlook processes rules Outlook 2013 client loads all manifestsOutlook processes rules from manifest on the selected itemApps whose rules match are displayed as tabs

Possibilities…Activate on patternsBug trackingPackage trackingCase number/PO status look-up

Activate on entities or item classesNews link summaryPhone dialerWorkflow around a custom Exchange item class

Activate on all itemsCRMSocial (LinkedIn)Display information about recipients

“Comment a document” app

Still need a “cool” name

Comment options for a document•Word review

• SharePoint Versions• SharePoint Approve / reject

• 3rd party tools?

Solution?• Embed comments in document

• Comments stay in App Web (security)

• CSOM and/or REST + JavaScript

• Easy to create

Flow1. If new document, comments are not yet possible

2. If not new document, comments are possible1. Select reviewer2. Add comment message3. Click “add comment”

1. Comment is being saved in list2. Call is done to retrieve comments from list

How to build it

1. Add a document library

2. Create a document that contains an app for Office

3. Set the default content type for the document library to that document

App for SharePoint

Document Library

Document Template

App

Composable App Model

Document Library

App AppApp App

Document

App

App for SharePoint • App includes a

document library• Documents added to

the document library include an app for Office

• E.g. Comments app

End User Experience

Office Web Apps nowOffice Web AppsSharePoint

High FidelityFamiliarAvailable

EverywhereAdvanced Authoring

Working with Others

PCs/Macs PhonesTabletsSmart Phones

Lync File SharesInternal

Websites Exchange

Working with othersDocument

ReviewMulti-user Authoring

Meetings

Editing Excel Web App Presentation Broadcast

Change Tracking

Commenting

OneNote Web App

Word Web App

PowerPoint Web App

Lync Integration

Async Navigation

Media Playback

With anyone with a browser

Working with others now

Across devicesAcross devices NowPCs/Macs Tablets

Smart Phones

Phones

Editing

Viewing

IEFirefoxChromeSafari

WindowsiOS

WindowsiOSAndroid

Any browser-enabled phone

Editing

Device-optimized (touch, size)

?Question Answer

Take away• Learn Javascript + REST / CSOM

• Composable Apps are easy to build, just follow the correct steps