Visio Services 2010 – Part 5

In this post I am going to show you the various connectivity options that come along with Visio web access web part.

Before reading on this post, I would recommend if you have not gone through the part-1 to part-4, then please read them first and then continue reading from here.

Open the page where you have Visio Web Access web parts where you have displayed Visio diagram in the web part. Edit the page and add the list which is used as a source for the Visio diagram. In our case it is Server Details list. Add that list to the page.



We will try to cover all options that Visio web access web part gives us for connectivity.

Edit the page, edit the Visio web access and click on connection.



Here as you can see we have total five ways to connect to source and update the diagram and increase the interactivity with the source.

But before we go ahead and check out each option, there is one very important change that we need to make to the Visio diagram is to name those Shapes properly so that the source can identify the proper filter.

We need to have name of the shapes similar to the list items name.

First where do we see the name of the Shape in rendered diagram?

Here is an answer, select any shape; click on the right side square (highlighted in green) and here is what you get.



The one which is highlighted in blue is the name of the shape. If you see in this diagram I have the name as Server C which is the value of one of the list items server field.

So open your Visio diagram in Visio Client.

Now where you can find the name of the shape? There is no where you can see the name of the shape. It’s neither visible on the diagram nor is there in the property of the shape.

Well, here we need to enable one more option which is the developer tab in the ribbon.



Now then you have developer tab visible in the ribbon. Click on the shape and then click on developer tab, click on shape name. There you can see a shape name. You need to change the name of the shape to reflect the value of the list item. Then only you would be able to perform all connectivity operations.



Make all the necessary changes and then upload it to the SharePoint library again to reflect these changes there on the server.

Let us deep dive in to each of the options one after the other.

1) Send Shape Data To

Here when we click on the shape it sends the data to the source list that we’ve placed on the page. To have this interactivity, to connect Visio diagram and list through this option, edit the web part. Click on connection, select Send Shape data to and then select your list.

This is how we can send data when we click on shape in the diagram and accordingly list shows up the data.



And then it asks you to configure the input. Select get the filter value from



And then provide the association. Here we are associating the name of the Shape to the Server Name. Only one shape can be linked with the list.



Click on finish.

Once you are done with this step, then go ahead and click on any server name, the respective list item will appear in the list view web part.






2) Get Shaped To highlight From


Here we can click on particular list item and based on our selection, the Shape gets highlighted based on the connection that you’ve set up. We will set up a connection for server name field from list to shape name to Visio Diagram.





Now when you select the list item, corresponding shape gets highlighted





Red color which is highlighted is not something that I’ve highlighted to show you. It is highlighted from SharePoint Visio Services.

3) Get Filter Results from

Here you can filter the list items, and based on filter Visio highlighted that entire list item matching figures or diagram.



Here you do not need to configure any parameter values from either side.

And once you have set this then.

Putting filter on Server A, gets us this.



Putting filter on Server C, gets us this. This filter works with anything. It can be with title, department etc on any list field.




4) Get Shape to view from

Here the potion in the diagram is highlighted by getting that portion to the center of the Visio web access diagram web part. It actually comes in center to highlight that.



Define the relation between web parts.



Select First list item and you get associated shapes to come in center



Select Last list item and you get associated shaped to come in center



5) Get Web Drawing URL and Page name from

The advantage of having this connection in place is that you can have one single Visio web access web part on a page but can define different Visio diagrams to be rendered in that.

Use one Query String filter web part. Give the query string parameter a name and then connect that web part with the Visio Web Part.



And then when from some other link you are navigating to this page, just pass Query string in to the page like what I have done. My query string name is URLPATH and I am passing the path where this Visio diagram file is uploaded.

And when passed in this way, it rendered the Visio diagram in Visio web access web part.



I hope the entire series will help you a lot to understand the basics of Visio services. We will explore more into this when we get a more chance to explore. There is a scope even to write all these connections with programmatic approach. do try it this till then.

Visio Services 2010 – Part 4

In earlier post Part-3 of this series I mentioned that refresh time for Visio diagram is something which is very interesting. If you have not gone through Part-1 to Part-3, I would recommend you reading them first and then continue reading on.



Then Visio Graph Services



Then Global Settings



So now if you see this screen, you will get an idea that you can configure various options for Visio services on this page.



You can set minimum and maximum Cache Age. You can also set the limit on the size of Visio web drawing in improve the rendering time.

Keep reading Part-5 for further exploration.

Visio Services 2010 – Part 3

This post is the continuation part of the last post. So if you have not gone through Part 1 and Part 2, I would recommend reading them first and then continue reading from here on.

In this post, we are going to see how to add the diagram that we’ve created into the SharePoint and how to display it in the SharePoint site inside the browser even though the client does not have Visio client installed in the machine.

Open the same diagram that we have created in part-2. This time instead of saving it as drawing, save it as a web drawing.



Now we have two options, we can directly use publish button and give path of document library inside a SharePoint site where you want to publish or you can upload manually this wen drawing file that we’ve just saved.



Now open a SharePoint web part page or a page where you want to add this Visio diagram. Edit the page and click on Add Web part and add Visio web access from business data category.



You can also directly click on the drawing file from library. This will open the diagram in full page.

Open the tool pane if you’ve added web part; select the Visio web drawing file from document library and click on Ok. Now we have the diagram displayed inside the SharePoint.



You can see all options like Open in Visio, Zoom buttons, refresh buttons, fit to screen, paging and drag the diagram by using hand tool inside web part options. These options are configurable in web access web part’s properties. However because this web drawing is rendered in Silverlight, hence we get all these options. Should you company has blocked the Silverlight in browsers, then this diagram would have rendered as a PNG image and you do not get several options.



One of the very important feature of rending it as a Silverlight is that you can select the object and then see its properties. That actually gives you an idea about the entire row from database or that specific list item details.

Select the object and click on the icon which is on the right upper corner of the web part which looks like square.



Click the icon gets us the details.



Main advantage of rendering as Silverlight is the interactivity that comes along with shape. We will see it in future post when one shape interacts with other in the drawing.

As you can see it says enable refresh. That means let the web part allow refreshing the drawing by clicking on refresh button. This is due to some untrusted connection. We can always enable the refreshing when we know the data source of the diagram.

Now go ahead and change the list items and come back and see the difference. Let’s change Server A for IT and Server B for finance and see if our diagram changes.

And it does not reflect the change immediately. You can click on refresh and even though it does not change. You need to wait some time and after that click on refresh, and Visio drawing updates automatically.



You can also have auto refresh property setup that determines when to refresh.



0 means the default time used in SharePoint for updating the diagram. Now go ahead and set that timing to one minute. Change the list value, come back to a diagram, and wait for one minute. And bingo you get the updated diagram. Cool, isn’t it? In this case we are lucky. There may be a time where setting one minutes or two minutes or any time in the property may not reflect the changes in diagram. Why is that? Why so? What can be the reason? You need to keep reading to find that out.

Read Visio Services Part-4 for further reading.

Visio Services 2010 – Part 2

In this post, we are going to see how to create Visio diagram and link it with SharePoint List. If you have not gone through Part-1 of this series, I would recommend you reading it first and then continue reading this part.

Open Visio 2010 and click on create Diagram. I am selecting ITL diagram. It can be simply any diagram based on the requirement that you have.



Now create a diagram which is something like this.




Here I have shown that administrators handle the servers. So I have shown who handles which server and server belongs to which department.

Now as of now this is a static diagram for three administrators but it has not got the data connectivity. So let us go ahead and add the data connectivity to this.

Go to Data tab and click on Link Data Shape.



We will link each shape with its value from the data source and to describe how we can connect to data source, I will use SharePoint List to connect these shapes.

So go ahead and choose the SharePoint Foundation List as an option. Here as you can see you can connect with different sources. The advantage is in a single diagram we can have multiple data sources as well. That means one shape can have data representing from SharePoint list and at the same time one shape can represent a data from SQL Server database table.

We just need to make sure that the user under whose privilege this Visio diagram will render at the end should have appropriate permission for the data source that you use in diagram.



I have one list ready with me in my team site.



I am going to connect to this list for these shapes.



Once you are done connecting this list with diagram, you get something like this.



Now is the time to link each shape with respective data from the list. Associate each Title with each person drawing, each server with each server drawing and each department with each department item from list by dragging data on object. At the end you get something like this.



However, as you can see Title and Server name appears on every object. We only want respective details to show up. So click on each object and modify the properties.

Right click on image, Data and then Edit Data Graphic.




As you can see it displays two data. One is Title and the other is server name. We can here delete the field that we do not like to show and we can add fields that we would like to show. So go ahead and remove server from each person object.

Same way go ahead and remove Person field and server field from server, add server field and same way remove person field and server field from department figures and add department field to them.

Alternatively you can select all similar object by clicking Ctrl key and selecting each object and then in one go you can change properties.

Once you are done with the object changes, it should appear something like this.



As of now we have placed shapes on diagram and bind them with SharePoint List as data source. If you now want to keep it as a client Visio diagram then save it as a drawing.



Let’s no go ahead, open our list and update the data. Let Michael handle Server C and John handle Server A. go ahead and update those details.



Now open the drawing Visio diagram that we just created while ago. Click on Refresh, it will show the progress of update.



And see the change.



In this post, I have shown you how to connect to SharePoint list and based on the list update how to update drawing on the Visio diagram.

You can also configure the time when data should be automatically refreshed in the diagram.



Keep reading Visio Services Part-3 for further reading.