Enhance your TeamTrack Interface

In this tutorial I want to show you how you can use HTML to add pictures to your TeamTrack solutions in order to make them more interactive and colourful. A picture that uses shadowing can also add depth to your solution making it richer and more appealing.

The technique basically is made up of the following steps.

1. Make the graphic that you want to add and save it as a jpg file [e.g. ExplainImage.jpg] in the main images folder which is usually [C:\Program Files\Serena\TeamTrack\bin\images] on the server computer.
2. Add a new text field to the workflow called lblExplanationHTML. Set the type to 'Memo' and check the ‘Spans entire row on form’ checkbox. ‘Render HTML tags’ should also be checked
3. Check the ‘Access Overrideable Attributes’ box to make the ‘Default Value’ box editable and make it read only.
4. In the ‘Default Value’ box type the following
   
   

   <img src = "../tmtrack/images/ExplainImage.jpg">

5. Click the 'OK' button to save the new field
6. Edit the field again and replace the logical field name 'lblExplanationHTML' with a colon :If you add that field to any transition or state it will be visible as in the screen shot below

In a future article I'll show you how you can build complex colourful tables using HTML and scripting.