Touch support for Visio Services in Office 365
If you are an Office 365 subscriber using Visio Services then you will be pleased to hear that we have made an update to Visio Services, changing the way we handle hyperlinks and navigation for a better user experience and especially an optimized touch experience.
Single Hyperlink
If a shape contains a single hyperlink, Visio Services will navigate that hyperlink as soon as you touch the shape or click on the shape. Very easy navigation for both mouse and touch scenarios.
If you have the Shape Information pane open, the hyperlink navigation is not automatic as it is assumed that you are interested in viewing any data that is linked to the selected shape. In this case a hyperlink button is displayed so you can choose to navigate.
Also notice that the hyperlinks are listed in the Shape Information pane.
Multiple Hyperlink
If a shape contains multiple hyperlinks, you get a nice menu listing each of the hyperlinks.
This allows you to easily choose which to navigate using the mouse or touch.
Incorporate JavaScript to build a dashboard experience
If your goal is to use a Visio diagram as a portion of your dashboard in SharePoint and you intend to display additional information in a custom panel as an overlay to the shape, you should consider disabling the Hyperlink functionality and handling it yourself using your own JavaScript.
Consider this: If a shape contains a single hyperlink, Visio Services will navigate that hyperlink as soon as you touch the shape or click on the shape. However, if you are using the Visio web part on a page that contains JavaScript this behavior changes. If the Visio web part detects JavaScript on the page it assumes that you do not desire the automatic navigation in the case where a shape contains a single hyperlink and instead pops up the hyperlink panel when you touch or select a shape.
You may not like the styling of the default hyperlink panel and want to provide your own button with your own style and placement.
You may want to provide your own panel as an overlay that includes detailed information about the selected shape as well as navigation options.
You might want to use logic to determine if the hyperlinks are valid for the viewer to navigate to. Visio shapes can contain multiple hyperlinks. Sometimes these hyperlinks are used by the owner/author of the diagram for documentation purposes and are not intended for the consumer of the diagram.
…many other reasons!
To disable the default hyperlink behavior you can just check this item in the web part property dialog.
How do I build a dashboard with navigation
Attached is a collection of files that demonstrates many capabilities using Visio Services:
- Custom overlays for adding additional capabilities to selected shapes.
- Navigation via Hyperlinks using custom overlays for touch and non-touch devices.
- Communication with additional web parts, Excel Web Access web part and another Visio Web Access web part.
Included with the attached example is a library of helper functions that I use with the Visio Services API.
Enjoy!
Comments
- Anonymous
February 06, 2014
Hi!Thanks for a excellent example!When i try to run the solution hitting F5 with changing anything i got this error:0x800a1391 - Microsoft JScript runtime error: 'Sys' is undefinedon this row:Sys.Application.add_load(initDocument)Can you help me fix that?Thanks