UI types in ENI

Edit online

You can use UI types in IBM® Engineering Lifecycle Optimization - Engineering Insights (ENI), and change appearance of an artifact.

About this task

ENI provides UI types to format a node in the view and the formatting is applicable to all nodes in a container. UI type includes definitions that contain different properties such as height, fill color, title, summary, shape. You can use these properties to change the appearance of the nodes. Each node has a UI type that is associated with it.

ENI supports 16 system UI types. You can customize existing system UI types and create a new UI type from exiting UI types or from scratch. UI type definition provides conditional parameter to change the appearance of the nodes when the represented artifacts meet defined conditions. New UI types are applicable to all nodes. Following are the methods to use UI type:
  1. Using predefined or system UI type
  2. Creating a new UI type based on existing UI type
  3. Creating a new UI type from scratch
Remember:
  • You must define the uri parameter and its value ${uri} to see the required result.
  • The uri parameter is a link of the artifact. According to the artifact type, the uri parameter shows a value in the UI type definition. If you edit the value, the container fails to load, and you might not get required result.

Before you begin

  1. Create a view and name it as UI Types.
  2. Drag a system artifact element onto the view canvas.
For more information, see Creating a Engineering Insights view.

Using predefined or system UI type

Edit online

About this task

You can use the predefined UI type to format a node. Based on the artifact type, a node consists of a predefined UI type that is assigned to it. UI types are available in the Nodes dialog box.

Procedure

  1. Right-click the artifact in the view, and click Edit Node. The Nodes dialog box opens.
  2. On the UI Type tab, click the UI Type list. A list of available UI types is displayed.
  3. Select the UI type from the UI Type list. The UI type definition with parameters is displayed.
  4. Click the pencil icon that is next to the required parameter to edit the value, and click OK.
    Important: You can change the parameters values in the predefined UI type definition. You cannot add or delete the parameter from the predefined UI type definition.

Creating a new UI type based on existing UI type

Edit online

About this task

You can use the existing UI type to create a new UI type. The existing UI type works as a base for the new UI type in which you can modify UI type definition. You can change the parameter values, add new parameters, or delete the existing parameters .

Procedure

  1. Right-click the artifact in the view, and click Edit Node. The Nodes dialog box opens.
  2. On the UI Type tab, click the pencil icon that is next to the UI Type list. The UI Type dialog box opens.
  3. From the UI type list, select the UI type to create a new UI type.
  4. Click the Duplicate icon to create a copy of the selected UI type.duplicate_UItype
  5. In the Add New UI Type window, enter the name or ID for the new UI type, and click OK.
    The new UI type appears in the list and the definition of existing UI type is copied to the new UI type.newUItype_from_existing
  6. Change the UI type definition and the parameter values as required, and click OK.

Creating a new UI type from scratch

Edit online

About this task

When you create a new UI type from scratch, the UI type definition is blank. It is like a blank slide where you can add parameters as required and apply formatting to the nodes.

Procedure

  1. Right-click the artifact in the view, and click Edit Node. The Nodes dialog box opens.
  2. On the UI Type tab, click the pencil icon that is next to the UI Type list. The UI Type dialog box opens.
  3. Click the Add icon to create a new UI type.adding_new_UItype
  4. In the Add New UI Type window, enter the name or ID for the new UI type, and click OK.
    The new UI type appears in the list. You can see blank UI type definition.newUItype_blank
  5. Click Add… to add parameter in the UI type definition as required.adding_parameter
  6. In the Add Parameter window, specify parameter name and value.adding_new_parameter
  7. On the Shapes tab, click Add… to add the required shape to the node.

    Shape defines appearance of the node in a container such as Rectangle, Ellipse, Circle.

    Important: You must define the shape and the class type when you create a new UI type from scratch.
  8. In the Add Shape window, select the shape type from the Shape Type list, edit the shape attributes, and then click OK.adding_shape

    For more information about shape type, see Shape type attributes and description.

  9. On the Advanced tab, select the class of the UI type from the Class Type list, and click OK.selecting_class
    The new UI type appears in the Nodes dialog box and shows the UI parameters that you defined.new_UItype_final