Integrating Visio 2007 and SharePoint Products and Technologies

Summary: Learn about enhanced features for integrating Microsoft Office Visio 2007 with Microsoft Windows SharePoint Services 3.0 and Microsoft Office SharePoint Server 2007. (13 printed pages)

Visimation, Inc.

January 2007

Applies to: Microsoft Office Visio 2007, Microsoft Windows SharePoint Services 3.0, Microsoft Office SharePoint Server 2007

Contents

• Overview of Microsoft Windows SharePoint Services

• Using Windows SharePoint Services to Manage Visio Drawings

• Accessing Documents Stored on a SharePoint Site from Visio

• Viewing a SharePoint Task List as a Visio PivotDiagram

• Viewing a SharePoint Task List as a Visio Flow Diagram

• Viewing a SharePoint Calendar List as a Visio Diagram

• Techniques for Sharing Visio Data from a SharePoint Site

• Conclusion

• About the Author

• Additional Resources

Overview of Microsoft Windows SharePoint Services

Microsoft Windows SharePoint Services is a versatile Microsoft Windows Server technology that provides rapid, low-cost implementation of information-sharing tools; robust storage and collaboration infrastructure; and a foundation platform for building new Web-based applications and services. You can find more information about Microsoft Windows SharePoint Services at Microsoft SharePoint Products and Technologies, the Windows SharePoint Services Developer Center, and the SharePoint Server 2007 Developer Portal.

You can access files stored in a SharePoint document library either from the SharePoint site or directly from Microsoft Office Visio 2007. Accessing files from a SharePoint site provides check-in and check-out capability and the ability to view and edit files. You can edit data by using Internet Explorer or directly within Visio. When you edit a drawing from the SharePoint site, you are prompted to save and check-in changes or to discard changes when the drawing is closed.

Using Windows SharePoint Services to Manage Visio Drawings

You can share documents among team members by placing them in a document library. The team can manage documents directly from the SharePoint site. Working from the SharePoint site provides the team with check-out, check-in, viewing, editing, and discussion group functionality.

Uploading Files to a Document Library

You can add files to a document library several ways: For new documents, in the document library, select New and then choose the type of document or folder you want to create. If there are existing files that you want to add to a SharePoint site, select Upload and then choose Upload Document or Upload Multiple Documents to add many files at one time. (You can also add files directly from Visio. This is covered in the next section.)

To investigate files in the document library

1. On the SharePoint site, click a document library to display the files within the library.

2. Notice the columns of file data (some columns are displayed by default and others can be added by the library administrator):

   • Type—An icon showing the type of file; for example, a Visio icon or a Word icon.

   • File Name

   • Modified—The last time the file was modified.

   • Modified By—The name of the user who last updated the file.

   • Check Out To—Who has the file checked out. (This is an optional column that can be easily displayed by modifying the default view.)

3. Move the pointer over a Visio drawing file. Notice that the file becomes shaded and a drop-down list box is presented.

4. Select the drop-down list. The following items appear:

   • View Properties

   • Edit Properties

   • Manage Permissions (New in Windows SharePoint Services 3.0)

   • Edit in Microsoft Office Visio (Choosing this option opens a drawing file in Visio. You can edit the file and, when you close it, you are prompted to save changes.)

   • Delete

   • Send To (New in Windows SharePoint Services 3.0)

   • Check Out

   • Add to My Links (New in Windows SharePoint Services 3.0)

   • Version History

   • Alert Me

   • Discuss

   Note

   Opening a drawing within Internet Explorer or in Visio does not automatically check out the file from the document library or lock it to the user who is making the change. Any team member who has write access to the document library can change files within the library. To help manage this process, Windows SharePoint Services provides a Check Out function and displays the name of the user who currently has the file checked out. This lets other team members know who is in the process of editing the file.

Enforcing Check Out with Windows SharePoint Services Settings

Check Out is not required by default, but you can turn it on.

To turn on Check Out

1. On the Settings menu, select Document Library Settings, and then select Versioning Settings.

2. Within Versioning Settings, set Require Check Out to Yes.

Note
Requiring Check Out means that only one user can modify a file at a time. This reduces the possibility that changes will accidentally be overwritten by another user.

To view or edit a Visio drawing from a SharePoint document library while using enforced Check Out

1. Click the name of a Visio drawing in a document library. A check-out dialog box appears, as shown in Figure 1. If you want only to view the drawing, you can open the file as read-only without checking out the file from the document library.

   Figure 1. Checking out in the document library

   

2. To edit the drawing, select Check Out and Edit. The drawing is checked out from the SharePoint document library and opened within Visio.When the drawing is opened for editing in Visio, the File menu in Visio is modified to add a Check In command and a Discard Check Out command, as shown in Figure 2.

   Figure 2. Check In and Discard Check Out commands in Visio

   

3. Modify the Visio drawing and then use Check In to check it back into the document library. The Check In dialog box appears, enabling you to save versioning comments along with this version of the drawing.

   Figure 3. The Check In dialog box

   

4. Click OK to save the Visio drawing, check it back into the document library, and close the drawing file in Visio.

Accessing Documents Stored on a SharePoint Site from Visio

Files stored on a SharePoint site can be accessed by the Office applications that created them, including Visio. You can use Visio to create a drawing that is saved to a SharePoint site, or you can use it to view or edit an existing drawing that someone else created and saved on the SharePoint site.

To create a drawing and save it to a SharePoint site

1. Create a drawing in Visio.

2. On the File menu, click Save As.

3. Navigate to the network location that is your SharePoint site. If prompted, provide a login and password.

4. Navigate to the document library folder where you want to save the file, and then click Save.

   Note
   Go to the SharePoint site and view the information for the file that you just saved. The Modified By field contains the user name of the person who created the file.

   Note
   You can also place files on a SharePoint site by using the Upload menu directly from the SharePoint site.

To open, edit, or replace a document on a SharePoint site

1. In Visio, on the File menu, click Open.

2. Navigate to the network location that is your SharePoint site. If prompted, provide a login and password.

3. Navigate to the Documents Library folder where the file that you want to open is located. Select the file, right-click, and then click Open (or double-click the file name to open the file).

4. If Check Out is enforced within the document library, the file is automatically checked out of the document library before it is opened for editing within Visio. When the drawing is opened for editing in Visio, the File menu in Visio is modified to add a Check In command and a Discard Check Out command.

Editing Documents Stored on a SharePoint Site Offline

Windows SharePoint Services 3.0 enables you to capture data in an offline folder so that you can edit it while you are not connected to the server. Then, when reconnected, you can update your files on the server.

You can also do this with Visio drawings. In Figure 1, notice the check box Use my local drafts folder. The local drafts folder is the location for storing data when you are editing offline. To set the location of the local drafts folder, in Visio, on the Tools menu, click Options and then, on the General tab, click Service Options. The Service Options dialog box appears, as shown in Figure 4.

Figure 4. The Service Options dialog box

Viewing a SharePoint Task List as a Visio PivotDiagram

When you create a SharePoint site, several types of lists are created for you. These default lists include a discussion board and a calendar list. You can customize the default lists in many ways, or you can create custom lists with columns that you choose.

Lists can also take advantage of e-mail features, if incoming or outgoing e-mail is enabled on your site. You can set up some lists, such as calendars, announcements, blogs, and discussion boards, so that people can add content to them by sending e-mail messages. You can set up other lists, such as tasks and issue-tracking lists, to send e-mail messages to people when items are assigned to them.

Lists can include many types of data, ranging from dates or pictures to calculations based on other columns. You can import data into Visio as PivotDiagrams, from the lists created in Windows SharePoint Services. After it is in Visio, you can pivot the data on any data column. For example, you can easily pivot on the Checked Out To column to quickly understand who has files checked out, how many files are checked out, and which files are checked out.

In the following example, we display a task list created on a SharePoint site in Visio as a PivotDiagram. We then pivot the data to check the completion status of the tasks and to check who is responsible for each task.

SharePoint Server 2007 includes a command on the Actions menu of the task list to create a Visio PivotDiagram from a list of SharePoint tasks. After the data is in Visio, the full features of Visio pivoting tools are available for viewing the data.

Figure 5 shows the task data as it appears on a SharePoint site .

Figure 5. Deck building project task list from Windows SharePoint Services

To create a Visio PivotDiagram from this data, on the SharePoint site, on the Actions menu, click Create Visio Diagram. Visio is launched, if it is not already running, and a multipage PivotDiagram is created in Visio. The first page of the resulting Visio drawing is shown in Figure 6. It shows the tasks by Status: Completed, In Progress, and Not Started.

Figure 6. PivotDiagram in Visio, created from a SharePoint site

Notice the tabbed pages in the Visio window. Two additional views are automatically created: Workload Distribution and Incomplete Tasks by Assigned To. These views are shown in Figure 7 and Figure 8.

The Workload Distribution diagram, shown in Figure 7, shows the task data pivoted by Assigned To and then by Status; we can easily see the status of each worker's tasks.

Figure 7. The Workload Distribution view

The Incomplete Tasks by Assigned To view, shown in Figure 8, is similar to the Workload Distribution view except that now we are looking at the tasks by Assigned To and then by Status, so we can identify all incomplete tasks by worker.

Figure 8. Incomplete tasks by Assigned To

A Visio diagram created from a SharePoint task list automatically presents three different views of data, but these are not the only views available to you. Diagrams are completely dynamic. You can create other views by choosing a pivot node and pivoting on a different category.

Viewing a SharePoint Task List as a Visio Flow Diagram

You can quickly import and display data directly on your Visio shapes. The first step is to connect to the data source and import the data into your drawing. The second step is to link the imported data to shapes. See the article Integrating Visio 2007: Introduction to Integrating Visio with Other Microsoft Programs for simple examples of importing data and linking it to shapes in a Visio diagram.

In the following example, we start from a task list created on a SharePoint site. The tasks define the elements of a training course development project. An alternative view of this data that shows the logical sequence of the steps as a flow diagram would be very useful. You can accomplish this easily by importing the task data into Visio and associating that data to shapes in a Visio diagram.

Figure 9 shows a screen shot from the SharePoint site where the tasks are initially defined.

Figure 9. Task list as defined on a SharePoint site

To create a Visio flow diagram from this task list, we must first capture the data in the Visio environment:

1. In Visio, on the File menu, click New, select Flowchart, and then select Cross Functional Flowchart.

2. After the drawing window is established, on the Data menu, clickLink Data to Shapes. The Data Selector dialog box appears, as shown in Figure 10.

   Figure 10. The Data Selector dialog box

   

3. Select Microsoft Windows SharePoint Services list, and then follow the prompts to identify the SharePoint task list shown in Figure 9.

   The data from the list is added to the Visio External Data window, as shown in Figure 11. Initially, all of the fields of data associated with these tasks are displayed in the External Data window.

   Figure 11. The Visio External Data window

   

4. You can control which fields appear and the order in which they appear. Right-click within the External Data window, and then click Column Settings. The Columns Settings dialog box appears, as shown in Figure 12. Choose the columns to be displayed and the desired order, and then click OK to close the dialog box.

   Figure 12. The Column Settings dialog box

   

Now that the data is in Visio, you can complete the flow diagram by completing the following steps:

1. Add Swimlane shapes and set text into the shapes.

2. Add a Process shape to the drawing.

3. Select a row of data in the External Data window, and then drag data from this row onto the shape. This associates the row of data with this shape.

4. Repeat adding shapes and associating rows of data until all of the desired data is associated with shapes in the drawing. (You do not need to associate all the rows of data.)

5. Add connectors.

At this point, the basic drawing is complete and the data is associated with diagram shapes. Now, suppose that the data is updated on the SharePoint site and you want to update the drawing. This is a one-step process! In Visio, right-click within the External Data window, and then select Refresh Data. The data in the External Data window is updated and the drawing is updated because the shapes are associated; they are updated at the same time.

To dress up the drawing a bit, add a theme to format the shapes and add associated data graphics to the shapes to display the task Title field and %Complete field as data on the shapes.

The final result is shown in Figure 13.

Figure 13. Final drawing showing Visio data connected to tasks imported from a SharePoint site

Viewing a SharePoint Calendar List as a Visio Diagram

In another example, data created as a SharePoint calendar list is linked to a Visio drawing and the calendar items are displayed as a timeline. Within a SharePoint site, you can change views on the calendar data. There is the normal calendar view, but in the calendar view it is difficult to see items spread over a long period of time. Figure 14 shows an image from a SharePoint list of calendar items in a datasheet view. Now we can see all of the items easily, but a graphical representation would enable you to more easily see the amount of time that exists between each item.

Figure 14. Calendar data in SharePoint datasheet view

To understand how to link to the SharePoint calendar data in Visio, we explore in greater detail the tools available in Visio for matching external data to Visio shapes. Sometimes the names of the Shape Data fields in Visio shapes do not match perfectly the data being imported. This example shows how to make that association without reprogramming the shapes.

The objective of this example is to link to SharePoint calendar data from Visio and integrate the calendar data into a Visio timeline drawing by using existing Visio timeline shapes. This example requires no programming. However, you need to make some adjustments to the data column header names that contain the SharePoint calendar data to match them with the shape data fields in the Visio timeline shapes. The milestone timeline shapes have predefined Shape Data fields: Task Name and Start. When the Task Name is set, its data is automatically displayed as text on the shape. The Shape Data for Start is used to automatically position the shape along a cylindrical timeline.

To force matches between the data fields

1. Start by creating a Visio timeline drawing. In Visio, on the File menu, click New, select Schedule, and then select Timeline.

2. Next bring the SharePoint data into the Visio drawing environment. On the Data menu, click LinkDatatoShapes. The Data Selector Wizard appears.

   Figure 15. The Data Selector Wizard in Visio

   

3. In the Data Selector Wizard, select Microsoft Windows SharePoint Services List. The Data Selector dialog box, as shown in Figure 15, appears. Select or type the path to the SharePoint site containing calendar data. Click Next, select Calendar, and then click Finish. The data is imported into the Visio External Data window, as shown in Figure 16.

   Figure 16. Data imported into the Visio External Data window

   

4. From the Timeline Shapes stencil, add a Cylindrical timeline shape to the drawing page. The Configure Timeline dialog box appears, as shown in Figure 17. Configure the start and end dates based on the data being linked to.

   Figure 17. Configure the start and end dates for the timeline shape

   

The next steps involve adding milestone shapes to the Visio drawing and linking the rows of data to the shapes.

Drag a Cylindrical milestone shape into the drawing. Notice that it automatically displays a date and text. The values are taken from the Shape Data fields Start and Task Name. Verify this by displaying the Shape Data window, selecting the shape, and experimenting with changing the values in these Shape Data fields.

The key to displaying the start date and the description from the SharePoint list item on the milestone shape is to have the SharePoint data take over the values in the milestone shape's Shape Data fields.

Whenever data is linked to a Visio shape, new Shape Data fields are added to the shape for each field within the data—unless a Shape Data field of the same name already exists. You can easily force a match with the milestone shape's Shape Data fields by changing the column headings in the Visio External Data window to exactly match the names in the Shape Data window.

In the Visio External Data window:

1. Right-click within the window, and then click Column Settings.

2. Select the column Start Time, and then click Rename. Change the name to Start.

3. Select the column Title, and then click Rename. Change the name to Task Name.

   Figure 18 is a view of the External Data window after these changes have been made.

   Figure 18. The External Data window after modifications to the column names

   

   Note

   You can turn off the display of unnecessary columns by removing the check mark from the column name.

To link all rows in the External Data window to shapes in the Visio drawing

1. In the Timeline Shapes stencil, select the Cylindrical milestone shape.

2. In the External Data window, select all of the rows, and then drag the selection from the External Data window into the Visio drawing. Because the Cylindrical milestone shape is the current selection in the stencil window, an instance of the Cylindrical milestone shape is added for each row of data.

The final result is shown in Figure 19. We have added a background page and a drawing title to dress up the drawing a bit.

Figure 19. Final linked drawing

Notice the Shape Data window for the selected shape. It shows the same data that is displayed in the External Data window for Start and Task Name, and this same data is shown as text on the shape in the drawing.

You can link to existing Visio shapes, even if they already contain text fields for displaying Shape Data. Some investigating might be necessary to determine what information is displayed on the shape. In this case, we modified the SharePoint Start Time data to be named Start. This allowed the existing Visio Cylindrical milestone shape to display the proper date without modification. Similarly, we changed the SharePoint Title field to Task Name.

Techniques for Sharing Visio Data from a SharePoint Site

A common issue after you create a library of Visio drawings is how to share them with others. Some common questions include: Can my drawings be displayed from a server? Do my teammates and partners need to install Visio? Can my teammates and partners make changes to my drawings? The following table provides some options for you to consider and the pros and cons of each approach.

Table 1. Objectives, approaches, and requirements

Objective	Approach	Visio Client Bits Required
Viewing only—updating Visio data is not required.	Post static Visio drawings to a SharePoint list. With the Visio Viewer, the drawings can be viewed inside Internet Explorer. The Visio Viewer renders the drawing in the browser window. You can then pan and zoom in the drawing window by using toolbar buttons, keyboard shortcuts, or menu items from the shortcut menu. Also, you can see properties on any shape by opening the Properties and Settings dialog box and then selecting a shape. Some rendering and display settings are available on the Display Settings tab of the Properties and Settings dialog box. Additionally, you can set drawing-layer visibility and colors from the Layer Settings tab, and you can set annotation visibility and colors from the Markup Settings tab.	Only the Visio Viewer is required.
Viewing only—updating Visio data is not required.	Create Web pages by using the Visio Save as Web feature. This approach does not require the Visio viewer. However, the view of the drawing is less robust. You can pan and zoom and navigate between pages. You can also see Shape Data by using this approach.	None
Limited update capability is required.	Post the drawing to the server in XML format (as a .vdx file). With your own application, modify the .vdx file with your desired changes. You are essentially replicating functionality that exists in Visio, so this might not make sense for many types of changes. One change that is reasonably straightforward is to modify Shape Data. After the .vdx file is saved with the changes, the text in the Shape Data window is updated when the drawing is rendered with the Visio viewer. However, because of limitations of the viewer, any data graphics that are driven from this data are not updated.	Only the Visio viewer is required.
Limited update capability is required.	Use the Save As Web command in Visio and post the HTML or XML that Save as Web creates to the server. This is slightly more difficult than working with the .vdx file directly, but it can be done. Modifying Shape Data is relatively straightforward.	None
Full update capability is required.	Display Visio drawings inside an ActiveX control embedded on an HTML page. This approach allows the use of Visio as a component within a larger application and requires some development work. One drawback is that the control is not marked Safe for Scripting, which means that for this to work the host site must be added to Trusted sites for the user's browser.	Full Visio client is required.
Full update capability is required.	Update the .vdx file format on the server and display it in an ActiveX control. Here we have the server make the change to the .vdx file. The advantage over Option 3 is that the server, after updating the XML data, opens the drawing inside the control and then updates the data graphics dynamically.	Full Visio client is required.
Full update capability is required.	Post Visio drawings to a SharePoint list. Use SharePoint file check-out and check-in features to manage document access and control the issue of multiple users trying to make changes to the same document at the same time.	Full Visio client is required.

Note
Running Visio on a server is not supported. Visio is not licensed for that approach.

Conclusion

Using Visio 2007 and SharePoint Products and Technologies together, teams can easily collaborate on their Visio drawings by saving the drawings to a SharePoint document library. You can modify drawings in a document library from Visio or from a SharePoint site. SharePoint sites provide document check-in and check-out tools, which helps teams to manage changes to the drawings and keeps a revision record.

About the Author

Since 1997, Visimation has helped companies improve their productivity by providing visual software tools to ease business and technical tasks, and by offering a broad range of consulting services focusing on Microsoft Visio as a platform for rapid development of efficient Automation programs.

Additional Resources

For additional information about integrating SharePoint Products and Technologies and Visio, see the following resources:

• Working with SharePoint Lists, Part 1

• Working with SharePoint Lists, Part 2

• Displaying SharePoint Lists in Web Parts

• Plan Document Libraries (Windows SharePoint Services)

• Visio Developer Portal

For more information about Visio 2007 integration, see the following articles:

• Integrating Microsoft Office Visio 2003 with Microsoft SharePoint Products and Technologies

• Integrating Visio 2007: Introduction to Integrating Visio with Other Microsoft Programs

• Integrating Visio 2007 and Access 2007

• Integrating Visio 2007 and Active Directory

• Integrating Visio 2007 and Excel 2007

• Integrating Visio 2007 and Microsoft SQL Server 2005

• Integrating Visio 2007 and MOM, Exchange, and Reporting Services

• Integrating Visio 2007 and Project 2007