diff --git a/docs/pages/03-common-canvas.md b/docs/pages/03-common-canvas.md index 4ad2b93d8a..433dbcdec4 100644 --- a/docs/pages/03-common-canvas.md +++ b/docs/pages/03-common-canvas.md @@ -100,7 +100,7 @@ To control the canvas you'll need an instance of the canvas controller. Create a ### Step 4 : Set the palette data -Next you'll need to populate the palette data. This step is optional if you don't want to use the palette and just want to display a flow (step 5) instead. +Next you'll need to populate the palette data. This step is optional if you don't want to use the palette. The palette data will specify the nodes (split into categories) that will appear in the palette. This is done by calling the canvas controller with: diff --git a/docs/pages/03.06.01-node-customization.md b/docs/pages/03.06.01-node-customization.md index 0686f0bd87..1ecd87ec72 100644 --- a/docs/pages/03.06.01-node-customization.md +++ b/docs/pages/03.06.01-node-customization.md @@ -321,7 +321,7 @@ const canvasConfig = { }; ``` -### Overriding the node layout fiels for individual nodes or groups of nodes +### Overriding the node layout fields for individual nodes or groups of nodes If you want each node, or category of nodes, to have a different layout based on some criteria you can use the [layoutHandler callback method](03.03-callbacks.md#layouthandler). When you specify this callback method to Common Canvas, it will be called for each node on the canvas, during initialization and, occasionally, at other times. diff --git a/docs/pages/03.06.02-comment-customization.md b/docs/pages/03.06.02-comment-customization.md index 673d172acd..c7996163ad 100644 --- a/docs/pages/03.06.02-comment-customization.md +++ b/docs/pages/03.06.02-comment-customization.md @@ -1,4 +1,4 @@ -# Comment Customizaiton +# Comment Customization Comments can be customized by the application in the following ways: diff --git a/docs/pages/04-common-properties.md b/docs/pages/04-common-properties.md index 8ae26df266..0b205f0c2b 100644 --- a/docs/pages/04-common-properties.md +++ b/docs/pages/04-common-properties.md @@ -35,15 +35,15 @@ Next, you'll need to populate propertiesInfo, which is a required prop, with: ```js this.propertiesInfo = { - parameterDef: this.parameterDef, // Parameter definitions/hints/conditions [Required] - appData: "{user-defined}", // User data returned in applyPropertyChanges [Optional] - additionalComponents: "{components}", // Additional component(s) to display [Optional] - messages: "[node_messages]", // Node messages array [Optional] - expressionInfo: this.expressionInfo, // Information for expression builder [Optional], - initialEditorSize: "{size}", // This value will override the value of editor_size in - // uiHints. This can have a value of "small", "medium", - // "large", or null [Optional] - id: "{id}" // Unique parameter definition ID [Optional] + parameterDef: this.parameterDef, // Required - Parameter definitions/hints/conditions + appData: "{user-defined}", // Optional - User data returned in applyPropertyChanges + additionalComponents: "{components}", // Optional - Additional component(s) to display + messages: "[node_messages]", // Optional - Node messages array + expressionInfo: this.expressionInfo, // Optional - Information for expression builde + initialEditorSize: "{size}", // Optional - This value will override the value of + // editor_size in uiHints. This can have a value of + // "small", "medium", "large", or null + id: "{id}" // Optional - Unique parameter definition ID } ``` See the Common Properties [Parameter Definition](04.01-parameter-definition.md) page for more details about 'paramDef'. @@ -61,12 +61,12 @@ The optional messages attribute can be used to set validation messages associate formData: this.formData, appData: "{user data returned back in applyPropertyChanges}", // Optional additionalComponents: "{additional control(s) to display}", // Optional - messages: "[node_messages]", // Node messages array [Optional] - expressionInfo: this.expressionInfo, // Information for expression builder [Optional] - initialEditorSize: "{size}", // This value will override the value of editor_size in - // uiHints. This can have a value of "small", "medium", - // "large", or null [Optional] - id: "{id}" // Unique parameter definition ID [Optional] + messages: "[node_messages]", // Optional - Node messages array + expressionInfo: this.expressionInfo, // Optional - Information for expression builder + initialEditorSize: "{size}", // Optional - This value will override the value of + // editor_size in uiHints. This can have a value of + // "small", "medium", "large", or null + id: "{id}" // Optional - Unique parameter definition ID } ``` See the [formData schema](https://github.com/elyra-ai/pipeline-schemas/tree/master/common-canvas/form) @@ -119,9 +119,9 @@ applyPropertiesEditing(closeEditor) ### Using CommonProperties in CommonCanvas right-flyout panel -[Common Canvas](03-common-canvas.md) has a [right-flyout panel](03-common-canvas.md#right-flyout-panel-parameters) that can render a React object. It can be used to render Common Properties in a flyout panel. +[Common Canvas](03-common-canvas.md) has a [right-flyout panel](03-common-canvas.md#right-flyout-panel-parameters) that can render a React object. It can be used to render Common Properties in the right-flyout as follows: -Create a CommonProperties object with containerType set to "Custom" and rightFlyout set to true. +Create a `` object with `containerType` set to `"Custom"` and `rightFlyout` set to `true`. ```html const rightFlyoutContent = (