Download - PnP in building office add ins - public
![Page 2: PnP in building office add ins - public](https://reader036.vdocuments.net/reader036/viewer/2022070516/5873ac931a28aba3548b640d/html5/thumbnails/2.jpg)
Office Add-Ins OverviewAdd-Ins development best practicesAdd-In development in VS 2015Azure AD & Add-Ins security
Agenda
![Page 3: PnP in building office add ins - public](https://reader036.vdocuments.net/reader036/viewer/2022070516/5873ac931a28aba3548b640d/html5/thumbnails/3.jpg)
What is an Office Add-In? A Web page loaded inside an Office Application Embedded inline or as task pane within documents, mails or
appointments. Works in both Office Applications and Office Web Applications
Office application extensions using Web technologies HTML 5 and CSS used to construct user interface JavaScript and jQuery used to add executable logic and event
handlers Add-In can provide code to read/write content to/from Office
documents Add-In can call web services hosted over Internet or running within
local network Add-In can use any JS frameworks in Office Add-Ins such as:
AngularJS, Bootstrap…etc.
![Page 4: PnP in building office add ins - public](https://reader036.vdocuments.net/reader036/viewer/2022070516/5873ac931a28aba3548b640d/html5/thumbnails/4.jpg)
Designing Office Add-Ins - Shapes Office Add-Ins come in three different shapes/types Task Pane Add-In (only shape supported by Microsoft Word) Content Add-In Outlook Add-In
![Page 5: PnP in building office add ins - public](https://reader036.vdocuments.net/reader036/viewer/2022070516/5873ac931a28aba3548b640d/html5/thumbnails/5.jpg)
Office Add-In Runtime Environment Web Extensibility Framework (WEF) Allows Web page content to render inside Office Application Allows Web page code to run within a set of constraints Allows Web page code to interact with Office documents Allows Web page code to interact with Exchange items
WEF provides runtime environment for Office Add-Ins Office Add-Ins provide basis for a component architecture Office Add-Ins provide Add-Ins ability to publish to Add-In Catalog (SP) and/or
Office Store Office Add-Ins can be deployed in private networks
![Page 6: PnP in building office add ins - public](https://reader036.vdocuments.net/reader036/viewer/2022070516/5873ac931a28aba3548b640d/html5/thumbnails/6.jpg)
Anatomy of an Office Add-Ins Each Office Add-In is based on XML-based manifest Manifest points to a Web page Manifest defines the type of the Office Add-In Manifest defines which Office applications it supports Manifest defines required capabilities
App for OfficeManifest
<XML>
WebPage
HTML+JS
Office Add-In Catalog Server Web Server
Office Add-In
![Page 7: PnP in building office add ins - public](https://reader036.vdocuments.net/reader036/viewer/2022070516/5873ac931a28aba3548b640d/html5/thumbnails/7.jpg)
Adding Add-In UI Elements You can use two types of UI elements in your Office Add-ins:
Add-in commands Available in Mail Add-In only*
Custom HTML-based interfaces Using Office UI Fabric
![Page 8: PnP in building office add ins - public](https://reader036.vdocuments.net/reader036/viewer/2022070516/5873ac931a28aba3548b640d/html5/thumbnails/8.jpg)
Demo: Using Napa Tools to build Office Add-Ins
![Page 9: PnP in building office add ins - public](https://reader036.vdocuments.net/reader036/viewer/2022070516/5873ac931a28aba3548b640d/html5/thumbnails/9.jpg)
Add-In development best practices
![Page 10: PnP in building office add ins - public](https://reader036.vdocuments.net/reader036/viewer/2022070516/5873ac931a28aba3548b640d/html5/thumbnails/10.jpg)
Provide Clear Value Help users complete tasks quickly & efficiently.
Enable new scenarios within Office. Embed complementary services within office.
Create an effective Office Store listing.
![Page 11: PnP in building office add ins - public](https://reader036.vdocuments.net/reader036/viewer/2022070516/5873ac931a28aba3548b640d/html5/thumbnails/11.jpg)
Create an engaging first-run experience Easy on-boarding process.
Teaching UI to educate users. Include sample data. Re-Inforce the VP of your add-in.
UX is so important! Don’t let your devs design your add-in.
![Page 12: PnP in building office add ins - public](https://reader036.vdocuments.net/reader036/viewer/2022070516/5873ac931a28aba3548b640d/html5/thumbnails/12.jpg)
User Add-In commands Provide meaningful icons. Use supported sizes with transparent background color.
Clear button labels. Group related commands under a menu control.
![Page 13: PnP in building office add ins - public](https://reader036.vdocuments.net/reader036/viewer/2022070516/5873ac931a28aba3548b640d/html5/thumbnails/13.jpg)
![Page 14: PnP in building office add ins - public](https://reader036.vdocuments.net/reader036/viewer/2022070516/5873ac931a28aba3548b640d/html5/thumbnails/14.jpg)
Apply UX design principles Ensure that the look and feel and functionality of your add-in complements the Office experience.
Keep users in control, favor content over chrome. Avoid scrolling, Optimize for 1366x768. Don’t include unlicensed images.
![Page 15: PnP in building office add ins - public](https://reader036.vdocuments.net/reader036/viewer/2022070516/5873ac931a28aba3548b640d/html5/thumbnails/15.jpg)
Apply UX design principles – Cont.
Account for accessibility. Make sure that your Add-In UI is responsive for all input platforms (including mouse/keyboard and touch)
Optimize for touch. (Context.touchEnabled) Test Add-in in different modes ( portrait and landscape)
USE Office UI Fabric for design UI elements (OSS)
![Page 16: PnP in building office add ins - public](https://reader036.vdocuments.net/reader036/viewer/2022070516/5873ac931a28aba3548b640d/html5/thumbnails/16.jpg)
Optimize and monitor add-in performance
Load time should be <= 500ms All users interactions respond in less than a second.
Use CDN for content. Use Standard web standards to optimize your web page.
![Page 17: PnP in building office add ins - public](https://reader036.vdocuments.net/reader036/viewer/2022070516/5873ac931a28aba3548b640d/html5/thumbnails/17.jpg)
Market your add-in List your add-in with full profile including short descriptions, images, What it does?
Convey the VP of your add-in in the title and description.
Create a website to help users find your add-in Publish to Office Store & promote it from your website.
![Page 18: PnP in building office add ins - public](https://reader036.vdocuments.net/reader036/viewer/2022070516/5873ac931a28aba3548b640d/html5/thumbnails/18.jpg)
Office Store—This is a public marketplace that Microsoft hosts and regulates on Office.com. Office Add-ins catalog on SharePoint—For task pane and content add-ins.Exchange catalog—This is a private catalog for Outlook add-ins that is available to users of the Exchange server Network shared folder add-in catalog
Publishing Basics
18
![Page 19: PnP in building office add ins - public](https://reader036.vdocuments.net/reader036/viewer/2022070516/5873ac931a28aba3548b640d/html5/thumbnails/19.jpg)
Demo: Using Office UI Fabric in Office Add-In
![Page 20: PnP in building office add ins - public](https://reader036.vdocuments.net/reader036/viewer/2022070516/5873ac931a28aba3548b640d/html5/thumbnails/20.jpg)
Visual Studio for Office Add-Ins
![Page 21: PnP in building office add ins - public](https://reader036.vdocuments.net/reader036/viewer/2022070516/5873ac931a28aba3548b640d/html5/thumbnails/21.jpg)
Visual Studio Experience1. Create new Office Add-In project2. Create/design user interface for Web page3. Enhance Web page with CSS and
JavaScript4. Set project properties in manifest5. Run!
![Page 22: PnP in building office add ins - public](https://reader036.vdocuments.net/reader036/viewer/2022070516/5873ac931a28aba3548b640d/html5/thumbnails/22.jpg)
Create New Office Add-In ProjectCreate project based on Office Add-In 2015 project template
![Page 23: PnP in building office add ins - public](https://reader036.vdocuments.net/reader036/viewer/2022070516/5873ac931a28aba3548b640d/html5/thumbnails/23.jpg)
Office Add-In Project Structure App for Office solution has two
projects Top project contains add-In manifest Bottom project for remote web
Remote Web Project is ASP.NET Website Contains HTML, CSS and JavaScript source files Integration with jQuery library already included
![Page 24: PnP in building office add ins - public](https://reader036.vdocuments.net/reader036/viewer/2022070516/5873ac931a28aba3548b640d/html5/thumbnails/24.jpg)
App Manifest Designer
![Page 25: PnP in building office add ins - public](https://reader036.vdocuments.net/reader036/viewer/2022070516/5873ac931a28aba3548b640d/html5/thumbnails/25.jpg)
App Manifest - XML View
![Page 26: PnP in building office add ins - public](https://reader036.vdocuments.net/reader036/viewer/2022070516/5873ac931a28aba3548b640d/html5/thumbnails/26.jpg)
Create the HTML for a Web Page
![Page 27: PnP in building office add ins - public](https://reader036.vdocuments.net/reader036/viewer/2022070516/5873ac931a28aba3548b640d/html5/thumbnails/27.jpg)
DEMO: Stock Excel Add-In in VS 2015
![Page 28: PnP in building office add ins - public](https://reader036.vdocuments.net/reader036/viewer/2022070516/5873ac931a28aba3548b640d/html5/thumbnails/28.jpg)
Azure + o365
• Fully flexible: Private, on premises, hybrid or cloud
• The power of o365: Leverage Office, SharePoint and Exchange Online as your application building blocks
• Identity is the glue that makes all of that possible
![Page 29: PnP in building office add ins - public](https://reader036.vdocuments.net/reader036/viewer/2022070516/5873ac931a28aba3548b640d/html5/thumbnails/29.jpg)
Your identity goes with you
PCs and devices
3rd party clouds/hosting
Azure AD
You
![Page 30: PnP in building office add ins - public](https://reader036.vdocuments.net/reader036/viewer/2022070516/5873ac931a28aba3548b640d/html5/thumbnails/30.jpg)
When accessing Graph API to access o365 sevcies, you need to register you application in AAD.
Step 1: Register your apps on Azure AD
![Page 31: PnP in building office add ins - public](https://reader036.vdocuments.net/reader036/viewer/2022070516/5873ac931a28aba3548b640d/html5/thumbnails/31.jpg)
AD needs to know which web app/service the o365 app is actually referring to.
Step 2: Map the AD app to the actual web service
![Page 32: PnP in building office add ins - public](https://reader036.vdocuments.net/reader036/viewer/2022070516/5873ac931a28aba3548b640d/html5/thumbnails/32.jpg)
The client app must be allowed to call the web service. It is also allowed to logon to Azure Active Directory (by default)
Step 3: Set permissions
![Page 33: PnP in building office add ins - public](https://reader036.vdocuments.net/reader036/viewer/2022070516/5873ac931a28aba3548b640d/html5/thumbnails/33.jpg)
The app is allowed to call Graph API features
Step 3: Set permissions
![Page 34: PnP in building office add ins - public](https://reader036.vdocuments.net/reader036/viewer/2022070516/5873ac931a28aba3548b640d/html5/thumbnails/34.jpg)
DEMO: App registration in AAD & Connected Services in VS2015 Add-Ins
![Page 35: PnP in building office add ins - public](https://reader036.vdocuments.net/reader036/viewer/2022070516/5873ac931a28aba3548b640d/html5/thumbnails/35.jpg)
1) Office Development Centerhttp://dev.office.com/ 2) Office 365 PnP homepagehttp://dev.office.com/patterns-and-practices 3) Office Add-In Sampleshttps://github.com/OfficeDev/PnP-OfficeAddins
References
35