How can update BPMN diagram add custome property in user task form using jquery or angular or other soulution?

Developers
1

I draw process using modeler after finished saved this file i want add costume property
contains JSON object (form builder).
what i do it’s draw diagram as below : 1

the below form generated from form builder :
2

the below JSON object will be saved :
{
“components”: [{
“input”: true,
“tableView”: true,
“inputType”: “text”,
“inputMask”: “”,
“label”: “First Name”,
“key”: “firstName”,
“placeholder”: “Enter your first name”,
“prefix”: “”,
“suffix”: “”,
“multiple”: false,
“defaultValue”: “”,
“protected”: false,
“unique”: false,
“persistent”: true,
“validate”: {
“required”: false,
“minLength”: “”,
“maxLength”: “”,
“pattern”: “”,
“custom”: “”,
“customPrivate”: false
},
“conditional”: {
“show”: false,
“when”: null,
“eq”: “”
},
“type”: “textfield”,
“$$hashKey”: “object:14”,
“autofocus”: false,
“hidden”: false,
“clearOnHide”: true,
“spellcheck”: true
},
{
“input”: true,
“tableView”: true,
“inputType”: “text”,
“inputMask”: “”,
“label”: “Last Name”,
“key”: “lastName”,
“placeholder”: “Enter your last name”,
“prefix”: “”,
“suffix”: “”,
“multiple”: false,
“defaultValue”: “”,
“protected”: false,
“unique”: false,
“persistent”: true,
“validate”: {
“required”: false,
“minLength”: “”,
“maxLength”: “”,
“pattern”: “”,
“custom”: “”,
“customPrivate”: false
},
“conditional”: {
“show”: false,
“when”: null,
“eq”: “”
},
“type”: “textfield”,
“$$hashKey”: “object:15”,
“autofocus”: false,
“hidden”: false,
“clearOnHide”: true,
“spellcheck”: true
},
{
“type”: “button”,
“theme”: “primary”,
“disableOnInvalid”: true,
“action”: “submit”,
“block”: false,
“rightIcon”: “”,
“leftIcon”: “”,
“size”: “md”,
“key”: “submit”,
“tableView”: false,
“label”: “Submit”,
“input”: true,
“$$hashKey”: “object:18”,
“autofocus”: false
}],
“display”: “form”,
“page”: 0
}

what i expect it’s like this :

  <bpmn2:extensionElements>
    <camunda:properties>
      <camunda:property name="form_JSON" value="{ 	components: [{ 		input: true, 		tableView: true, 		inputType: &#39;text&#39;, 		inputMask: &#39;&#39;, 		label: &#39;FirstName&#39;, 		key: &#39;firstName&#39;, 		placeholder: &#39;Enteryourfirstname&#39;, 		prefix: &#39;&#39;, 		suffix: &#39;&#39;, 		multiple: false, 		defaultValue: &#39;&#39;, 		protected: false, 		unique: false, 		persistent: true, 		validate: { 			required: false, 			minLength: &#39;&#39;, 			maxLength: &#39;&#39;, 			pattern: &#39;&#39;, 			custom: &#39;&#39;, 			customPrivate: false 		}, 		conditional: { 			show: false, 			when: null, 			eq: &#39;&#39; 		}, 		type: &#39;textfield&#39; 	}, 	{ 		input: true, 		tableView: true, 		inputType: &#39;text&#39;, 		inputMask: &#39;&#39;, 		label: &#39;LastName&#39;, 		key: &#39;lastName&#39;, 		placeholder: &#39;Enteryourlastname&#39;, 		prefix: &#39;&#39;, 		suffix: &#39;&#39;, 		multiple: false, 		defaultValue: &#39;&#39;, 		protected: false, 		unique: false, 		persistent: true, 		validate: { 			required: false, 			minLength: &#39;&#39;, 			maxLength: &#39;&#39;, 			pattern: &#39;&#39;, 			custom: &#39;&#39;, 			customPrivate: false 		}, 		conditional: { 			show: false, 			when: null, 			eq: &#39;&#39; 		}, 		type: &#39;textfield&#39; 	}, 	{ 		type: &#39;select&#39;, 		validate: { 			required: false 		}, 		clearOnHide: true, 		persistent: true, 		unique: false, 		protected: false, 		multiple: true, 		template: &#39;&#60;span&#62;{ 			{ 				item.label 			} 		}&#60;/span&#62;&#39;, 		authenticate: false, 		filter: &#39;&#39;, 		refreshOn: &#39;&#39;, 		defaultValue: &#39;&#39;, 		valueProperty: &#39;&#39;, 		dataSrc: &#39;values&#39;, 		data: { 			custom: &#39;&#39;, 			resource: &#39;&#39;, 			url: &#39;&#39;, 			json: &#39;&#39;, 			values: [{ 				label: &#39;Raindropsonroses&#39;, 				value: &#39;raindropsOnRoses&#39; 			}, 			{ 				label: &#39;WhiskersonKittens&#39;, 				value: &#39;whiskersOnKittens&#39; 			}, 			{ 				label: &#39;Brightcopperkettles&#39;, 				value: &#39;brightCopperKettles&#39; 			}, 			{ 				label: &#39;WarmwoolenMittens&#39;, 				value: &#39;warmWoolenMittens&#39; 			}, 			[]] 		}, 		placeholder: &#39;Selectafew&#39;, 		key: &#39;favoriteThings&#39;, 		label: &#39;FavoriteThings&#39;, 		tableView: true, 		input: true 	}, 	{ 		input: true, 		tableView: true, 		label: &#39;Message&#39;, 		key: &#39;message&#39;, 		placeholder: &#39;Whatdoyouthink?&#39;, 		prefix: &#39;&#39;, 		suffix: &#39;&#39;, 		rows: 3, 		multiple: false, 		defaultValue: &#39;&#39;, 		protected: false, 		persistent: true, 		validate: { 			required: false, 			minLength: &#39;&#39;, 			maxLength: &#39;&#39;, 			pattern: &#39;&#39;, 			custom: &#39;&#39; 		}, 		type: &#39;textarea&#39;, 		conditional: { 			show: false, 			when: null, 			eq: &#39;&#39; 		} 	}, 	{ 		type: &#39;button&#39;, 		theme: &#39;primary&#39;, 		disableOnInvalid: true, 		action: &#39;submit&#39;, 		block: false, 		rightIcon: &#39;&#39;, 		leftIcon: &#39;&#39;, 		size: &#39;md&#39;, 		key: &#39;submit&#39;, 		tableView: false, 		label: &#39;Submit&#39;, 		input: true 	}], 	display: &#39;form&#39; };" />
    </camunda:properties>
  </bpmn2:extensionElements>
2

So you want to add a property to a BPMN element in bpmn-js. Wether you’re using Angular or anything else is not relevant. There’s also no need for using jQuery. Have you familiarized yourself with how properties are edited in bpmn-js? You migh want to have a look at this example