How to populate a textField dynamically?


#1

Hi,
I want to change the input value by clicked a button.

I have the following code:

group.entries.push({
   id: 'assignee',
   html: '<div class="bpp-row bpp-select">'
       + '     <label for="assignee">Assignee</label>'
       + '     <div class="bpp-field-wrapper">'
       + '         <input id="assignee" name="assignee" data-value />'
       + '         <button style="position: static; width: auto;" id="setAssigneeBtn" data-action="setAssignee">SET ASSIGNEE</button>'
       + '     </div>'
       + '</div>',
   get(el) {
      return {
         assignee: getAssignee(el)
      };
   },
   set(el, value) {
      const bo = getBusinessObject(el);
      const props = setAssignee(el, value);

      return cmdHelper.updateBusinessObject(element, bo, props);
   },
   setAssignee(element, node) {
      setTimeout(() => {
         const bo = getBusinessObject(element);
         const props = {'camunda:assignee': 'LIUZHIYUAN'};
         cmdHelper.updateBusinessObject(element, bo, props);  // <===== not working
      }, 2000);
    }
});

Thanks in advance.


#2

What exactly isn’t working? Is there an error? Nothing happens?

As an example you can have a look at how ExtensionElements is implementing adding and removing extension elements.


#3

Thanks for your replay.

Nothing happens, I’m going to try your example now.


#4

Hi, Philipp

I made some changes:

group.entries.push({
   id: 'assignee',
   html: '<div class="bpp-row bpp-select">'
       + '     <label for="assignee">Assignee</label>'
       + '     <div class="bpp-field-wrapper">'
       + '         <input id="assignee" name="assignee" data-value />'
       + '         <button style="position: static; width: auto;" id="setAssigneeBtn" data-action="setAssignee">SET ASSIGNEE</button>'
       + '     </div>'
       + '</div>',
   get(el) {
      return {
         assignee: getAssignee(el)
      };
   },
   set(el, value) {
      const bo = getBusinessObject(el);
      const props = setAssignee(el, value);

      return cmdHelper.updateBusinessObject(element, bo, props);
   },
   setAssignee(element, node) {
      query("input[id='assignee']", node).value = 'LIUZHIYUAN';
      return true; // <=== working

      setTimeout(() => {
        query("input[id='assignee']", node).value = 'LIUZHIYUAN'; // <=== not working, the input changed, but xml not change
      }, 1000)
    }
});

can you help me? thanks again


#5

You can’t just set the value using the DOM element. Changing the assignee has to be done through a command. The command must be returned as it is done in set. The command helper is a utility for creating such a command. Please make yourself familiar with how the toolkit uses the command pattern.


#6

ok, thank you very much.

i will learn and try cmd pattern