From d5e3b30bf0667b2c857190c249136b2e0983968e Mon Sep 17 00:00:00 2001
From: srikant <srksriks123@gmail.com>
Date: Sat, 15 Jun 2024 00:58:47 +0530
Subject: [PATCH] #2012 Add support for helperText in all Common Properties
 controls. (#2013)

Signed-off-by: srikant <srksriks123@gmail.com>
---
 .../controls/checkbox-test.js                 |  16 +
 .../controls/datefield-test.js                |  17 +
 .../controls/datepicker-test.js               |  18 +
 .../controls/multiselect-test.js              |  17 +
 .../controls/numberfield-test.js              |  17 +
 .../controls/oneofselect-test.js              |  16 +
 .../controls/passwordfield-test.js            |  17 +
 .../controls/radioset-test.js                 |   5 +
 .../controls/selectcolumn-test.js             |  16 +
 .../controls/textarea-test.js                 |  15 +
 .../controls/textfield-test.js                |  17 +
 .../controls/timefield-test.js                |  18 +
 .../paramDefs/radio_paramDef.json             |   5 +-
 .../controls/checkbox/checkbox.jsx            |   1 +
 .../controls/datefield/datefield.jsx          |   1 +
 .../controls/datepicker/datepicker.jsx        |   2 +-
 .../controls/dropdown/dropdown.jsx            |   3 +
 .../controls/multiselect/multiselect.jsx      |   2 +
 .../controls/numberfield/numberfield.jsx      |   1 +
 .../controls/passwordfield/passwordfield.jsx  |   1 +
 .../controls/radioset/radioset.jsx            |   1 +
 .../controls/textarea/textarea.jsx            |   2 +
 .../controls/textfield/textfield.jsx          |   1 +
 .../controls/timefield/timefield.jsx          |   1 +
 .../src/common-properties/form/ControlInfo.js |   3 +
 .../src/common-properties/form/EditorForm.js  |   2 +
 .../common-properties/form/ParameterInfo.js   |  14 +-
 .../parameterDefs/checkbox_paramDef.json      |  26 +-
 .../parameterDefs/datefield_paramDef.json     |   7 +-
 .../datepickerRange_paramDef.json             |   3 +
 .../parameterDefs/datepicker_paramDef.json    | 568 +++++++++---------
 .../parameterDefs/multiselect_paramDef.json   |   3 +
 .../parameterDefs/numberfield_paramDef.json   |   5 +-
 .../parameterDefs/oneofselect_paramDef.json   |   5 +-
 .../parameterDefs/passwordfield_paramDef.json |   5 +-
 .../parameterDefs/radio_paramDef.json         |   5 +-
 .../parameterDefs/selectcolumn_paramDef.json  |   3 +
 .../parameterDefs/textarea_paramDef.json      |   5 +-
 .../parameterDefs/textfield_paramDef.json     |   5 +-
 .../parameterDefs/timefield_paramDef.json     |   3 +
 docs/pages/04.03-ui-hints.md                  |   2 +
 41 files changed, 558 insertions(+), 316 deletions(-)

diff --git a/canvas_modules/common-canvas/__tests__/common-properties/controls/checkbox-test.js b/canvas_modules/common-canvas/__tests__/common-properties/controls/checkbox-test.js
index dcf7a32b8b..e0bbdfb72c 100644
--- a/canvas_modules/common-canvas/__tests__/common-properties/controls/checkbox-test.js
+++ b/canvas_modules/common-canvas/__tests__/common-properties/controls/checkbox-test.js
@@ -199,6 +199,22 @@ describe("checkbox control tests", () => {
 		const messageWrapper = checkboxWrapper.find("div.properties-validation-message");
 		expect(messageWrapper).to.have.length(1);
 	});
+	it("Checkbox helperText is rendered correctly", () => {
+		control.helperText = "Checkbox helperText";
+		controller.setPropertyValues(
+			{ }
+		);
+		const wrapper = mount(
+			<Checkbox
+				store={controller.getStore()}
+				control={control}
+				controller={controller}
+				propertyId={propertyId}
+			/>
+		);
+		const helpTextWrapper = wrapper.find("div[data-id='properties-test-checkbox']");
+		expect(helpTextWrapper.find("div.cds--form__helper-text").text()).to.equal(control.helperText);
+	});
 });
 
 describe("checkbox classnames appear correctly", () => {
diff --git a/canvas_modules/common-canvas/__tests__/common-properties/controls/datefield-test.js b/canvas_modules/common-canvas/__tests__/common-properties/controls/datefield-test.js
index e26e8c4dab..8af0ccdee8 100644
--- a/canvas_modules/common-canvas/__tests__/common-properties/controls/datefield-test.js
+++ b/canvas_modules/common-canvas/__tests__/common-properties/controls/datefield-test.js
@@ -22,6 +22,7 @@ import { mount } from "../../_utils_/mount-utils.js";
 import { expect } from "chai";
 import Controller from "../../../src/common-properties/properties-controller";
 import datefieldParamDef from "../../test_resources/paramDefs/datefield_paramDef.json";
+import DateField from "../../../src/common-properties/controls/datefield";
 
 const DATEFIELD_PARAM_DEF = require("../../test_resources/paramDefs/datefield_paramDef.json");
 
@@ -177,6 +178,22 @@ describe("datefield-control renders correctly", () => {
 		const dateWrapper = wrapper.find("div[data-id='properties-test-datefield']");
 		expect(dateWrapper.find(".cds--text-input--light")).to.have.length(0);
 	});
+	it("Datefield helperText is rendered correctly", () => {
+		control.helperText = "Datefield helperText";
+		controller.setPropertyValues(
+			{ }
+		);
+		const wrapper = mount(
+			<DateField
+				store={controller.getStore()}
+				control={control}
+				controller={controller}
+				propertyId={propertyId}
+			/>
+		);
+		const helpTextWrapper = wrapper.find("div[data-id='properties-test-datefield']");
+		expect(helpTextWrapper.find("div.cds--form__helper-text").text()).to.equal(control.helperText);
+	});
 });
 
 describe("error messages renders correctly for datefield controls", () => {
diff --git a/canvas_modules/common-canvas/__tests__/common-properties/controls/datepicker-test.js b/canvas_modules/common-canvas/__tests__/common-properties/controls/datepicker-test.js
index 2ed5d9cd57..35afb2b216 100644
--- a/canvas_modules/common-canvas/__tests__/common-properties/controls/datepicker-test.js
+++ b/canvas_modules/common-canvas/__tests__/common-properties/controls/datepicker-test.js
@@ -103,6 +103,24 @@ describe("datepicker-control renders correctly", () => {
 		expect(input.prop("value")).to.equal("10-29-2023");
 	});
 
+	it("should have helperText rendered correctly in `DatepickerControl`", () => {
+		control.helperText = "Datepicker helperText";
+		controller.setPropertyValues(
+			{ }
+		);
+		const wrapper = mount(
+			<DatepickerControl
+				store={controller.getStore()}
+				control={control}
+				controller={controller}
+				propertyId={propertyId}
+				controlItem={controlItem}
+			/>
+		);
+		const helpTextWrapper = wrapper.find("div[data-id='properties-test-datepicker']");
+		expect(helpTextWrapper.find("div.cds--form__helper-text").text()).to.equal(control.helperText);
+	});
+
 	it("should allow a valid date to be updated in `DatepickerControl`", () => {
 		const wrapper = mount(
 			<DatepickerControl
diff --git a/canvas_modules/common-canvas/__tests__/common-properties/controls/multiselect-test.js b/canvas_modules/common-canvas/__tests__/common-properties/controls/multiselect-test.js
index c03ed2a450..1611d8044e 100644
--- a/canvas_modules/common-canvas/__tests__/common-properties/controls/multiselect-test.js
+++ b/canvas_modules/common-canvas/__tests__/common-properties/controls/multiselect-test.js
@@ -216,6 +216,23 @@ describe("multiselect renders correctly", () => {
 		const messageWrapper = multiselectWrapper.find("div.cds--form-requirement");
 		expect(messageWrapper).to.have.length(1);
 	});
+
+	it("MultiSelectControl helperText is rendered correctly", () => {
+		control.helperText = "MultiSelectControl helperText";
+		controller.setPropertyValues(
+			{ }
+		);
+		const wrapper = mount(
+			<MultiSelectControl
+				store={controller.getStore()}
+				control={control}
+				controller={controller}
+				propertyId={propertyId}
+			/>
+		);
+		const helpTextWrapper = wrapper.find("div[data-id='properties-test-multiselect']");
+		expect(helpTextWrapper.find("div.cds--form__helper-text").text()).to.equal(control.helperText);
+	});
 });
 
 describe("multiselect paramDef works correctly", () => {
diff --git a/canvas_modules/common-canvas/__tests__/common-properties/controls/numberfield-test.js b/canvas_modules/common-canvas/__tests__/common-properties/controls/numberfield-test.js
index 676dd1373e..23f172745e 100644
--- a/canvas_modules/common-canvas/__tests__/common-properties/controls/numberfield-test.js
+++ b/canvas_modules/common-canvas/__tests__/common-properties/controls/numberfield-test.js
@@ -144,6 +144,23 @@ describe("numberfield-control renders correctly", () => {
 		const messageWrapper = textWrapper.find("div.cds--form-requirement");
 		expect(messageWrapper).to.have.length(1);
 	});
+
+	it("NumberfieldControl helperText is rendered correctly", () => {
+		control.helperText = "NumberfieldControl helperText";
+		controller.setPropertyValues(
+			{ }
+		);
+		const wrapper = mount(
+			<NumberfieldControl
+				store={controller.getStore()}
+				control={control}
+				controller={controller}
+				propertyId={propertyId}
+			/>
+		);
+		const helpTextWrapper = wrapper.find("div[data-id='properties-test-number']");
+		expect(helpTextWrapper.find("div.cds--form__helper-text").text()).to.equal(control.helperText);
+	});
 });
 
 describe("numberfield control works correctly", () => {
diff --git a/canvas_modules/common-canvas/__tests__/common-properties/controls/oneofselect-test.js b/canvas_modules/common-canvas/__tests__/common-properties/controls/oneofselect-test.js
index bfb22c0448..cb80332d0e 100644
--- a/canvas_modules/common-canvas/__tests__/common-properties/controls/oneofselect-test.js
+++ b/canvas_modules/common-canvas/__tests__/common-properties/controls/oneofselect-test.js
@@ -218,6 +218,22 @@ describe("oneofselect renders correctly", () => {
 		const messageWrapper = dropdownWrapper.find("div.cds--form-requirement");
 		expect(messageWrapper).to.have.length(1);
 	});
+	it("oneofselect helperText is rendered correctly", () => {
+		control.helperText = "Oneofselect helperText";
+		controller.setPropertyValues(
+			{ }
+		);
+		const wrapper = mount(
+			<OneofselectControl
+				store={controller.getStore()}
+				control={control}
+				controller={controller}
+				propertyId={propertyId}
+			/>
+		);
+		const helpTextWrapper = wrapper.find("div[data-id='properties-test-oneofselect']");
+		expect(helpTextWrapper.find("div.cds--form__helper-text").text()).to.equal(control.helperText);
+	});
 });
 
 describe("oneofselect paramDef works correctly", () => {
diff --git a/canvas_modules/common-canvas/__tests__/common-properties/controls/passwordfield-test.js b/canvas_modules/common-canvas/__tests__/common-properties/controls/passwordfield-test.js
index abe1d161df..8fe4a737e0 100644
--- a/canvas_modules/common-canvas/__tests__/common-properties/controls/passwordfield-test.js
+++ b/canvas_modules/common-canvas/__tests__/common-properties/controls/passwordfield-test.js
@@ -200,6 +200,23 @@ describe("Passwordfield renders correctly", () => {
 		eyeIcon.simulate("click");
 		expect(passwordWrapper.find(`span[id='${eyeIconAriaLabelledBy}']`).text()).to.equal(control.tooltip.defaultHide);
 	});
+
+	it("Passwordfield helperText is rendered correctly", () => {
+		control.helperText = "Passwordfield helperText";
+		controller.setPropertyValues(
+			{ }
+		);
+		const wrapper = mount(
+			<Passwordfield
+				store={controller.getStore()}
+				control={control}
+				controller={controller}
+				propertyId={propertyId}
+			/>
+		);
+		const helpTextWrapper = wrapper.find("div[data-id='properties-test-password']");
+		expect(helpTextWrapper.find("div.cds--form__helper-text").text()).to.equal(control.helperText);
+	});
 });
 
 describe("passwordfield classnames appear correctly", () => {
diff --git a/canvas_modules/common-canvas/__tests__/common-properties/controls/radioset-test.js b/canvas_modules/common-canvas/__tests__/common-properties/controls/radioset-test.js
index eaa62b52e6..5a707e9b67 100644
--- a/canvas_modules/common-canvas/__tests__/common-properties/controls/radioset-test.js
+++ b/canvas_modules/common-canvas/__tests__/common-properties/controls/radioset-test.js
@@ -52,6 +52,11 @@ describe("radio renders and works correctly with different enum types", () => {
 		expect(renderedController.getPropertyValue({ name: "radioString" })).to.equal("gini");
 	});
 
+	it("radioset control with string enum helper text is visible", () => {
+		const controlDiv = wrapper.find("div[data-id='properties-ci-radioString']");
+		expect(controlDiv.find("div.cds--form__helper-text").text()).to.equal("RadioSet with enum string type");
+	});
+
 	it("radioset control with boolean enum", () => {
 		const controlDiv = wrapper.find("div[data-id='properties-ci-radioBooleanWithEnum']");
 		const label = controlDiv.find("label.properties-control-label");
diff --git a/canvas_modules/common-canvas/__tests__/common-properties/controls/selectcolumn-test.js b/canvas_modules/common-canvas/__tests__/common-properties/controls/selectcolumn-test.js
index 87395f7a91..f5b64cddc3 100644
--- a/canvas_modules/common-canvas/__tests__/common-properties/controls/selectcolumn-test.js
+++ b/canvas_modules/common-canvas/__tests__/common-properties/controls/selectcolumn-test.js
@@ -198,6 +198,22 @@ describe("selectcolumn control renders correctly", () => {
 		dropdownList.at(0).simulate("click");
 		expect(controller.getPropertyValue(propertyId)).to.equal("");
 	});
+	it("SelectColumn helperText is rendered correctly", () => {
+		control.helperText = "SelectColumn helperText";
+		controller.setPropertyValues(
+			{ }
+		);
+		const wrapper = mount(
+			<SelectColumn
+				store={controller.getStore()}
+				control={control}
+				controller={controller}
+				propertyId={propertyId}
+			/>
+		);
+		const helpTextWrapper = wrapper.find("div[data-id='properties-targetField']");
+		expect(helpTextWrapper.find("div.cds--form__helper-text").text()).to.equal(control.helperText);
+	});
 });
 
 describe("selectcolumn control renders correctly with paramDef", () => {
diff --git a/canvas_modules/common-canvas/__tests__/common-properties/controls/textarea-test.js b/canvas_modules/common-canvas/__tests__/common-properties/controls/textarea-test.js
index 9bc963ac1e..2135485eea 100644
--- a/canvas_modules/common-canvas/__tests__/common-properties/controls/textarea-test.js
+++ b/canvas_modules/common-canvas/__tests__/common-properties/controls/textarea-test.js
@@ -300,6 +300,21 @@ describe("textarea control renders correctly", () => {
 		const validationMsg = textWrapper.find("div.cds--form-requirement");
 		expect(validationMsg).to.have.length(1);
 	});
+
+	it("textarea should have helper text", () => {
+		control.helperText = "Textarea helperText";
+		controller.setPropertyValues({});
+		const wrapper = mount(
+			<TextArea
+				store={controller.getStore()}
+				control={control}
+				controller={controller}
+				propertyId={propertyId}
+			/>
+		);
+		const helpTextWrapper = wrapper.find("div[data-id='properties-test-textarea']");
+		expect(helpTextWrapper.find("div.cds--form__helper-text").text()).to.equal(control.helperText);
+	});
 });
 
 describe("textarea classnames appear correctly", () => {
diff --git a/canvas_modules/common-canvas/__tests__/common-properties/controls/textfield-test.js b/canvas_modules/common-canvas/__tests__/common-properties/controls/textfield-test.js
index c9e7dd92e6..5151600a2f 100644
--- a/canvas_modules/common-canvas/__tests__/common-properties/controls/textfield-test.js
+++ b/canvas_modules/common-canvas/__tests__/common-properties/controls/textfield-test.js
@@ -306,6 +306,23 @@ describe("textfield renders correctly", () => {
 		const messageWrapper = textWrapper.find("div.cds--form-requirement");
 		expect(messageWrapper).to.have.length(1);
 	});
+
+	it("textfield renders helpertext correctly", () => {
+		control.helperText = "textfield helpertext";
+		controller.setPropertyValues(
+			{ }
+		);
+		const wrapper = mount(
+			<Textfield
+				store={controller.getStore()}
+				control={control}
+				controller={controller}
+				propertyId={propertyId}
+			/>
+		);
+		const helpTextWrapper = wrapper.find("div[data-id='properties-test-text']");
+		expect(helpTextWrapper.find("div.cds--form__helper-text").text()).to.equal(control.helperText);
+	});
 });
 
 describe("textfield list works correctly", () => {
diff --git a/canvas_modules/common-canvas/__tests__/common-properties/controls/timefield-test.js b/canvas_modules/common-canvas/__tests__/common-properties/controls/timefield-test.js
index a950617a02..a4f8a9b803 100644
--- a/canvas_modules/common-canvas/__tests__/common-properties/controls/timefield-test.js
+++ b/canvas_modules/common-canvas/__tests__/common-properties/controls/timefield-test.js
@@ -160,6 +160,24 @@ describe("timefield-control renders correctly", () => {
 		const input = timeWrapper.find("input");
 		expect(input.getDOMNode().placeholder).to.equal(control.additionalText);
 	});
+
+	it("should set helpertext text in `TimefieldControl`", () => {
+		control.helperText = "TimefieldControl helpertext";
+		controller.setPropertyValues(
+			{ }
+		);
+		const wrapper = mount(
+			<TimefieldControl
+				store={controller.getStore()}
+				control={control}
+				controller={controller}
+				propertyId={propertyId}
+				controlItem={controlItem}
+			/>
+		);
+		const helpTextWrapper = wrapper.find("div[data-id='properties-test-timefield']");
+		expect(helpTextWrapper.find("div.cds--form__helper-text").text()).to.equal(control.helperText);
+	});
 });
 
 describe("error messages renders correctly for timefield controls", () => {
diff --git a/canvas_modules/common-canvas/__tests__/test_resources/paramDefs/radio_paramDef.json b/canvas_modules/common-canvas/__tests__/test_resources/paramDefs/radio_paramDef.json
index 8f5007bc4f..1589e4920c 100644
--- a/canvas_modules/common-canvas/__tests__/test_resources/paramDefs/radio_paramDef.json
+++ b/canvas_modules/common-canvas/__tests__/test_resources/paramDefs/radio_paramDef.json
@@ -273,7 +273,10 @@
           "default": "RadioSet with enum string type"
         },
         "resource_key": "withradioString",
-        "class_name": "radioset-control-class"
+        "class_name": "radioset-control-class",
+        "helper_text": {
+          "default": "RadioSet with enum string type"
+        }
       },
       {
         "parameter_ref": "radioBooleanWithEnum",
diff --git a/canvas_modules/common-canvas/src/common-properties/controls/checkbox/checkbox.jsx b/canvas_modules/common-canvas/src/common-properties/controls/checkbox/checkbox.jsx
index 19ecbca219..6af3f5a85b 100644
--- a/canvas_modules/common-canvas/src/common-properties/controls/checkbox/checkbox.jsx
+++ b/canvas_modules/common-canvas/src/common-properties/controls/checkbox/checkbox.jsx
@@ -78,6 +78,7 @@ class CheckboxControl extends React.Component {
 						onChange={this.handleChange.bind(this)}
 						checked={Boolean(this.props.value)}
 						hideLabel={this.props.tableControl}
+						helperText={this.props.control.helperText}
 					/>
 					{tooltipIcon}
 				</div>
diff --git a/canvas_modules/common-canvas/src/common-properties/controls/datefield/datefield.jsx b/canvas_modules/common-canvas/src/common-properties/controls/datefield/datefield.jsx
index a27ffb5d87..0f175782bf 100644
--- a/canvas_modules/common-canvas/src/common-properties/controls/datefield/datefield.jsx
+++ b/canvas_modules/common-canvas/src/common-properties/controls/datefield/datefield.jsx
@@ -79,6 +79,7 @@ class DatefieldControl extends React.Component {
 					id={this.id}
 					disabled={this.props.state === STATES.DISABLED}
 					placeholder={this.props.control.additionalText}
+					helperText={this.props.control.helperText}
 					onChange={this.handleChange.bind(this)}
 					value={this.value}
 					labelText={this.props.controlItem}
diff --git a/canvas_modules/common-canvas/src/common-properties/controls/datepicker/datepicker.jsx b/canvas_modules/common-canvas/src/common-properties/controls/datepicker/datepicker.jsx
index 507fdca20c..f0d4990755 100644
--- a/canvas_modules/common-canvas/src/common-properties/controls/datepicker/datepicker.jsx
+++ b/canvas_modules/common-canvas/src/common-properties/controls/datepicker/datepicker.jsx
@@ -88,7 +88,7 @@ class DatepickerControl extends React.Component {
 						size={this.getDatepickerSize()}
 						onChange={this.handleInputChange.bind(this)}
 						value={this.state.value}
-						helperText={!this.props.tableControl && helperText}
+						helperText={(!this.props.tableControl && helperText) || this.props.control.helperText}
 					/>
 				</DatePicker>
 				<ValidationMessage inTable={this.props.tableControl} tableOnly state={this.props.state} messageInfo={this.props.messageInfo} />
diff --git a/canvas_modules/common-canvas/src/common-properties/controls/dropdown/dropdown.jsx b/canvas_modules/common-canvas/src/common-properties/controls/dropdown/dropdown.jsx
index 2a3a2ba275..de4eb34241 100644
--- a/canvas_modules/common-canvas/src/common-properties/controls/dropdown/dropdown.jsx
+++ b/canvas_modules/common-canvas/src/common-properties/controls/dropdown/dropdown.jsx
@@ -228,6 +228,7 @@ class DropDown extends React.Component {
 					disabled={this.props.state === STATES.DISABLED || this.disableEmptyListDropdown}
 					onChange={this.handleChange}
 					value={selection}
+					helperText={this.props.control.helperText}
 				>
 					{ options }
 				</Select>
@@ -246,6 +247,7 @@ class DropDown extends React.Component {
 					onInputChange={this.handleOnInputChange}
 					translateWithId={(id) => listBoxMenuIconTranslationIds[id]}
 					titleText={this.props.controlItem}
+					helperText={this.props.control.helperText}
 				/>
 			);
 		} else {
@@ -261,6 +263,7 @@ class DropDown extends React.Component {
 					label={this.emptyLabel}
 					translateWithId={(id) => listBoxMenuIconTranslationIds[id]}
 					titleText={this.props.controlItem}
+					helperText={this.props.control.helperText}
 				/>
 			);
 		}
diff --git a/canvas_modules/common-canvas/src/common-properties/controls/multiselect/multiselect.jsx b/canvas_modules/common-canvas/src/common-properties/controls/multiselect/multiselect.jsx
index 1cfe40a1c5..3f5e130c6a 100644
--- a/canvas_modules/common-canvas/src/common-properties/controls/multiselect/multiselect.jsx
+++ b/canvas_modules/common-canvas/src/common-properties/controls/multiselect/multiselect.jsx
@@ -165,6 +165,7 @@ class MultiSelectControl extends React.Component {
 					onChange={this.handleOnChange}
 					placeholder={label}
 					titleText={this.props.tableControl ? null : this.props.controlItem}
+					helperText={this.props.control.helperText}
 				/>
 			);
 		} else {
@@ -179,6 +180,7 @@ class MultiSelectControl extends React.Component {
 					onChange={this.handleOnChange}
 					label={label}
 					titleText={this.props.tableControl ? null : this.props.controlItem}
+					helperText={this.props.control.helperText}
 				/>
 			);
 		}
diff --git a/canvas_modules/common-canvas/src/common-properties/controls/numberfield/numberfield.jsx b/canvas_modules/common-canvas/src/common-properties/controls/numberfield/numberfield.jsx
index 0d4e608f2a..b0c8df9b65 100755
--- a/canvas_modules/common-canvas/src/common-properties/controls/numberfield/numberfield.jsx
+++ b/canvas_modules/common-canvas/src/common-properties/controls/numberfield/numberfield.jsx
@@ -162,6 +162,7 @@ class NumberfieldControl extends React.Component {
 					hideLabel={this.props.tableControl}
 					allowEmpty
 					hideSteppers={this.props.tableControl || (this.props.control.controlType === ControlType.NUMBERFIELD)}
+					helperText={this.props.control.helperText}
 				/>
 				{numberGenerator}
 				<ValidationMessage inTable={this.props.tableControl} tableOnly state={this.props.state} messageInfo={this.props.messageInfo} />
diff --git a/canvas_modules/common-canvas/src/common-properties/controls/passwordfield/passwordfield.jsx b/canvas_modules/common-canvas/src/common-properties/controls/passwordfield/passwordfield.jsx
index 15e3fa6fd4..ca9b6f98b4 100644
--- a/canvas_modules/common-canvas/src/common-properties/controls/passwordfield/passwordfield.jsx
+++ b/canvas_modules/common-canvas/src/common-properties/controls/passwordfield/passwordfield.jsx
@@ -64,6 +64,7 @@ class PasswordControl extends React.Component {
 					tooltipAlignment="end"
 					showPasswordLabel={showPasswordLabel}
 					hidePasswordLabel={hidePasswordLabel}
+					helperText={this.props.control.helperText}
 				/>
 				<ValidationMessage inTable={this.props.tableControl} tableOnly state={this.props.state} messageInfo={this.props.messageInfo} />
 			</div>);
diff --git a/canvas_modules/common-canvas/src/common-properties/controls/radioset/radioset.jsx b/canvas_modules/common-canvas/src/common-properties/controls/radioset/radioset.jsx
index 407ed54398..7064dbf40d 100644
--- a/canvas_modules/common-canvas/src/common-properties/controls/radioset/radioset.jsx
+++ b/canvas_modules/common-canvas/src/common-properties/controls/radioset/radioset.jsx
@@ -229,6 +229,7 @@ class RadiosetControl extends React.Component {
 					disabled={this.props.state === STATES.DISABLED}
 					name="radio-button-group"
 					orientation={this.props.control.orientation}
+					helperText={this.props.control.helperText}
 				>
 					{buttons}
 				</RadioButtonGroup>
diff --git a/canvas_modules/common-canvas/src/common-properties/controls/textarea/textarea.jsx b/canvas_modules/common-canvas/src/common-properties/controls/textarea/textarea.jsx
index 581a5e75e6..904d405efa 100644
--- a/canvas_modules/common-canvas/src/common-properties/controls/textarea/textarea.jsx
+++ b/canvas_modules/common-canvas/src/common-properties/controls/textarea/textarea.jsx
@@ -79,6 +79,7 @@ class TextareaControl extends React.Component {
 					value={value}
 					labelText={this.props.controlItem}
 					hideLabel={this.props.tableControl}
+					helperText={this.props.control.helperText}
 				/>
 				<ValidationMessage inTable={this.props.tableControl} tableOnly={!showValidationMessage} state={""} messageInfo={errorMessage} />
 			</div>);
@@ -93,6 +94,7 @@ class TextareaControl extends React.Component {
 					value={value}
 					labelText={this.props.controlItem}
 					hideLabel={this.props.tableControl}
+					helperText={this.props.control.helperText}
 				/>
 			);
 		}
diff --git a/canvas_modules/common-canvas/src/common-properties/controls/textfield/textfield.jsx b/canvas_modules/common-canvas/src/common-properties/controls/textfield/textfield.jsx
index 9b842a6fd5..406e9b58bd 100755
--- a/canvas_modules/common-canvas/src/common-properties/controls/textfield/textfield.jsx
+++ b/canvas_modules/common-canvas/src/common-properties/controls/textfield/textfield.jsx
@@ -102,6 +102,7 @@ class TextfieldControl extends React.Component {
 					id={this.id}
 					disabled={ this.props.state === STATES.DISABLED}
 					placeholder={this.props.control.additionalText}
+					helperText={this.props.control.helperText}
 					onChange={this.handleChange.bind(this)}
 					value={value}
 					labelText={this.props.controlItem}
diff --git a/canvas_modules/common-canvas/src/common-properties/controls/timefield/timefield.jsx b/canvas_modules/common-canvas/src/common-properties/controls/timefield/timefield.jsx
index 5ea55425c7..c1a0c40377 100644
--- a/canvas_modules/common-canvas/src/common-properties/controls/timefield/timefield.jsx
+++ b/canvas_modules/common-canvas/src/common-properties/controls/timefield/timefield.jsx
@@ -81,6 +81,7 @@ class TimefieldControl extends React.Component {
 					value={this.value}
 					labelText={this.props.controlItem}
 					hideLabel={this.props.tableControl}
+					helperText={this.props.control.helperText}
 				/>
 				<ValidationMessage inTable={this.props.tableControl} tableOnly state={this.props.state} messageInfo={this.props.messageInfo} />
 			</div>
diff --git a/canvas_modules/common-canvas/src/common-properties/form/ControlInfo.js b/canvas_modules/common-canvas/src/common-properties/form/ControlInfo.js
index 0597906c27..c4d2441e0a 100644
--- a/canvas_modules/common-canvas/src/common-properties/form/ControlInfo.js
+++ b/canvas_modules/common-canvas/src/common-properties/form/ControlInfo.js
@@ -195,6 +195,9 @@ export class Control {
 		if (settings.buttons) {
 			this.buttons = settings.buttons;
 		}
+		if (settings.helperText) {
+			this.helperText = settings.helperText;
+		}
 		this.light = get(settings, "light", true);
 	}
 }
diff --git a/canvas_modules/common-canvas/src/common-properties/form/EditorForm.js b/canvas_modules/common-canvas/src/common-properties/form/EditorForm.js
index 9541edac90..a0e0f86929 100644
--- a/canvas_modules/common-canvas/src/common-properties/form/EditorForm.js
+++ b/canvas_modules/common-canvas/src/common-properties/form/EditorForm.js
@@ -431,6 +431,7 @@ function _makeControl(parameterMetadata, paramName, group, structureDefinition,
 	const parameter = isSubControl ? subControl : parameterMetadata.getParameter(paramName);
 
 	const additionalText = parameter.getAdditionalText(l10nProvider);
+	const additionalHelperText = parameter.getAdditionalHelperText(l10nProvider);
 	const orientation = parameter.orientation;
 	const required = parameter.required;
 	if (parameter.numberGenerator) {
@@ -665,6 +666,7 @@ function _makeControl(parameterMetadata, paramName, group, structureDefinition,
 	settings.customValueAllowed = parameter.customValueAllowed;
 	settings.className = parameter.className;
 	settings.buttons = buttons;
+	settings.helperText = additionalHelperText;
 	settings.light = _isControlLight(additionalInfo.light, additionalInfo.containerType, parameter.isSubPanelEdit());
 	if (isSubControl) {
 		settings.visible = parameter.visible;
diff --git a/canvas_modules/common-canvas/src/common-properties/form/ParameterInfo.js b/canvas_modules/common-canvas/src/common-properties/form/ParameterInfo.js
index 20ac296569..57da2aba31 100644
--- a/canvas_modules/common-canvas/src/common-properties/form/ParameterInfo.js
+++ b/canvas_modules/common-canvas/src/common-properties/form/ParameterInfo.js
@@ -171,6 +171,9 @@ export class ParameterDef {
 		if (settings.className) {
 			this.className = settings.className;
 		}
+		if (settings.helperText) {
+			this.helperText = ResourceDef.make(settings.helperText);
+		}
 	}
 
 	isList() {
@@ -278,6 +281,14 @@ export class ParameterDef {
 		return l10nProvider.l10nResource(this.placeHolderText);
 	}
 
+	/**
+	 * Returns the "additionalHelperText" attribute which can be used to include additional
+	 * helper text associated with the property control on the UI.
+	*/
+	getAdditionalHelperText(l10nProvider) {
+		return l10nProvider.l10nResource(this.helperText);
+	}
+
 	getTextAfter(l10nProvider) {
 		return l10nProvider.l10nResource(this.textAfter);
 	}
@@ -376,7 +387,8 @@ export class ParameterDef {
 				"uionly": propertyOf(param)("uionly"),
 				"actionRef": propertyOf(uihint)("action_ref"),
 				"customValueAllowed": propertyOf(uihint)("custom_value_allowed"),
-				"className": propertyOf(uihint)("class_name")
+				"className": propertyOf(uihint)("class_name"),
+				"helperText": propertyOf(uihint)("helper_text")
 			});
 		}
 		return null;
diff --git a/canvas_modules/harness/test_resources/parameterDefs/checkbox_paramDef.json b/canvas_modules/harness/test_resources/parameterDefs/checkbox_paramDef.json
index 65eef1b808..04b6dc3f31 100644
--- a/canvas_modules/harness/test_resources/parameterDefs/checkbox_paramDef.json
+++ b/canvas_modules/harness/test_resources/parameterDefs/checkbox_paramDef.json
@@ -5,14 +5,8 @@
   "current_parameters": {
     "checkbox": true,
     "checkbox_null": null,
-    "checkbox_table": [
-      [
-        true
-      ]
-    ],
-    "checkbox_table_cond": [
-      []
-    ],
+    "checkbox_table": [[true]],
+    "checkbox_table_cond": [[]],
     "checkbox_error": false,
     "checkbox_warning": false,
     "disable": true,
@@ -135,6 +129,9 @@
         "label": {
           "default": "checkbox default"
         },
+        "helper_text": {
+          "default": "check/uncheck the checkbox"
+        },
         "description": {
           "default": "checkbox with a default value of 'true'\nThis text should be on a new line.\nThis text should also be on a new line."
         }
@@ -297,10 +294,7 @@
             "group_info": [
               {
                 "id": "checkbox-table-summary-ctrls",
-                "parameter_refs": [
-                  "checkbox_table",
-                  "checkbox_table_cond"
-                ]
+                "parameter_refs": ["checkbox_table", "checkbox_table_cond"]
               }
             ]
           }
@@ -383,9 +377,7 @@
     },
     {
       "visible": {
-        "parameter_refs": [
-          "checkbox_hidden"
-        ],
+        "parameter_refs": ["checkbox_hidden"],
         "evaluate": {
           "condition": {
             "parameter_ref": "hide",
@@ -397,9 +389,7 @@
     },
     {
       "enabled": {
-        "parameter_refs": [
-          "checkbox_disable"
-        ],
+        "parameter_refs": ["checkbox_disable"],
         "evaluate": {
           "condition": {
             "parameter_ref": "disable",
diff --git a/canvas_modules/harness/test_resources/parameterDefs/datefield_paramDef.json b/canvas_modules/harness/test_resources/parameterDefs/datefield_paramDef.json
index a03b9c168c..b9e01bf8a6 100644
--- a/canvas_modules/harness/test_resources/parameterDefs/datefield_paramDef.json
+++ b/canvas_modules/harness/test_resources/parameterDefs/datefield_paramDef.json
@@ -151,14 +151,17 @@
       {
         "parameter_ref": "date_ymd_placeholder",
         "label": {
-          "default": "Date Y-M-D with null and placeholder"
+          "default": "Date Y-M-D with null, helper text and placeholder"
         },
         "description": {
-          "default": "Optional datefield with null and placeholder text"
+          "default": "Optional datefield with null, placeholder text and helper text"
         },
         "date_format": "YYYY-M-D",
         "place_holder_text": {
           "default": "Enter a date: YYYY-MM-DD"
+        },
+        "helper_text": {
+          "default": "Enter a date in YYYY-M-D format"
         }
       },
       {
diff --git a/canvas_modules/harness/test_resources/parameterDefs/datepickerRange_paramDef.json b/canvas_modules/harness/test_resources/parameterDefs/datepickerRange_paramDef.json
index eca9b29066..a9c1898a23 100644
--- a/canvas_modules/harness/test_resources/parameterDefs/datepickerRange_paramDef.json
+++ b/canvas_modules/harness/test_resources/parameterDefs/datepickerRange_paramDef.json
@@ -101,6 +101,9 @@
         "class_name": "datepicker-range-control-unique-class",
 				"place_holder_text": {
 					"default": "yyyy-mm-dd"
+				},
+				"helper_text": {
+					"default": "Y-m-d format"
 				}
       },
 			{
diff --git a/canvas_modules/harness/test_resources/parameterDefs/datepicker_paramDef.json b/canvas_modules/harness/test_resources/parameterDefs/datepicker_paramDef.json
index eb6a2b9262..5cac5cd37e 100644
--- a/canvas_modules/harness/test_resources/parameterDefs/datepicker_paramDef.json
+++ b/canvas_modules/harness/test_resources/parameterDefs/datepicker_paramDef.json
@@ -4,83 +4,80 @@
   },
   "current_parameters": {
     "datepicker": "2023-03-17T00:00:00.00",
-		"datepicker_required": "2023-03-17T00:00:00.00",
-		"datepicker_null": null,
-		"hide_datepicker": true,
-		"hidden_datepicker": "2023-03-17T00:00:00.00",
-		"disable_datepicker": true,
-		"disabled_datepicker": "2023-03-17T00:00:00.00",
-		"datepicker_table": [
-			[
-				"2023-03-16T00:00:00.00",
-				"2023-03-17T00:00:00.00",
-				"2023-03-18T00:00:00.00"
-			],
-			[
-				null,
-				"2023-03-17T00:00:00.00",
-				null
-			]
-		]
+    "datepicker_required": "2023-03-17T00:00:00.00",
+    "datepicker_null": null,
+    "hide_datepicker": true,
+    "hidden_datepicker": "2023-03-17T00:00:00.00",
+    "disable_datepicker": true,
+    "disabled_datepicker": "2023-03-17T00:00:00.00",
+    "datepicker_table": [
+      [
+        "2023-03-16T00:00:00.00",
+        "2023-03-17T00:00:00.00",
+        "2023-03-18T00:00:00.00"
+      ],
+      [null, "2023-03-17T00:00:00.00", null]
+    ]
   },
   "parameters": [
     {
       "id": "datepicker",
       "type": "date"
     },
-		{
-			"id": "datepicker_required",
-			"type": "date",
-			"required": true
-		},
-		{
-			"id": "datepicker_undefined",
-			"type": "date"
-		},
-		{
-			"id": "datepicker_null",
-			"type": "date"
-		},
-		{
-			"id": "hide_datepicker",
-			"type": "boolean"
-		},
-		{
-			"id": "hidden_datepicker",
-			"type": "date",
-			"required": true
-		},
-		{
-			"id": "disable_datepicker",
-			"type": "boolean"
-		},
-		{
-			"id": "disabled_datepicker",
-			"type": "date"
-		},
-		{
-			"id": "datepicker_table",
-			"type": "array[datepicker_types]"
-		}
+    {
+      "id": "datepicker_required",
+      "type": "date",
+      "required": true
+    },
+    {
+      "id": "datepicker_undefined",
+      "type": "date"
+    },
+    {
+      "id": "datepicker_null",
+      "type": "date"
+    },
+    {
+      "id": "hide_datepicker",
+      "type": "boolean"
+    },
+    {
+      "id": "hidden_datepicker",
+      "type": "date",
+      "required": true
+    },
+    {
+      "id": "disable_datepicker",
+      "type": "boolean"
+    },
+    {
+      "id": "disabled_datepicker",
+      "type": "date"
+    },
+    {
+      "id": "datepicker_table",
+      "type": "array[datepicker_types]"
+    }
   ],
   "complex_types": [
-		{
-			"id": "datepicker_types",
-			"parameters": [
-				{
-					"id": "datepicker_cell",
-					"type": "date"
-				},
-				{
-					"id": "datepicker_on_panel",
-					"type": "date"
-				},
-				{
-					"id": "datepicker_sub_panel",
-					"type": "date"
-				}
-			]
-		}],
+    {
+      "id": "datepicker_types",
+      "parameters": [
+        {
+          "id": "datepicker_cell",
+          "type": "date"
+        },
+        {
+          "id": "datepicker_on_panel",
+          "type": "date"
+        },
+        {
+          "id": "datepicker_sub_panel",
+          "type": "date"
+        }
+      ]
+    }
+  ],
   "uihints": {
     "id": "datepicker",
     "icon": "images/default.svg",
@@ -96,154 +93,157 @@
         "description": {
           "default": "Datepicker with value of '2023-03-17T00:00:00' in m-d-Y format."
         },
-				"control": "datepicker",
+        "control": "datepicker",
         "date_format": "m-d-Y",
         "class_name": "datepicker-control-unique-class",
-				"place_holder_text": {
-					"default": "Enter a date: mm-dd-yyyy"
-				}
+        "place_holder_text": {
+          "default": "Enter a date: mm-dd-yyyy"
+        },
+        "helper_text": {
+          "default": "Enter a date in the datepicker"
+        }
+      },
+      {
+        "parameter_ref": "datepicker_required",
+        "label": {
+          "default": "Date format: Date Y-m-d"
+        },
+        "description": {
+          "default": "Datepicker with no initial value, in Y-m-d format."
+        },
+        "control": "datepicker",
+        "class_name": "datepicker-control-class",
+        "place_holder_text": {
+          "default": "Date format: yyyy-mm-dd"
+        }
+      },
+      {
+        "parameter_ref": "datepicker_undefined",
+        "label": {
+          "default": "Date format: Y-n-j"
+        },
+        "description": {
+          "default": "Datepicker without initial value. This date format accepts single digit month and day."
+        },
+        "control": "datepicker",
+        "date_format": "Y-n-j",
+        "class_name": "datepicker-control-class",
+        "place_holder_text": {
+          "default": "Date: yyyy-m-d"
+        }
+      },
+      {
+        "parameter_ref": "datepicker_null",
+        "label": {
+          "default": "Date format: y-n-j"
+        },
+        "description": {
+          "default": "Datepicker with initial value set to null."
+        },
+        "control": "datepicker",
+        "date_format": "y-n-j",
+        "class_name": "datepicker-control-class",
+        "place_holder_text": {
+          "default": "yy-m-d"
+        }
+      },
+      {
+        "parameter_ref": "hide_datepicker",
+        "label": {
+          "default": "Hide 'hidden_datepicker'"
+        }
+      },
+      {
+        "parameter_ref": "hidden_datepicker",
+        "label": {
+          "default": "Datepicker: Y-m-d"
+        },
+        "description": {
+          "default": "Datepicker will be hidden if above checkbox is checked."
+        },
+        "control": "datepicker",
+        "date_format": "Y-m-d",
+        "class_name": "datepicker-control-class",
+        "place_holder_text": {
+          "default": "yyyy-mm-dd"
+        }
+      },
+      {
+        "parameter_ref": "disable_datepicker",
+        "label": {
+          "default": "Disable 'hidden_datepicker'"
+        }
+      },
+      {
+        "parameter_ref": "disabled_datepicker",
+        "label": {
+          "default": "Datepicker: Y-m-d"
+        },
+        "description": {
+          "default": "Datepicker will be disabled if above checkbox is checked."
+        },
+        "control": "datepicker",
+        "date_format": "Y-m-d",
+        "class_name": "datepicker-control-class",
+        "place_holder_text": {
+          "default": "yyyy-mm-dd"
+        }
       },
-			{
-				"parameter_ref": "datepicker_required",
-				"label": {
-					"default": "Date format: Date Y-m-d"
-				},
-				"description": {
-					"default": "Datepicker with no initial value, in Y-m-d format."
-				},
-				"control": "datepicker",
-				"class_name": "datepicker-control-class",
-				"place_holder_text": {
-					"default": "Date format: yyyy-mm-dd"
-				}
-			},
-			{
-				"parameter_ref": "datepicker_undefined",
-				"label": {
-					"default": "Date format: Y-n-j"
-				},
-				"description": {
-					"default": "Datepicker without initial value. This date format accepts single digit month and day."
-				},
-				"control": "datepicker",
-				"date_format": "Y-n-j",
-				"class_name": "datepicker-control-class",
-				"place_holder_text": {
-					"default": "Date: yyyy-m-d"
-				}
-			},
-			{
-				"parameter_ref": "datepicker_null",
-				"label": {
-					"default": "Date format: y-n-j"
-				},
-				"description": {
-					"default": "Datepicker with initial value set to null."
-				},
-				"control": "datepicker",
-				"date_format": "y-n-j",
-				"class_name": "datepicker-control-class",
-				"place_holder_text": {
-					"default": "yy-m-d"
-				}
-			},
-			{
-				"parameter_ref": "hide_datepicker",
-				"label": {
-					"default": "Hide 'hidden_datepicker'"
-				}
-			},
-			{
-				"parameter_ref": "hidden_datepicker",
-				"label": {
-					"default": "Datepicker: Y-m-d"
-				},
-				"description": {
-					"default": "Datepicker will be hidden if above checkbox is checked."
-				},
-				"control": "datepicker",
-				"date_format": "Y-m-d",
-				"class_name": "datepicker-control-class",
-				"place_holder_text": {
-					"default": "yyyy-mm-dd"
-				}
-			},
-			{
-				"parameter_ref": "disable_datepicker",
-				"label": {
-					"default": "Disable 'hidden_datepicker'"
-				}
-			},
-			{
-				"parameter_ref": "disabled_datepicker",
-				"label": {
-					"default": "Datepicker: Y-m-d"
-				},
-				"description": {
-					"default": "Datepicker will be disabled if above checkbox is checked."
-				},
-				"control": "datepicker",
-				"date_format": "Y-m-d",
-				"class_name": "datepicker-control-class",
-				"place_holder_text": {
-					"default": "yyyy-mm-dd"
-				}
-			},
-			{
-				"parameter_ref": "datepicker_table",
-				"label": {
-					"default": "Datepicker table"
-				}
-			}
+      {
+        "parameter_ref": "datepicker_table",
+        "label": {
+          "default": "Datepicker table"
+        }
+      }
     ],
     "complex_type_info": [
-			{
-				"complex_type_ref": "datepicker_types",
-				"parameters": [
-					{
-						"parameter_ref": "datepicker_cell",
-						"width": 10,
-						"label": {
-							"default": "Table cell"
-						},
-						"control": "datepicker",
-						"date_format": "Y-m-d",
-						"class_name": "table-datepicker-control-class",
-						"place_holder_text": {
-							"default": "yyyy-mm-dd"
-						}
-					},
-					{
-						"parameter_ref": "datepicker_on_panel",
-						"width": 10,
-						"label": {
-							"default": "on_panel"
-						},
-						"control": "datepicker",
-						"date_format": "Y-m-d",
-						"class_name": "table-on-panel-datepicker-control-class",
-						"edit_style": "on_panel",
-						"place_holder_text": {
-							"default": "yyyy-mm-dd"
-						}
-					},
-					{
-						"parameter_ref": "datepicker_sub_panel",
-						"width": 10,
-						"label": {
-							"default": "sub_panel"
-						},
-						"control": "datepicker",
-						"date_format": "Y-m-d",
-						"edit_style": "subpanel",
-						"class_name": "table-subpanel-datepicker-control-class",
-						"place_holder_text": {
-							"default": "yyyy-mm-dd"
-						}
-					}
-				]
-			}
-		],
+      {
+        "complex_type_ref": "datepicker_types",
+        "parameters": [
+          {
+            "parameter_ref": "datepicker_cell",
+            "width": 10,
+            "label": {
+              "default": "Table cell"
+            },
+            "control": "datepicker",
+            "date_format": "Y-m-d",
+            "class_name": "table-datepicker-control-class",
+            "place_holder_text": {
+              "default": "yyyy-mm-dd"
+            }
+          },
+          {
+            "parameter_ref": "datepicker_on_panel",
+            "width": 10,
+            "label": {
+              "default": "on_panel"
+            },
+            "control": "datepicker",
+            "date_format": "Y-m-d",
+            "class_name": "table-on-panel-datepicker-control-class",
+            "edit_style": "on_panel",
+            "place_holder_text": {
+              "default": "yyyy-mm-dd"
+            }
+          },
+          {
+            "parameter_ref": "datepicker_sub_panel",
+            "width": 10,
+            "label": {
+              "default": "sub_panel"
+            },
+            "control": "datepicker",
+            "date_format": "Y-m-d",
+            "edit_style": "subpanel",
+            "class_name": "table-subpanel-datepicker-control-class",
+            "place_holder_text": {
+              "default": "yyyy-mm-dd"
+            }
+          }
+        ]
+      }
+    ],
     "group_info": [
       {
         "id": "datepicker-values",
@@ -252,84 +252,78 @@
         },
         "type": "controls",
         "parameter_refs": [
-					"datepicker",
-					"datepicker_required",
-					"datepicker_undefined",
-					"datepicker_null"
+          "datepicker",
+          "datepicker_required",
+          "datepicker_undefined",
+          "datepicker_null"
+        ]
+      },
+      {
+        "id": "datepicker-conditions",
+        "label": {
+          "default": "Conditions"
+        },
+        "type": "controls",
+        "parameter_refs": [
+          "hide_datepicker",
+          "hidden_datepicker",
+          "disable_datepicker",
+          "disabled_datepicker"
         ]
       },
-			{
-				"id": "datepicker-conditions",
-				"label": {
-					"default": "Conditions"
-				},
-				"type": "controls",
-				"parameter_refs": [
-					"hide_datepicker",
-					"hidden_datepicker",
-					"disable_datepicker",
-					"disabled_datepicker"
-				]
-			},
-			{
-				"id": "datepicker-table-panels",
-				"label": {
-					"default": "Table"
-				},
-				"type": "panels",
-				"group_info": [
-					{
-						"id": "datepicker-table-summary",
-						"type": "summaryPanel",
-						"label": {
-							"default": "Edit datepicker table"
-						},
-						"group_info": [
-							{
-								"id": "datepicker-table-summary-ctrls",
-								"parameter_refs": [
-									"datepicker_table"
-								]
-							}
-						]
-					}
-				]
-			}
+      {
+        "id": "datepicker-table-panels",
+        "label": {
+          "default": "Table"
+        },
+        "type": "panels",
+        "group_info": [
+          {
+            "id": "datepicker-table-summary",
+            "type": "summaryPanel",
+            "label": {
+              "default": "Edit datepicker table"
+            },
+            "group_info": [
+              {
+                "id": "datepicker-table-summary-ctrls",
+                "parameter_refs": ["datepicker_table"]
+              }
+            ]
+          }
+        ]
+      }
     ]
   },
   "conditions": [
-		{
-			"visible": {
-				"parameter_refs": [
-					"hidden_datepicker"
-				],
-				"evaluate": {
-					"condition": {
-						"parameter_ref": "hide_datepicker",
-						"op": "equals",
-						"value": false
-					}
-				}
-			}
-		},
-		{
-			"enabled": {
-				"parameter_refs": [
-					"disabled_datepicker"
-				],
-				"evaluate": {
-					"condition": {
-						"parameter_ref": "disable_datepicker",
-						"op": "equals",
-						"value": false
-					}
-				}
-			}
-		}
-	],
-	"resources": {
-		"datepicker_required.helper": "A date is required.",
-		"datepicker_undefined.helper": "There is no initial value.",
-		"datepicker_null.helper": "Some really long text that will extend past the control. The helper text should wrap to next line."
-	}
+    {
+      "visible": {
+        "parameter_refs": ["hidden_datepicker"],
+        "evaluate": {
+          "condition": {
+            "parameter_ref": "hide_datepicker",
+            "op": "equals",
+            "value": false
+          }
+        }
+      }
+    },
+    {
+      "enabled": {
+        "parameter_refs": ["disabled_datepicker"],
+        "evaluate": {
+          "condition": {
+            "parameter_ref": "disable_datepicker",
+            "op": "equals",
+            "value": false
+          }
+        }
+      }
+    }
+  ],
+  "resources": {
+    "datepicker_required.helper": "A date is required.",
+    "datepicker_undefined.helper": "There is no initial value.",
+    "datepicker_null.helper": "Some really long text that will extend past the control. The helper text should wrap to next line."
+  }
 }
diff --git a/canvas_modules/harness/test_resources/parameterDefs/multiselect_paramDef.json b/canvas_modules/harness/test_resources/parameterDefs/multiselect_paramDef.json
index c3dc7079d0..377814cf70 100644
--- a/canvas_modules/harness/test_resources/parameterDefs/multiselect_paramDef.json
+++ b/canvas_modules/harness/test_resources/parameterDefs/multiselect_paramDef.json
@@ -304,6 +304,9 @@
         "description": {
           "default": "multiselect with parameter value set to 'blue'"
         },
+        "helper_text": {
+          "default": "MultiSelect with parameter vallue set to 'blue'"
+        },
         "control": "multiselect"
       },
       {
diff --git a/canvas_modules/harness/test_resources/parameterDefs/numberfield_paramDef.json b/canvas_modules/harness/test_resources/parameterDefs/numberfield_paramDef.json
index 8b32f247dc..9e9f567bed 100644
--- a/canvas_modules/harness/test_resources/parameterDefs/numberfield_paramDef.json
+++ b/canvas_modules/harness/test_resources/parameterDefs/numberfield_paramDef.json
@@ -161,7 +161,10 @@
         "description": {
           "default": "numberfield with parameter value set to '10'"
         },
-        "class_name": "numberfield-control-class"
+        "class_name": "numberfield-control-class",
+        "helper_text": {
+          "default": "numberfield with parameter value set to '10'"
+        }
       },
       {
         "parameter_ref": "number_dbl",
diff --git a/canvas_modules/harness/test_resources/parameterDefs/oneofselect_paramDef.json b/canvas_modules/harness/test_resources/parameterDefs/oneofselect_paramDef.json
index 50dfa48550..ca0c5a536e 100644
--- a/canvas_modules/harness/test_resources/parameterDefs/oneofselect_paramDef.json
+++ b/canvas_modules/harness/test_resources/parameterDefs/oneofselect_paramDef.json
@@ -388,7 +388,10 @@
         "description": {
           "default": "oneofselect with parameter value set to 'blue'"
         },
-        "class_name": "oneofselect-control-class"
+        "class_name": "oneofselect-control-class",
+        "helper_text": {
+          "default": "oneofselect helper text"
+        }
       },
       {
         "parameter_ref": "oneofselect_custom_value",
diff --git a/canvas_modules/harness/test_resources/parameterDefs/passwordfield_paramDef.json b/canvas_modules/harness/test_resources/parameterDefs/passwordfield_paramDef.json
index 89cac1c80b..8a3b7386cc 100644
--- a/canvas_modules/harness/test_resources/parameterDefs/passwordfield_paramDef.json
+++ b/canvas_modules/harness/test_resources/parameterDefs/passwordfield_paramDef.json
@@ -132,7 +132,10 @@
         "description": {
           "default": "passwordfield with parameter value set to 'testing'"
         },
-        "class_name": "passwordfield-control-class"
+        "class_name": "passwordfield-control-class",
+        "helper_text": {
+          "default": "passwordfield with parameter value set to 'testing'"
+        }
       },
       {
         "parameter_ref": "pwd_default",
diff --git a/canvas_modules/harness/test_resources/parameterDefs/radio_paramDef.json b/canvas_modules/harness/test_resources/parameterDefs/radio_paramDef.json
index 70bd7a8e8a..b84974f1ae 100644
--- a/canvas_modules/harness/test_resources/parameterDefs/radio_paramDef.json
+++ b/canvas_modules/harness/test_resources/parameterDefs/radio_paramDef.json
@@ -273,7 +273,10 @@
           "default": "RadioSet with enum string type"
         },
         "resource_key": "withradioString",
-        "class_name": "radioset-control-class"
+        "class_name": "radioset-control-class",
+        "helper_text": {
+          "default": "RadioSet with enum string type"
+        }
       },
       {
         "parameter_ref": "radioBooleanWithEnum",
diff --git a/canvas_modules/harness/test_resources/parameterDefs/selectcolumn_paramDef.json b/canvas_modules/harness/test_resources/parameterDefs/selectcolumn_paramDef.json
index a73365ac0c..b9f511a166 100644
--- a/canvas_modules/harness/test_resources/parameterDefs/selectcolumn_paramDef.json
+++ b/canvas_modules/harness/test_resources/parameterDefs/selectcolumn_paramDef.json
@@ -199,6 +199,9 @@
         "label": {
           "default": "Field null"
         },
+        "helper_text": {
+          "default": "selectcolumn with parameter value set to 'null'"
+        },
         "description": {
           "default": "selectcolumn with parameter value set to 'null'"
         }
diff --git a/canvas_modules/harness/test_resources/parameterDefs/textarea_paramDef.json b/canvas_modules/harness/test_resources/parameterDefs/textarea_paramDef.json
index e45d4f94af..24eeab3a49 100644
--- a/canvas_modules/harness/test_resources/parameterDefs/textarea_paramDef.json
+++ b/canvas_modules/harness/test_resources/parameterDefs/textarea_paramDef.json
@@ -187,7 +187,10 @@
         "description": {
           "default": "textarea with sting value"
         },
-        "class_name": "string-textarea-control-class"
+        "class_name": "string-textarea-control-class",
+        "helper_text": {
+          "default": "textarea with string value"
+        }
       },
       {
         "parameter_ref": "string_array",
diff --git a/canvas_modules/harness/test_resources/parameterDefs/textfield_paramDef.json b/canvas_modules/harness/test_resources/parameterDefs/textfield_paramDef.json
index a4b2ad29af..ded34a79e6 100644
--- a/canvas_modules/harness/test_resources/parameterDefs/textfield_paramDef.json
+++ b/canvas_modules/harness/test_resources/parameterDefs/textfield_paramDef.json
@@ -166,7 +166,10 @@
         "description": {
           "default": "textfield with parameter value set to 'testing'"
         },
-        "class_name": "string-textfield-control-class"
+        "class_name": "string-textfield-control-class",
+        "helper_text": {
+          "default": "textfield with parameter value set to 'testing'"
+        }
       },
       {
         "parameter_ref": "string_charLimit",
diff --git a/canvas_modules/harness/test_resources/parameterDefs/timefield_paramDef.json b/canvas_modules/harness/test_resources/parameterDefs/timefield_paramDef.json
index 514d805a0e..2644496159 100644
--- a/canvas_modules/harness/test_resources/parameterDefs/timefield_paramDef.json
+++ b/canvas_modules/harness/test_resources/parameterDefs/timefield_paramDef.json
@@ -109,6 +109,9 @@
         "description": {
           "default": "Required timefield with value set to '5:45:9' with H:m:s format"
         },
+        "helper_text": {
+          "default": "Required timefield with value set to '5:45:9' with H:m:s format"
+        },
         "time_format": "H:m:s",
         "class_name": "timefield-control-class"
       },
diff --git a/docs/pages/04.03-ui-hints.md b/docs/pages/04.03-ui-hints.md
index b9a1f2550d..d1042a5819 100644
--- a/docs/pages/04.03-ui-hints.md
+++ b/docs/pages/04.03-ui-hints.md
@@ -131,6 +131,8 @@ Parameter info attributes.
 * `visible` (*boolean*) Determines whether to display control in a table cell. Used in complex types only.
 * `place_holder_text` (*object*) Text hint for the user displayed input controls.
     + See [Resource Definition](04.03-ui-hints.md#resource-definition)
+* `helper_text` (*object*) Additional text to be displayed below the control often used to explain the correct data format.
+    + See [Resource Definition](04.03-ui-hints.md#resource-definition)
 * `resource_key` (*string*) Used as a key for enum value labels in the resources section of property definition.
 * `edit_style` (*string*) Editing style of elements in a table. Valid values are `subpanel, inline, on_panel`.
 * `value_icons` (*array[string]*) For enumerated types, this defines the set of icons for the valid values. The ordering must be consistent with the order in the parameter enum attribute.