Af Tom Madsen, Alt om Data
Denne artikel er oprindeligt bragt på Alt om Data. Computerworld overtog i november 2022 Alt om Data. Du kan læse mere om overtagelsen her.
Velkommen til denne del et af to, der vil dække metoder til at skræddersy Office 2013 ved hjælp af apps. I den første del vil jeg komme ind på de teknologier, der er til rådighed for programmering af Office 2013, og de værktøjer der skal til.
I den næste del, der kommer i næste udgave af Alt om DATA, går jeg ind i detaljerne for programmering af den nye app-model, som Microsoft har frigivet til Office 2013 og SharePoint 2013.
Det har altid været muligt at programmere udvidelser til Office. I ’gamle’ dage skulle der C++ og COM-udvikling til, og det var ikke for sarte sjæle! Med .NET 2.0 og Visual Studio 2005 frigav Microsoft et sæt af .NET API’er, der gjorde det muligt for C# og VB-programmører at bruge deres vante miljø til at skræddersy Office.
Med hver ny version af Office er der kommet yderligere funktionalitet til disse API’er, og .NET er selvsagt fulgt med. I Office 2013 er .NET-muligheden stadigvæk tilstede. Med 2013 udgivelserne af Office, og de forskellige servere der understøtter Office, som f.eks. SharePoint og Exchange, er der kommet yderligere en mulighed for Office udvikling til.
Apps skal der til
Microsoft er hoppet med på den bølge, der er opstået på mobilområdet, og har udviklet Office 2013 til at kunne blive udvidet med en app. En app til Office bruger ikke de gammelkendte programmeringssprog fra Microsoft, som f.eks. C#.
For at udvikle en app, skal du til at bruge teknologierne fra Web, JavaScript, HTML5 og CSS. Nu kan du med rette spørge dig selv, hvorfor Microsoft har udbygget mulighederne for Office-udvikling til at omfatte disse nye teknologier i Office-sammenhæng. Det hurtige svar er skyen. Det lidt længere svar er, at det med netop disse teknologier er muligt at udvikle apps til både Office,
SharePoint og Exchange i form af en mail-app. Meningen med en app er, at den skal kunne gøre en enkelt ting, fuldstændigt som på en mobiltelefon. En app er ikke en fuld applikation, der kan gøre en masse forskellige ting. Lad os som eksempel tage Outlook udvidelserne Xobni og Harmon.ie.
Her er der tale om større udvidelser af Outlook, der kan gøre en masse forskellige ting. Disse applikationer skal fortsat udvikles i de kendte værktøjer til Office-udvikling, og i C# eller VB. Mens for eksempel en udvidelse, der henter nogle data fra en database og fylder dem ind i et præformateret Excelark eller Word-dokument, kun udfører en enkelt ting.
Her er det, at Microsoft har tænkt sig, at webteknologierne skal passe ind. Det er faktisk et eksempel på det, der kommer i del 2 af denne serie.
At bruge de kendte webteknologier har yderligere den fordel, at de udviklere, der er vant til dem, udvider deres sortiment til også at omfatte Office-udvikling. Og ja, det inkluderer muligheden for at bruge Jquery, eller nogle af de andre kendte JavaScript-biblioteker i udviklingen.
At bruge web-teknologierne har også den fordel, at nogle af de app-udvidelser, du laver, kan bruges i web- udgaverne af Office. Du kan se de forskellige muligheder i tabel 1. I tabel 1 er Content, en app, der lever i selve dokumentet, og en Task Pane App er en app, der laver den gammelkendte udvidelse i højre side af en Office-applikation.
Du kan tilføje apps til dine Office 2013-programmer direkte fra de individuelle Office-applikationer. På figur 1 kan du se et lille udvalg fra menuen i Word 2013. Der findes apps der er gratis, og apps der skal betales for. Så laver du en app, er der altså mulighed for at tjene penge på den, via Office App Store.
Nu er det naturligvis ikke alle virksomheder, der er interesserede i, at brugerne installerer apps, et faktum som Microsoft er helt klar over. Kombinerer man Office 2013 med en SharePoint 2013, kan man lave en App store, der er helt firmaspecifik.
Det betyder også, at de apps, man laver i firmaregi, ikke skal uploades til Microsofts Office store, men kan holdes internt i virksomheden. På figur 2 kan du se det vindue i Visual Studio, der skal bruges til at lave et nyt projekt til en app. Som du ser, er alle de sædvanlige projekttyper stadigvæk til stede som muligheder.
Skærmbilledet fra figur 2 er taget fra en Visual Studio i den seneste 2013-version. Projekterne ser lidt anderledes ud i Visual Studio 2012, men funktionaliteten er fuldstændigt den samme. Den projekttype, der hedder Cloud Business App på figur 2, er rettet imod Office 365.
Hvad angår programmering til Office 365, så er den eneste mulighed at bruge HTML5, CSS og JavaScript. Office 365 bliver hosted af Microsoft selv, og af den grund er Microsoft ikke interesserede i, at der kører kode på deres servere. Ved at bruge webteknologierne, så vil apps programmet til Office 365 køre i brugerens browser, og derfor ikke være til fare for de servere, der hoster Office 365.
Microsofts eget værktøj Napa
Office 365 kører oven på en SharePoint 2013. Det har vist sig igennem årene, at det er kode, der er skrevet til SharePoint, der er den primære grund til, at en SharePoint-installation bliver ustabil.
Af samme grund anbefaler Microsoft, at man i så vid udstrækning som muligt laver tilpasninger af SharePoint som apps, i den seneste SharePoint 2013-version. En app, der er udviklet til Office 2013, kører faktisk heller ikke inden i Office-programmerne. Appen eksekverer faktisk inden i Internet Explorer, det ser bare ud som om, det hele sker inde i Office.
Udvikling til Office 365 kan ske i Visual Studio, men et Office 365-abonnement kommer med et værktøj som Microsoft kalder for ’Napa’. Napa er et udviklingsværktøj, der kører direkte i en browser og derfor ikke kræver, at man har adgang til en fuld Visual Studio. Du kan se hvordan det ser ud på figur 3.
Til lige hurtigt at klaske en prototype sammen, fungerer Napa fint, men når det kommer til vedligeholdelse af din app, så kommer Napa til kort. Der er ingen funktion i Napa til for eksempel at vedligeholde din kode i et versionsstyrings-system. Napa har en funktion, der kan eksportere et Napa-projekt til Visual Studio, så man kan fortsætte udviklingen der.
Det var så første af to dele om udvikling til Office 2013.
I denne del vil vi kigge på den nye app-model som Microsoft har tilføjet til de muligheder for tilpasning af Office, der altid har eksisteret. Helt konkret vil vi lave en Task Pane.
En Task Pane er det vindue, du sommetider har i højre side af dit Officeprogram. Den app, vi vil lave, vil have nogle knapper, der tilføjer noget tekst til et Excel ark. Før vi gør det, skal vi naturligvis først lave det ikoniske ”Hello World” program.
Hvis du ønsker at se det færdige Visual Studio projekt, så kan du finde det til download ved at følge det link, der er gemt bag ved QR-koden eller gå ind på http://www.altomdata.dk/programmer-apps.
Lav en app til Excel
I Visual Studio laver vi først et ny projekt og vælger SharePointOfficeApp under Office/SharePoint i New Project dialog boksen i Visual Studio 2012/2013. Når vi gør det, så dukker vinduet på figur 1 op. Her vælger vi, hvilken app-type det skal være, og hvilke Office-programmer den skal fungere med.
Hvis du følger med i din egen version af Visual Studio, så kan du fjerne tjekmærkerne til Word, PowerPoint og Project. Vores app er rettet imod Excel. Når du klikker på Finish, vil Visual Studio tage lidt tid til at oprette projektet og alle de filer, der skal bruges i en Office App.
På figur 2 kan du se den struktur, som Visual Studio har oprettet. De fleste af disse filer vil være velkendte for webudviklere. Der er referencer til både css og Jquery-filer.
Hvis den ikke allerede er åben, så klik på filen Home.html. På figur 3 kan du se, at der er referencer til en masse forskellige css og JavaScript-filer. Du må endelig ikke slette nogle af disse referencer, fordi det er dem, der giver dig adgang til at bruge Office-objekter i de JavaScript-filer, som du selv udvikler. Tilføj <div>Hello World</div> imellem de to <body></body> tags i Home.html, akkurat som du ser den tilføjet på figur 3.
Lad os se, hvordan det virker. Tryk på F5-tasten, så vil Visual Studio kompilere projektet og åbne Excel med vores app. På figur 4 kan du se, hvordan det ser ud.
Okay, vores app virker, men er ikke specielt interessant endnu. Slet den div tag, som du lige har tilføjet i Home.html og tilføj i stedet de HTML-elementer og deres attributter, som du ser på figur 5. Et hurtigt tryk på F5 vil vise den brugerflade, du kan se på figur 6. Som du kan se, så bruger vi standard webfunktionaitet til at lave vores brugerflade.
Hvis du er webudvikler, så har du alle de værktøjer, som du er vant til fra hjemmesider, til rådighed for dit design. Selvom vores app kører inde i Excel, så er det rent faktisk Internet Explorer, der tager sig af selve præsentationen af vores app. At udvikle apps til Office kræver, at du har Internet Explorer 9 eller senere installeret på den pc, du bruger til udviklingen.
Åben den fil, der hedder Home.js. Det er den JavaScript-fil, som indeholder den kode, vi skriver til vores app. Al koden til Office 2013 Apps, skal skrives i JavaScript, men som du kan se på figur 3, så kan vi anvende JavaScript biblioteker til vores udvikling. Som udgangspunkt er Jquery tilføjet, men hvis du har andre, du gerne vil bruge, så står det dig frit for at gøre det.
I begyndelsen af Home.js er der allerede noget JavaScript. Du kan ignorere den kode, men du må ikke slette den! Det første, vi skal gøre, er at skrive den kode som knappen, der hedder Write Data, skal bruge. I HTML-koden sagde vi, at når den knap bliver trykket på, så skal den eksekvere writeData(). Det gjorde vi ved at tilføje en attribut: onclick=”writeData()”. Den kode skriver vi nu.
På figur 7 kan du se hele kodeeksemplet. På første linje erklærer vi vores writeData funktion. Det er på de næste linjer, at vi begynder at bruge JavaScript, der er rettet imod selve Excel.
Den første linje kan se lidt kompleks ud, men helt basalt, så er det eneste, den gør, at skrive red, green og blue i hver deres celle i den første linje af Excel, eller hvor du nu har placeret den boks, der normalt indikerer, hvor i Excel-arket vi er ved at taste data ind. Det, der er værd at hæfte sig ved her, er, at den JavaScript-funktion vi bruger, har Async i slutningen af navnet.
Alle de funktioner, der har den endelse, fungerer asynkront. Asynkronitet i denne sammenhæng vil sige, at vores funktion skriver til Excel, uden at det kommer til at gå ud over brugeroplevelsen. I vores app skriver vi bare en enkelt linje til Excel, men forestil dig at appen hentede en stor mængde data fra en database, og at det tog for eksempel 30 sekunder at hente.
Hvis vi ikke gjorde det asynkront, så ville Excel ’låse’ i de 30 sekunder som appen brugte på det. Ikke den bedste brugeroplevelse. Resten af funktionen er kun til for at tilføje fejlhåndtering. Hvis der opstår en fejl under vores asynkrone funtionskald, så vil funktionen bruge funktionen writeDataToPage til at orientere brugeren via et div-tag med id results.
Læs fra Excel
Nu har vi fundet ud af at skrive til Excel, men hvad med at læse? Vi har allerede en knap, der hedder Read Selected Data fra figur 4, så nu vil vi så skrive den funktionalitet, der skal ligge bag ved den. Den JavaScript, der skal ligge bagved readData-funktionen, kan du se på figur 8. Funktionen ligner til forveksling den funktion, vi allerede har skrevet, bortset fra at vi nu bruger getSelectedDataAsync.
Den første parameter til getSelectedDataAsync, er ”matrix”. Med den parameter fortæller jeg funktionen, at den skal læse data som en tabel. Hvis jeg har markeret fem felter i Excel, så læser den alle fem, mens hvis jeg kun markerer et enkelt felt, så læser den kun det felt. Tast F5 for at køre vores app. Tryk først på Write Data-knappen, så vi har noget at læse. Tryk nu på Read Selected Data, så skulle du se, at vores app skriver red, green, red, som på figur 9.
Det er jo altsammen meget godt, at du kan skrive noget data til de felter i Excel, som du har markeret, men hvad nu hvis du har et allerede formateret Excel-ark, og du ønsker at skrive til nogle bestemte regioner i dette ark? Det ville unægteligt være nemmere, hvis vores app selv kunne finde ud af, hvor data skulle skrives, uden at vi skulle gribe ind i processen.
Dette næste eksempel vil gøre netop det. På figur 10 kan du se JavaScript-koden til knappen, der hedder ”Add Table”. Denne funktion er lidt længere end de andre, vi har arbejdet med. Tag først et kig på linje 2 på figur 10. Linjen starter med at etablere den samme kontekst som i de andre funktioner, men det er slutningen på den linje, der er vigtig.
Vi kalder addFromNamedItemAsync og giver den nogle parametre. Den første parameter er A1:A3. Det vil sige, at vi skriver vores data til de første tre linjer i den første kolone i Excel. Den næste fortæller, at vi gerne vil have vores data skrevet som en matrice, fuldstændig som vi gjorde i readData()-funktionen. Den sidste parameter giver de valgte celler i Excel arket et id.
De næste linjer er den samme fejlhåndteringskode, som vi har brugt i de andre funktioner. De næste linjer er der, hvor alt arbejdet bliver gjort. Først fortæller vi koden, at den skal finde de celler, som vi gav id’et MyCities, i linje to. Dernæst skriver vores data til de angivne celler. Læg mærke til, at der er en forskel på, hvordan jeg har angivet det data, der skal skrives imellem denne funktion, og den første vi lavede.
I writeData() blev farverne angivet som: [”red”,”green”,”blue”]. Denne gang har jeg angivet byerne som: [[’Berlin’],[’Munich’],[’Duisburg’]]. Inden du starter appen og trykker på knappen Add Table, så prøv om du kan gætte, hvad forskellen er imellem de måder at angive data på.
På figur 11 har jeg trykket på både Write Data og Add Table knapperne. Som du kan se, så betyder den ene, at data bliver skrevet til en linje i Excel, mens den anden at data bliver skrevet til flere linjer. Hvad der er bedst, er selvfølgeligt bestemt af situationen.
Der er et utal af situationer, hvor en app til Office 2013 giver god mening. I de eksempler vi har arbejdet med her, er al data hardkodet ind, men der er ikke noget til hinder for, at en app kan hente data fra en webservice eller en database. Prøv at forestille dig en situation, hvor et firma har en standard template for et tilbud til deres kunder.
Istedet for at en sælger skal sidde og taste kundedata ind i sådan et tilbud, kunne man lave en app, der fik et kundenummer og brugte det til at suse over i CRM-systemet og fandt data på kunden og skrev det ind i tilbuddet! Det vil frigøre sælgeren til at fokusere på detaljerne i tilbuddet. Som sagt i del 1 af denne serie kan du publicere dine apps til Microsofts App-store og af den vej sælge eller give dine apps væk.
I de situationer, hvor en internetudviklet app ikke kan publiceres til Microsoft, kommer SharePoint 2013 med funktionalitet til at lave en App-store, der er intern til firmaet og deres medarbejdere eller kunder.
Det var en hurtig introduktion til at læse og skrive data til Excel.
Der er naturligvis masser af andre funktioner og objekter i den nye Office 2013 App-model, som vi kan bruge til app-udvikling. I det Visual Studio Projekt, som du kan downloade fra www.altomdata.dk/programmer-apps, er resten af den JavaScript til den sidste knap fra figur 4 implementeret. Der kan du se nogle detaljer omkring, hvordan du laver bindinger imellem data og de celler i Excel, hvor data befinder sig.
Desværre er der ikke rigtig nogle bøger om Officeprogrammering, selv ikke den ’gamle’ slags udvikling med .NET. Med den nye SharePoint 2013 udviklercertificering er der inkluderet udvikling af Office Apps, så mon ikke der kommer noget på markedet snart om app-udvikling.
For udvikling af Office programmer ved hjælp af .NET, så er det stadigvæk bogen: Visual Studio Tools for Office 2007 fra Addison Wesley, der er biblen. Held og lykke med din fremtidige udviklerkarierre!
