Bringing SharePoint information into Office through Office Apps

Wes Hackett

Wes HackettPrincipal

Solution Architect

@weshackettwesley.hackett@contentandcode.c

om

introduction to Apps for OfficeApps closer look

Mail App

SharePoint hosted Office Appopportunities

Task Pane and Content App

introduction

agenda

where did we start?

trends impacting the way we workDevices

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 cloud

extensible

modernising the platformToday’s Market Today’s Trends Our Principles

new cloud app model

Marketplace

three UI shapes for Office Apps

Content App

Task PaneApp

Mail App

shapes and where they appear

Anatomy

App ManifestWeb Page<XML>HTML/CSS/

JS

App development toolsUse any tools you likeAny editor that can manipulate text filesNotepad, UltraEdit, etc.

Great looking appsMicrosoft provide the CSS, controls and templates

Visual Studio 2012 ExperienceProject templatesExcellent productivity featuresOne tool to accomplish all of your development needs

App packaging and deployment

Office Store or App Catalog

Consumers &Corporate Users

Developer

Web Server(Internet or Intranet)

App manifest (.xml)or .app package

DocumentSharing

Web Page

App hosting modelsAutohosted

AppDeploy to SharePoint, let SharePoint deploy

to Azure for you

SharePoint(Online)

Windows Azure

SharePoint-hostedHost your code in

SharePointClient 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)

common App architecture

Server

Client

Brow

ser

Host

Web Server

Host

Client-side LogicHTML / CSS / JavaScript

Office JS SharePoint JS (CSOM)

SharePoint&

Exchange

Server-side LogicAny language

Office

Web

App

s

WinR

T

Mac

Mobil

e

Win3

2

APP Provider-hosted

Othe

rE.g

. LAM

P

IIS / A

SP.N

et

Wind

ows

Azure

CSOM REST

On-premises

IE

Chrom

e

FireF

ox

Safar

iTier 1 Tier 2

OtherECMAScript 5

Online

SharePoint

SQL

WorkflowAutohosted

SQL

Web Sites

Clien

t AP

IsServer APIs

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

common App architecture

Server

Client

Brow

ser

Host

Web Server

Host

Client-side LogicHTML / CSS / JavaScript

Office JS SharePoint JS (CSOM)

SharePoint&

Exchange

Server-side LogicAny language

Office

Web

App

s

WinR

T

Mac

Mobil

e

Win3

2

APP Provider-hosted

Othe

rE.g

. LAM

P

IIS / A

SP.N

et

Wind

ows

Azure

CSOM REST

On-premises

IE

Chrom

e

FireF

ox

Safar

iTier 1 Tier 2

OtherECMAScript 5

Online

SharePoint

SQL

WorkflowAutohosted

SQL

Web Sites

Clien

t AP

IsServer APIs

Development ToolsVisual 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 v App supportFunctional area

Word Excel/Excel WAC

PowerPoint Outlook/OWA

Project

Get/Set data as text, table, matrix

Settings

Get File

Bindings

Custom XML PartsHtml and OOXML

Mailbox

DEMOLet’s take a look

Mail app example

Mail App

AvailabilityMail apps are available in Outlook, Outlook Web App and Mobile Outlook Web App.

Subtle User ExperienceMail apps are designed to remain unobtrusively in the background, yet easily activated when needed.

Supplemental InformationContextual apps provide additional information based on rules applied to a messaging item.

Mail App

Appear in messages and appointments

Contextual to current item

Cross platform, cross device

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

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

extracted entitiesExchange 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 DetectedAddress US postal addresses

1 Microsoft Way, Redmond WA, 98052EmailAddress 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 rulesItemlsChecks if an item is a specific type (message, appt or custom item class)

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 ORRule Collections can be nested within each other

ReadWriteMailbox

permissionsReadWriteMailboxLimited EWS methods are allowed

ReadItemApps can access data from all entitiesRegular expressions allowedFull JS API is allowedEWS calls are not allowed

RestrictedApp can access data from limited entitiesRegular expressions are blockedJS API limits item data access

possibilitiesActivate 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

DEMOLet’s take a look

Task Pane app example

task pane app

Part of the documentA task pane app is embedded within the content of the document. It is part of the document.

Familiar User ExperienceLeveraging the task pane infrastructure, these apps leverage users familiarity with a popular Office UI paradigm.

Reference InformationTask Pane apps are perfect for providing reference information associated with a document.

task pane app

Layout GuidanceThe default width of 350 pixels cannot be changed programmatically. Users can resize and move so design to adjust to different widths.

Context MenusDevelopers 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 GuidanceVertical scrollbars are acceptable, use CSS to modify so they match Office scrollbars. Horizontal scrollbars should be avoided.

content app

Part of the documentA content app is embedded within the content of the document. It is part of the document.

Implemented as an Excel shapePrint, resize, move, copy/paste, etc. The user is in complete control.

Travels with the documentThe app travels with the document for easy, yet secure, distribution. An image is shown if the app is not available.

Content App

content app

Layout GuidanceContent Agaves have a generous size limit of 2560x2048. Users can resize and move so design accordingly. Remember – content may print with the document.

Context MenusDevelopers have full control of the context menu inside an app. However, you can not take over, or add to the Shape context menu.

Scrollbar GuidanceScrollbars should be avoided within a content app. Size them appropriately within the manifest.

Set an appropriate sizeSpecify an appropriate size for the app in the ManifestThis example is sized too small – resize to avoid scrollbars

task pane and content app

DEMOLet’s take a look

Document Accelerate app example

Office enabled app for SharePointAdd apps for Office

Integrated with a Document LibraryEmbedded in the Document TemplateDeployed as part of the app for SharePoint

App for SharePoint

Document Library

Document Template

App

Apps for Office scenarios

Content Authoring &

Publishing

Resumes, Contracts

Dashboards Data Analysis, Data Mash ups

Forms & Reports

Legal Forms, Financial Reports

Business Processes

Sales & Marketing, Finance, HR

Team Collaboration

Content & Project Management

Workflow Document Approval, Expenses

Rich Web content

YouTube Video,Photo Gallery

Data Visualisation,

Analysis & Mash up

Maps, Custom charts,Lookups

Reference Tools

Translation, Definitions, Dictionary, Help, Research

Content Authoring &

PublishingContextualContent &

ServicesWorkflow

and Collaboration

Doc builders,Print services

Business data lookup (CRM), Contextual forms (surveys)Project tracking, Coauthoring Document

Template

App AppApp

App for SharePoint

Document Template

App App

Workflow

Custom Actions

Lists & Doc Libs

App Parts

Event Receivers

More…

Let’s take a look Let’s take a deeper dive

visualisationsShow data in useful waysBing maps example

Binding to dataDynamically show the visualisation of the selected data

Great looking appsCreate the dashboard experience

contextual contentOnly shown when neededRules activationOnly shown when the item matches the rules

Great looking appsShowing information together when contextually relevant

data enhancementCombine dataBring together separate sources of data into one viewApply transformation and enhancement to data

Reaction to changeBound data services allow document to feel alive

Great looking appsReal-time dashboarding

reference & researchEnable 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

master/detailRich InformationBring up rich information to supplement you content

Great looking appsAdd to your users experience

document authoringAssisting your userHelp your user create the document

Great looking appsImprove your document quality

Assist repetitive tasksAllow users to focus on distinct contentProvide easy completion for repetitive document sections

document publishingSend 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

content transformationEnhance your contentSend your document to other services for enhancementTranslate content to other languages or formats

Great looking appsLet people interact with your organisation from other formats

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

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

dynamic documentsAssist 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

the Office Opportunity

Questions?

THANK YOU