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 }
Eigene Text-Styles im WIKI Editor von SharePoint 08 März 2016 SharePoint comments (0) Der Wiki-Editor von SharePoint ermöglicht das einfache Erstellen von Dokumentationen und Erklärungen [Mehr]
In SharePoint eine Spaltenüberschrift ausblenden 23 November 2015 SharePoint, JavaScript comments (0) Über die View Einstellungen kann in SharePoint leicht eine Spalte ausgeblendet werden. Möchte man aber nur gezielt eine Spaltenüberschrift ausblenden, fehlen die Einstellungen. Allerdings ist das leicht mit ein wenig JavaScript Code zu erledigen. Zunächst müssen wir uns den Aufbau der HTML Seite ansehen. Am einfachsten ist die mit den Developertools von Google Chrome zu erledigen. Einfach die Seite im Browser laden und danach F12 drücken. Im rechten Bereich des Chrome-Fensters werden nun die Developer Tools eingeblendet, die einen “Selector” für ein HTML Element haben. (links oben im Developer Tool Fenster) Wählt man den Selector an, kann nun mit dem Cursor ein Element innerhalb der HTML Seite ausgewählt werden. Ich möchte in diesem Beispiel die “Company” Spaltenüberschrift ausblenden. Also wähle ich die auch aus: Sobald mit diesem Tool das Element ausgewählt wurde, erscheint im Developer Tools Fenster der entsprechende HTML Code. In diesem können wir erkennen, dass die Spaltenüberschrift als <DIV> Element mit dem Namen “Company” angelegt wurde: Nachdem wir diese Informationen zusammengetragen haben, können wir das JavaScript schreiben. Wir werden die Visibility dieses DIV-Elementes auf “hidden” setzen. Der Befehl dafür: document.getElementsByName("Company")[0].style.visibility="hidden"; Die JavaScript Funktion “getElementsByName” liefert eine Collection, aller Elemente mit dem Namen “Company”. Das erste gefundene, ist das richtige DIV Element und von diesem setzen wir die “Visibility”. Allerdings dürfen wir den Befehl erst ausführen nachdem die gesamte Seite in den Browser geladen wurde. In JQuery gibt es eine Document-Ready Funktion. Wenn man jedoch innerhalb einer SharePoint Seite ist, sollte die SharePoint Funktion “_spBodyOnLoadFunctionNames” verwendet werden: _spBodyOnLoadFunctionNames.push("hideColumn"); mit dieser werden JavaScript Funktionen zu einer Aufrufliste hinzugefügt. Alle in der Liste befindlichen Funktionen werden aufgerufen, sobald die Seite fertig geladen ist. Das gesamte Script sieht dann so aus: 1 <script type="text/javascript"> 2 _spBodyOnLoadFunctionNames.push("hideColumn"); 3 function hideColumn(){ 4 document.getElementsByName("Company")[0].style.visibility="hidden"; 5 } 6 </script> Dieses Script müssen wir nun, ohne den Zeilennummern, in die Seite einbetten, in der die Spaltenüberschriften ausgeblendet werden sollen. SharePoint bietet mit dem “Script Editor”- Webpart eine einfache Möglichkeit um Scripts in eine Seite einzubetten. Das Webpart finden sie im Bereich “Media and Content”. Fügen Sie dieses Webpart wie jedes andere in die Seite ein: Sobald das WebPart eingefügt wurde, finden sie den Link “EDIT SNIPPET”. Wenn sie darauf klicken erscheint ein Editor, in den sie das Script einfügen: Nachdem Sie die Seite gespeichert haben, wird nun bei jedem Laden der Seite das Script ausgeführt und das DIV Element mit dem Namen “Company” ausgeblendet. Das Ergebnis sieht nun wie folgt aus: