Do you have shapes that contain multiple colors that you’d like to easily change?

Wouldn’t it be neat to be able to specify those colors in Shape Data fields, along with other parameters for the shape?

Visio’s Shape Data fields don’t directly support colors, but I’ve come up with a workaround. You can read how I did it, or just get the download and re-use what I’ve already built!

If Only I Could Pick Colors in Shape Data Fields!

I wanted to allow users to pick colors for various parts of shapes at the same time that they specify other values: namely when they are editing Shape Data fields.

Previously, I had bastardized the foreground and background colors, and even shadow colors to allow users to benefit from built-in color picking interfaces. See Sankey Diagram Shapes for Visio, and Automatic Chevron Process Shape for examples of this. It works, but it isn’t immediately obvious to the user.

Other times, you have to expect user to sub-select sub-shapes, then format them individually. This can be annoying, because they might not know how to sub-select. Also, if your shape has data fields anyway, why not set all variables in one place?

Color-picking in the Shape Data window seems a natural thing to do. After all, Visio allows you to define fancy data types like dates:

This gives you a nice, rich “picker” control like this calendar:

So why not allow color to be one of the available Shape Data types?

Heck, even ConceptDraw allows you to define color as a Custom Property data type:

Sure, this drop-down isn’t as elegant as a color picker might be, but this gets the job done! (And Yes, I’m trying to provoke the Visio team in Redmond, if you haven’t noticed.)

Workaround: Choose Colors by Name

Since Visio is so customizable, you find yourself pushing it all the time. And when you push enough, you end up against a wall, such as this one, with “no color picker shape data type” spray painted all over it. But that same customizability allows you to come up with workarounds, time and time again.

This time, the next best thing was to create a drop-down list of named colors.

While visual pickers are nice, text drop-downs offer the consolation that you can quickly navigate them by typing the first letter of the color you are searching for. And today’s example has 140 different colors, so that quick navigation is nice to have.

So now you just need to learn and memorize what colors like: “Dark Goldenrod”, “Lavender Blush” and  “Powder Blue” actually mean!

Building Color Lists in the ShapeSheet

To make this work, we need two lists: Names and RGB formulas. In the ShapeSheet, you can specify a color with a formula like this:

FillForegnd= RGB(139, 69, 19)

Which yields a reddish-brown color.

We can then make a list of RGB formulas, and a corresponding list of names for those colors. The LOOKUP and INDEX ShapeSheet functions can then be used to transform a name into a color-formula.

Inside of the shapes I built, the ShapeSheet has some user cells:

User.colorNames = “AliceBlue;AntiqueWhite;Aqua;…”
User.colorValues = “RGB(240,248,255);RGB(250,235,215);RGB(0,255,255);…”
User.color1 = INDEX( LOOKUP( Prop.color1, User.colorNames ), User.colorValues )

The first two cells are self-explanatory. User.colors, however, is a bit more complicated.

You’ll notice that it references a Shape Data field called Prop.color1.This contains the value that is selected by the user in the Shape Data window. Once we have a name, we find it’s position in the name list using LOOKUP. Then we grab the RGB formula from the other list using that position as an argument to INDEX.

Prop.color1’s important cells look like this:

Prop.Color.Type = 1 …fixed list
Prop.Color.Format = User.colorNames
Prop.Color.Value = INDEX( 139, Prop.color1.Format )

Note that Prop.Color.Format could just have easily contained the full list of names. But I put it in User.colorNames, so that it would be available for multiple fields. More on that later.

How to Get a Big List of Colors

I actually came to the idea of using color lists while working on another project, in which I was coding in C#. When you use the .NET framework, you can choose colors from built-in set, defined in the System.Drawing namespace.

I wrote a small procedure to extract all of those built-in colors, and build two lists at the same time: one for the color names, and one for the RGB ShapeSheet formulas. Programmers might be interested in this snippet, non-coders can skip right over it:

private void _dumpBuiltInColorInfo()
{
 // Collection to store the names of the colors,
 // and the RGB values:
 List colorNames = new List();
 List colorValues = new List();

 // Use reflection to analyze the System.Drawing.Color
 PropertyInfo[] piItems = typeof(System.Drawing.Color).GetProperties();

 // Loop through the items in the properties collection:
 foreach (PropertyInfo pItem in piItems)
 {
 Type t = pItem.PropertyType;

 if (t == typeof(System.Drawing.Color))
 {
 // Get the color object:
 Color c = (Color)pItem.GetValue(null, null);

 // Add the name to the names:
 colorNames.Add(c.Name);

 // Add a Visio-compatible color formula to the values:
 string rgbFormula = "RGB(" + c.R + "," + c.G + "," + c.B + ")";
 colorValues.Add(rgbFormula);
 }
 }

 // Dump a semi-colon-separated list of color names:
 Console.WriteLine(string.Join(";", colorNames.ToArray()));

 // Dump a semi-colon-separated list of RGB formulas:
 Console.WriteLine(string.Join(";", colorValues.ToArray()));

 // Copy the Output for use in a Visio shape's ShapeSheet!
}

Specifying Lots of Colors Using Shape Data Fields

To test it out, I built a shape that allows you to pick four different colors via Shape Data fields. It looks like this:

This shape has the cells User.colorNames and User.colorValues that we discussed before. But in order to simplify things a bit, I added another cell that defines a custom ShapeSheet function:

User.colorFunction = INDEX( LOOKUP( ARG(“chosenColorName”), User.colorNames), User.colorValues )

This allows me to define the logic for looking-up and indexing color names and color values  in one central place. I can then re-use it multiple times without proliferating copies of that logic. If you’ve read User-defined ShapeSheet Functions in Visio 2007, then you’ll understand. If not, go have a look!

To get four different color values, I invoke the custom function like this:

User.color1 = EVALCELL( User.colorFunction, “chosenColorName”, Prop.color1 )
User.color2 = EVALCELL( User.colorFunction, “chosenColorName”, Prop.color2 )
User.color3 = EVALCELL( User.colorFunction, “chosenColorName”, Prop.color3 )
User.color4 = EVALCELL( User.colorFunction, “chosenColorName”, Prop.color4 )

There are four corresponding Shape Data cells that expose the data to the user: Prop.color1, Prop.color2, Prop.color3 and Prop.color4. You can see that by using EVALCELL to call the custom function, I only have to change one argument.

If I ever modify my color-lookup-logic, I will only have to change one formula: User.colorFunction. Pretty neat, and only available in Visio 2007 or later, by the way.

Accessing the Custom Colors from Sub-shapes

If you set up these User-cells and Prop-cells in a group, then it is easy to have sub-shapes reference the values.

Suppose your group has an ID of 5. This means your group can be referenced by the name “Sheet.5″.

Sub-shapes in the group can then refer to Sheet.5!User.color1, Sheet.5!User.color2 and so on. To control the color of a sub-shape, then, you might set this formula:

FillForegnd = Sheet.5!User.color1

or even better, if you want the sub-shape to ONLY be color-able via Shape Data:

FillForegnd = GUARD(Sheet.5!User.color1)

The download contains a single shape and a group shape, both armed with big, long drop-down lists of colors, ready for you to use in your own projects, or pick apart and learn from. Have fun!

Choose Colors with Shape Data Fields (58.4 KB) - downloaded: 63

Previously, I had bastardized the foreground and background colors, and even shadow colors to allow users to benefit from built-in color picking interfaces. See Sankey Diagram Shapes for Visio, and Automatic Chevron Process Shape for examples of this. It works, but it isn’t immediately obvious to the user.

Related Posts

1. Month Math
2. How Many Fill Colors Can You Put on a Visio Shape?
3. Visio Microphone Shape
4. A Re-programmable Visio Multi-shape: The Configurable Stickman!
5. Center-sizing Smart Shapes