Adding image parameter in UI type

This task explains how to add an image parameter to the UI type and how the image is loaded in each node when container is loaded on the view canvas.

1. Follow steps 1 - 5 in Creating a UI type from scratch.
   If you are creating a new UI type from scratch, start with step 1. Otherwise, you can proceed with step 2 to add image parameter in the existing UI type.
2. In the Add parameter window, specify the name and value for the image parameter.
   
   The imageURL parameter is added in the UI type definition.

   

   If you want to edit the existing image parameter, click the pencil icon that is next to the parameter.

   Note: The name of the image parameter in UI type must match with the node property name that is defined in the query result.
3. On the Shapes tab, click Add… to add an image as shape type.
4. In the Add shape window, select the Image shape type from the Shape type list.
   

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

5. Enter the values for all the attributes and click Ok.
   For example,

   • X coordinate = 25
   • Y coordinate = 7
   • Width = 25
   • Height = 25
   • Image URL = ${imageURL}
     Note: The Image URL attribute also supports the hardcoded URL value.

   

   When you add an imageURL parameter to the UI type and enter a value such as ${imageURL}, the imageURL parameter value gets replaced. It can be any value such as URL. The image that is defined on the Shapes tab is loaded based on the defined shape and visible for eachnode when the container is loaded on the view canvas.

   Important: To view the defined image when a container is loaded, you must add or update an image as a shape in the UI type definition.

   For example, you can either add an image and enter values as ${imageURL} or update the existing image value as ${imageURL}.

Results

The defined image is visible on each node when container is loaded on the view canvas.