23/02/2011
Dynamic visualization
with Visio & SharePoint
Visio 2010 and Visio Services
door Bram de Jager & Edwin Vriethoff
Agenda
•
•
•
•
Visio 2010 & Visio Services
Linking data and web parts
Real-life examples
Summary
Edwin Vriethoff
• Lead SharePoint developer for
Information Worker Solutions center of
Macaw.
• 4 years SharePoint experience
• Worked on projects for Havenbedrijf
Rotterdam, Strukton, Perfetti van Melle,
Evides
Bram de Jager
• Lead SharePoint developer / architect
for Information Worker Solutions
center of Macaw.
• More than 5 year SharePoint
experience.
• Worked on projects for Shell,
Hogeschool INHolland, Library of
Rotterdam and Univé.
Visio proposition
• Microsoft's proposition for Visio:
– Simplify a process (generate a overview)
– Connect to data sources
– Share it via web (SharePoint 2010)
Visio 2010
• Visio 2010 editions
– Visio 2010 standard
– Visio 2010 professional
– Visio 2010 premium
• Visio Services
– Service Application in SharePoint 2010
– Interactively viewing Visio diagrams in browser
Create diagram
• Shapes & Shape Data
• Data Graphics
• Publish to SharePoint (Visio Services)
Create diagram and publish to web
DEMO VISIO BASICS
Data sources
• Visio connects to a variety of data sources:
– Excel workbook
– Microsoft Access Database
– SharePoint list
– SQL Server database
– OLEDB / ODBC connection
– Custom data source
Custom data source
•
•
•
•
•
Remember, it’s a first implementation
Can only be added by using VBA
Minimal documentation available
GAC deployed classes
Useful for counts and calculations
Web part connections
• Web part interaction
– Filter
– Select
– Highlight
– Send shape data
• Out-of-the-box behavior
Link data and web parts
DEMO CONNECT
REAL-LIFE EXAMPLES
Microsoft floor plan
• Basics
– Import CAD drawing
– Link shapes to data
– Publish to SharePoint
• Extend with
– Visio Services JavaScript Mash Up API
Mash Up API
• Vwa.VwaControl Class
–
–
–
–
–
Vwa.diagramcomplete
Vwa.diagramerror
Vwa.shapemouseenter
Vwa.shapemouseleave
Vwa.shapeselectionchanged
• Vwa.Page Class
– getShapes()
– setSelectedShape()
– setZoom()
• Vwa.ShapeCollection Class
–
–
–
–
getCount()
getItemAtIndex()
getItemByName()
getItemById()
• Vwa.Shape Class
– addHightlight()
– addOverlay()
– getShapeData()
Case: Microsoft Floor Plan
DEMO MASH UP API
StAB Process information
• Basics
– Collect information with Nintex Workflow
– Link shapes to data
– Publish to SharePoint
• SharePoint integration
– Visio Web Access web part
– Content Query web part rollups
– Dashboard
Case: StAB business process
DEMO PROCESS DIAGRAM
Summary
• Visio proposition
– Simplify a process
– Connect to data sources
– Share it via web
• Power of Visio
– Geographical locations
– Physical objects
– (Business) processes
Resources
• Sales links:
– http://visiotoolbox.com/2010/
– https://partner.microsoft.com/global/productssolutio
ns/40130528#visio
• Blogs
– http://blogs.msdn.com/b/chhopkin/
– http://blogs.msdn.com/b/visio/
– http://edwin.vriethoff.net/ &
http://twitter.com/edwindotnet
– http://bramdejager.wordpress.com/ &
http://twitter.com/bramdejager
Simplify, Connect and Share
QUESTIONS AND ANSWERS
Bram de Jager
Bram.de.Jager@macaw.nl
Edwin Vriethoff
Edwin.Vriethoff@macaw.nl
Macaw
Beechavenue 140
1119 PR Schiphol-Rijk
Tel +31 (20) 8 510 510