Visio Insights
The official blog of the Microsoft Visio product team

Embedding a Web Drawing in a SharePoint Page

Embedding a Web Drawing in a SharePoint Page

  • Comments 4

Previously we showed how Visio Services lets you view diagrams in the browser. By default Visio Web Drawings open in their own web page for a full screen viewing experience. Visio Services also allows Visio Web Drawings to be embedded in other SharePoint pages.

Using the Visio Web Access web part you can embed either static or data-driven Visio Web Drawings in SharePoint pages adding visual flair and insights to portal pages and dashboards. By centralizing relevant information onto one page, viewers save time and can, at a glance, understand the state of their business.

Take a look below at a Supply Chain Dashboard featuring a Visio Web Access web part in the top left – in this case the data-driven visual quickly helps ground viewers in the current state of a supply chain, and its proximity to a relevant Excel chart, documents and links makes decision making and implementation easy.

image 

Embedding the Visio Web Access Web part in a SharePoint page

To embed a Web Drawing in a page, you must be a site administrator for that page with either "Contribute", "Approve", "Manage Hierarchy", "Design" or "Full Control" permissions. Given you are an administrator, adding a Web Drawing to a page is as easy as editing the page and placing a Visio Web Access web part on it. To do so, follow the steps below:

  1. Click on "Edit" tab and then hit the "Edit Page" button
  2. Click on a web part zone on the page
  3. Click on "Insert" tab and then hit the "Web Part" button
  4. Select the "Office Client Applications" category and select the "Visio Web Access" web part
  5. Press the "Add" button

At this point, an empty Visio Web Access web part should appear on your page. It looks like this:

image

To assign an existing Web Drawing to display in this Web Part follow the “Click here to open the tool pane” link, this will surface the UI see below and will switch the page into Edit mode. This is called the web part’s the tool pane.

image

Type in the URL to the Web Drawing you want to display in the text box, or better yet, use the browser button to navigate the SharePoint folder structure to find the drawing in question. Once the URL is in the input field, hit either the “Apply” or “Ok” buttons at the bottom of the configuration panel and voilà – your Web Drawing is now embedded in the page.

image

Note that you can only embed Web Drawings that are hosted within the same SharePoint farm as the site hosting the web part. Also note that Visio Services checks the permissions of page viewers before it renders a Web Drawing -- if the viewer doesn’t have at least “View” permissions, Visio Services will not render the Web Drawing.

To complete the dashboard shown at the beginning of this article, repeat the process by adding other SharePoint and Office web parts.

Further Configuring the Visio Web Access Web Part

If you look below the “Web Drawing URL” property in the tool pane (see the tool pane image above), you’ll see a host of other properties you can set to customize the Visio Web Access web part. They include: 

Property Label

What the customization does

Override the Web Drawing's default initial view using the web part's current page, pan and zoom

By default, when the web part displays a Web Drawing, it opens the page of the drawing that was open when the drawing was last saved, keeping the same zoom level and pan coordinates.

You can override this to display, by checking this box and manipulating the diagram directly in the web part; Visio Services will persist the current pan, zoom and page settings when you click “Ok” or “Apply”.

Force raster rendering

If the person viewing the Web Drawing has Silverlight 3.0 or later installed, the Web Drawing will be rendered using Silverlight.Otherwise, the Web Drawing is rendered as an image file in PNG format.

If you would prefer that the Web Part never use Silverlight, even if it is installed on the viewer’s computer, you can select this option.

Automatic Refresh Interval

If the Web Drawing is connected to an external data source, you can have the Web Part check the data source periodically to get the latest data.

Type the number of minutes you would like for the interval between data refresh attempts. Leave this at 0 (zero) if you prefer that users refresh the data manually by clicking the Refresh button on the Visio Web Access web part . Values must be integers and greater or equal to 1.

Note that while a page designer may set the automatic refresh rate to occur frequently, a high refresh rate may tax the server. The Visio Services service administration may throttle this centrally by using the “Minimum Cache Age” service setting to improve performance.

Expose the following shape data items to web part connections

If you’ve linked the Visio Web Access web part to another web part via the “Send Shape Data To” web part connection, the data fields that you specify in this box are sent to the other web part on each shape click. Make sure to separate data field names you want to send with semi-colons.

If you’re not familiar with web part connections, don’t worry… we’ll have a detailed post about them in the future.

Various options in the “Toolbar and User Interface” section

The options available in this section of the tool pane are tools that are available to the Web Drawing viewer to navigate the Web Drawing.

You can remove tools from the UI that you don’t want users to see by clearing the check box beside those items. However, users will still be able to perform some of the actions using the mouse or keyboard shortcuts. To disable functionality completely, use the options in the Web Drawing Interactivity section.

Note that un-checking the last option “Show default background” will make the web part background, which is by default gray, transparent.

Various options in the “Web Drawing Interactivity” section

Select the check boxes beside the options that you want to disable for users of the Web Part.

As with any SharePoint web part, the Visio Web Access web part inherits and will honor the settings found in the “Appearance”, “Layout” and “Advanced” sections of the web part configuration panel.

Try it out!
Try out various web part configurations to understand which configuration best suits your needs and tell us about it either by commenting on the blog or via Send a Smile.

Leave a Comment
  • Please add 2 and 2 and type the answer here:
  • Post
  • Hi,

    Thanks for this great post! I wonder that if there are some hyperlinks included in the visio web drawing, will these hyperlinks still work after using visio web access to dsplay them on SharePoint page?

    Thanks in advance.

  • Does Visio Services work on anonymous-facing sites?  

  • Really helpful post! Make sure to browse for the web drawing, copying and pasting the url did not work for me.

  • I am in need of help regarding Visio web drawings.

    I have a site and list to which I have Contribute rights. The list has an out of the box workflow associated with the list. The workflow has no external sources and does not refer to other farms.

    When I go to the list and click on an item with a workflow running, I can go to the general workflow page and can select a link to take me to the detailed workflow page, but the Visio web drawing does not appear, but instead, an error saying that I do not have permissions to view the web drawings and that I need to ask the site administrator to assign rights.

    I am the site administrator and have no idea what permissions are needed.

    I made certain that the farm and the visio service accounts have visitor permissions on the site. So far, nothing that I have tried has been successful.

    What other permissions would I need?

Page 1 of 1 (4 items)