Xylos brands

Hoe bouw je een Office add-in?

Heb je ooit al een Office add-in gebruikt? Zo’n invoegtoepassing helpt je om efficiënter aan de slag te gaan in alle Office-programma’s. Wel, bij Xylos hebben we zelf een add-in gebouwd. In deze blog tonen we hoe de ontwikkeling ervan verliep.

1. Het OASE-scenario

Ken je ons leerplatform OASE al? Het bevat meer dan 1.000 instructievideo’s en andere items om gebruikers van de Office 365 (Word, Excel, Outlook) te ondersteunen op de werkvloer. Met de “how to”-video’s van het platform kunnen ze instant leren en zo de mogelijkheden van bepaalde toepassingen veel efficiënter gaan benutten.

Het webplatform heeft al een sterke zoekfunctionaliteit en filtermogelijkheden om snel de juiste content te vinden. Bovendien zijn ook de dynamische taalinstellingen een grote troef van OASE. Zowel de gesproken taal als de taal van de software die je in de video’s ziet, kan de gebruiker namelijk zelf aanpassen.

Maar het OASE-team zit nooit stil en stelt zich continu de vraag hoe de gebruikers nog eenvoudiger én nog sneller de juiste content kunnen terugvinden. Een Office add-in kwam als een van de mogelijkheden uit de bus. Zo moeten de gebruikers niet langer switchen naar de browser, want er verschijnt een zogenaamde ‘task pane add-in’ in de applicatie zelf aan de zijkant. Maar hoe bouw je zo een add-in?

Word met OASE add-in

2. Met HTML, CSS en JavaScript aan de slag

In eerste instantie dachten we met gedateerde technologieën te werken, maar niets bleek minder waar. Een Office add-in is in principe een webapplicatie, dus we zouden door middel van vertrouwde technologieën zoals HTML, CSS en JavaScript de klus kunnen klaren.

Yeoman generator for Office Add-ins

Om van start te gaan, gebruiken we de Yeoman generator for Office Add-ins (Node.js vereist). Met deze command-line tool kan je vlot een nieuw add-in-project genereren met een JavaScript framework naar keuze. Je maakt eigenlijk twee basiscomponenten aan:

  • Een webapplicatie
  • Een manifestbestand

De website is in ons geval gemaakt met Angular. We zorgen ervoor dat deze qua lay-out op maat gemaakt is voor de task pane en mooi schaalt naargelang de beschikbare ruimte. De belangrijkste eigenschap is dat we de JavaScript API for Office gebruiken. De initialisatie van de Office JavaScript library gebeurt voor het opstarten van de eigenlijke Angular-applicatie:

Code voorbeeld inladen Office & Angular

Hierdoor kan de website enkel laden in een van de Office-toepassingen. Vervolgens kan je de library gebruiken in de hele Angular-app. Er zijn tal van interactiemogelijkheden, al dan niet specifiek voor de hostapplicatie (denk maar aan Word, Excel of PowerPoint). Zo kan je bijvoorbeeld een berekening uitvoeren op de geselecteerde cel in je Excel-werkblad of het lettertype veranderen in je Word-document.

Voor onze OASE add-in benutten we enkel een aantal van de ‘gemeenschappelijke’ functionaliteiten. Door het uitlezen van Office.context.displayLanguage stellen we bijvoorbeeld automatisch de softwaretaal van de video’s in en via Office.context.host kunnen we onze content filteren op applicatie. Deze zaken bevorderen het gebruiksgemak en zorgen ervoor dat verschillende Office 365-toepassingen dezelfde add-in kunnen gebruiken.

3. Wat is een manifestbestand?

Wel, een manifestbestand is een XML-configuratiebestand waarin de instellingen voor de add-in staan gedefinieerd. Denk maar aan de URL van de webapplicatie, de naam van de add-in, de iconen voor de knoppen in de balk bovenaan én de nodige permissies. Voor elke hostapplicatie (Word, Excel…) voeg je een eigen sectie toe met de gewenste configuratie.

Voorbeeld van een manifest-bestand

Er zijn verschillende opties om een Office add-in in te laden. Je kan tijdens de ontwikkeling bijvoorbeeld kiezen om deze te ‘sideloaden’. Hierbij plaats je het manifestbestand in een gedeelde map, waarna je deze manueel kan inladen in een van de Office-applicaties. Eens de add-in klaar is voor productie, kan je die (na validatie) publiceren in de publieke store. Wij gebruiken wel Centralized Deployment. Een administrator kan het manifestbestand uploaden via het Office 365 administratiecenter, waarna de gebruikers van de betrokken organisatie de add-in automatisch zien verschijnen.

Via de command line kan ook een manifestbestand gevalideerd worden. Zo weet je meteen of aanpassingen in orde zijn vooraleer je verder test.

Office add-in, piece of cake?

Uiteraard liep niet alles van een leien dakje tijdens de ontwikkeling van onze add-in. Hoewel het opzetten ervan best vlot verliep, waren bepaalde dingen niet vanzelfsprekend.

Zo ondervonden we dat we een video niet full screen kunnen laten afspelen. De task pane add-in zelf is bovendien niet breed genoeg om het beeld goed te kunnen zien. Daarom kozen we voor een pop-up. De Dialog API is een onderdeel van de Office JavaScript API en bleek hiervoor de meest geschikte oplossing te bieden.

Add-in pop-up video

We moesten soms inventief omspringen met de mogelijkheden van de API. Triviale zaken zoals het instellen van een perfecte pop-up-grootte en het opvangen van events in Angular (bv. pop-up sluiten) waren niet evident in dit geval. Wie nu start met het ontwikkelen van een Angular Office add-in heeft meer geluk, want de meeste Angular gerelateerde bijzonderheden heeft Microsoft zijn sinds kort gedocumenteerd door Microsoft.

Verder moeten de gebruikers van OASE ook inloggen in de add-in. Tijdens het authenticateproces zijn er webpagina’s die meestal verschillen per organisatie. Elke gebruikte website moet je wel vermelden onder de ‘AppDomains’ van het manifestbestand. Anders openen gebruikers die automatisch in een externe browser wanneer ze er naar surfen. Dat maakt het inlogproces onmogelijk. Er is bijgevolg een apart manifestbestand per organisatie nodig. Dit is één van de redenen waarom we Centralized Deployment gekozen hebben voor onze case.

Cookies en HTML5 web storage worden bovendien gewoon bijgehouden. De gebruiker moet dus niet telkens inloggen als hij de add-in opent.

Conclusie

Het is weer wat anders, een Office add-in bouwen. Met een leuk scenario en wat creativiteit kan je een mooi eindresultaat bereiken. Wil je zelf aan de slag? Met wat kennis van HTML en JavaScript in je rugzak ben je zo op weg.

Kom je graag meer te weten over ons videoplatform OASE? Of heb je vragen over ons Office add-in project? Aarzel niet om onze experts te contacteren. Zij helpen je met plezier verder.

Deel dit blogbericht

Laat een antwoord achter

Uw e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd.

Breng jouw kennis en skills naar een hoger niveau

Schrijf nu in voor onze nieuwsbrief en krijg maandelijks:

  • Uitnodigingen voor Xylos' events & webinars
  • De laatste blogposts en cases
  • Nieuwste IT-trends