Skip to content

The close button of property editor is displayed on top of the toolbar #2922

Description

@herleraja
Image

Use the following paramDef:

{
	"titleDefinition": {
		"title": "User task"
	},
	"current_parameters": {
		"workflowConfigStepTitle": "",
		"userTaskInboxTitle": "",
		"workflowConfigStepDescription": "",
		"userTaskInboxDescription": "",
		"formProperties": []
	},
	"parameters": [
		{
			"id": "workflowConfigStepTitle",
			"type": "string",
			"default": "",
			"required": true
		},
		{
			"id": "workflowConfigStepDescription",
			"type": "string",
			"default": "",
			"required": false
		},
		{
			"id": "inboxDisplaySequence",
			"type": "integer",
			"required": false
		},
		{
			"id": "userTaskInboxTitle",
			"type": "string",
			"default": "",
			"required": true
		},
		{
			"id": "userTaskInboxDescription",
			"type": "string",
			"default": "",
			"required": false
		},
	],
	"uihints": {
		"id": "user_task",
		"parameter_info": [
			{
				"parameter_ref": "workflowConfigStepTitle",
				"label": {
					"resource_key": "title"
				},
				"place_holder_text": {
					"resource_key": "placeholder.workflowConfigStepTitle"
				}
			},
			{
				"parameter_ref": "workflowConfigStepDescription",
				"label": {
					"resource_key": "description"
				},
				"control": "textarea",
				"place_holder_text": {
					"resource_key": "placeholder.workflowConfigStepDescription"
				}
			},
			{
				"parameter_ref": "inboxDisplaySequence",
				"label": {
					"resource_key": "displaySequence"
				},
				"control": "readonly",
				"helper_text": {
					"resource_key": "helperText.inboxDisplaySequence"
				}
			},
			{
				"parameter_ref": "userTaskInboxTitle",
				"label": {
					"resource_key": "title"
				},
				"place_holder_text": {
					"resource_key": "placeholder.userTaskInboxTitle"
				}
			},
			{
				"parameter_ref": "userTaskInboxDescription",
				"label": {
					"resource_key": "description"
				},
				"control": "textarea",
				"place_holder_text": {
					"resource_key": "placeholder.userTaskInboxDescription"
				}
			}
		],
		"group_info": [
			{
				"id": "workFlowConfiguration",
				"label": {
					"resource_key": "workFlowConfiguration"
				},
				"parameter_refs": [
					"workflowConfigStepTitle",
					"workflowConfigStepDescription",
					"inboxDisplaySequence"
				]
			},
			{
				"id": "taskInbox",
				"label": {
					"resource_key": "taskInbox"
				},
				"parameter_refs": [
					"userTaskInboxTitle",
					"userTaskInboxDescription"
				]
			}
		],
		"label": {
			"resource_key": "userTask"
		},
		"description": {
			"resource_key": "userTaskDescription"
		},
		"help": {
			"id": "link_for_description",
			"data": {
				"resource_key": "userTaskDescription",
				"url": "provideProperUrl"
			}
		}
	},
	"conditions": [
		{
			"validation": {
				"fail_message": {
					"type": "error",
					"focus_parameter_ref": "workflowConfigStepTitle",
					"message": {
						"resource_key": "error.workflowConfigStepTitleRequired"
					}
				},
				"evaluate": {
					"condition": {
						"parameter_ref": "workflowConfigStepTitle",
						"op": "isNotEmpty"
					}
				}
			}
		},
		{
			"validation": {
				"fail_message": {
					"type": "error",
					"focus_parameter_ref": "userTaskInboxTitle",
					"message": {
						"resource_key": "error.userTaskInboxTitleRequired"
					}
				},
				"evaluate": {
					"condition": {
						"parameter_ref": "userTaskInboxTitle",
						"op": "isNotEmpty"
					}
				}
			}
		},
		{
			"validation": {
				"fail_message": {
					"type": "error",
					"focus_parameter_ref": "userTaskInboxTitle",
					"message": {
						"resource_key": "error.userTaskInboxTitleInvalidVariables"
					}
				},
				"evaluate": {
					"and": [
						{
							"condition": {
								"parameter_ref": "userTaskInboxTitle",
								"op": "isNotEmpty"
							}
						},
						{
							"condition": {
								"parameter_ref": "userTaskInboxTitle",
								"op": "validateVariableSyntax"
							}
						}
					]
				}
			}
		},
		{
			"validation": {
				"fail_message": {
					"type": "error",
					"focus_parameter_ref": "userTaskInboxDescription",
					"message": {
						"resource_key": "error.userTaskInboxDescriptionInvalidVariables"
					}
				},
				"evaluate": {
					"condition": {
						"parameter_ref": "userTaskInboxDescription",
						"op": "validateVariableSyntax"
					}
				}
			}
		}
	],
	"resources": {
		"workFlowConfiguration": "Workflow configuration",
		"taskInbox": "Task inbox",
		"form-properties": "Form properties",
		"title": "Title",
		"description": "Description",
		"userTask": "User task",
		"userTaskDescription": "User task description",
		"displaySequence": "Display sequence",
		"taskType": "Task type",
		"placeholder.userTaskInboxTitle": "Enter a title to display in task inbox page",
		"placeholder.userTaskInboxDescription": "Enter a description to display in task inbox page",
		"placeholder.workflowConfigStepTitle": "Enter a title to display in workflow configuration page",
		"placeholder.workflowConfigStepDescription": "Enter a description to display in workflow configuration page",
		"helperText.inboxDisplaySequence": "Defines how this user task sequence order shows up in workflow configuration page",
		"error.workflowConfigStepTitleRequired": "Workflow configuration title is required",
		"error.userTaskInboxTitleRequired": "Task inbox title is required",
		"error.userTaskInboxTitleInvalidVariables": "Task inbox title contains invalid variables",
		"error.userTaskInboxDescriptionInvalidVariables": "Task inbox description contains invalid variables",
		"error.taskTypeRequired": "Task type is required"
	}
}

Use the following property config

{
  containerType: CUSTOM,
  rightFlyout: true,
  schemaValidation: true,
  applyPropertiesWithoutEdit: false,
  applyOnBlur: true,
  convertValueDataTypes: false,
  disableSaveOnRequiredErrors: true,
  trimSpaces: true,
  showRequiredIndicator: true,
  showAlertsTab: false,
  returnValueFiltering: [],
  maxLengthForMultiLineControls: 1024,
  maxLengthForSingleLineControls: 128,
  locale,
  iconSwitch: false,
  showHeadingDesc: true,
  showHeading: false,
  heading: true,
}

Set enableRightFlyoutUnderToolbar: true for the canvas config

or use Filte_parmDef.json with heading and onblur and description enabled.

Image

Activity

  1. changed the title [-]The close button displayed on top of the toolbar[/-] [+]The close button of property editor is displayed on top of the toolbar[/+] on Feb 23, 2026
  2. herleraja commented on Feb 23, 2026

    @herleraja
    ContributorAuthor

    Downstream application. IBM knowledge catalog - workflow

    Image

    with out header prop (header: false) it looks like this below

    Image
  3. added theissue type on Apr 13, 2026
  4. herleraja commented on Oct 8, 2026

    @herleraja
    ContributorAuthor

    Work around: In downstream component

    // The upstream canvas library positions the close button absolutely relative
    // to the nearest positioned ancestor. Without an explicit `position: relative`
    // on the heading container the button escapes upward and overlaps the toolbar.
    .properties-title-with-heading {
        position: relative;
    }
    
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions