Post on 22-May-2015
description
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
Three ‘UI’ Shapes for Office Apps
Content
App
Task Pane
App
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
• 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