Hace unos meses, Microsoft, en su afán de proporcionar herramientas de trabajo y al mismo tiempo estandarizar procedimientos, liberó en modalidad open source el framework llamado Office UI Fabric.
Definido como un framework front-end responsive y mobile-first, nos facilita una serie de recursos gráficos y estilos para modificar el aspecto gráfico de nuestras aplicaciones y darles el aspecto UX de serie que proporcionan las aplicaciones Office.
Sería, por hacer la analogía a un componente conocido por todos, el «Bootstrap para Office«. Además el framework ha sido diseñado buscando la simplicidad, evitando incluir JavaScript en su base, y su núcleo se constituye en dos CSS master: fabric.css y fabric.components.css.
En SOGETI hemos tenido la oportunidad de utilizar Office UI Fabric en uno de nuestros proyectos SharePoint y la sensación que nos ha transmitido es muy positiva. Interacciona muy bien con otras herramientas ya conocidas (especialmente con templating HTML vía handlebars.js) y sobre todo acelera el proceso de construcción, puesto que nos proporciona el mismo aspecto gráfico que Office de serie, sin tener que preocuparnos del diseño UX de los componentes (exceptuando tickings varios).
Caso de ejemplo
La mejor manera de ver el funcionamiento del framework es ponerse manos a la obra, así que vamos a implementar un micro servicio con las siguientes especificaciones:
Objetivo:
- Crear un componente con UX Office UI Fabric que utilice SharePoint de back-end. Leeremos de una lista estándar (Contacts) y mostraremos los datos utilizando el UX de Office UI Fabric.
- Recuperaremos los datos del back-end utilizando servicios REST API.
- Utilizaremos js como motor de templating para renderizar los contenidos.
Requisitos:
- El script principal espera encontrar las siguientes fuentes (dichas fuentes las ubicaremos en la librería de estilos del Site Root):
CSS –> fabric.css y fabric.components.css
JS –> jquery-1.8.0.min.js y handlebars-v4.0.2.js
- También crearemos una lista Contacts basada en la plantilla de contactos e informaremos los siguientes campos:
FullName, Email, JobTitle y Comments(Notes)
- Para evitar tener que crear paquetes de despliegue incluiremos el script directamente utilizando un script editor.
Hands-on lab:
- Una vez que tengamos las fuentes subidas a la librería de estilos, procederemos a crear una lista de contactos e informar los campos mencionados anteriormente.
- Procederemos a incluir un script editor en la landing page del sitio, con el siguiente script:
El script paso a paso:
Primero referenciaremos los recursos que necesita el script, tal como comentabamos anteriormente, necesitaremos la librería de jquery y la de handlebars. También referenciaremos los CSS que constituyen el motor de Office UI fabric.
A continuación nos aseguraremos de que llamamos a nuestra función «initializeScript» después de haber cargado el contexto cliente SP (aunque en el caso del ejemplo realmente no utilizaremos CSOM, no está de más).
Después procederemos a recuperar los datos de la lista Contacts utilizando una llamada Ajax al servicio REST lists de SharePoint:
La llamada Ajax nos devolverá un json con los datos recuperados, es aquí donde es crucial entender como se mapean los datos a las plantillas, para ello vamos a debugar el script y inspeccionar el json generado:
Podemos observar que se han recuperado cuatro registros (contactos):
En el caso de ejemplo, nuestro objetivo era mostrar en los items los datos FullName, Email, JobTitle y Comments(Notes).
El script incluye al final un template para generar cada uno de los elementos (contact-template). En el caso de ejemplo, el objeto json a partir del cual se renderizará el html contiene los campos a mostrar (y el punto clave es entender que los marcadores corresponden exactamente con las propiedades devueltas).
El último paso en el call-back de la llamada ajax consiste en renderizar el template html con los datos recibidos.
Resultado:
Pasaremos del aspecto estándar siguiente:
A uno basado en el componente de Office UI Fabric para elementos de lista:
Resultado final:
Conclusiones
Office Fabric nos permite dotar de aspecto «Office» a nuestras aplicaciones, esto es especialmente interesante, puesto que disminuye el impacto que supone para los usuarios el encontrarse con áreas de las aplicaciones con diferente funcionalidad; nos permite proporcionar al usuario una UX a la que ya va a estar acostumbrado (con lo cual también mitigamos resistencia al cambio); y, al mismo tiempo, nos permite integrar nuestras aplicaciones a Office al estilo de add-ins.
Referencias
Source code: Disponible en:
https://github.com/jaimearroyo/fabricpoc
Office UI fabric
https://github.com/OfficeDev/Office-UI-Fabric
Descubre aquí cómo desarrollar proyectos baja tecnología Microsoft de manera exitosa.
Jaime Arroyo es especialista SharePoint. Se ha unido a la Unidad de Soluciones Microsoft de SOGETI recientemente como Analista programador. Anteriormente ha trabajado como consultor especializado en dicha tecnología para diversos clientes de ámbito nacional e internacional.
Artículos y tendencias sobre soluciones tecnológicas 
0 comments on “Introducción al uso del framework «Office UI Fabric»”