Editing the Save As Web details table

Spotted another Save As Web question today that I thought I'd have a go at. The question basically asks how you can edit some of the default values in the web page's details table...

I'm not going to go into the Save As Web Page file structure as I've covered that in two previous posts:

....but the file we're after for this task is the frameset.js.

Table construction

When you Ctrl-click on a shape a string of html is constructed by the above JavaScript file, representing the details table, and this is added to the appropriate frame. The string building handled by a specific function named CreatePropTable and it's here that you can edit both the type of table that's built and the values that get added.

Changing column headings

By default the column headings are Label and Value. To change the these, open frameset.js in a text editor, such as Notepad, and search for 'function CreatePropTable'. About three lines down you'll see where the table headings are constructed and you can edit these as you like.

Adding columns

You're not just restricted to editing what's there - you could, for example, add a new column, perhaps to take an index. To do this you just need to add another column in the same line as above and then the values for the rows as per the image below.

The CreatePropTable function is really just a loop that runs through a particular shape's Shape Data (custom properties) and writes the values out in html. The Shape Data is pulled from an XML file named data.xml, but unfortunately this only contains the property name and its value. This means that if you wanted to add a further columns with actual Shape Data you'd have to ensure that you had some method of splitting the Shape Data string, perhaps in a similar manner to my earlier Save As Web links post.

Changing the table heading

So that's the table itself, but what about the heading above it?

The heading is made up of two parts: a fixed string ("Shape name:") and the selected shape's name. This string is built in the FillPropPane function, so search for 'function FillPropPane' and then do one of the following:

1) To remove the heading completely - add comment markers (/* */) around the If statement below, which will prevent the code from being executed:

2) To alter the fixed string - search for 'var strShape' and change its value as you like.

Of course you can add any logic you like within the If statement to build up your own custom string and we'll have a go at some extra logic next.

Conditional formatting

So finally, how about changing the format of the table depending on the data that it contains. For example, suppose you wanted to highlight the Status value if it was anything other than 'OK'.

First of all we need to add a css rule that takes the new format that we want to apply. The CreatePropTable function already adds a css class named propViewerTD so we can just rename this if a particular condition is met.

Here's a walkthrough:

Open the css file (the default is named visio.css) and search for 'propViewerTD'.
Copy and paste the css rule and rename it propViewerTDAlert as below:
Change the color value to #FF0000 (this is a Hex RGB value of red). Save the and close the file.
Open frameset.js and search for 'if (strLabelText.length > 0)' to find the correct section of code.
Select the oPropValue = propColl.... line and move this up as per the image below.
Add the blue highlighted code
Delete the second strCPHTML += ....line also as per the image below.
Save and close the file.

What the above code is doing is this: If the label for the current custom property equals "Status" and its value is not "OK" then add table data (TD) with our propViewerTDAlert css styling, otherwise add table data with normal propViewerTD styling.

The results can be seen below:

This might seem like a lot of work, but you can always save the css and JavaScript files and reuse them with subsequent Save As Web output.