Customizing Icons in TreeTabs

I am deploying for a customer a shiny new content management site based on Fatwire;  I am using some custom treetabs for easily access content.

I actually created a new Flex Family, let's say fpContent, then I created a new TreeTab displaying content and parent (let's say fp_C and fp_P), as follows:

Unfortunately, after I created some content, the result  is  not very pleasant:

The biggest problem for an end user is that the icons are not meaningful. It is impossible to distinguish containers (parents) from children.  If you give a look to FirstSiteII, it doesn't have this problem, since parents are rendered as folders, and children as documents.

Fortunately, you can actually customize icons for the TreeTabs. Read on.

How to customize icons for TreeTabs

In your cs webapp folder, look inside c s/Xcelerate/OMTree/TreeImages/AssetTypes.  You will see there, for each asset type rendered in a tree tab,  a corresponding image named after the type plus a ".gif" extension.

So I tried this:

$ cp Product_P.gif fp_P.gif
$ cp Document_C.gif fp_C.gif

Then I  restarted the browser (step required to clean the internal cache of the applet displaying the treetab), et voilà: you get your icons.

Nice,  isn't it?

Differentiating icons for different Flex Definitions

After this result, I became bold and decided to use different icons for different contents. Actually, since I am using a FlexFamily, I want different icons for different Flex Definitions.  This is a bit more trickier.

The biggest problem is that in a TreeTab you need to associate an icon to an asset type. But for a flex family, each content definitions is  actually a subtype!!!

The trick is:

• create a new type
• associate the subtype to type when you create the asset of that type (with the New Start Menu Entry)
• finally, you can render the type in the treetab

So, let's do it, step by step.

Create a new type for the flex famiy

In the Admin tab there is the Flex Family Maker. It  allows the creation of new types for each part of a flex family.

So select Add a New Flex Asset Type, called fpText as in the following snapshot:

Now, the fpText is a new type available for use.  First, you have now to enable the type for the site.

Go to the Site tab, and enable the new available type fpText.

WARNING. You will be offered to automatically enable 2 start menu entries. DON'T DO THIS. Disable the check boxes and carry on.

Be careful here: the Start Menu entries created when you enable the type are generic, so you can associate to that type any subtype. This is NOT what you normally want.

Create the Start Menu

Now, go on the Start Menu section in the Admin tab, click on "New Start Menu", then associate to the type the wanted subtype.

This is the relevant screen that will allow you to select the correct Flex definition:

Render the content in the TreeTab

The reason of all of this work is because  in a TreeTab you can only specify types.

Now, go on the TreeTab editor and add the type "fpText" to the types rendered by that TreeTab.

Finally you can go back to the AssetTypes folder of the applet (the one I mentioned before), and do:

$ cp Article.gif fpText.gif

Now, restart the browser and finally you can see a new shiny icon for the created new type (do you see the icon associated to "Test"?).

That's all.

Posted by msciab