Async-Await in SharePoint Hosted Apps 18 Dezember 2016 SharePoint, TypeScript comments (0) Mit Typescript 2.1 wurde die lange erwartete Spracherweiterung für asynchrone Programmierung implementiert. Dem C# Entwickler sind die Schlüsselwörter async und await bekannt. Nun können diese auch in TypeScript Anwendungen verwendet werden. Wie TypeScript in SharePoint-Hosted Apps verwendet werden kann habe ich in einem früheren Artikel gezeigt. Aber um async und await zu nutzen, muss dies dem TypeScript Compiler mitgeteilt werden. Im Visual Studio Projekt File muss bei den beiden Property Groups (für Debug und Release) noch die folgende Zeile eingefügt werden: <TypeScriptLib>DOM,es2015.promise,es5</TypeScriptLib> Diese Zeile bewirkt, dass in TypeScript Funktionen implementiert werden können, die ein Promise Objekt zurückliefern. Die grundsätzliche Verwendung von Promise habe ich vor langer Zeit, also weit vor TypeScript 2.1, hier gezeigt. Promise wird von Google Chrome direkt unterstützt. Soll unser Code in einem Internet Explorer laufen, so müssen wir selbst ein Promise-Objekt implementieren. Zum Glück haben das bereits andere übernommen. Ich habe die Bibliothek “Bluebird.js” im Einsatz (siehe: bluebirdjs.com) Promise im Einsatz Nachdem der Compiler konfiguriert ist, und die Bluebird-Bibliothek eingebunden ist, können wir beginnen eine Klasse zu schreiben. Ich möchte ich dieser Klasse den Zugriff auf Documentbibliotheken kapseln und erstelle eine Funktion die ein Array<string> mit allen Listen-Titel liefert die nicht “versteckt” sind. Die Klasse mit der Funktion “getDocLibs” ist hier zu sehen: class SPDocTemplates { public getDocLibs() { return new Promise<Array<string>>((resolve, reject) => { var h = new SPHelper(); var lists = h.hostCTX.get_web().get_lists(); h.clientCTX.load(lists, 'Include(Title,Hidden)'); h.clientCTX.executeQueryAsync( () => { var ret = new Array<string>(); var enumerator = lists.getEnumerator(); while (enumerator.moveNext()) { var list = enumerator.get_current(); var title = list.get_title(); if(list.get_hidden()==false) ret.push(title); } resolve(ret); }, (sender,args) => { reject(args.get_message()); }); }); } } Die Methode liefert ein Promise Objekt zurück. Dieses wird im return gleich initialisiert und im Konstruktur wird eine anonyme Funktion definiert, die die Methoden für resolve und reject übergeben bekommt. Innerhalb der anonymen Funktion wird mit dem CSOM auf die Bibliotheken zugegriffen. Es wird das Array mit den Listentiteln aufgebaut. Sobald dieses fertig ist, wird die Methode resolve aufgerufen und das Array übergeben. Sollte ein Fehler aufgetreten sein, wird die Methode reject aufgerufen. Async Await Bisher ist noch kein Vorteil zu erkennen. Aber nun kommt der Auftritt von async/await… Wir können nun die zuvor erstellte Klasse verwenden: async function Start() { var d = new SPDocTemplates(); try { var l = await d.getDocLibs(); } catch (err){ alert(err); } l.forEach((titel) => { $('#bibs').append('<li><a href="#">' + titel + '</a></li>'); }); } Die Funktion wird mit dem Schlüsselwort async definiert. Das ist notwendig, wenn innerhalb der Funktion mit await gearbeitet wird. Vor dem Aufruf der Funktion “getDocLibs” wird das Schlüsselwort await gesetzt. Um einen Fehlerfall auswerten zu können, wird der gesamte Aufruf in ein try-catch verpackt. Fazit Mit Async/Await ist es nun möglich die Ansynchronität des CSOM zu nutzen, die Zugriffe auf SharePoint in Klassen zu verpacken und dennoch den Code übersichtlich zu gestalten.
SharePoint Hosted App mit TypeScript 2.0 25 September 2016 SharePoint, TypeScript comments (0) Nachdem nun TypeScript 2.0 veröffentlicht wurde (siehe hier), ist es an der Zeit eine SharePoint Hosted App mit TypeScript zu schreiben. Wie schon bei den Versionen zuvor gibt es im Visual Studio keine Vorlage für SP Hosted Apps die den TypeScript Compiler verwendet. Aber zum Glück hält sich der Aufwand in Grenzen. Installation des Compilers Zunächst muss der TypeScript Compiler 2.0 im Visual Studio installiert werden. Am einfachsten ist das über den Menüpunkt Tools – Extensions und Updates zu erreichen. Im Online Bereich der Extensions ist nach TypeScript suchen. Da es mehrere Suchergebnisse gibt, muss man genau auf die Versionsnummer achten. Zum Zeitpunkt des Erstellen dieses Artikels ist es die Version 2.0.3 Nach der Installation stand bei mir ein Reboot des Rechners an! Nun kann zu dem App-Projekt eine .ts Datei hinzugefügt werden. Die Vorlage für TS-Dateien im Visual Studio ist im Dialog “Add New Item” unter Web – Scripts zu finden. Compiler in der Projekt-Datei registrieren Leider reicht das Hinzufügen der TS-Datei nicht aus. Diese wird nicht kompiliert. Es muss nun auch in der Projektdatei vom Visual Studio der TypeScript Compiler zum Projekt hinzugefügt werden. Im Visual Studio Explorer muss mit dem Menüpunkt Unload Project zunächst die Projektdatei in einem Modus geöffnet werden, sodass der XML Inhalt editiert werden kann. In der XML Ansicht des Projektes müssen nun zwei Property Groups eingefügt werden. Eine für Debug-Compile und eine für Release-Compile. Ein guter Platz dafür ist am Ende der Datei vor dem Closing Tag für das Projekt. 1 <PropertyGroup Condition="'$(Configuration)' == 'Debug'"> 2 <TypeScriptRemoveComments>false</TypeScriptRemoveComments> 3 <TypeScriptSourceMap>true</TypeScriptSourceMap> 4 </PropertyGroup> 5 <PropertyGroup Condition="'$(Configuration)' == 'Release'"> 6 <TypeScriptRemoveComments>true</TypeScriptRemoveComments> 7 <TypeScriptSourceMap>false</TypeScriptSourceMap> 8 </PropertyGroup> 9 <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets" Condition="Exists('$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets')" /> 10 </Project> Die Zeile 10 im Script war schon in der Datei. Die Zeilen davor werden eingefügt. Nun kann das Projekt File wieder normal geladen werden. (Menüpunkt Reload Project) Ich habe eine Datei myApp.ts hinzugefügt, mit Inhalt versehen, und dann kompiliert. Der TS-Compiler legt nun 2 JS Dateien an. Beide Dateien sind nur sichtbar wenn im Solution Explorer alle Dateien angezeigt werden. Diese beiden Dateien sind nun in das Projekt aufzunehmen (Menüpunkt: Include in project) sodass diese Dateien beim Deployment der App auch auf den SharePoint Server kopiert werden. Hinzufügen der Typedefinitions Nachdem die App JQuery verwenden soll und auch höchstwahrscheinlich das SharePoint CSOM müssen noch folgende Nuget Packages zum Projekt hinzugefügt werden um die Typedefinitions für TypeScript zu erhalten: <package id="jquery.TypeScript.DefinitelyTyped" version="3.1.1" targetFramework="net45" /> <package id="microsoft-ajax.TypeScript.DefinitelyTyped" version="0.0.1" targetFramework="net45" /> <package id="sharepoint.TypeScript.DefinitelyTyped" version="1.3.1" targetFramework="net45" /> Ab nun steht dem Entwickeln mit TypeScript 2.0 nichts mehr im Wege. Mein myApp.ts File hat übrigens folgenden Inhalt: 1 ExecuteOrDelayUntilScriptLoaded(App, "sp.js"); 2 3 function App() { 4 $(document).ready(() => { 5 var ctx = SP.ClientContext.get_current(); 6 var user : SP.User = ctx.get_web().get_currentUser() 7 ctx.load(user); 8 ctx.executeQueryAsync( 9 () => { 10 $('#message').text("Hallo " + user.get_title()); 11 }, 12 () => { } 13 ); 14 15 }); 16 }