Logo
HOW TO
Windows XP
Windows Vista
Windows 7
Windows Azure
Windows Server
Windows Phone
 
 
Windows 7

Microsoft Visio 2010 : Creating Web Pages from Visio Drawings (part 4) - Fine-tuning Web Pages and Battling Bugs - Saving a Visio Drawing as a Web Page

4/13/2014 1:46:21 AM
Getting Search to Work

The IT Asset Management and Visio’s network shapes in general have a problem that make the web search function not work properly. To get an idea of how Search Pages are intended to work, let’s create a simpler example.

Saving a Visio Drawing as a Web Page
1.
Start a new, blank drawing.

2.
Draw a circle, square, and diamond shape.

3.
Type the text circle, square, and diamond into the corresponding shapes.

4.
Give each shape a different fill color.

5.
Select all three shapes and add the Shape Data field “Color” to them.

6.
For each shape, type a descriptive name for the shape’s color into the Color Shape Data field. For example, I colored the circle, square and diamond gray, blue and black. Then I entered the values “Gray,” “Blue” and “Black” in their Color fields.

7.
Save the drawing as a web page. A browser window opens showing the exported diagram. You see something like Figure 9.

Figure 9. A simple drawing saved to web. The Details pane shows the Shape Data for the Square. A temporary arrow appears to visually highlight a search result on “Blue.”

8.
Type Circle into the field under Search Pages. Then click the green arrow or press Enter to perform the search. One search result appears below.

9.
Click the Circle item in the Search Results area. An arrow appears over the circle for three seconds, indicating the location of the shape. If the shape is off the screen, the drawing is panned to bring the shape into view.

10.
Ctrl+click the square shape. You see its Shape Data in the Details area on the left, also shown in Figure 9. You can also search on Shape Data values.

11.
Type the square’s value for Color into the Search Pages field and then press Enter. In Figure 9, a search for “Blue” results in one result: the Square shape.

12.
Click on Square in the results area. An arrow temporarily highlights the square shape.

13.
Type Color into the Search Pages field and press Enter. You see the message “No matches found in the results area.” Only Shape Data values are searched, not field names.

You can see that Search Pages is a nifty and useful feature!

If you try search with a web export of the IT Asset Management drawing, however, you encounter problems. Very few searches will be successful, even though you search for data that is in the diagram.

The problem is with the network shapes used in the diagram. At some point in history, they were assigned to layers, then these layers were removed. This left a sort of “empty layer artifact” behind that oddly causes problems with Search Pages.

You can quickly simulate this with your simple circle-square-diamond drawing if you follow these steps:

1.
Duplicate the diamond shape and leave it selected.

2.
Assign it to a layer called “Bug.”

3.
Duplicate the new diamond shape (which is on the Bug layer).

4.
Remove this diamond from the layer by unchecking Bug in the Assign to Layer dialog. Note that your drawing now has three diamond shapes. One was never on a layer, one is on the Bug layer, and one has been removed from the Bug layer.

5.
Save the drawing as a web page. The browser opens with your new creation.

6.
Type “Diamond” into the Search Pages field and press Enter. Only two results for Diamond appear, even though three shapes clearly say “Diamond.”

I tried to fix the IT Asset Management drawing by assigning all shapes to a dummy layer. This got me plenty of search results, but the highlighting arrow never appeared when I clicked a search result item. If the result was on another page, at least that page would be brought into view. So adding the layer only half-fixed the problem.

If I changed the output format to VML and assigned all the network shapes to a layer, the search worked, and the highlighting arrow appeared.

It’s sad that such bugs exist to tarnish what is a really cool web export feature. But knowing about these bugs is better than getting stuck in a loop, wondering if you have done something wrong. (I’ve done my best to point out the problems.)

If you need multiple hyperlinks in your web pages, switch the default format to VML and tell your users to use Internet Explorer. If your need search to work, try the XAML output format first. If it doesn’t work, switch to VML. If you have Visio Standard, you can’t change the export options and will have to wait for an update or some other workaround.

And lest we forget, the Go to Page, Pan & Zoom, and Details controls are bug-free and add wonderful functionality to your web pages. You get these by default, no matter which edition of Visio you have, and they work in any major browser that has the Silverlight plug-in installed.

Other -----------------
- Microsoft Visio 2010 : Sending Visio Files in Email, Saving as PDF or XPS Files
- Microsoft Visio 2010 : Introducing Data Graphics (part 2) - Creating Data Graphics,Applying Data Graphics to Shapes
- Microsoft Visio 2010 : Introducing Data Graphics (part 1) - What Is a Data Graphic?
- Microsoft Visio 2010 : Linking External Data to Shapes (part 6) - Using Link Data - Linking Data to Shapes Using Link Data
- Microsoft Visio 2010 : Linking External Data to Shapes (part 5) - Using Link Data - Preparing a Master for Link Data , Importing Data for Link Data
- Microsoft Visio 2010 : Linking External Data to Shapes (part 4) - Using the Database Wizard - Taking the Data-Linked Light Bulb Shape for a Spin
- Microsoft Visio 2010 : Linking External Data to Shapes (part 3) - Using the Database Wizard - Setting Up the Excel File as a Data Source
- Microsoft Visio 2010 : Linking External Data to Shapes (part 3) - Using the Database Wizard - Setting Up the Excel File as a Data Source
- Microsoft Visio 2010 : Linking External Data to Shapes (part 2) - Preparing the Light Bulb Shape for Data Linking
- Microsoft Visio 2010 : Linking External Data to Shapes (part 1) - Preparing the Data
 
 
REVIEW
- First look: Apple Watch

- 10 Amazing Tools You Should Be Using with Dropbox

- 3 Tips for Maintaining Your Cell Phone Battery (part 1)

- 3 Tips for Maintaining Your Cell Phone Battery (part 2)
 
VIDEO TUTORIAL
- How to create your first Swimlane Diagram or Cross-Functional Flowchart Diagram by using Microsoft Visio 2010 (Part 1)

- How to create your first Swimlane Diagram or Cross-Functional Flowchart Diagram by using Microsoft Visio 2010 (Part 2)

- How to create your first Swimlane Diagram or Cross-Functional Flowchart Diagram by using Microsoft Visio 2010 (Part 3)
 
Popular tags
Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 Adobe Indesign Adobe Flash Professional Dreamweaver Adobe Illustrator Adobe After Effects Adobe Photoshop Adobe Fireworks Adobe Flash Catalyst Corel Painter X CorelDRAW X5 CorelDraw 10 QuarkXPress 8 windows Phone 7 windows Phone 8 BlackBerry Android Ipad Iphone iOS
Popular keywords
HOW TO Swimlane in Visio Visio sort key Pen and Touch Creating groups in Windows Server Raid in Windows Server Exchange 2010 maintenance Exchange server mail enabled groups Debugging Tools Collaborating
Top 10
- Microsoft Excel : How to Use the VLookUp Function
- Fix and Tweak Graphics and Video (part 3) : How to Fix : My Screen Is Sluggish - Adjust Hardware Acceleration
- Fix and Tweak Graphics and Video (part 2) : How to Fix : Text on My Screen Is Too Small
- Fix and Tweak Graphics and Video (part 1) : How to Fix : Adjust the Resolution
- Windows Phone 8 Apps : Camera (part 4) - Adjusting Video Settings, Using the Video Light
- Windows Phone 8 Apps : Camera (part 3) - Using the Front Camera, Activating Video Mode
- Windows Phone 8 Apps : Camera (part 2) - Controlling the Camera’s Flash, Changing the Camera’s Behavior with Lenses
- Windows Phone 8 Apps : Camera (part 1) - Adjusting Photo Settings
- MDT's Client Wizard : Package Properties
- MDT's Client Wizard : Driver Properties
 
Windows XP
Windows Vista
Windows 7
Windows Azure
Windows Server
Windows Phone
2015 Camaro