Case Study Extranet mit SharePoint 2013 bei Kumavision AG

  Ein wichtiger Schlüssel zum Erfolg der KUMAVISION AG ist die Möglichkeit sich sowohl intern als auch extern mit Mitarbeitern und Kunden austauschen zu können. Eine Projektmanagementlösung  im Extranet, die die Abstimmung mit Kunden und untereinander ermöglicht und Themen, wie Projektplanung, Aktivitätenverwaltung und Statusübersichten abdeckt, erschien sinnvoll. Für die Verwaltung und Abrechnung spielt dabei die Anbindung des internen ERP-Systems eine entscheidende Rolle. Mit KUMAtarget, das auf Basis von Microsoft SharePoint 2007 implementiert wurde, war eine ideale Lösung für die damaligen Ansprüche geschaffen. Durch wachsende Kunden– und Mitarbeiterzahlen wurde die alte Plattform an ihre Grenzen gebracht, so dass ein effizientes Arbeiten nicht mehr möglich war. Die Lösung war eine Neuimplementierung von KUMAtarget mit angepasster Architektur auf Basis von Microsoft SharePoint 2013. Damit wurden neue Maßstäbe für die Nutzung von KUMAtarget gesetzt. Die Architektur von KUMAtarget sieht vor, dass pro Kunde eine eigene Seite (Site Collection) erstellt wird und die Projekte innerhalb der Seite bearbeitet werden. Diese basiert auf einer fest definierten Struktur, so werden zum Beispiel bei der Anlage eines Projektes automatisch Benutzerrollen bereitgestellt, ein Projektplan erstellt und vordefinierte Aktivitäten und Dokumentenvorlagen angelegt.   Markus Leuter Vorstand  Nicole BergmannSoftware Projekt Manager     Auf der Startseite werden die offenen Aktivitäten des aktuellen Benutzers kundenübergreifend aufgelistet. Die Bearbeitung der Aktivitäten erfolgt über ein eigens designtes und speziell implementiertes Formular. Die auf den Aktivitäten geleisteten Stunden können über wenige Klicks an das ERP-System übermittelt werden. Der Status von Aktivitäten und Projekten kann über die Cockpits Management, Projektleitung, und persönlich eingesehen werden. Ein regelmäßiger Job setzt die Ampeln anhand von definierten Regeln.  Dank der neuen Architektur ist eine bessere Skalier- und Wartbarkeit gegeben und im Zusammenhang mit dem neuen Aktivitätenformular können nun Aktivitäten viel schneller bearbeitet werden. „Etwa 700 Kundenseiten und über 115.000 Aktivitäten stellen eine enorme Herausforderung an unsere Mitarbeiter dar. KUMAtarget hilft uns tagtäglich diese Aufgaben rechtzeitig abzuarbeiten. Mit Alight haben wir dabei den richtigen Partner an unserer Seite “ — meint die Projektleiterin Nicole Bergmann. KUMAVISION AGDie KUMAVISION AG entwickelt und implementiert ERP- und CRM-Softwarelösungen auf Basis von Microsoft Dynamics NAV und Dynamics CRM für mittelständische Unternehmen aus Industrie, Handel und Dienstleistung. Mit 330 Mitarbeitern gehört sie zu den leistungsfähigsten Partnern für Microsoft- Businesslösungen in Deutschland, Österreich und in der Schweiz.           

Visualize it!

Ein Bild sagt mehr als tausend Worte: Der Satz ist im Zeitalter von digitalen Daten und Big Data wichtiger den je. Jeder von uns hat die Erfahrung in dem einen oder anderen Präsentationstermin bereits gemacht - eine endlose Aneinanderreihung von Stichpunktlisten und/oder Tabellen ohne eine knackige, visuell leicht verständliche Darstellung der eigentlichen Kernaussage. Welche Möglichkeiten bietet uns SharePoint 2013 (On Premise bzw. Online) an dieser Stelle? Mit der Version SharePoint 2010 wurde das sogenannte Chart Web Part zu diesem Zweck eingeführt - welches aber in der aktuellen Version bzw. in SharePoint Online leider nicht mehr zur Verfügung steht. Stattdessen empfiehlt Microsoft hier den Einsatz der Excel Services. Alternativ könnte man auch versuchen die Visio Services zu verwenden, die sich aber für die Diagrammdarstellung eher weniger eignen. Glücklicherweise gibt es aber im Netz eine Vielzahl an JavaScript basierten Bibliotheken, die die Diagrammerstellung clientseitig ermöglichen, wobei das ganze Spektrum von rudimentär und kostenlos (u.a. jqPlot), kostenpflichtig mit Assistentenunterstützung (z.B. Kendo UI) bis hin zu mächtig und trotzdem kostenfrei (z.B. D3) abgedeckt wird. Diese erlauben es, unter Verwendung von Konfigurationsparameter und Datenarrays eine Vielzahl unterschiedlichster Diagrammtypen zu erstellen. In diesem ersten Beitrag widmen wir uns einer beispielhaften Umsetzung auf Basis von Chart.js. Dabei wollen wir ein Polar-Area Diagramm erstellen, welches die erwarteten Umsätze einer Region bezogen auf das Marktvolumen für ein Quartal darstellt. Als Datenquelle dient uns eine SharePoint Liste in unserer SharePoint Online Website. Die Liste namens "Umsatzerwartungen" enthält Daten der zu erwarteten Umsätzen (Spalte "ErwarteterUmsatz") pro Region (Spalte "Title") pro Quartal (Spalte "Quartal") und Jahr (Spalte "Jahr"). Das Polardiagramm soll nun die aufsummierten Werte pro Region für ein Jahr anzeigen.  Abbildung 1: Beispieldaten  Für die Darstellung benötigen wir zuerst ein paar wenige Stylesheet Klassen. Anschliessend erfolgt der Skriptverweis auf jQuery (es wird die aktuelle Version 2.1.4 verwendet) und Charts.js.Nun erfolgt der eigentliche Erstellungsprozess. Anfangs definieren wir einige globale Objekte: var jsonItems = {};var dataArray = [];var options = {    segmentStrokeColor: "#0000FF",};var chartColorConfig = {    "EMEA" : {        color:"#F7464A",        highlight: "#FF5A5E"    },    "NA" : {        color: "#46BFBD",        highlight: "#5AD3D1"    },    "APAC" : {        color: "#FDB45C",        highlight: "#FFC870"    }};Das Laden und Erzeugen des Diagramms erfolgt in einer Funktion, welche (nach Best Practices) über die Standardfunktionalität _spBodyOnLoadFunctionNames beim Seitenaufruf ausgeführt wird. Die Daten werden der Einfachheit halber über die REST Schnittstelle geladen - es ist aber auch möglich das Client Object Model zu verwenden. Nach dem erfolgreichen Laden müssen die Daten dann noch verarbeitet werden, um ein für das Diagramm passendes Array der Datenwerte zu erhalten. Zudem implementiert die REST Schnittstelle von SharePoint leider keine Aggregationsfunktionen, weshalb die Aufsummierung auch "per Hand" erfolgen muss. Beim Anlegen der Datenobjekte werden schließlich auch die Anzeigeoptionen (Farbe, Hervorstellungsfarbe) aus dem globalen Objekt zugewiesen. function CreateBlogPolarChart() {    jQuery.ajax({        url: "/_api/web/lists/GetByTitle('Umsatzerwartungen')/items",        type: "GET",        headers: {            "accept": "application/json;odata=verbose",        },        success: function(data){            jQuery.each(data.d.results, function(index, item){                if (null == jsonItems[item.Title]) {                    var newJSONObject = {};                    newJSONObject["value"] = item.ErwarteterUmsatz;                    newJSONObject["color"] = chartColorConfig[item.Title].color;                    newJSONObject["highlight"] = chartColorConfig[item.Title].highlight;                    newJSONObject["label"] = item.Title;                    jsonItems[item.Title] = newJSONObject;                }                else {                    jsonItems[item.Title].value += item.ErwarteterUmsatz;                }            });            $.each(jsonItems, function (key, elem) {                dataArray.push(jsonItems[key]);            });            var ctx = jQuery("#blogPolarChart").get(0).getContext("2d");            var myPolarChart = new Chart(ctx).PolarArea(dataArray, options);                jQuery("#chartcontainer").append(myPolarChart.generateLegend());        },        error: function(error){            alert(JSON.stringify(error));        }    });}_spBodyOnLoadFunctionNames.push("CreateBlogPolarChart");Nun fehlen nur noch die HTML Elemente auf denen das Diagramm dann eingebunden wird. <div id="chartcontainer" class="labeled-chart-container">    <div class="canvas-holder">        <canvas id="blogPolarChart" width="400" height="400"></canvas>    </div></div> Alle diese Komponenten können nun in einer Textdatei gespeichert werden, welche dann von einem Content Editor Web Part als Quelle referenziert wird. Für das Deployment laden wir die JavaScript Datei von Chart.js und jQuery sowie die JavaScript / HTML Textdatei des Diagramms in die Site Assets Dokumentenablage hoch. Hinweis:Falls Sie kein Content Editor Web Part finden / hinzufügen können - die Ursache ist ein Sicherheitsupdate in SharePoint Online anfangs des Jahres. Dadurch wurden per Standardeinstellung alle Skripting-fähigen Web Parts deaktiviert. Um diese wieder zu erhalten müssen Sie dies erst in SharePoint Online im Admin Center konfigurieren - dieser Beitrag zeigt wie es geht. Das Ergebnis könnte wie folgt aussehen: Sie werden sich nun fragen: schön und gut, aber ist das Alles? Die Antwort darauf lautet: Jein. Je nach verwendeter Bibliothek ist die Erstellung / Konfiguration eines Charts relativ wenig aufwändig - der Knackpunkt ist zumeist die Datenquelle. Ein interessanter Aspekt an dieser Stelle sind die Möglichkeiten, sich die Daten nicht nur aus einer SharePoint Liste zusammenzustellen, sondern sich die Inhalte von anderen Orten wie Webdiensten, RSS-Feeds bis hin zu per Browser zugreifbaren Dateien zu laden. Ein gangbarer Weg wäre zum Beispiel, sich die aktuellen Infrastrukturkennzahlen wie Leistungsindikatoren oder Verfügbarkeiten etc. über ein Powershell Skript erfassen zu lassen, diese dann im JSON Format als Datei zu erzeugen und diese dann in einer SharePoint Dokumentbibliothek abzulegen und sie dann als Datenquelle für das Chart zu verwenden - mit 5 minütiger Aktualisierung der Datei per Upload durch den Task Scheduler. Diese und weitere Anwendungsfälle, die immer größere Anzahl an stabilen, browserunabhängigen und flexiblen Charting Komponenten sowie die Unabhängigkeit von serverseitigem Programmcode schaffen viele Möglichkeiten - deshalb werden wir uns in einem der nächsten Beiträge noch weiteren JavaScript-Bibliotheken zur Diagrammerstellung widmen werden.