Basic Customization > User Interface Customization > Presenting Information in the UI > Creating Custom Graphical Representations > Solution
Solution
Create a new custom graphical representation and configure an attribute to use it.
Prerequisite Knowledge
To successfully create a new custom representation, it is helpful to have an understanding of the following subjects:
• The Additional Resources section in Referenceincludes references to more subjects.
• Graphical Attributes contains additional information on the three out-of-the-box graphical representations.
Reference contains design & implementation details on the three available out-of-the-box graphical representations. This information can be helpful when creating your custom graphical representation.
Overview of creating a custom graphical representation
The typical process for creating a custom graphical representation involves four steps:
1. Create a custom server-side component that extends the AbstractGraphicalComponent class.
2. Create the client-side JavaScript renderer for the new component.
3. Use the Type and Attribute Management utility to add a unique entry to the “Graphical Attribute Representations” enumeration for your new representation.
4. Add the xconf entry that connects your enumeration value with your component class, and run xconfmanager to propagate the change.
These steps are fully explained the following sections.
Solution Elements
The following table lists the primary classes used to implement custom graphical representations. Typically customizers need to extend AbstractGraphicalComponent, and implement GraphicalAttRepresentationHandler and GraphicalComponent.
Reference contains design & implementation details on the three available out-of-the-box graphical representations. This information can be helpful when creating your custom graphical representation.
Element
Type
Description
AbstractGraphicalComponent
Java Class
This is the abstract parent class to use for all graphical components.
GraphicalAttributeDataUtility
Java Class
This is the data utility that handles all graphical representations. It is not intended to be customized.
GraphicalAttRepresentationHandler
Java Interface
This is the interface that must be implemented to configure a new custom graphical representation. The interface defines the types of calculated attributes that the representation handles.
GraphicalComponent
Java Interface
This is the interface that must be implemented to define and configure new custom graphical component. It extends GraphicalAttRepresentationHandler.
Type and Attribute Management properties related to Graphical Attributes
Parameter
Default Value
Possible values
Required?
Description
Graphical Representation
None
Percent Complete
Progress Bar
Traffic Light
No
This property is only available on a calculated attribute. And the options vary per datatype, for example Traffic Light is only available for Integer datatype, but Progress Bar and Percent Complete are available for Integer, Real Number, and Real Number with Units
Graphical Representation Parameters
None
No
This property is also only available on calculated attributes. It allows extra parameters to be configured per graphical representation as needed. Some representations, like Traffic light and Percent Complete, don’t need extra parameters. Other options, like Progress Bar, require this property to be set to the name of an attribute which contains the parameters. (See Progress Bar section in Reference for more info)
Was this helpful?