Basic Customization > User Interface Customization > Presenting Information in the UI > Creating Custom Graphical Representations > Procedure – Creating a Simple Custom Graphical Representation
  
Procedure – Creating a Simple Custom Graphical Representation
To illustrate how to create a new custom graphical representation, create a new “Multi State Icon Component”
The out-of-the-box “Traffic Light” graphical component (discussed in Reference) is an example of a Multi State Icon Component. It is possible to easily create other custom graphical components that follow this model. For example, a customer could create a traffic light type component with more states, or they could create a new “Rain or Shine” graphical component. This describes how to create the new “Rain or Shine” component next.
Create the “Rain or Shine” Custom Graphical Representation class
Your custom component class should extend the provided MultiStateIconComponent class and define an implementation of getIconComponent(). Typically this class will also define an enumeration that contains the allowed values and images to be rendered.
Your “Rain or Shine” component might look like this:
public class RainOrShineComponent extends MultiStateIconComponent {

public enum RainOrShineEnum {
// Maps an integer to a specific .gif graphical representation
// All possible states supported are listed here
RAIN(0, "com/mycompany/images/rain.gif", "Rain"),
SHINE(1, "com/mycompany/images/sunshine.gif", "Shine");

private final int key;
private final String image;
private final String tooltip;

private RainOrShineEnum(int key, String image, String tooltip) {
this.key = key;
this.image = image;
this.tooltip = tooltip;
}

@Override
public IconComponent getIconComponent() {
// create the icon component using the correct image path
final IconComponent component = new IconComponent(image);
// set the tooltip
component.setTooltip(tooltip);
return component;
}

@Override
public static RainOrShineEnum getElement(int key) throws WTException {
for (RainOrShineEnum tls : values()) {
if (key == tls.key) {
return tls;
}
}
LOGGER.error("Undefined RainOrShineState: " + key);
LOGGER.error("Change the formula to return one of the
following states: 0, 1");
throw new WTException("Undefined RainOrShineState: " + key);
}
}

@Override
public IconComponent getIconComponent(int key) throws WTException {
return RainOrShineEnum.getElement(key).getIconComponent();
}
}
Add an Entry to the Enumeration of Graphical Representations
Use the Type and Attribute Management utility to add an entry to the enumeration of graphical representations. The enumeration is named “Graphical Attribute Representations” and is in the system-level organizer named “PTC Enumerations”. Remember the internal name of your entry. It will be used in the next step. For this example, assume “rainOrShine” as the internal name of the new entry.
Create the xconf mapping for the component
Add an xconf entry that maps the internal name of your graphical representation’s enumeration entry to the custom “RainOrShineComponent” class you created above. For the rain or shine component the new entry might look like this. Note the selector must match the internal name of the enumeration entry in the previous section and the serviceClass must match the fully-qualified name of your custom component class.
<Service name=
"com.ptc.core.lwc.common.graphicalatts.GraphicalAttRepresentationHandler">
<Option serviceClass="com.mycompany.RainOrShineComponent" requestor="null"
selector="rainOrShine" />
</Service>
Once you have updated the xconf file, you need to propagate it to the property file by running XConfManager in a Windchill shell: “xconfmanager -pF” and then restarting the Method Server.
Testing
1. First create a new calculated attribute in the Type and Attribute Management utility (maybe on the Document or Part type).
2. Then, on this attribute, set the “Graphical Representation” property to “Rain Or Shine”, and set the formula to 0 or 1.
3. Save your changes.
4. Navigate to an instance of this type in Windchill (or create a new instance).
Whenever this attribute appears in “view” mode in Windchill it is displayed as the “rain.gif “or “sunshine.gif” image!