Apps for Office worden gemaakt door middel van HTML5 en JavaScript. Dit betekent dat we gebruik kunnen maken van de kracht en grafische mogelijkheden van het web. Sinds de komst van IE11, ondersteunt Internet Explorer ook WebGL: een JavaScript API voor het creëren van 3D graphics. In deze workshop gaan we een Content App voor Excel maken die de data op de sheet in een 3D grafiek toont. In het eerste deel vind je de introductie.

Libraries 

 
Het HTML5 Canvas is een redelijk eenvoudige API waarmee je 2D graphics en animaties kunt maken. Het renderen van het canvas vindt plaats op de GPU waardoor een prima performance bereikt wordt. WebGL bouwt verder op dit Canvas, maar om eerlijk te zijn, het creëren van WebGL graphics is vele malen ingewikkelder dan het maken van 2D graphics. Gelukkig zijn er Libraries die je kunt gebruiken waardoor dit een stuk eenvoudiger wordt. Ik heb gewerkt met Tree.js en Babylon.js en beide hebben voor- en nadelen. In deze workshop gebruik ik Babylon.js. De manier waarop de gebruiker kan interacteren met de objecten in de 3D wereld is erg eenvoudig en dat is precies wat ik hier nodig heb. 

 

File new project 

Laten we bij het begin beginnen, dus met een nieuw project. In Visual Studio selecteer ik een "App for Office” en noem het "Excel3DChart”.

 
Er zijn 3 soorten Apps for Office.       
- Mail apps zijn apps die binnen Outlook gebruikt kunnen worden. Ze worden geactiveerd naar aanleiding van de inhoud van email berichten.·        
- Taskpane apps zijn apps die aan de rechterkant staan in de vorm van een Taakvenster. Deze apps kunnen gebruikt worden in Word, Project , Powerpoint en Excel.·        
- Content apps zijn apps die echt onderdeel worden van een document, net als andere objecten (bijvoorbeeld afbeeldingen) die je invoegt in een document. Op dit moment is het mogelijk om content apps te gebruiken in Excel, Access and Powerpoint. In deze workshop gebruik ik een content app omdat de grafiek onderdeel moet worden van het document. 
 

De volgende keuze is de template op basis waarvan het project gecreëerd wordt. Ik wil dat de grafiek gekoppeld is aan de data op het Excel Werkblad (sheet). Daarom kies ik "Document Visualization App”. 
 
 
Deze template bevat al een berg voorgebakken codes. Als je het project nu zou starten, krijg je al een content app met twee knoppen. De ene knop zorgt ervoor dat er een binding wordt gecreëerd naar aanleiding van de geselecteerde cellen. Vervolgens worden de gegevens in de binding gebruikt om een eenvoudige grafiek te tonen. De andere knop voegt voorbeeld-gegevens in op het werkblad alvorens de binding en de grafiek te maken. 
 
 

Hoe werkt het? 

Laten we eens in de code duiken om te kijken wat er precies gebeurt. Zodra de app gestart wordt, zal "Home.html” inladen en wordt "Home.js” uitgevoerd. De body van deze pagina bevat een element met het id "data-display”. Deze div is een placeholder en zal later vervangen worden door onze grafiek. 
 
 
Je kunt de HTML opmaak geheel aanpassen aan je wensen, maar voor dit voorbeeld laat ik het zoals het is. 
 

Bindings 

 
In een App for Office kun je niet willekeurige data aanspreken. Het is bijvoorbeeld niet toegestaan om waardes van cellen uit te lezen of te vullen. Code zoals "Cell(‘a1’).value = 5” is een no-go. Het werken met data gaat via bindings. Als je home.js bekijkt zie je een functie "displayDataOrRedirect”. Deze functie wordt aangeroepen zodra de pagina geladen is en bekijkt of er bestaande bindings zijn. Er kan bijvoorbeeld een binding bestaan wanneer de gebruiker de app eerder al gebruikt heeft en later het document opnieuw opent. Als er een binding beschikbaar is wordt de "displayDataForBinding” functie aangeroepen. Zo niet, dan wordt pagina "databinding.html” geladen, waar de gebruiker een nieuwe binding kan aanmaken. We kijken dadelijk naar hoe dit in zijn werk gaat. De "displayDataForBinding” functie roept de "binding.getDataAsync” methode aan, die de data uit de binding leest. Hierna wordt de "display” methode van het "visualisation” object aangeroepen. Deze gaan we later aanpassen zodat onze 3D grafiek gecreëerd wordt.  
 
 
 
We kijken nog even vlug in "DataBinding.js” waar je kunt zien hoe bindings worden aangemaakt. In de "insertSampleCode” functie, zie je de aanroep naar "document.setSelectedDataAsync”. Op deze manier plaats je in een App for Office, gegevens in de geselecteerde cell. Een andere belangrijke aanroep is "document.bindings.addFromSelectionsAsync”. Hier wordt de binding gelegd naar de huidige selectie van cellen in het werkblad. Deze binding wordt dus gebruikt om de data uit te lezen voor de visualisatie zoals we dat eerder in "home.js” zagen. Zodra de data en de binding zijn geplaatst, navigeert de app terug naar "Home”.
 
 
Nu zijn we dus weer terug bij het begin op de "home” pagina. Dit keer zal er bij het laden van Home.js dus wel een binding aanwezig zijn en zal de "visualizaton.display” aangeroepen worden.Daarin wordt de visualisatie (oftewel de grafiek) gecreëerd. 
 
Hoe dat in zijn werk gaat zullen we zien in deel 2 van de Workshop, deze wordt volgende week gepubliceerd.