Custom components

Custom components allows applications to use custom code to drive different parts of the common-properties user interface. For some panels and controls it might be necessary to listen to different types of redux state changes to cause the panel/control to rerender.

Overview
Custom panels
Custom controls
Custom condition operators

Overview

Here is an example of a textfield listening to 3 state changes:

import { connect } from "react-redux";

// ... application code

render() {
  const value = this.props.value; // value passed by redux as a property

  // ... rest of component render code

Custom panels

Custom panels allow applications to create their own panels and controls that can live in the same dialogs as common-property panels and controls.

Custom panel interface

// Returns the 'id' for the group defined in uihints
static id()

constructor(parameters, controller, data)

// Returns the content users want to display
renderPanel()

parameters - String array of parameters set under the customPanel group in uihints
controller - See here for API information.
data - Optional parameter. Returns values stored in data attribute of a group customPanel.
renderPanel() - Called on all Redux store changes:
- property value changes (property APIs)
- state changes (state APIs)
- schema changes (schema APIs)
- row selection changes (selection APIs)
- messages changes (message APIs)

Custom react components

Example

renderPanel() {
 const controlId = this.parameters[0];
 return (
  <CustomCtrlToggle
   key={controlId}
   propertyId={name: controlId}
   controller={this.controller}
  />
 );

https://github.com/elyra-ai/canvas/tree/master/canvas_modules/harness/src/client/components/custom-panels

Custom Controls

Custom controls allow applications to create their own controls that can live in the same dialogs as common-property panels and controls.

Custom control interface

// Returns the 'custom_control_id' for the parameter defined in uihints
static id()

constructor(propertyId, controller, data, tableInfo)

// Returns the content users want to display
renderControl()

propertyId - See propertyId for definition.
controller - See here for API information.
data - Returns values stored in data attribute of a parameter in uihints.
tableInfo - Set when custom control is a cell in a table.
- table (boolean) Set to true when in a table cell
- editStyle (string) Valid values are “summary” and “inline”. “summary” is set when the control will display either below the table (“on_panel”) or in a “subpanel”. This allows the custom control to display a summary value in the cell and something else for the custom control.
renderControl() - Called on all Redux store changes:
- property value changes (property APIs)
- state changes (state APIs)
- schema changes (schema APIs)
- row selection changes (selection APIs)
- messages changes (message APIs)

Custom react components

Example

renderControl() {
 return (
  <CustomCtrlToggle
   key={controlId}
   propertyId={this.propertyId}
   controller={this.controller}
  />
 );
}

https://github.com/elyra-ai/canvas/tree/master/canvas_modules/harness/src/client/components/custom-controls

Custom condition operators

Custom condition operators allow users to create their own operators that can then be used for enablement, visibility, validation, and enum filtering. The condition operators should always return a boolean value.

Custom operator interface

/**
* This is the key used to determine if the operator should be ran.  Maps to the `op` defined in the
* `condition` in uihints
* @return string
*/
function op()

/**
* @param see below

paramInfo (object) - parameter_ref set in the condition in uihints
- control (object) - contains information about the control.
- value (any) - current property value
param2Info (object) - parameter_2_ref set in the condition in uihints. See paramInfo for object info
value - value set in the condition in uihints. If no value specific this will be undefined
controller - See here for API information.

Example 1

function op() {
  return "customMax";
}

function evaluate(paramInfo, param2Info, value, controller) {
  const supportedControls = ["numberfield"];
  if (supportedControls.indexOf(paramInfo.control.controlType) >= 0) {
    return paramInfo.value < value;
  }

Example 2

{
  "evaluate": {
    "condition": {
      "parameter_ref": "custom_op_num",
      "op": "customMax",
      "value": 100
    }
  }
}

https://github.com/elyra-ai/canvas/tree/master/canvas_modules/harness/src/client/custom/condition-ops https://github.com/elyra-ai/canvas/tree/master/canvas_modules/common-canvas/src/common-properties/ui-conditions/condition-ops

Common Properties: Conditions

Common Properties: Controller