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

Präsentation zum Thema: "Visualisierungsportale für Unternehmensdaten (IT, BI) mit Visio und SharePoint Šenaj Lelić V-TSP Microsoft Schweiz."—  Präsentation transkript:

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

2 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.

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

4 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

5 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

6 ShapeSheet Grundlagen
Visio Shapes ShapeSheet Grundlagen

7 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

8 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

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

10 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

11 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

12 Demo 2 ShapeSheet - 2

13 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“

14 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“

15 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

16 Visio - Code Automation in Visio

17 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

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

19 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

20 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

21 Demo 3 Visio Objektmodell - 1

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

23 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

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

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

26 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!

27 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

28 Publikation von Diagrammen
Visio Services Publikation von Diagrammen

29 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

30 Visio Web Access Webpart
Demo 6 Visio Web Access Webpart

31 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

32 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

33 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

34 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

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

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

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

38 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

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

40 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

41 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= " + "'" + data[j].value + "'"; return; } }} // NOTE: this is pseudo code.

42 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.

43 Visio Services JavaScript API

44 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); }

45 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= " + "'" + data[j].value + "'"; return; }

46 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=\"# \" Data=\"M0,0 L" + shapeWidth + ",0 L" + shapeWidth + "," + shapeHeight + " L0," + shapeHeight + "z\" \/>";

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

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

49 Objekt: Shapes Properties Count Methods getItemAtIndex getItemByID

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

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

52 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.

53 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)

54 Q&A

55 Links und Referenzen Visio 2010 SDK
Visio Services Demo-Environment:

56 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.

57 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 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.

58 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.

59 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: © 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.

60 Bar chart

61 Line chart