How to set value to a text field in property panel?

Developers Modeler
1

Hi, Please see the screenshot below. When error log checkbox is checked I get the projection name and set it on the error log variable text input field.

When I download the XML file Error Log Variable Name input parameter is not there. If I click on the input field then I can see it’s added to the XML file. I am just wondering if I can create the element for the input field when value get sets without typing it.

Capture

Following is the code I am using:

<>props.js

      //error log variable name field
      group.entries.push(
         entryFactory.textField(translate,{
            id: 'errorLogVariableName',
            label: translate('Error Log Variable Name'),
            description: translate("Specify the name of the execution variable into which errors messages are copied. e.g. <ProjectionName>_Error_Log"),
            modelProperty: 'errorLogVariableName',
            placeholder:"placeholder text",
            hidden: function(element, node) {
               // Hides this field when the current action is CALL
               return !isErrorLogChecked(element);
            },

            get: function(element, node) {
               let result = {errorLogVariableName: getProjectionName(element)+'_Error_Log'};
               let bo = getBusinessObject(element, node);
               let inputParameter = getInputParameterByName(bo, Constants.PRJ_ERROR_LOG_VARIABLE_PARAM);


               
               if (inputParameter) {
                  let storedValue = inputParameter.get('value');
                  result = { errorLogVariableName: storedValue };
               } 
               return result;
            },

            set: function(element, values, node) {

               let bo = getBusinessObject(element, node);
               let commands = [];
               let inputParameter = getInputParameterByName(bo, Constants.PRJ_ERROR_LOG_VARIABLE_PARAM);
               //if input parameter is not present then create otherwise update it
               if (!inputParameter) {
                  commands = createInputParameterByName(
                     element,
                     bpmnFactory,
                     Constants.PRJ_ERROR_LOG_VARIABLE_PARAM,
                     values.errorLogVariableName
                  );
               } else {
                  commands.push(
                     cmdHelper.updateBusinessObject(element, inputParameter, {
                        value: values.errorLogVariableName || undefined
                     })
                  );
               }
               return commands;
            }
         })
      );

<>Helper.js

export function getProjectionName(element) {
   let bo = getBusinessObject(element);
   let inputParameter = getInputParameterByName(bo, Constants.PROJECTION_NAME_PARAM);
   return inputParameter && inputParameter.get('value');
}

export function createInputParameterByName(element, bpmnFactory, parameterName, parameterValue, isMapParameter) {
   let commands = [];
   let bo = getBusinessObject(element);
   let extensionElements = getExtensionElement(element);
   let inputOutput = inputOutputHelper.getInputOutput(bo, false);
   //create extension elements if not present
   if (!extensionElements) {
      extensionElements = elementHelper.createElement(
         'bpmn:ExtensionElements',
         { values: [] },
         bo,
         bpmnFactory
      );
      commands.push(cmdHelper.updateProperties(element, { extensionElements: extensionElements }));

      inputOutput = elementHelper.createElement(
         'camunda:InputOutput',
         { inputParameters: [] },
         extensionElements,
         bpmnFactory
      );

      commands.push(
         cmdHelper.addAndRemoveElementsFromList(
            element,
            extensionElements,
            'values',
            'extensionElements',
            [inputOutput],
            []
         )
      );

      //create default input action parameter if not present
      let actionParameter = getInputParameterByName(bo, Constants.PROJECTION_ACTION_PARAM);
      if (!actionParameter && parameterName !== Constants.PROJECTION_ACTION_PARAM) {
         actionParameter = elementHelper.createElement(
            'camunda:InputParameter',
            { name: Constants.PROJECTION_ACTION_PARAM, value: 'READ' },
            inputOutput,
            bpmnFactory
         );
         commands.push(
            cmdHelper.addElementsTolist(element, inputOutput, 'inputParameters', [actionParameter])
         );
      }
   }

   let inputParameter = getInputParameterByName(bo, parameterName);
   if (!inputParameter) {

      let properties = isMapParameter ?
         { name: parameterName} : 
         { name: parameterName, value: parameterValue };

      inputParameter = elementHelper.createElement(
         'camunda:InputParameter',
         properties,
         inputOutput,
         bpmnFactory
      );

      commands.push(cmdHelper.addElementsTolist(element, inputOutput, 'inputParameters', [inputParameter]));
   }

   if (isMapParameter) {
      if (!inputParameter.definition) {
         inputParameter.definition = elementHelper.createElement(
            'camunda:Map',
            { value: undefined, entries: [] },
            inputParameter,
            bpmnFactory
         );

         commands.push(
            cmdHelper.updateBusinessObject(element, inputParameter, {
               definition: inputParameter.definition
            })
         );
      }

      //create values input field
      let newEntry = elementHelper.createElement(
         'camunda:Entry',
         { key: parameterValue, value: undefined },
         inputParameter.definition,
         bpmnFactory
      );

      commands.push(
         cmdHelper.addElementsTolist(element, inputParameter.definition, 'entries', [newEntry])
      );
   }

   return commands;
}

Any help would be truly appreciated it.

2

Hi @subklk ,

So you want to set the Error Log Variable Name if the Log Errors checkbox is clicked?

Why don’t you just implement the logic to set the Error Log Variable Name in the set function of the checkbox component? In the end that logic would be similar to the logic you already have for the textField.

3

Hi @maxtru,

Thank you for your response.

You meant to have the following code inside the set method of checkbox:

   commands = createInputParameterByName(
               element,
               bpmnFactory,
               Constants.PRJ_ERROR_LOG_VARIABLE_PARAM,
               values.errorLogVariableName
            );

I am not sure how to return multiple commands there. I already have a command there to create a entry for checkbox. Can you please advise? I really appreciated it.

4

Hi @subklk ,

you can construct commands as array of multiple command objects. We do this in multiple places, submitting them in a single transaction - this will allow that a single undo command will also undo all of the respective commands. See example.

Regards
Max

1 Like