Set Value to the input field in Property panel


#1

Hi Team,

How to set Value to the input field in Property panel.

Thanks
-Prameela


#2

Hi @prameela

In the properties panel when adding a group entry you can specify a set and get function. The set function takes the following parameters element, values, containerElement, what you can do is use the cmd helper to update the business object. So something like the following:

var is = require(‘bpmn-js/lib/util/ModelUtil’).is,
entryFactory = require(‘bpmn-js-properties-panel/lib/factory/EntryFactory’),
domQuery = require(‘min-dom/lib/query’),
getBusinessObject = require(‘bpmn-js/lib/util/ModelUtil’).getBusinessObject,
eventDefinitionHelper = require(‘bpmn-js-properties-panel/lib/helper/EventDefinitionHelper’),
elementHelper = require(‘bpmn-js-properties-panel/lib/helper/ElementHelper’),
extensionElementsHelper = require(‘bpmn-js-properties-panel/lib/helper/ExtensionElementsHelper’),
cmdHelper = require(‘bpmn-js-properties-panel/lib/helper/CmdHelper’),
forEach = require(‘lodash/collection/forEach’);

module.exports = function(group, element, bpmnFactory) {
var bo = getBusinessObject(element);

group.entries.push({
‘id’: ‘mytextinput’,
‘label’: ‘text input’,
‘description’: ‘’,
‘html’: ‘’,

  set: function(element, values, containerElement) {
  	var cmd;
  	
  	cmd = cmdHelper.updateBusinessObject(element, {}, {})
  	
  	return cmd;
  },	

  get: function(element) {}		

})
}

Just to add there are quite a few ways to update a property, so I would look at the properties panel provider parts. e.g https://github.com/bpmn-io/bpmn-js-properties-panel/blob/master/lib/provider/bpmn/parts/ProcessProps.js


#3

Hey @prameela,

can you please be more precise, what you mean by “setting value to the input field”?

Thanks :slight_smile:


#5

Hi Dalestone,

Thanks for reply.Whatever the way you said correct but my requirement is different. In-detail explained below

@pedesen
Thanks for reply.Please find In-detail explanation for the above issue.

I have one input field like this,

      var entityTypeEntry = entryFactory.textField({
		    id: 'entityType',
		    description: '',
		    label: 'Entity Type',
		    modelProperty: 'entityType',
   });
group.entries.push(entityTypeEntry);

and populating data to the input field manually based on ‘Id’ and triggering the change event

$("#camunda-entityType").val(displayName).change();

Predefind event given by bpmn.io ,In Property Panel to trigger event when data entered(Keyboard events) into the input field is

domDelegate.bind(container, ‘[data-entry]’, ‘change’, handleChange);

How can i trigger above event when data populated into input field manually through .val() method.Please help me to resolve this issue.

Thanks
-Prameela


#6

Fire event with bubbles=true. Look at TestHelper.js


#7

Hi Team,

Still this issue exists for me.Could anybody suggest me popup functionality in property-panel

Thanks
-Prameela


#8

@prameela did you manage to do this? any update?