Visio 2013 & Visio Services – A Quick Guide#spsoslo

Knut Relbe-MoeMay 31st, 2014

Platinum

SharePint

Raffle

Platinum

Gold

Thanks to our Sponsors!

Knut Relbe-MoeSenior Solution ArchitectTechnical Lead SharePointSteria AS, Oslo, NorwayMicrosoft Certified TrainerContact

@sharePTkarmEmail: knutrelbemoe@outlook.comBlog: www.sharepointblog.noSkype: shareptkarmMobile: 0047-98224609

My Experience: SharePoint evangelist, mentor, speaker Old developer, turned Architect / ITPro Have worked with SharePoint since the 2003

version. Worked with several clients upgrading their

solution from 2007/2010 to 2013. Works as a Lead Architect and advisor creating

SharePoint Farm architecture/infrastructure on many projects. With up to 25.000 users.

Worked with automating the installation and configuration of SharePoint.

I’m proud to work for:

Long term and qualified partner

90 Consultants 40 collaboration 5 Microsoft

certifications

200 Consultants 50 Microsoft

certifications 10 UX

CONSULTING SYSTEM DEVELOPMENT

400 Consultants 140 Microsoft

certifications

100 Consultants 15 Microsoft

certifications

INFRASTRUCTURE OPERATIONS200

Consultants related to SharePoint

Agenda 1 What is Visio services

2 Why Visio Services

3 Overview of Visio Services in SharePoint Server 2013

4 How it works

5 Configuring Visio Services

6 What is JSOM

7Demo - How to create a Visio Drawing and show it in the Visio Webpart

8 Demo - Create a simple PowerBI dashboard in Visio

9 Summary / Next

What is Visio ServicesVisio Services in SharePoint 2013 enables you to load, display, and interact programmatically with Visio files on SharePoint Server 2013 and Microsoft SharePoint Online.

Why Visio ServicesVisio diagrams can be rendered by Visio Services and viewed in a Web browser. This lets users view Visio documents without having Visio or the Visio Viewer installed on the local computer. This also allows diagrams to be viewed on mobile devices

Basic exploration and navigation of these rendered diagrams are supported within the Visio Web Access Web Part. Page designers can configure the user interface and functionality of the Web Part.

Visio Services can also refresh the data and recalculate the visuals of a Visio diagram hosted on a SharePoint site. This enables published diagrams to refresh connections to various data sources (SQL, Excel, ….) and to update affected data graphics and text fields.

Overview of Visio Services in SharePoint Server 2013

Visio Services runs as a SharePoint Server 2013 service application.

Use and benefits of Visio Services• Visio diagrams can be rendered by Visio Services and viewed in

a Web browser. • Users can view Visio documents without having Visio or the

Visio Viewer installed on the local computer. • Diagrams can also be viewed on mobile devices.• Basic exploration and navigation of these rendered diagrams

are supported within the Visio Web Access Web Part• Visio Services can refresh the data and recalculate the visuals of

a Visio diagram hosted on a SharePoint site• Visio diagrams can be published to SharePoint Server 2013 by

using Visio Professional 2013 and Visio Premium 2013.

How it works: ArchitectureVisio Web

AccessCustom Data

ProvidersVisio JSOM

Mash-Up APIWeb Part

Connections

Visio Proxy

Visio Graphics Service

VDW/b/m

SharePoint Content Database

External Data Sources

Web Front End

BackendSQL

OLEDB/ODBC

XLSX SP Lists

Application Server

How it works: Creating a Visio SolutionSave VSDX file to SharePoint Server 2013 or Office 365

2• Create Diagram • Use Data Linking

and Data Graphics

• View diagram in web browser• Opens diagram in Visio3

• Click Refresh to update data graphics

• Data refresh can be automated by setting interval time

4Data Source

• SharePoint List apps

• Excel Services• SQL Server• OLEDB / ODBC

1

How it works: Compatible diagrams

Visio Services in SharePoint Server 2013 can render diagrams created in Visio 2010 or Visio 2013

Visio diagrams created in Visio 2010 must be created using Visio 2010 Professional or Visio 2010 Premium and must be published to a SharePoint site as a Visio Web drawing (*.vdw) file

Visio diagrams created in Visio 2013 must be created by using Visio Professional 2013. The new standard diagram format in Visio Professional 2013 (*.vsdx files) can be rendered by Visio Services, along with the Web drawing (.vdw) format

Recommend to use the new *.vsdx format

Configuring Visio Services

Create a Visio Graphics Service service application in SharePoint Server 2013.

2 options:1. Create using Central administration

1. Need to be member of Farm administrator group2. New Visio Graphics Service

2. Create using Powershell1. Need to have minimum ADD-SPShellAdmin2. Windows PowerShell command prompt (that is, PS C:\>), type

the following command and press Enter:

New-SPVisioServiceApplication -Name “<VisioGraphicsServiceName>” -ApplicationPool “SharePoint Web Services Default” -AddToDefaultGroup

What is JSOMWhat is JSOM?

A JavaScript based object model for communicating with the Visio Web Access web part

Web Part Page

Visio Web Access Web

Part

Content Editor Web Part

Document Library

File containing JScriptVisio Diagram

What is JSOMWhat can you do with it?

Read shape data, hyperlinks, commentsSelect shapesAdd highlights and overlays (HTML + HTML5)Respond to mouse eventsChange the pan and zoom settingsNavigate pages and diagrams ( drill down )

VWA Javascript Object Model

getActivePage()

setActivePage()

getShapes()

getItemById() getItemAtIndex()

diagramComplete

shapeMouseEnter

shapeMouseLeave

selectionChanged

diagramError

getSelectedShape()setSelectedShape()

VWA Control

Page

Shapes

Shape

getShapeData()getHyperlinks()

Shape

Getting started

Web Part Page

Visio Web Access Web

Part

Content Editor Web Part

Document Library

File containing JScriptVisio Diagram

Demo - How to create a Visio Drawing and show it in the Visio Webpart

Demo - Building A Simple BI Dashboard With Visio 2013 And Visio Services

Summary• Easy to set up • Easy to create diagrams with Visio• Need Enterprise License• Visio provides lots of tools to create diagrams

• Callouts• Stock graphics• Use other images

• Excel Services• Requires additional considerations

• Users• Interaction• No need for client

Want more information/Deep dive?• Can find much information on Internet

• I will update my blog with more information about Visio Services the next days/weeks.

WebCast:• https://www.youtube.com/watch?v=NLJPonmyw5o

• Technet:• http://technet.microsoft.com/en-us/library/ee663482(v=office.15).aspx• http://technet.microsoft.com/en-us/library/ee663485(v=office.15).aspx

Thank you!

Special thanks to: Thomas Browet Alan Richards

For some good inputs, and for borrowing me some slides.

SharePoint Arctic Challenge – For inspiring me to learn about Visio Services

Platinum

SharePint

Raffle

Platinum

Gold

Thanks to our Sponsors!