P&M301

Wes Hackett

Bringing SharePoint information into Office

through Office Apps

Wes Hackett

Principal

Solution Architect

@weshackett

wesley.hackett@contentandcode.com

Agenda

introduction to Apps for Office

Apps closer look

Mail App

SharePoint hosted Office App

opportunities

Task Pane and Content App

introduction

where did we start?

Trends impacting the way we work

Devices

1 billionsmartphones by 2016, 350M of

those being used at work

People

82% of the world's online population engages

in social networking

Services

50%of enterprise customers

are “on the road” to cloud

Office for Enterprises

controldelightful social extensible cloud

The Vision: Modernising the platform

Today’s Market Today’s Trends Our Principles

The Result: a new cloud app model

Marketplace

Three ‘UI’ Shapes for Office Apps

Content

App

Task Pane

App

Mail

App

Shapes and where they appear

Anatomy

App ManifestWeb Page

<XML>HTML/CSS/JS

App Development Tools

Use any tools you likeAny editor that can manipulate text files

Notepad, UltraEdit, etc.

Visual Studio 2012 ExperienceProject templates

Excellent productivity features

One tool to accomplish all of your development needs

Great looking appsMicrosoft provide the CSS, controls and templates

Office Store or

App Catalog

Consumers &

Corporate Users

Developer

Web Server(Internet or Intranet)

App manifest (.xml)

or .app package

Document

Sharing

App Packaging and Deployment

Web Page

App Hosting Models

Autohosted App

Deploy to SharePoint, let SharePoint

deploy to Azure for you

SharePoint(Online)

Windows Azure

SharePoint-hosted

Host your code in SharePoint

Client side technologies and declarative

workflows

SharePoint(Online or On-premises)

Provider-hosted

“Bring your own server hosting

infrastructure”

Any Web Server(Online or On-premises)

ServerClient

Bro

wse

r Hos

t

Common App Architecture

Web Server H

ost

Client-side LogicHTML / 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

. LAM

P

IIS /

ASP

.Net

Win

dow

s

Azu

re

CSOM REST

On-premises

IE

Chro

me

FireF

ox

Safa

ri

Tier 1 Tier 2

Other

ECMAScript 5

Online

SharePoint

SQL

Workflow

Autohosted

SQL

Web Sites

Clie

nt A

PIs

Server APIs

Oth

er D

evice

s

& C

lient

s

3rd

Par

ty S

ervice

s

Development Tools

Visual 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

. LAM

P

IIS /

ASP

.Net

Win

dow

s

Azu

re

CSOM REST

On-premises

IE

Chro

me

FireF

ox

Safa

ri

Tier 1 Tier 2

Other

ECMAScript 5

Online

SharePoint

SQL

Workflow

Autohosted

SQL

Web Sites

Clie

nt A

PIs

Server APIs

Oth

er D

evice

s

& C

lient

s

3rd

Par

ty S

ervice

s

Office JS

Office Web

App

s

Win

RT

Mac

Mob

ile

Win

32

Client-side LogicHTML / CSS / JavaScript

Development Tools

Visual Studio 2012, Napa or any standard Web development tool

Office JavaScript API Overview

Document

Office.context

CustomXmlParts

Bindings

Settings

R/W Selection

Mailbox

Properties & Settings

User Profile

EWS

Item

Project

Tasks

Project Info

Functional Areas vs. App Support SummaryFunctional area

Word Excel/Excel WAC

PowerPoint Outlook/OWA Project

Get/Set data as text, table, matrix

Settings

Get File

Bindings

Custom XML Parts

Html and OOXML

Mailbox

Let’s take a lookMail app example

Mail App

Availability

Mail apps are available in Outlook, Outlook Web App and

Mobile Outlook Web App.

Subtle User Experience

Mail apps are designed to remain unobtrusively in the

background, yet easily activated when needed.

Supplemental Information

Contextual apps provide additional information based on

rules applied to a messaging item.

Mail App

Available In: Outlook, OWA, MOWA

Interaction:

• Expand/Collapse

Developer sets the height

Min: 32, Max 450 px

Width: variable

Form Factor: Desktop, Tablet, Mobile

*Cannot set height for Mobile

Appear in messages and

appointments

Contextual to current item

Cross platform, cross device

Behind the scenes

Manifest deployed to ExchangeApp added manifest saved to user’s mailbox

Exchange 2013 is required for mail apps

Exchange Server

with app manifests

Cloud Service

with app

HTML + JS

User running OutlookOutlook loads Office JS libraryClicking on app tab loads the app’s HTML and JS

Apps must reference Office.js and use it to interact with Outlook

Outlook processes rules Outlook 2013 client loads all manifests

Outlook processes rules from manifest on the selected item

Apps whose rules match are displayed as tabs

Extracted Entities

Exchange detects specific entitiesExchange 2013 inspects each incoming message for text, such as postal addresses, URLs, etc.

These entities are stamped on each item as a property.

Entity Type Text Detected

Address US postal addresses1 Microsoft Way, Redmond WA, 98052

EmailAddress Any SMTP address

MeetingSuggestion A reference to an event or meetingLet’s meet next Tuesday for lunch.

Contact A personal name related to other entitiesRandy Byrne, 1 Microsoft Way, Redmond WA, 98052

PhoneNumber US telephone numbers(555) 867-5309

TaskSuggestion Actionable sentences in an emailPlease install office 2013 on my computer.

Url A filename or web address

Activation rules

ItemlsChecks if an item is a specific type (message, appt or custom item class)

ItemHasKnownEntityChecks whether the item has the specified entity

ItemHasRegularExpressionMatchChecks for matches to the reg ex against body, subject or sender’s email address

ItemHasAttachmentChecks whether the item has an attachment

RuleCollectionGroups multiple rules together using AND or OR

Rule Collections can be nested within each other

Permissions

Restricted

App can access data from limited entities

Regular expressions are blocked

JS API limits item data access

ReadItem

Apps can access data from all entities

Regular expressions allowed

Full JS API is allowed

EWS calls are not allowed

ReadWriteMailbox

Limited EWS methods are allowed

ReadWriteMailbox

Admin

can add

End-users

can add

Possibilities…

Activate on patternsBug tracking

Package tracking

Case number/PO status look-up

Activate on entities or item classesNews link summary

Phone dialer

Workflow around a custom Exchange item class

Activate on all itemsCRM

Social (LinkedIn)

Display information about recipients

Let’s take a lookTask Pane app example

Task Pane App

Familiar User Experience

Leveraging the task pane infrastructure, these apps leverage

users familiarity with a popular Office UI paradigm.

Reference Information

Task Pane apps are perfect for providing reference

information associated with a document.

Available In: Word, Excel, EWA, Project,

PowerPoint

Interaction:

• Dock/Un-dock

• Float

• Resize

• Lock

Standard 350 px default size

Task Pane App

Part of the document

A task pane app is embedded within the content of the

document. It is part of the document.

Task Pane App

Layout Guidance

The default width of 350 pixels cannot be changed programmatically. Users can resize

and move so design to adjust to different widths.

Context Menus

Developers have full control of the context menu inside an app. However, you

can not take over, or add to the Office Task Pane menu.

Scrollbar Guidance

Vertical scrollbars are acceptable, use CSS to modify so they match

Office scrollbars. Horizontal scrollbars should be avoided.

320 pixels

Content App

Part of the document

A content app is embedded within the content of the

document. It is part of the document.

Implemented as an Excel shape

Print, resize, move, copy/paste, etc. The user is in complete

control.

Travels with the document

The app travels with the document for easy, yet secure,

distribution. An image is shown if the app is not available.

Content App

Available In: Excel, EWA

Interaction:

• Move

• Print

• Resize

• Copy/Paste

• Save as image

Developer sets the default size

Content App

Set an appropriate size

Specify an appropriate size for the app in the Manifest

This example is sized too small – resize to avoid scrollbars

Layout Guidance

Content Agaves have a generous size limit of 2560x2048. Users can resize and move so

design accordingly. Remember – content may print with the document.

Context Menus

Developers have full control of the context menu inside an app. However, you

can not take over, or add to the Shape context menu.

Scrollbar Guidance

Scrollbars should be avoided within a content app. Size them

appropriately within the manifest.

Task Pane and Content App

1

Let’s take a lookDocument Accelerate

SP and Office app example

Add apps for Office

Integrated with a Document Library

Embedded in the Document Template

Deployed as part of the app for SharePoint

Office-enabled app for SharePoint

App for SharePoint

Document Library

Document

Template

App

Apps for Office Scenarios

Content Authoring &

Publishing

Resumes, Contracts

DashboardsData Analysis, Data Mash

ups

Forms & ReportsLegal Forms, Financial

Reports

Business ProcessesSales & Marketing, Finance, HR

Team CollaborationContent & Project Management

WorkflowDocument Approval, Expenses

Rich Web contentYouTube Video,

Photo Gallery

Data Visualisation, Analysis &

Mash up

Maps, Custom charts,

Lookups

Reference ToolsTranslation, Definitions, Dictionary, Help,

Research

Content Authoring &

Publishing

Contextual

Content & Services

Workflow and

Collaboration

Doc builders,

Print services

Business data lookup (CRM), Contextual

forms (surveys)

Project tracking,

Coauthoring Document

Template

App App

App

App for SharePoint

Document

Template

App App

Workflow

Custom Actions

Lists & Doc Libs

App Parts

Event Receivers

More…

Let’s take a deeper dive

Scenarios - Visualisations

Show data in useful waysBing maps example

Binding to dataDynamically show the visualisation of the selected data

Great looking appsCreate the dashboard experience

Scenarios – Contextual content

Only shown when neededRules activation

Only shown when the item matches the rules

Great looking appsShowing information together when contextually relevant

Scenarios – Data enhancement

Combine dataBring together separate sources of data into one view

Apply transformation and enhancement to data

Reaction to changeBound data services allow document to feel alive

Great looking appsReal-time dashboarding

Scenarios – Reference & Research

Enable searchFind related information to the selections in the document

Validation and ImprovementsAdd authoritative content to your document

Great looking appsAdd content from reference sources to improve your doc

Scenarios – Master/Detail

Rich InformationBring up rich information to supplement you content

Great looking appsAdd to your users experience

Scenarios – Document Authoring

Assisting your userHelp your user create the document

Assist repetitive tasksAllow users to focus on distinct content

Provide easy completion for repetitive document sections

Great looking appsImprove your document quality

Scenarios – Document Publishing

Send document to a serviceSend your document to other services like Fax or hard print

Great looking appsAllow others to utilise your documents in other formats

Scenarios – Content Transformation

Enhance your contentSend your document to other services for enhancement

Translate content to other languages or formats

Great looking appsLet people interact with your organisation from other formats

Scenarios – Social

Add social to OfficeAdd your own social experience and sources to Office

Great looking appsBring new experiences to your user while they are inside Office

Scenarios – Dynamic Documents

Assist rendering structured dataHelp users to incorporate their structured data into new or existing documents

Great looking appsHelp users with new document templates for complex structured data

Apps for Office Opportunity

Questions?

Thank you for attending