Skip to content

Node properties management

Overview

Most applications enable their users to view and, if authorized, edit properties of the nodes in a flow. Typically, applications do this by displaying a properties panel linked to the node type. Since different applications have different preferences for managing properties, it is left to the application to manage the relationship between the nodes in the flow and properties display and editing.

If node properties display and editing is required, there are a number of decisions the application development team need to make:

  • How to enable a way for the user to display the properties panel
  • How to put together the UI components (checkbox, radio button, list, table, etc) needed to allow the user to view and edit the properties
  • Where to display the properties
  • Where to store properties associated with nodes in the flow

How to enable a way to show the properties panel

This can be enabled in different ways depending on the application design:

  • A properties panel could be opened when the user double-clicks on a node. In this case, the Common Canvas clickActionHandler callback function will be called.
  • Properties could be displayed based on a single click on the node. A single click would also cause the clickActionHandler callback function to be called.
  • The application design might specify that an “Edit Properties” option should be displayed in the context menu or context toolbar for the node. To do this, Common Canvas allows the application to customize the default context menu for nodes using the contextMenuHandler callback function. When the user clicks the option in the menu the editActionHandler callback function is called
  • Some combination of the above

How to put together the UI components

This can be done in a couple of ways:

  • Write your own React object using components from IBM’s Carbon library to present the properties to the user for editing
  • Use the Common Properties components of Elyra Canvas. The application provides a JSON document to <CommonProperties> that describes how the properties should be presented. Common Properties will then construct the appropriate Carbon components, and associated code, to present the properties to the user.

Where to display the properties

The properties UI can be displayed to the user in a number of ways:

  • Typically applications show the properties in a right-side flyout. Common Canvas provides a right-side flyout panel which, by default, is empty. The application can display the properties for the node in the right flyout by specifying a JSX expression to the rightFlyoutContent prop of Common Canvas. The JSX expression could specify a <CommonProperties> react object. The application can also show and hide the flyout by setting the showRightFlyout boolean prop of Common Canvas.
  • The application can display its own dialog over the top of the canvas to show the properties.

Where to store properties associated with nodes in the flow

The application can store properties data anywhere, depending on its architecture. Options include:

  • Incorporating the data into the pipeline flow JSON object/document for simultaneous saving.
  • Storing data in the application’s own repository, allowing for separate management of properties and flow data.