Advanced Visio Services im Alltag• Visio Customizing und Custom Development •...

Advanced Visio Services im Alltag:

Erstellen Sie ihr eigenes Monitoring-Portal für Netzwerke oder ihr

eigenes Prozessportal

http://stefass.wordpress.com/2014/01/07/visio-webcast-serie-von-den-

grundlagen-zu-advanced-services/

Autor: Šenaj Lelić –Datum: 11.02.2014Version: 1.00.00

Agenda

• Ihr Referent: Šenaj Lelić

• oneAssist UG (haftungsbeschränkt)

• Ausbau von Visio Services mit MashUp API und Visio-Vorlage

• Grundlagen von Prozessportalen und Monitoring-Portalen

• Was brauche ich dafür in SharePoint?

• Welche Grundlagen müssen vorhanden sein?

• Das MindMaps-Zuckerl!

Šenaj Lelić

• Visio-Fan seit 1995

• Visio MVP seit 2000 (also 15 Jahre ;-) )

• Coach und Dozent für Microsoft (.NET, OS, SharePoint, Apps für Office und SharePoint)

• Strategischer IT Berater

• Tätig bei oneAssist UG, Berlin und München (Visio und SharePoint-Partner)

• Konferenzsprecher (SharePoint Conference USA, Microsoft TechED, VSOne, CollaborationDays etc.)

oneAssist UG (haftungsbeschränkt)

• Ältester Visio-Partner in Deutschland

• SharePoint-Partner mit Fokus Visio-Services, Prozessportale und Dashboards

• Visio Customizing und Custom Development

• Lizenzkonsolidierung von Grafiksoftware auf Visio mit MultiConverter

• MindMaps for Visio: Mindmapping in Visio und mehr

VISIO SERVICES - WIEDERHOLUNG

Visio Services

• Erweiterung von SharePoint

• Implementiert als Dienstanwendung

• Dient allein der intelligenten Publikation von Visio-Diagrammen (ggf. mit Datenbindung/-update)

• Ist KEIN Visio-Client im Web

• Erlaubt das gesteuerte Publizieren mit Interaktion

• In Office 365 UND on-premise verfügbar

• Kann Datei(en) in Visio-Dateien aktualisieren

VISIO WEB ACCESS WEBPART

(VWA)-EINFÜHRUNG

Das VWA Webpart –

Visio Web Access

• Ist die Grundlage interaktiver Dashboards

• Kann anprogrammiert werden (API)

• Aktualisiert in SharePoint 2013 auch die

Datei bzw. wertet sie das ShapeSheet aus

• Ist das, was der Anwender von den Visio

Services tatsächlich nutzt/anprogrammiert

Das VWA-Webpart

• Kein Visio-Web-Client, nur Konsumation

• Lädt Visio-Dateien und rendert diese

– Kein Silverlight nötig

• Konfigurierbar:

– Datenupdate (mit Zeitspanne)

• ACHTUNG: Update ist nicht real-time (!)

– Sonstige Funktionen (Öffnen in Visio, Zoom …)

Das Visio Web Access Webpart

• Standard-Webpart/View für Visio-Dateien

– NUR VSDX und VDW (KEIN VSD/VDX)

• Komplexer:

– Webpart für eigene Seiten in SharePoint

– Beliebige Einbettung in komplexe Strukturen

– Webpart-Verbindungen zu anderen

Datenquellen oder –empfängern

VISIO WEB ACCESS WEBPART

(VWA)-WEBPART KONFIGURATION

VWA Webpart Eigenschaften

• Web Drawing Display– Web Drawing URL

• Gleiche Farm wie die Page/Seite

• VSDX und VDW unterstützt– Definiert rendering style/Funktionalität

– Force raster rendering – 2010 Diagrammebevorzugen Silverlight

– Automatic Refresh• Systembasierter refresh/Kiosk Dashboard Szenarien

– Fit all shapes in view - initiale Ansicht

– Startseite - Index

– Shape-Daten an verbundene Webparts weiterleiten (LISTE)

VWA Webpart Eigenschaften

• UI Optionen– Refresh anzeigen

– Open in Visio anzeigen

– Page Navigation anzeigen

– Status bar – Zoom Optionen

– Shape Information Pane anzeigen

– Standard-Hintergrund anzeigen

VWA Webpart Eigenschaften

• Web Drawing Interaktivität(= Anwender am Durchführen der Aktionen hindern)– Disable Zoom

– Disable Pan

– Disable Hyperlink

– Disable Selection

DEMO 1: DAS VWA WEBPART IN

CUSTOM FORM

VISIO WEB ACCESS WEBPART

(VWA)-WEBPART VERBINDUNGEN

Webpart-Verbindungen

• 5 Webpart-Verbindungen

• 1 V. sendet: (Shapedaten)

• 4 V. empfangen:– Dateiname/Blatt

– Shapes hervorheben/Farbe

– Filter-Ergebnisse

– Zentrieren auf Shape

• Listen geben Datei, Daten oder Namen der Shapes her

• Achtung: über Web-Oberfläche ist nur je ein Parameter einstellbar

• Für zwei Parameter: SharePoint Designer nötig

Shapedaten senden an

• Sendet die vorkonfigurierten Shapedaten (Liste!) an ein anderes Webpart

– Zum Filtern

– Als Parameter

• Achtung:

– Shape-Daten müssen befüllt sein

– Shape-Datum-Name(n) muss/müssen in der Webpart-Konfiguration gelistet sein

– KEINE Leerzeichen (sichererer)

Dateiname und Blattname erhalten

von

• Liest die zu öffnende Datei aus einem

anderen Webpart aus

• Liest das zu öffnende Zeichenblatt aus

einem anderen Webpart aus

• Beide Parameter gleichzeitig sind nur mit

SharePoint Designer einstellbar

Get Drawing URL and Page Name

From

• Provider stellt Document URL bereit

• Consumer lädt das Diagramm zur Ansicht

• Blattname nur mit SharePoint Designer einstellbar

DEMO 2: DATENVERBINDUNG FÜR

DATEI UND BLATTNAME

Hervorzuhebende Shapes erhalten

von

• Wertet eine einfache Liste aus

• Sucht nach Shape-NAMEN (NICHT Text)

• Name: zu sehen im Explorer oder Shape-Info-Panel

• Mehrere Namen in einer Item-Zeile möglich

– Trennung durch Kommata

– KEINE Leerzeichen erlaubt

• Farbe und Name: nur SharePoint-Designer

Hervorzuhebende Shapes erhalten

von

• Provider stellt Liste von Shape-Name(n) bereit

• Consumer hebt betreffende Shapes hervor+ Farbe (Farbe nur über SP Designer)

Shape Namen Spalte

• Komma

getrennte Liste

• Case Sensitive

– VORSICHT mit

Leerzeichen/

Spaces

Shape Namen: the hard way

Shape Namen: the easy way

• Shape Reports

– Daten mit Shapes verbinden

– Daten in ein Excel Arbeitsblatt exportieren

– Excel Arbeitsblatt in

SharePoint Liste importieren

Highlight Color Parameter

• HTML Color Namen

– Red, Blue, …

• Hex Color Werte

– #8432FF = ?

• Online Color Ressourcen

– http://www.colorschemer.com/online.html

SharePoint Designer Configuration

• Alle Webpart-Verbindungen können mitdem SharePoint Designer 2013 konfiguriert werden– Multiple Parameter configuration

DEMO 3: DATENVERBINDUNG FÜR

SHAPENAME UND FARBE MIT SPD

Filter Ergebnisse erhalten von

• Provider stellt Shape-Daten bereit (VWA)

• Consumer hebt Shapes mit passenden

Werten hervor

Anzuzeigendes Shape erhalten von:

• Liste gibt Namen von Shape an

• VWA Webpart zentriert auf diesem Shape

• Parameter 1: Name des Shapes (z.B.

„Sheet.10“)

• Parameter 2: Zoom-Faktor

• Beide Parameter gleichzeitig nur über

SharePoint Designer einstellbar

Web Part Verbindungen – Limits

• Webparts können viele Verbindungen habenaber nur eine Verbindung per Verbindungsdefinition

Get Drawing URL and Page Name from+

Send Shape Data To -> Info Path Form Web Part+

Send Shape Data To -> Excel Web Part

• Erweiterte Szenarien mit dem Mash-up API

Probleme und Schachstellen

• Webpart-Verbindungen erzwingen das

Nachladen der Seite (flackern)

• Das VWA Webpart ist noch kein

„vollständiger“ Konsumenten-Client

• Es fehlen ein paar zentrale Funktionen für

Endanwender

Das MashUp API

• Visio Services besteht nicht nur aus dem

VWA Webpart

• Dieses Webpart hat auch eine (JavaScript-)

Programmierschnittstelle

• Diese Schnittstelle ist die Grundlage aller

interaktiven Lösungen

Chrome-less embedding

User Interactivity Tips

Mouse / Keyboard Action

Click on a shape Shape is selected. Shape data is displayed in the Shape Information Pane.

Ctrl + Click on a shape Selects the shape and navigates the default hyperlink.

Click + Drag Pans the view in the direction of the drag. Tip for not navigating hyperlinks.

Scroll Wheel – Up Zooms in on the current view, in 10% increments.

Scroll Wheel – Down Zooms out on the current view, in 10% increments.

+ key Zooms in on the current view, in 10% increments.

- key Zooms out on the current view, in 10% increments.

Directional arrow keys Pans the view in the direction of the key pressed.

Tab Sets the focus on the next element in the tab order, including shapes and UI elements.

Shift + Tab Sets the focus on the previous element in the tab order, including shapes and UI elements.

JSOM for VGS

• Was ist es?– Ein JavaScript basiertes Objektmodel zur

Kommunikation mit dem VWA Webpart

• Was kann man damit machen?– Auslesen von Shapedaten, Hyperlinks,

Kommentaren

– Shapes selektieren

– Highlights und Overlays hinzufügen (HTML + HTML5)

– Auf Maus-Ereignisse reagieren

– Pan & Zoom-Einstellungen ändern

– Zu Seiten und Diagrammen navigieren (drill down)

Use the JSOM to dynamically update a Content Editor web part as you select shapes on a Visio diagram with no server post back.

Vorteile der Mashup API

• Die API ist nicht auf die Kommunikation mit einerbestimmten Anzahl von Webpart auf einer Seitebeschränkt– Aktionen und Daten können eins oder mehrere

Webparts betreffen

– Sogar Inhalte ohne Webparts, wie Silverlight, HTML, und ASPX-Controls

• Die API ist nicht auf Szenarien beschränkt, die sichmit Webpart-Verbindungen befassen

• Get Drawing URL and Page Name + Get Shape to View From = nicht unterstützt

• Die API ist clientseitig und benötigt keineSeitenaktualisierungen -> Web 2.0 experience

Typische Anwendungsfälle der API

• Events im Diagramm triggern

Veränderungen auf der Seite

OnClick()

{

for (var j = 0; j < data.length; j++)

{

if (data[j].label == "Step")

{

document.getElementById('StepData').src=

"http://localhost:8080/details.aspx?ID=" + "'" + data[j].value

+ "'";

return;

}

}} // NOTE: this is pseudo code.

Typische Anwendungsfälle der API

• Events auf der Seite triggern

Veränderungen im Diagramm

OnClick()

{

shapes = page1.getShapes();

foreach shape in shapes

{

if (shape.data[0].value =

TextBox.value)

{

shape.addHighlight();

}

}

} // NOTE: this is pseudo code.

Demo

getActivePage()

setActivePage()

getShapes()

getItemById() getItemAtIndex()

diagramComplete

shapeMouseEnter

shapeMouseLeave

selectionChanged

diagramError

getSelectedShape()

setSelectedShape()

VWA Control

Page

Shapes

Shape

getShapeData()getHyperlinks()

Shape

VWA JavaScript Object Model

Getting started

• Eine Textdatei mit dem gewünschten JavaScript/HTML anlegen

• Die Skript-Datei in einer Dokumentbibliothek oder an einem anderen Ort in SharePoint speichern

• Content Editor Webpart hinzufügen und zu der Skript-Datei über ihre URL verlinken

• Visio Web Access Webpart hinzufügen und zum Visio Diagramm verlinken

Webpart-Seite

Dokumentbibliothek

Anbinden an add_load()

• Wenn die Seite geladen ist, sollten Sie Ihre Methode aufrufen, die Ihnen die Instanz des VWA-Webparts liefert

• Die Referenz auf die Instanz wird benötigt, um Ereignisbehandlungsroutinen hinzuzufügen und um auf Objekteinnerhalb des Diagramms zuzugreifen

• Alternative Lade-Methoden, die nicht mit dem VWA-Webpartfunktionieren:– window.attachEvent("onload", vwaOnPageLoad);

– window.addEventListener("DOMContentLoaded", vwaOnPageLoad, false);

– $(document).ready(vwaOnPageLoad); // jQuery

An die VWA Webpart-Instanz

gelangen

web part ID

Auffinden der VWA Webpart-

Instanz-Id

• Rechtsklick “Quellcode anzeigen” auf der

Webpart-Seite

• Suchen nach “class=“VisioWebAccess””

• <div … id=“WebPartWPQ#”

oder mit Hilfe von JavaScript…

Das “diagramcomplete”-Event

behandeln

• Ereignisbehandlungsroutinen mit dem

Event verbinden

Function callback

Event name

Das “selection changed”-Event

behandeln

• Zusätzliche Ereignisbehandlungsroutinen

können hinzugefügt werden, sobald das

Diagramm gerendert wurde

• „removeHandler“ immer vor „addHandler“

aufrufen

Ab diesem Zeitpunkt ist das JSOM initialisiert und das spezifizierte Diagrammim VWA-Webpart gerendet

function onShapeSelectionChanged(source, shapeId)

{

var vwaPage = vwaControl.getActivePage();

var vwaShapes = vwaPage.getShapes();

var vwaShape = vwaShapes.getItemById(shapeId);

var data = vwaShape.getShapeData();

for (var j = 0; j < data.length; j++)

{

if (data[j].label == "Step")

{

alert(data[j].value);

}

}

}

Das “selection changed”-Event

behandeln

Auf Shapedaten zugreifen

• VWAShape.getShapeData()– gibt ein Array von Objekten zurück, die den Shape

Data Items eines Shapes entsprechen

– data[4].label;

– data[4].value; // .formattedValue

Highlights verwalten

• Mit Highlights kann ein Shape hervorgehoben werden(Dabei wird ein Rechteck um die Shapebegrenzungen gezeichnet)

– Shape-Methoden:• addHighlight

– http://msdn.microsoft.com/en-us/library/ff394531.aspx

• removeHighlight– http://msdn.microsoft.com/en-us/library/ff394510.aspx

– Achtung: Jedes Shape kann maximal ein Highlight haben!

nextShape.addHighlight(4, "red");

Pixel width

Color, Hex or Name

Overlays verwalten

• Mit Overlays können eigene Highlights und Grafiken definiert werden– Shape-Methoden

• addOverlay - http://msdn.microsoft.com/en-us/library/ff394546.aspx

• removeOverlay - http://msdn.microsoft.com/en-us/library/ff394409.aspx

– pro Shape sind Mehrere Overlays erlaubt

– Overlays werden mit HTML definiert• Selbst HTML5-Elements wie Canvas werden unterstützt!

Overlays verwalten

• Was ist mit älteren VDW-Diagrammen?– Sorgt dafür, dass HTML-Overlays mit VSDX-

und VDW-Dateien im selben Webpart funktionieren

• XAML kann (wenn nötigt) mit VDW benutzt werden– Aber einige Nutzer haben unter

Umständen kein Silverlight undsehen die VGS nur als PNG und HTML

Shape-Daten im Overlay

• Anzeige eines Overlays nach Auswahl

eines Shapes (shapeselectionchanged)

function onDiagramComplete() {

try {

var vwaPage = _vwaControl.getActivePage();

_vwaShapes = vwaPage.getShapes();

_vwaControl.addHandler('shapeselectionchanged', onShapeSelectionChanged);

}

catch (err) {

alert(err);

}

}

Shape-Daten im Overlay - 2

• Shape-Daten werden im Overlay dargestellt

function onShapeSelectionChanged(source, args) {try {

if (args != null && args != Sys.EventArgs.Empty) {if (typeof (_vwaShape) != 'undefined') {

_vwaShape.removeOverlay('shapeDataTable');}_vwaShape = _vwaShapes.getItemById(args);

// Get the value of the display mode for the Visio Web Access Web Part.var displayMode = _vwaControl.getDisplayMode();

// Test to see what the current display mode is.if (displayMode == 1) {

// The display mode is Silverlight; add Silverlight graphic overlays.}else {

// The display mode is raster format; add an HTML overlay.var shapeData = _vwaShape.getShapeData();if (shapeData.length > 0) {

_vwaShape.addOverlay('shapeDataTable',getShapeDataTable(shapeData),1,0,160,140);

}}

}}catch (err) {

alert(err);}

}

Shape-Daten im Overlay - 3

• Formatierung des Overlays

function getShapeDataTable(shapeData) {

var htmlBuilder = '<div style="width: 150px; height: 180px; padding: 5px; overflow: hidden;">';

htmlBuilder += '<div style="background-color: #fff; border: solid 1px #c6c6c6; box-shadow: 0 0 4px 1px rgba(0,0,0,.2);"><div style="margin: 12px; overflow: auto; scrollbar-base-color: white; scrollbar-arrow-scolor: #777; scrollbar-lightshadow-color: #ababab; scrollbar-highlight-color: #ababab; scrollbar-darkshadow-color: white; scrollbar-track-color: white;">'

htmlBuilder += '<table style="font-size: 8pt;">'; //

htmlBuilder += '<tr><th style="font-weight: bold; border-right: solid 1px #e1e1e1; padding: 4px; text-align: left;">Beschriftung</th><th style="font-weight: bold; padding: 4px; text-align: left;">Wert</th></tr>';

for (var i = 0; i < shapeData.length; i++) {

htmlBuilder += '<tr><td style="border-top: solid 1px #e1e1e1; border-right: solid 1px #e1e1e1; padding: 4px;">' + shapeData[i].label + '</td><td style="border-top: solid 1px #e1e1e1; padding: 4px;">'+ shapeData[i].formattedValue + "</td></tr>";

}

htmlBuilder += '</table></div></div></div>';

return htmlBuilder;

}

Demo

Weitere Events behandeln

• Weitere VWA-Events

– http://msdn.microsoft.com/en-

us/library/ff394574.aspx

– Folgt dem Modell des Excel Web Access (EWA)

Event VwaControl Methods Description

Diagram Complete addHandler() / removeHandler() Triggered when the diagram is loaded, refreshed, or changed

Diagram Error addHandler() / removeHandler() Occurs when a request to render the diagram fails

Shape Mouse Enter addHandler() / removeHandler() Triggered when the mouse pointer is moved into the bounding box of the shape

Shape Mouse Leave addHandler() / removeHandler() Triggered when the mouse pointer is moved out of the bounding box of the shape

Shape Selection Changed addHandler() / removeHandler() Occurs when the shape that is currently selected on the page changes

Deployment

• Von Hand– VDW-Dateien hochladen

– JS/HTML-Dateien für die Content Editor Webpartshochladen• Oder den Quelltext direct in HTML Form Webparts kopieren

• Site Template– Pfade müssen für spezifische VDW-Dateien geupdated

werden damit der VWA Webpart Drawing URL stimmt

• WSP– Teil des SharePoint solution package

• Leere SharePoint Projekte oder ein Visual Web Part

Debugging

• Debuggen der Skripte mit Hilfe der IE10 Developer Tools– Im IE die F12-Taste drücken, um die Developer Tools zu öffnen

– Auf den Skript-Tab klicken, um zu den Debugging-Funktionen zugelangen

– Den Quelltext durchsuchen, Haltepunkte setzen und die Seiteneuladen, um mit dem clientseitigen Debuggen zu beginnen

Skript-Logging mit den IE Developer

Tools

• function tryConsole(){

if (typeof console != "undefined"){

console.log("hello world"); }

}

• http://blogs.msdn.com/b/cdnwebdevs/archive/2011/05/26/console-log-say-goodbye-to-javascript-alerts-for-debugging.aspx

Skript-Logging in ein Content Editor

Webpart

• Basic Script Logging Funktionen zum Dashboard

hinzufügen

• Grundlegende Diagnose Informationen sammeln

• Loggen in ein Content Editor oder html Forms

web part

• An/Aus schalten

Content Editor Web Part

Visio Web Access Web Part

Zusammenfassend…

• JavaScript API– erlaubt entwicklern das Bauen von Rich Dashboard Applications mit Hilfe

von JavaScript, HTML, ASP, usw.

– Zusätzlich lassen sich weitere Funktionalitäten mit HTML- und Silverlight-Overlays bereitstellen• Event dieser Overlays können zusätzliche Methoden aufrufen

• Incorporate VWA scenarios into other SharePoint projects– Site Pages

– Robust Dashboards

– Visual Web Parts

• Und so hat es das Entwicklungsteam selbst gemacht:– C:\Program Files\Common Files\Microsoft Shared\Web Server

Extensions\14\TEMPLATE\LAYOUTS\VisioWebAccess\workflowstatus.js

Was brauche ich im SharePoiint

• Fertige mit Shapes verbundene Visio-

Diagramme

• Datenquellen die AUS SICHT DES

SHAREPOINT sichtbar sind

– Idealerweise: Anbindung via Business

Connectivity Services (zur Datenabschottung)

– Sicherheitskapselung des Datenzugriffs – nur

VGS/Visio Services greift zu

Welche Grundlagen müssen

vorhanden sein ?

• SharePoint SERVER Enterprise

• Office 365 Plan

• Visio 2013 (empfohlen, aber 2010 geht

auch)

• Dateiformat VDW oder VSDX

Das MindMaps „Zuckerl“

bis 31.03.2014

• MindMaps für Visio Standard: Mindmapping in Visio wie es sein sollte

– Kostenfreier Download von der oneAssist Website (bis 31.03.2014)

– http://www.oneassist.de/downloads

• MindMaps Pro mit SharePoint Import und Export (Dokumentation und Erstellung von Site-Strukturen)

– Einführungsaktion bis 31.03.2014: 69,00 €

Dieses Dokument ist urheberrechtlich geschützt. Jede Verwendung,

Weitergabe oder Verwertung, auch in Teilen, ohne die Zustimmung von

oneAssist UG (haftungsbeschränkt) ist unzulässig. Die Inhalte dieses

Dokuments sind vertraulich zu behandeln. Die Weitergabe von Informationen

oder Inhalten an Dritte ist unzulässig.