Visualisierungsportale für Unternehmensdaten (IT, BI) mit Visio und SharePoint Šenaj Lelić V-TSP Microsoft Schweiz

Vortrag- Text Viele kennen Visio als Tool für Flussdiagramme, Organigramme und Netzwerkdokumentationen. Dabei verkennt man schnell, dass Visio eigentlich auch eine sehr mächtige Graphikengine ist, die für viele Visualisierungsaufgaben anprogrammiert werden kann. Diese Session zeigt die Grundlagen der Visio Engine und führt in die zwei Programmierumgebungen innerhalb von Visio ein. Damit erstellte Diagramme können dann mit SharePoint 2010 und den Visio Services publiziert werden. Der Publikationsmechanismus der Visio Services hat ebenso ein API welches für die programmatische Steuerung und Navigation verwendet werden kann und so die reine Publikation mit Funktionen erweitert.

Warum brauche ich Visio? Netzwerkportale mit Monitoring Prozessportale Visualisierung von AD, SharePoint und sonstigen Infrastrukturen Eigene graphische Visualisierungen

Wieso Visio ? Fertige graphische Engine Einfach einzubinden (ActiveX, Direkte Ansteuerung, Add-In) Mächtige 2D Visualisierung für Diagramme (kein Zeichenprogramm) Standard-Microsoft Office-Tool UND Applikation

Agenda Visio ShapeSheet – „das unbekannte Wesen“ Grundlagen im ShapeSheet Visio Automation – „kennt man so ein wenig“ Programmierung im Objektmodell Visio als Komponente – Das Visio Drawing Control Einbetten und nutzen – ein paar Grundgedanken Visio Services – Visio goes SharePoint Grundlagen Visio Services Nutzung und Programmierung der Visio Services

ShapeSheet Grundlagen Visio Shapes ShapeSheet Grundlagen

Das ShapeSheet Ist die erste Programmierumgebung von Visio Ist essenziell für die Nutzung UND Programmierung in Visio Ist wie ein „graphisches Excel“ Was der Anwender tut landet im ShapeSheet Poweruser und Programmierer arbeiten direkt im ShapeSheet

Grundlagen ShapeSheet Der Inhalt einer Zelle heisst IMMER Formel (auch wenn nur eine Ziffer drin steht) Kann als Formel oder als berechneter Wert eingesehen und genutzt werden (Wichtig im Objektmodell) Ist etwas USA-lastig  Besteht aus Zellen und Zellbezügen

Einführung in das ShapeSheet Demo 1 Einführung in das ShapeSheet

Programmierung im ShapeSheet Besteht aus dem Setzen von Zellformeln und –funktionen Das Visio ShapeSheet kennt hunderte von Funktionen Mathematische Geometrische Logische Relationale ALLES was das Shape ausmacht, steht im ShapeSheet Ausnahme: der Text des Shapes

ShapeSheet - 2 Jede Shape hat einen externen und internen Namen Extern: Prozess.3 Intern: Sheet.5 Achtung: die IDs müssen NICHT übereinstimmen Das ShapeSheet ist für EIN Shape definitorisch ShapeSheet-Referenzen können auf andere Shapes und Zeichenblätter gehen, jedoch die Datei nicht verlassen

Demo 2 ShapeSheet - 2

ShapeSheet - 3 Viele Eigenschaften des Shapes sind NUR über das ShapeSheet erreichbar, es gibt hierfür KEINE „Properties“ im Objektmodell Beispiele: Farbe in „FillForeGnd“ Breite in „Width“ Schutzfunktionen in „Protection“ Einfache „Shape-Events“ in „Events“

ShapeSheet - 4 Kenntniss des ShapeSheets ist UNERLÄSSLICH für die Visio-Programmierung Vorteil: die Logik liegt im Shape, nicht im Code Deployment: Weitergabe der Schablone Regel: S F T C „Shapes First, Then Code“

ShapeSheet – Zus.fassung Das Shape ist das ShapeSheet ist das Shape Das ShapeSheet ist die Grundlage von allem Viele Lösungen nutzen NUR das ShapeSheet Visio Lösung := Vorlage + Schablone (+evtl. Code) Wer Excel kann, kann auch das ShapeSheet

Visio - Code Automation in Visio

Visio Automation Programmierung gegen das Visio-Objektmodell Verfügbar: in jeder COM-Fähigen Sprache (VBA, VB6, C++) In .NET über PIAs, C#, VB.NET etc.. Empfehlung: Visio ab 2007 (bedingt durch Deployment NICHT durch Code Code auch bei 2003 möglich

Grundlegender Einstieg Oberstes Element: Visio.Application Dann hierarchisch: Documents->Document->Pages->Page>-Shapes->Shape Generell: Cells->Cell, aber andere Art von Coding! Cells („ZellennameAusSHapeSheet“).

Programmierung am Shape Cells.(„Zellenname“) kann als Wert oder als Formel übergeben und ausgelesen werden: Cells.(„XX“).Formula= String der Formel Cells.(„XX“).Result(VisEINHEIT) = Wert VisEINHEIT: visMilimeters, visSeconds etc.. Wichtig: übergeben Sie die richtige Einheit Alternativ: resultStr – gibt den Inhalt immer als (berechneten !) String zurück

Programmierung - Auswahl Programmierung über externe EXE (Add-On) Programmierung über Einbetten (Drawing Control) Programmierung über In-Memory-Dll (Add-In) ACHTUNG: Änderung von Visio 2003 zu 2007 (dann aber konsistent mit anderen Office Add-Ins) im Deployment

Demo 3 Visio Objektmodell - 1

Automation - 2 Prototyping in VBA ist Immer noch OK Tip: Makro-Rekorder für „ungewöhnliche“ Zugänge im Objektmodell

Bei Add-Ins Application Objekt ist direkt im Application-Fields der ThisAddin-Klasse verfügbar Add-Ins: In-Process-Memory. Erweiterungen von Visio Werden aber IMMER mitgeladen, also schonendes Ressourcenhandling nötig Dateikennezichnung über ShapeSheet

VBA und Makro-Rekorder Demo 4 VBA und Makro-Rekorder

Visio Drawing Control und Add-Ins Demo 5 Visio Drawing Control und Add-Ins

Hinweise Das Objektmodell war bis Visio 2007 für alle Editionen (Standard, Professional) identisch Ab Visio 2010 blockiert das Objektmodell Aufrufe die nicht der Edition entsprechen, bsp: Diagram Validation: Premium only Data Connectivity: ab Professional Generell: bis auf Application – kein new nötig und auch nicht unterstützt!

Visio Automation – Zsfssg. Automation ist „die halbe Miete“ Jeder Aspekt, der nicht über das ShapeSheet zu erreichen ist, ist per Code ansprechbar ( und Zellen über das ShapeSheet) Es bestehen diverse Einbindungsmöglichkeiten

Publikation von Diagrammen Visio Services Publikation von Diagrammen

Visio Services - Überblick Visio Services – eine Komponente von SharePoint 2010 Grundlagen: Visio Services ist ein PUBLIKATIONsmechanismus Anwendung: Visio Web Access Webpart Datenaktualisierung: Datenquellen werden aktualisiert – und damit Datengrafiken Endanwender-sicher: Diagramme können NICHT in Visio Services geändert werden Poweruser-sicher: Berechtigte Anwender KÖNNEN die Diagramme ändern – im Visio Client

Visio Web Access Webpart Demo 6 Visio Web Access Webpart

Grundlagen zu Visio Services Komponente von SharePoint Enterprise Server Reine Publikation, ohne Diagrammänderung MIT Aktualisierung der Datengrafiken (!) Speicherung in speziellem – neuen – Format nötig: Visio for Web oder Visio Webdrawing (VDW) Zeigt sich dem Anwender als „Visio Web Access“ Webpart Das Visio Services Webpart unterstützt Webpart-Connections

Datenverknüpfungen in Visio Services Unterstützte Data Sources SQL SharePoint Lists Excel Services OLE DB / ODBC Custom Data Adapters Nicht unterstützt Access / Excel (JET & ACE) SQL Analysis Services

Visio Services für den Programmierer und Poweruser Die Visio Services haben ein API: Mashup API Das API steht z.B. als JavaScript zur Verfügung Visualisierung von Shapedaten in anderem Webpart über JavaScript Komponente Highlightning von Shapes in Visio Web Access Diagramm

Get Drawing URL and Page Name From Provider sendet document URL Consumer lädt das Diagram zur Ansicht Page Name nur über SharePoint Designer konfigurierbar

Get Shapes to Highlight From Provider sendet Liste von Shape Namen Consumer betont die angegebenen Shapes Highlight Color nur über SharePoint Designer konfigurierbar

Get Filter Results From Provider sendet Shape Data Werte Consumer betont Shapes mit passenden Werten

Get Shape to View From Provider sendet Shape Namen Consumer zentriert Sicht auf das angegebene Shape Zoom Level nur über SharePoint Designer konfigurierbar

Send Shape Data To Provider ist hier VWA Auswahl welche Daten an den Consumer gehen Consumer verarbeitet die Argumente Multiple Argumente nur über SharePoint Designer Einschließlich der betroffenen Shape Data Felder

Connections verbinden Web part page kann viele connection beinhalten Aber: nur eine connection per connection Definition

Visio Services JavaScript API JavaScript basiert Programmatischer Zugriff auf Shape Data Hyperlinks Ausrichtungsfeld-Koordinaten Ebenso: Highlight shapes Overlays für das Diagramm Mouse events beantworten Pan und Zoom properties ändern

API Szenarien Events im Diagramm bewirken Ä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.

API Szenarien Events auf der Seite triggern Ä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.

Visio Services JavaScript API

Visio Services API VWA Instanz und an events anbinden //-------------------------------------------------------------------------------------------------- // Wait till the Visio Web Access HTML & Script has been sent // down from the server and create a VwaControl Object // // Also add handlers for the onDiagramComplete & shapeSelectionChanged Sys.Application.add_load(onApplicationLoad) function onApplicationLoad() { vwaControl= new Vwa.VwaControl("WebPartWPQ3"); vwaControl.addHandler("diagramcomplete", onDiagramComplete); vwaControl.addHandler("shapeselectionchanged", shapeSelectionChangedHandler); }

Visio Services API selectionChanged für Shape Data handlen function shapeSelectionChangedHandler(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") document.getElementById('StepData').src= "http://vsdemo02:8080/processImproved.aspx?ID=" + "'" + data[j].value + "'"; return; }

Visio Services API Overlays nutzen vwaShape.addOverlay( "myOverlay" + j, generateOverlayMarkup(vwaShape), Vwa.HorizontalAlignment.center, Vwa.VerticalAlignment.middle, shape.getBounds().width, shape.getBounds().height); function generateOverlayMarkup… var shapeWidth = shape.getBounds().width; var shapeHeight = shape.getBounds().height; // Data for path is clock-wise from top left return "<Path Stroke=\"Red\" StrokeThickness=\"2\" Fill=\"#00000000\" Data=\"M0,0 L" + shapeWidth + ",0 L" + shapeWidth + "," + shapeHeight + " L0," + shapeHeight + "z\" \/>";

Objekt: VWA Version diagramURL displayMode Methoden getDiagramURL Properties Version diagramURL displayMode Methoden getDiagramURL openDiagram refreshDiagram getActivePage – setActivePage getAllPageIDs isShapeInView

Objekt: Page Methods getSelectedShape - setSelectedShape centerViewOnShape getSize getID getShapes getPosition – setPosition getZoom – setZoom isShapeInView

Objekt: Shapes Properties Count Methods getItemAtIndex getItemByID

Objekt: Shape Properties ID boundingBoxLeft – boundingBoxRight boundingBoxTop - boundingBoxBottom Methods getID getBounds getShapeData getHyperlinks addHighlight – removeHighlight (rectangle) addOverlay – removeOverlay (html or xaml)

Visio Services – komplexeres Szenario Demo 7 Visio Services – komplexeres Szenario

Zusammenfassung Visio Web Access Web Part Erzeugung einfacher Dashboards mit automatischem Refresh Web Part Connections Für Poweruser: erlauben mash ups ohne Code in JavaScript JavaScript API Mächtige Dashboard Applikationen mit Javascript, html, asp, etc.

Visio 2003-2010 Das Dateiformat ist das GLEICHE (Ausnahme: VDW) Alle Lösungen auf ShapeSheet-Basis funktionieren von 2003 – 2010 gleichermassen Funktionen werden „stummgeschaltet“ sind aber „aktiv“ wenn die richtige Plattform die Datei öffnet AUSNAHME: Addins wie Flowchart (Code-Abhängigkeit)

Q&A

Links und Referenzen Visio 2010 SDK http://www.microsoft.com/downloads/en/details.aspx?FamilyID=1cdbb7e7-6bd4-488f-91bd-7bd732dbf378&displaylang=en Visio Services http://technet.microsoft.com/en-us/library/ff829834.aspx Demo-Environment: http://www.microsoft.com/downloads/en/details.aspx?FamilyID=751fa0d1-356c-4002-9c60-d539896c66ce&displaylang=en

3/28/2017 8:10 PM © 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION. © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Please read (hidden slide) 3/28/2017 8:10 PM Please read (hidden slide) This template is designed for use with Office PowerPoint 2007 and 2010. The charts and graphics can be edited with PowerPoint 2007 and 2010, but not with PowerPoint 2003. This template uses Microsoft’s corporate font, Segoe Light. Segoe is not a standard font included with Windows, so it has been embedded in this template. For Live Meeting situation, please use Segoe Regular More resources: Learn how to use this PowerPoint template by referring to the Windows Phone 7 Guidelines. Find more pre-designed layouts by referring to the Windows Phone 7 Additional Layouts. © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Layouts (hidden slide) 3/28/2017 8:10 PM Layouts (hidden slide) The following slides have been designed with predetermined layouts and animations. Do not add any additional shapes or animations to these slides. Only text and imagery can be edited. Shapes can however be removed if they are not all needed. The use of these preset slides will ensure a consistent look and feel across our presentations and represent the Windows Phone 7 brand accurately. Important: Please only use the preset top row Theme Colors found in color menu. © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

PowerPoint template Subtitle color 3/28/2017 8:10 PM PowerPoint template Subtitle color Example of a slide with a subhead Set the slide title in “Sentence case” Set subheads in “Sentence case” Set subhead to 60pt to match the title size The subhead color is defined for this template but must be selected; In PowerPoint 2007/2010, it should match the section title color Hyperlink color: www.microsoft.com © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Bar chart

Line chart