Descripción del proceso de desarrollo de Add-in de Office consumiendo servicios a través de ADAL.js.
Al mismo tiempo se explica como unificar la interfaz a la experiencia Office a través de Office Fabric.
The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...
Extensión de office con adal.js y office ui fabric
1. Online Conference
June 17th and 18th 2015
WWW.COLLAB365.EVENTS
Extensión de Office con ADAL.JS y
Office UI Fabric
2. WWW.COLLAB365.EVENTS
Mario Cortés Flores
Plain Concepts
Email : mcortes@plainconcepts.com
Twitter : @mariocortesf
LinkedIn :
https://es.linkedin.com/in/mariocortesflores
MVP en Office365 llevo trabajando desde hace más
de 10 años en proyectos sobre SharePoint y en los
últimos años especializado en SharePoint Online y
Windows Azure. Trabajo en Plain Concepts como
Web Team Lead dónde intentamos tener el mejor
equipo en desarrollo web
5. Online Conference
June 17th and 18th 2015
Qué es?
• Una página web renderizada dentro de Office.
• Basada en Html, CSS y JavaScript.
• Podemos interactuar con los documentos y
elementos de Office a través de Web
Extensibility Framework.
8. Online Conference
June 17th and 18th 2015
Add-ins Commands
• Con Office 2016 podemos añadir secciones y botones al ribbon
o menús contextuales
• Install the latest version of Office 2016 applications
9. Online Conference
June 17th and 18th 2015
Cómo se instala
• Desde el ribbon
• Catálogo de apps:
– Corporativo desde SharePoint
– App Store
– Unidad de red
14. Online Conference
June 17th and 18th 2015
Core API Objects
• Office.context
– Entry point into Office API
• Office.context.document
– Common document API
• Office.context.settings
– Custom properties saved within
document
• Read and write selection
• Create binding
• Register event handlers
• Use custom XML files
• Read and writer properties
• Properties saved to
document
document settings
context
20. Online Conference
June 17th and 18th 2015
Office Fabric
• Ofrece a nuestras aplicaciones controles con
apariencia y comportamiento similar al de Office y
SharePoint.
• Referenciamos un css y JS y aplicamos las clases a
nuestro HTML.
http://dev.office.com/fabric/components/
22. Online Conference
June 17th and 18th 2015
Adal JS
• Biblioteca en JavaScript para facilitar el
intercambio y validación de tokens oAuth
• Registrar la aplicación en WAAD
https://secure.aadcdn.microsoftonline-
p.com/lib/1.0.0/js/adal.min.js
26. Online Conference
June 17th and 18th 2015
Registrar la aplicación en WAAD
• Registrar la aplicación y dar permisos
• http://dev.office.com/getting-
started/office365apis
28. Online Conference
June 17th and 18th 2015
Empaquetado
• Validar el manifest con Office App
Compatibility Kit
• Generar el manifest
• Publicar el código en IIS, Azure o CDN
29. Online Conference
June 17th and 18th 2015
Office App Compatibility Kit
• Herramienta de validación del manifest
https://www.microsoft.com/en-
us/download/confirmation.aspx?id=46831
30. Online Conference
June 17th and 18th 2015
Antes de publicar
• Indicar un título y descripción descriptivo
• Especificar el idioma al que va destinado
• Incluir screenshots
• Incluir un logo acorde con el Add-in
• Experiencia de carga inicial
• Añadir add-in commands
31. Online Conference
June 17th and 18th 2015
Validaciones
• Pasar el Office App Compatibility Kit
• Validar que se cumplen las “Validation policies”
• Validar en cliente Office W+Mac, Explorer
Chrome y Safari
• Desinstalar el Add-in
33. Online Conference
June 17th and 18th 2015
Referencias
• OfficeAdd-insplatformoverview
• Add-insCommands
• Understandingthe JavaScriptAPI for Office
• Sitiode desarrollode Office
• Best practicesde publicación
• Validationpolicies
34. Online Conference
June 17th and 18th 2015
Ejemplos de Apps
• Empaquetadas en el Store
• Bing Maps
• Package Tracker
• Khan Content from Microsoft
• Translator
• Ejemplos de código de apps:
• https://github.com/OfficeDev/Outlook-Add-in-LinkRevealer
• https://github.com/OfficeDev/Office-Add-in-Calculator
• https://github.com/OfficeDev/Word-Add-in-JavaScript-AddPopulateBindings
• https://github.com/OfficeDev/Excel-Add-in-Bind-To-Table