bpmn-js-spiffworkflow/app/spiffworkflow/messages/propertiesPanel/MessageVariable.js

import { useService } from 'bpmn-js-properties-panel';
import { TextFieldEntry } from '@bpmn-io/properties-panel';
import { getMessageElementForShapeElement } from '../MessageHelpers';

/**
 * Allows the creation, or editing of messageVariable at the bpmn:sendTask level of a BPMN document.
 */
export function MessageVariable(props) {
  const shapeElement = props.element;
  const debounce = useService('debounceInput');

  const getMessageVariableObject = () => {
    const messageElement = getMessageElementForShapeElement(shapeElement);
    if (messageElement) {
      const { extensionElements } = messageElement;
      if (extensionElements) {
        return messageElement.extensionElements
          .get('values')
          .filter(function getInstanceOfType(e) {
            return e.$instanceOf('spiffworkflow:messageVariable');
          })[0];
      }
    }
    return null;
  };

  const getValue = () => {
    const messageVariableObject = getMessageVariableObject();
    if (messageVariableObject) {
      return messageVariableObject.messageVariable;
    }
    return '';
  };

  const setValue = (value) => {
    let messageVariableObject = getMessageVariableObject();
    if (!messageVariableObject) {
      const messageElement = getMessageElementForShapeElement(shapeElement);
      messageVariableObject = messageElement.$model.create(
        'spiffworkflow:messageVariable'
      );
      if (!messageElement.extensionElements) {
        messageElement.extensionElements = messageElement.$model.create(
          'bpmn:ExtensionElements'
        );
      }
      messageElement.extensionElements
        .get('values')
        .push(messageVariableObject);
    }
    messageVariableObject.messageVariable = value;
  };

  return (
    <TextFieldEntry
      id="messageVariable"
      element={shapeElement}
      description="The name of the variable where we should store payload."
      label="Variable Name"
      getValue={getValue}
      setValue={setValue}
      debounce={debounce}
    />
  );
}