Making InfoPath talk to Visio

In a previous blog post, I talked about how to get two Visio diagrams to interact on a SharePoint page. Now I’m going to bring that discussion back round to my favourite Microsoft product. How can an InfoPath form talk to a Visio diagram?

Visio is a great tool for drawing detailed diagrams, potentially surfacing live data. InfoPath is a great tool for collecting data from users. Why not combine the two? In this blog post, I’m going to describe a much-simplified scenario. Hopefully you’ll be able to see how these principles can be applied on a much wider scale.

Let’s say a company has a mixture of employees and contractors working for them, both of whom claim back expenses. In this scenario, there is slightly different procedure for the two groups but the company wants a single SharePoint page to explain how the procedure works to new employees/contractors. This could be done by displaying two separate procedure diagrams side-by-side, with a note about which was for which group. But the company might have other procedure diagrams they want to share in the same place. The site could get very cluttered and a new-starter might not be clear one what applies to them. So instead, they could have the diagrams switch between two different pages depending on whether the person looking at the page was a contractor or employee.

First, we need to have an InfoPath form.

For the sake of keeping the demo simply, let’s design a blank InfoPath 2010 form and add one field. This field will have two option buttons associated with it. Edit the properties of the field so that when the first button is click, the value of the field is set to Employee, when the second is clicked, it’s Contractor. We’ll also enter a question so that the user knows what the form is asking them. The screenshot below shows the form. So far, that seems very simple.

Now we have to set it so that the form will be able to interact with other items on the SharePoint page. Select either of the option buttons. Click the Manage Rules button on the Home tab and this will open up the Rules pane. We need to create a new Action rule that runs whenever the field is changed. The Action to apply is the Send data to a Web Part option. This will open up a dialog. We need to set property promotion. This tells InfoPath which fields we care about the other web parts seeing. Click on the Property Promotion button. In the bottom half of the Form Options dialog that opens, click Add and the insert field1. See the screenshot.

Click OK a couple of times and then we’re ready to publish the form. Publish it to your chosen SharePoint site. Once that’s done, add it to the page using the new InfoPath Form web part.

Now it’s Visio’s turn.

In Visio, create your process diagrams on different pages of the same file (this could be done in separate files too, but we’ll stick to one option for the time being). Make sure you name your pages Employee and Contractor. The names must be the same as the values you gave field1 in the form. You might also want to have a first page which gives a message that the user needs to select whether they’re an employee or contractor.

Now save this to SharePoint as a web drawing and add it to the SharePoint page using the Visio web part. By default, the diagram will show with the first page. We need to change some settings to make it automatically change to the correct page.

Click on the little arrow in the top right of the web part and select to edit the web part. When the tool pane opens, uncheck the box Show Page Navigation. This prevents the user manually switching between the diagrams. It’s probably also a good idea to uncheck the Show Open in Visio box as well. Apply the changes.

Next, with the tool pane still open, click on the arrow in the corner of the web part again. Now the menu has a Connections item. Go to this and from the sub menu choose Get Web Drawing URL and Page Name from. Choose the InfoPath web part from the list.

A Configure Connection dialog will open. Choose field1 as the Provider and Page Name as the Consumer, then click Finish.

Now click OK to close the web part tool pane and your InfoPath form should be linked to your Visio diagram. The Visio diagram will open the appropriate page depending on which option in the InfoPath form is selected.