PDF-Download

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-dengrundlagen-zu-advanced-services/
Autor:
Datum:
Version:
Šenaj Lelić –
11.02.2014
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, Collaboration
Days etc.)
oneAssist UG (haftungsbeschränkt)
• Ältester Visio-Partner in Deutschland
• SharePoint-Partner mit Fokus VisioServices, 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 Diagramme
bevorzugen 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 WebOberflä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 ShapeInfo-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 mit
dem 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 haben
aber 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
Use the JSOM to dynamically
update a Content Editor web
part as you select shapes on a
Visio diagram with no server
post back.
• 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)
Vorteile der Mashup API
• Die API ist nicht auf die Kommunikation mit einer
bestimmten Anzahl von Webpart auf einer Seite
beschrä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 sich
mit Webpart-Verbindungen befassen
• Get Drawing URL and Page Name + Get Shape to View From =
nicht unterstützt
• Die API ist clientseitig und benötigt keine
Seitenaktualisierungen -> 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
VWA JavaScript Object Model
VWA
Control
getActivePage()
setActivePage()
diagramComplete
Page
getShapes()
shapeMouseEnter
Shapes
shapeMouseLeave
selectionChanged
getItemById()
getItemAtIndex()
diagramError
Shape
Shape
getSelectedShape()
setSelectedShape()
getShapeData()
getHyperlinks()
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 Objekte
innerhalb des Diagramms zuzugreifen
• Alternative Lade-Methoden, die nicht mit dem VWA-Webpart
funktionieren:
– 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 WebpartInstanz-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
Event name
Function callback
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 Diagramm
im VWA-Webpart gerendet
Das “selection changed”-Event
behandeln
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);
}
}
}
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!
Pixel width
nextShape.addHighlight(4, "red");
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 VSDXund VDW-Dateien im selben Webpart funktionieren
• XAML kann (wenn nötigt) mit VDW benutzt werden
– Aber einige Nutzer haben unter
Umständen kein Silverlight und
sehen 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; scrollbararrow-scolor: #777; scrollbar-lightshadow-color: #ababab; scrollbar-highlight-color: #ababab; scrollbardarkshadow-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/enus/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 Webparts
hochladen
• 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 zu
gelangen
– Den Quelltext durchsuchen, Haltepunkte setzen und die Seite
neuladen, 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/201
1/05/26/console-log-say-goodbye-to-javascriptalerts-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 SilverlightOverlays 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 VisioDiagramme
• 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.