Merge remote-tracking branch 'origin/main' into feature/gateway_condition_expressions

2022-08-25 12:25:21 -04:00 · 2022-08-25 12:25:21 -04:00 · ca2cd90e70
parent 5ecb49e9f5 c6d4d300c3
commit ca2cd90e70
10 changed files with 945 additions and 210 deletions
--- a/app/spiffworkflow/helpers.js
+++ b/app/spiffworkflow/helpers.js
@ -0,0 +1,8 @@
+// https://stackoverflow.com/a/5767357/6090676
+export function removeFirstInstanceOfItemFromArrayInPlace(arr, value) {
+  const index = arr.indexOf(value);
+  if (index > -1) {
+    arr.splice(index, 1);
+  }
+  return arr;
+}
--- a/app/spiffworkflow/messages/MessageHelpers.js
+++ b/app/spiffworkflow/messages/MessageHelpers.js
@ -4,13 +4,22 @@ import { is } from 'bpmn-js/lib/util/ModelUtil';
 * loops up until it can find the root.
 * @param element
 */
-export function getRoot(businessObject) {
-  // todo: Do we want businessObject to be a shape or moddle object?
-  if (businessObject.$type === 'bpmn:Definitions') {
-    return businessObject;
-  }
-  if (typeof businessObject.$parent !== 'undefined') {
-    return getRoot(businessObject.$parent);
+export function getRoot(businessObject, moddle) {
+  // HACK: get the root element. need a more formal way to do this
+  if (moddle) {
+    for (const elementId in moddle.ids._seed.hats) {
+      if (elementId.startsWith('Definitions_')) {
+        return moddle.ids._seed.hats[elementId];
+      }
+    }
+  } else {
+    // todo: Do we want businessObject to be a shape or moddle object?
+    if (businessObject.$type === 'bpmn:Definitions') {
+      return businessObject;
+    }
+    if (typeof businessObject.$parent !== 'undefined') {
+      return getRoot(businessObject.$parent);
+    }
  }
  return businessObject;
 }
@ -59,23 +68,40 @@ export function getMessageRefElement(shapeElement) {
  return null;
 }

-export function findFormalExpressions(shapeElement) {
+export function findCorrelationKeyForCorrelationProperty(shapeElement, moddle) {
+  const correlationKeyElements = findCorrelationKeys(shapeElement, moddle);
+  for (const cke of correlationKeyElements) {
+    if (cke.correlationPropertyRef) {
+      for (const correlationPropertyRef of cke.correlationPropertyRef) {
+        if (correlationPropertyRef.id === shapeElement.id) {
+          return cke;
+        }
+      }
+    }
+  }
+  return null;
+}
+
+export function findCorrelationPropertiesAndRetrievalExpressionsForMessage(
+  shapeElement
+) {
  const formalExpressions = [];
-  const messageRef = getMessageRefElement(shapeElement);
-  if (messageRef) {
+  const messageRefElement = getMessageRefElement(shapeElement);
+  if (messageRefElement) {
    const root = getRoot(shapeElement.businessObject);
    if (root.$type === 'bpmn:Definitions') {
      for (const childElement of root.rootElements) {
        if (childElement.$type === 'bpmn:CorrelationProperty') {
-          const retrievalExpression = processCorrelationProperty(
-            childElement,
-            messageRef
-          );
-          // todo: is there a better test for this than length === 1?
-          if (retrievalExpression.length === 1) {
+          const retrievalExpression =
+            getRetrievalExpressionFromCorrelationProperty(
+              childElement,
+              messageRefElement
+            );
+          if (retrievalExpression) {
            const formalExpression = {
-              correlationId: childElement.id,
-              expression: retrievalExpression[0],
+              correlationPropertyModdleElement: childElement,
+              correlationPropertyRetrievalExpressionModdleElement:
+                retrievalExpression,
            };
            formalExpressions.push(formalExpression);
          }
@ -100,24 +126,27 @@ export function getMessageElementForShapeElement(shapeElement) {
  return null;
 }

-function processCorrelationProperty(correlationProperty, message) {
-  const expressions = [];
-  for (const retrievalExpression of correlationProperty.correlationPropertyRetrievalExpression) {
-    if (
-      retrievalExpression.$type ===
-        'bpmn:CorrelationPropertyRetrievalExpression' &&
-      retrievalExpression.messageRef &&
-      retrievalExpression.messageRef.id === message.id &&
-      retrievalExpression.messagePath.body
-    ) {
-      expressions.push(retrievalExpression.messagePath.body);
+function getRetrievalExpressionFromCorrelationProperty(
+  correlationProperty,
+  message
+) {
+  if (correlationProperty.correlationPropertyRetrievalExpression) {
+    for (const retrievalExpression of correlationProperty.correlationPropertyRetrievalExpression) {
+      if (
+        retrievalExpression.$type ===
+          'bpmn:CorrelationPropertyRetrievalExpression' &&
+        retrievalExpression.messageRef &&
+        retrievalExpression.messageRef.id === message.id
+      ) {
+        return retrievalExpression;
+      }
    }
  }
-  return expressions;
+  return null;
 }

-export function findCorrelationProperties(businessObject) {
-  const root = getRoot(businessObject);
+export function findCorrelationProperties(businessObject, moddle) {
+  const root = getRoot(businessObject, moddle);
  const correlationProperties = [];
  for (const rootElement of root.rootElements) {
    if (rootElement.$type === 'bpmn:CorrelationProperty') {
@ -127,8 +156,8 @@ export function findCorrelationProperties(businessObject) {
  return correlationProperties;
 }

-export function findCorrelationKeys(businessObject) {
-  const root = getRoot(businessObject);
+export function findCorrelationKeys(businessObject, moddle) {
+  const root = getRoot(businessObject, moddle);
  const correlationKeys = [];
  for (const rootElement of root.rootElements) {
    if (rootElement.$type === 'bpmn:Collaboration') {
@ -136,15 +165,6 @@ export function findCorrelationKeys(businessObject) {
      for (const correlationKey in currentKeys) {
        const currentCorrelation = rootElement.correlationKeys[correlationKey];
        correlationKeys.push(currentCorrelation);
-        // const currentProperty = {};
-        // currentProperty.name = currentCorrelation.name;
-        // currentProperty.refs = [];
-        // for (const correlationProperty in currentCorrelation.correlationPropertyRef) {
-        //   currentProperty.refs.push(
-        //     currentCorrelation.correlationPropertyRef[correlationProperty]
-        //   );
-        // }
-        // correlationKeys.push(currentProperty);
      }
    }
  }
--- a/app/spiffworkflow/messages/propertiesPanel/CorrelationKeysArray.js
+++ b/app/spiffworkflow/messages/propertiesPanel/CorrelationKeysArray.js
@ -1,6 +1,7 @@
 import { useService } from 'bpmn-js-properties-panel';
 import { SimpleEntry, TextFieldEntry } from '@bpmn-io/properties-panel';
 import { findCorrelationKeys, getRoot } from '../MessageHelpers';
+import { removeFirstInstanceOfItemFromArrayInPlace } from '../../helpers';

 /**
 * Provides a list of data objects, and allows you to add / remove data objects, and change their ids.
@ -10,18 +11,24 @@ import { findCorrelationKeys, getRoot } from '../MessageHelpers';
 export function CorrelationKeysArray(props) {
  const { element, moddle, commandStack } = props;

-  const correlationKeys = findCorrelationKeys(element.businessObject);
-  const items = correlationKeys.map((correlationKey, index) => {
+  const correlationKeyElements = findCorrelationKeys(element.businessObject);
+  const items = correlationKeyElements.map((correlationKeyElement, index) => {
    const id = `correlationGroup-${index}`;
    return {
      id,
-      label: correlationKey.name,
+      label: correlationKeyElement.name,
      entries: correlationGroup({
        id,
        element,
-        correlationKey,
+        correlationKeyElement,
        commandStack,
      }),
+      remove: removeFactory({
+        element,
+        correlationKeyElement,
+        commandStack,
+        moddle,
+      }),
      autoFocusEntry: id,
    };
  });
@ -32,14 +39,14 @@ export function CorrelationKeysArray(props) {
      const newCorrelationKeyElement = moddle.create('bpmn:CorrelationKey');
      newCorrelationKeyElement.name =
        moddle.ids.nextPrefixed('CorrelationKey_');
-      const correlationKeyElements =
+      const currentCorrelationKeyElements =
        element.businessObject.get('correlationKeys');
-      correlationKeyElements.push(newCorrelationKeyElement);
+      currentCorrelationKeyElements.push(newCorrelationKeyElement);
      commandStack.execute('element.updateProperties', {
        element,
        moddleElement: moddle,
        properties: {
-          correlationKey: correlationKeyElements,
+          correlationKeys: currentCorrelationKeyElements,
        },
      });
    }
@ -48,23 +55,44 @@ export function CorrelationKeysArray(props) {
  return { items, add };
 }

+function removeFactory(props) {
+  const { element, correlationKeyElement, moddle, commandStack } = props;
+
+  return function (event) {
+    event.stopPropagation();
+    const currentCorrelationKeyElements =
+      element.businessObject.get('correlationKeys');
+    removeFirstInstanceOfItemFromArrayInPlace(
+      currentCorrelationKeyElements,
+      correlationKeyElement
+    );
+    commandStack.execute('element.updateProperties', {
+      element,
+      moddleElement: moddle,
+      properties: {
+        correlationKey: currentCorrelationKeyElements,
+      },
+    });
+  };
+}
+
 // <bpmn:correlationKey name="lover"> <--- The correlationGroup
 //   <bpmn:correlationPropertyRef>lover_name</bpmn:correlationPropertyRef>
 //   <bpmn:correlationPropertyRef>lover_instrument</bpmn:correlationPropertyRef>
 // </bpmn:correlationKey>
 // <bpmn:correlationKey name="singer" />
 function correlationGroup(props) {
-  const { correlationKey, commandStack } = props;
-  const id = `correlation-${correlationKey.name}`;
+  const { correlationKeyElement, commandStack } = props;
+  const id = `correlation-${correlationKeyElement.name}`;
  const entries = [
    {
-      id: `${id}-${correlationKey.name}-key`,
+      id: `${id}-${correlationKeyElement.name}-key`,
      component: CorrelationKeyTextField,
-      correlationKey,
+      correlationKeyElement,
      commandStack,
    },
  ];
-  (correlationKey.correlationPropertyRef || []).forEach(
+  (correlationKeyElement.correlationPropertyRef || []).forEach(
    (correlationProperty) => {
      entries.push({
        id: `${id}-${correlationProperty.id}-group`,
@ -77,13 +105,13 @@ function correlationGroup(props) {
 }

 function CorrelationKeyTextField(props) {
-  const { id, element, correlationKey, commandStack } = props;
+  const { id, element, correlationKeyElement, commandStack } = props;

  const debounce = useService('debounceInput');
  const setValue = (value) => {
    commandStack.execute('element.updateModdleProperties', {
      element,
-      moddleElement: correlationKey,
+      moddleElement: correlationKeyElement,
      properties: {
        name: value,
      },
@ -91,7 +119,7 @@ function CorrelationKeyTextField(props) {
  };

  const getValue = () => {
-    return correlationKey.name;
+    return correlationKeyElement.name;
  };

  return TextFieldEntry({
@ -105,7 +133,6 @@ function CorrelationKeyTextField(props) {

 function CorrelationPropertyText(props) {
  const { id, parameter, correlationProperty } = props;
-
  const debounce = useService('debounceInput');

  const getValue = () => {
--- a/app/spiffworkflow/messages/propertiesPanel/CorrelationPropertiesArray.js
+++ b/app/spiffworkflow/messages/propertiesPanel/CorrelationPropertiesArray.js
@ -1,11 +1,16 @@
 import { useService } from 'bpmn-js-properties-panel';
 import {
+  SelectEntry,
  isTextFieldEntryEdited,
-  ListGroup,
-  TextAreaEntry,
  TextFieldEntry,
 } from '@bpmn-io/properties-panel';
-import { findFormalExpressions } from '../MessageHelpers';
+import {
+  getRoot,
+  findCorrelationKeys,
+  findCorrelationProperties,
+  findCorrelationKeyForCorrelationProperty,
+} from '../MessageHelpers';
+import { removeFirstInstanceOfItemFromArrayInPlace } from '../../helpers';

 /**
 * Allows the creation, or editing of messageCorrelations at the bpmn:sendTask level of a BPMN document.
@ -14,93 +19,289 @@ export function CorrelationPropertiesArray(props) {
  const { moddle } = props;
  const { element } = props;
  const { commandStack } = props;
-  // const { elementRegistry } = props;
+  const { translate } = props;

-  const formalExpressions = findFormalExpressions(element);
-  const items = formalExpressions.map((formalExpression) => {
-    const id = `correlation-${formalExpression.correlationId}`;
-    const entries = MessageCorrelationGroup({
-      idPrefix: id,
-      formalExpression,
-    });
-    return {
-      id,
-      label: formalExpression.correlationId,
-      entries,
-      autoFocusEntry: id,
-      // remove: removeFactory({ element, correlationProperty, commandStack, elementRegistry })
-    };
-  });
+  const correlationPropertyArray = findCorrelationProperties(
+    element.businessObject
+  );
+  const items = correlationPropertyArray.map(
+    (correlationPropertyModdleElement, index) => {
+      const id = `correlation-${index}`;
+      const entries = MessageCorrelationPropertyGroup({
+        idPrefix: id,
+        correlationPropertyModdleElement,
+        translate,
+        commandStack,
+        moddle,
+      });
+      return {
+        id,
+        label: correlationPropertyModdleElement.id,
+        entries,
+        autoFocusEntry: id,
+        remove: removeFactory({
+          element,
+          correlationPropertyModdleElement,
+          commandStack,
+          moddle,
+        }),
+      };
+    }
+  );

  function add(event) {
    event.stopPropagation();
-    const newRetrievalExpression = moddle.create(
-      'bpmn:CorrelationPropertyRetrievalExpression'
+    const newCorrelationPropertyElement = moddle.create(
+      'bpmn:CorrelationProperty'
    );
-    const newElements = formalExpressions;
-    newRetrievalExpression.messageRef = element.businessObject.messageRef;
-    newElements.push(newRetrievalExpression);
-    commandStack.execute('element.updateModdleProperties', {
+    const correlationPropertyId = moddle.ids.nextPrefixed(
+      'CorrelationProperty_'
+    );
+    newCorrelationPropertyElement.id = correlationPropertyId;
+    newCorrelationPropertyElement.name = correlationPropertyId;
+    const rootElement = getRoot(element.businessObject);
+    const { rootElements } = rootElement;
+    rootElements.push(newCorrelationPropertyElement);
+
+    const correlationKeyElements = findCorrelationKeys(
+      newCorrelationPropertyElement,
+      moddle
+    );
+    const correlationKeyElement = correlationKeyElements[0];
+    if (correlationKeyElement.correlationPropertyRef) {
+      correlationKeyElement.correlationPropertyRef.push(
+        newCorrelationPropertyElement
+      );
+    } else {
+      correlationKeyElement.correlationPropertyRef = [
+        newCorrelationPropertyElement,
+      ];
+    }
+
+    commandStack.execute('element.updateProperties', {
      element,
-      moddleElement: element.businessObject,
+      properties: {},
    });
  }

  return { items, add };
 }

-function MessageCorrelationGroup(props) {
-  const { idPrefix, formalExpression } = props;
+function removeFactory(props) {
+  const { element, correlationPropertyModdleElement, moddle, commandStack } =
+    props;

+  return function (event) {
+    event.stopPropagation();
+    const rootElement = getRoot(element.businessObject);
+    const { rootElements } = rootElement;
+
+    const oldCorrelationKeyElement = findCorrelationKeyForCorrelationProperty(
+      correlationPropertyModdleElement,
+      moddle
+    );
+    if (oldCorrelationKeyElement) {
+      removeFirstInstanceOfItemFromArrayInPlace(
+        oldCorrelationKeyElement.correlationPropertyRef,
+        correlationPropertyModdleElement
+      );
+    }
+
+    removeFirstInstanceOfItemFromArrayInPlace(
+      rootElements,
+      correlationPropertyModdleElement
+    );
+    commandStack.execute('element.updateProperties', {
+      element,
+      properties: {
+        messages: rootElements,
+      },
+    });
+  };
+}
+
+function MessageCorrelationPropertyGroup(props) {
+  const {
+    idPrefix,
+    correlationPropertyModdleElement,
+    translate,
+    commandStack,
+    moddle,
+  } = props;
  return [
    {
-      id: `${idPrefix}-group`,
-      component: MessageCorrelationTextField,
+      id: `${idPrefix}-correlation-key`,
+      component: MessageCorrelationKeySelect,
      isEdited: isTextFieldEntryEdited,
      idPrefix,
-      formalExpression,
+      correlationPropertyModdleElement,
+      translate,
+      moddle,
+    },
+    {
+      id: `${idPrefix}-correlation-property-id`,
+      component: CorrelationPropertyIdTextField,
+      isEdited: isTextFieldEntryEdited,
+      idPrefix,
+      correlationPropertyModdleElement,
+      translate,
+      commandStack,
+    },
+    {
+      id: `${idPrefix}-correlation-property-name`,
+      component: CorrelationPropertyNameTextField,
+      isEdited: isTextFieldEntryEdited,
+      idPrefix,
+      correlationPropertyModdleElement,
+      translate,
+      commandStack,
    },
  ];
 }

-function MessageCorrelationTextField(props) {
-  const { idPrefix, element, parameter, formalExpression } = props;
-
-  const commandStack = useService('commandStack');
+function MessageCorrelationKeySelect(props) {
+  const {
+    idPrefix,
+    correlationPropertyModdleElement,
+    translate,
+    parameter,
+    moddle,
+  } = props;
  const debounce = useService('debounceInput');

+  const setValue = (value) => {
+    const correlationKeyElements = findCorrelationKeys(
+      correlationPropertyModdleElement,
+      moddle
+    );
+    let newCorrelationKeyElement;
+    for (const cke of correlationKeyElements) {
+      if (cke.name === value) {
+        newCorrelationKeyElement = cke;
+      }
+    }
+    const oldCorrelationKeyElement = findCorrelationKeyForCorrelationProperty(
+      correlationPropertyModdleElement,
+      moddle
+    );
+
+    if (newCorrelationKeyElement.correlationPropertyRef) {
+      newCorrelationKeyElement.correlationPropertyRef.push(
+        correlationPropertyModdleElement
+      );
+    } else {
+      newCorrelationKeyElement.correlationPropertyRef = [
+        correlationPropertyModdleElement,
+      ];
+    }
+
+    if (oldCorrelationKeyElement) {
+      removeFirstInstanceOfItemFromArrayInPlace(
+        oldCorrelationKeyElement.correlationPropertyRef,
+        correlationPropertyModdleElement
+      );
+    }
+  };
+
+  const getValue = () => {
+    const correlationKeyElement = findCorrelationKeyForCorrelationProperty(
+      correlationPropertyModdleElement,
+      moddle
+    );
+    if (correlationKeyElement) {
+      return correlationKeyElement.name;
+    }
+    return null;
+  };
+
+  const getOptions = () => {
+    const correlationKeyElements = findCorrelationKeys(
+      correlationPropertyModdleElement,
+      moddle
+    );
+    const options = [];
+    for (const correlationKeyElement of correlationKeyElements) {
+      options.push({
+        label: correlationKeyElement.name,
+        value: correlationKeyElement.name,
+      });
+    }
+    return options;
+  };
+
+  return SelectEntry({
+    id: `${idPrefix}-select`,
+    element: parameter,
+    label: translate('Correlation Key'),
+    getValue,
+    setValue,
+    getOptions,
+    debounce,
+  });
+}
+
+function CorrelationPropertyIdTextField(props) {
+  const {
+    id,
+    element,
+    correlationPropertyModdleElement,
+    commandStack,
+    translate,
+  } = props;
+
+  const debounce = useService('debounceInput');
  const setValue = (value) => {
    commandStack.execute('element.updateModdleProperties', {
      element,
-      moddleElement: formalExpression,
+      moddleElement: correlationPropertyModdleElement,
      properties: {
        id: value,
      },
    });
-
-    // Also update the label of all the references
-    // const references = findDataReferenceShapes(element, correlationProperty.id);
-    const references = ['hello1', 'hello2'];
-    for (const ref of references) {
-      commandStack.execute('element.updateProperties', {
-        element: ref,
-        moddleElement: ref.businessObject,
-        properties: {
-          name: value,
-        },
-        changed: [ref], // everything is already marked as changed, don't recalculate.
-      });
-    }
  };

-  const getValue = (_parameter) => {
-    return formalExpression.expression;
+  const getValue = () => {
+    return correlationPropertyModdleElement.id;
  };

  return TextFieldEntry({
-    element: parameter,
-    id: `${idPrefix}-textField`,
-    label: 'Expression',
+    element,
+    id: `${id}-id-textField`,
+    label: translate('ID'),
+    getValue,
+    setValue,
+    debounce,
+  });
+}
+
+function CorrelationPropertyNameTextField(props) {
+  const {
+    id,
+    element,
+    correlationPropertyModdleElement,
+    commandStack,
+    translate,
+  } = props;
+
+  const debounce = useService('debounceInput');
+  const setValue = (value) => {
+    commandStack.execute('element.updateModdleProperties', {
+      element,
+      moddleElement: correlationPropertyModdleElement,
+      properties: {
+        name: value,
+      },
+    });
+  };
+
+  const getValue = () => {
+    return correlationPropertyModdleElement.name;
+  };
+
+  return TextFieldEntry({
+    element,
+    id: `${id}-name-textField`,
+    label: translate('Name'),
    getValue,
    setValue,
    debounce,
--- a/app/spiffworkflow/messages/propertiesPanel/MessageArray.js
+++ b/app/spiffworkflow/messages/propertiesPanel/MessageArray.js
@ -0,0 +1,158 @@
+import { useService } from 'bpmn-js-properties-panel';
+import { TextFieldEntry } from '@bpmn-io/properties-panel';
+import { without } from 'min-dash';
+import {
+  findCorrelationKeys,
+  getRoot,
+  findMessageModdleElements,
+} from '../MessageHelpers';
+import { removeFirstInstanceOfItemFromArrayInPlace } from '../../helpers';
+
+/**
+ * Provides a list of data objects, and allows you to add / remove data objects, and change their ids.
+ * @param props
+ * @constructor
+ */
+export function MessageArray(props) {
+  const { element, moddle, commandStack, translate } = props;
+
+  const messageElements = findMessageModdleElements(element.businessObject);
+  const items = messageElements.map((messageElement, index) => {
+    const id = `messageElement-${index}`;
+    return {
+      id,
+      label: messageElement.name,
+      entries: messageGroup({
+        id,
+        element,
+        messageElement,
+        commandStack,
+        translate,
+      }),
+      autoFocusEntry: id,
+      remove: removeFactory({
+        element,
+        messageElement,
+        commandStack,
+        moddle,
+      }),
+    };
+  });
+
+  function add(event) {
+    event.stopPropagation();
+    if (element.type === 'bpmn:Collaboration') {
+      const newMessageElement = moddle.create('bpmn:Message');
+      const messageId = moddle.ids.nextPrefixed('Message_');
+      newMessageElement.id = messageId;
+      newMessageElement.name = messageId;
+      const rootElement = getRoot(element.businessObject);
+      const { rootElements } = rootElement;
+      rootElements.push(newMessageElement);
+      commandStack.execute('element.updateProperties', {
+        element,
+        moddleElement: moddle,
+        properties: {
+          messages: rootElements,
+        },
+      });
+    }
+  }
+
+  return { items, add };
+}
+
+function removeFactory(props) {
+  const { element, messageElement, moddle, commandStack } = props;
+
+  return function (event) {
+    event.stopPropagation();
+    const rootElement = getRoot(element.businessObject);
+    const { rootElements } = rootElement;
+    removeFirstInstanceOfItemFromArrayInPlace(rootElements, messageElement);
+    commandStack.execute('element.updateProperties', {
+      element,
+      moddleElement: moddle,
+      properties: {
+        messages: rootElements,
+      },
+    });
+  };
+}
+
+function messageGroup(props) {
+  const { messageElement, commandStack, translate } = props;
+  const id = `message-${messageElement.name}`;
+  return [
+    {
+      id: `${id}-${messageElement.name}-key`,
+      component: MessageIdTextField,
+      messageElement,
+      commandStack,
+      translate,
+    },
+    {
+      id: `${id}-${messageElement.name}-key`,
+      component: MessageNameTextField,
+      messageElement,
+      commandStack,
+      translate,
+    },
+  ];
+}
+
+function MessageIdTextField(props) {
+  const { id, element, messageElement, commandStack, translate } = props;
+
+  const debounce = useService('debounceInput');
+  const setValue = (value) => {
+    commandStack.execute('element.updateModdleProperties', {
+      element,
+      moddleElement: messageElement,
+      properties: {
+        id: value,
+      },
+    });
+  };
+
+  const getValue = () => {
+    return messageElement.id;
+  };
+
+  return TextFieldEntry({
+    element,
+    id: `${id}-id-textField`,
+    label: translate('ID'),
+    getValue,
+    setValue,
+    debounce,
+  });
+}
+
+function MessageNameTextField(props) {
+  const { id, element, messageElement, commandStack, translate } = props;
+
+  const debounce = useService('debounceInput');
+  const setValue = (value) => {
+    commandStack.execute('element.updateModdleProperties', {
+      element,
+      moddleElement: messageElement,
+      properties: {
+        name: value,
+      },
+    });
+  };
+
+  const getValue = () => {
+    return messageElement.name;
+  };
+
+  return TextFieldEntry({
+    element,
+    id: `${id}-name-textField`,
+    label: translate('Name'),
+    getValue,
+    setValue,
+    debounce,
+  });
+}
--- a/app/spiffworkflow/messages/propertiesPanel/MessageCorrelationPropertiesArray.js
+++ b/app/spiffworkflow/messages/propertiesPanel/MessageCorrelationPropertiesArray.js
@ -0,0 +1,278 @@
+import { useService } from 'bpmn-js-properties-panel';
+import {
+  SelectEntry,
+  isTextFieldEntryEdited,
+  TextFieldEntry,
+} from '@bpmn-io/properties-panel';
+import {
+  findCorrelationPropertiesAndRetrievalExpressionsForMessage,
+  findCorrelationProperties,
+  getMessageRefElement,
+} from '../MessageHelpers';
+import { removeFirstInstanceOfItemFromArrayInPlace } from '../../helpers';
+
+/**
+ * Allows the creation, or editing of messageCorrelations at the bpmn:sendTask level of a BPMN document.
+ */
+export function MessageCorrelationPropertiesArray(props) {
+  const { moddle } = props;
+  const { element } = props;
+  const { commandStack } = props;
+  const { translate } = props;
+
+  const correlationPropertyObjectsForCurrentMessage =
+    findCorrelationPropertiesAndRetrievalExpressionsForMessage(element);
+  const allCorrelationPropertyModdleElements = findCorrelationProperties(
+    element,
+    moddle
+  );
+  const items = correlationPropertyObjectsForCurrentMessage.map(
+    (correlationPropertyObject, index) => {
+      const {
+        correlationPropertyModdleElement,
+        correlationPropertyRetrievalExpressionModdleElement,
+      } = correlationPropertyObject;
+      const id = `correlation-${index}`;
+      const entries = MessageCorrelationPropertyGroup({
+        idPrefix: id,
+        correlationPropertyModdleElement,
+        correlationPropertyRetrievalExpressionModdleElement,
+        translate,
+        moddle,
+        element,
+        commandStack,
+      });
+      return {
+        id,
+        label: correlationPropertyModdleElement.id,
+        entries,
+        autoFocusEntry: id,
+        remove: removeFactory({
+          element,
+          correlationPropertyModdleElement,
+          correlationPropertyRetrievalExpressionModdleElement,
+          commandStack,
+        }),
+      };
+    }
+  );
+
+  function add(event) {
+    event.stopPropagation();
+
+    let correlationPropertyElement;
+    allCorrelationPropertyModdleElements.forEach((cpe) => {
+      let foundElement = false;
+      correlationPropertyObjectsForCurrentMessage.forEach((cpo) => {
+        const cpme = cpo.correlationPropertyModdleElement;
+        if (cpme.id === cpe.id) {
+          foundElement = true;
+        }
+      });
+      if (!foundElement) {
+        correlationPropertyElement = cpe;
+      }
+    });
+
+    // TODO: we should have some way to show an error if element is not found instead
+    // we need to check this since the code assumes each message only has one ref
+    // and will not display all properties if there are multiple
+    if (correlationPropertyElement) {
+      const newRetrievalExpressionElement = moddle.create(
+        'bpmn:CorrelationPropertyRetrievalExpression'
+      );
+      const messageRefElement = getMessageRefElement(element);
+      const newFormalExpression = moddle.create('bpmn:FormalExpression');
+      newFormalExpression.body = '';
+
+      newRetrievalExpressionElement.messageRef = messageRefElement;
+      newRetrievalExpressionElement.messagePath = newFormalExpression;
+
+      if (!correlationPropertyElement.correlationPropertyRetrievalExpression) {
+        correlationPropertyElement.correlationPropertyRetrievalExpression = [];
+      }
+      correlationPropertyElement.correlationPropertyRetrievalExpression.push(
+        newRetrievalExpressionElement
+      );
+      commandStack.execute('element.updateProperties', {
+        element,
+        properties: {},
+      });
+    } else {
+      console.log(
+        'ERROR: There are not any more correlation properties this message can be added to'
+      );
+    }
+  }
+
+  const returnObject = { items };
+  if (allCorrelationPropertyModdleElements.length !== 0) {
+    returnObject.add = add;
+  }
+  return returnObject;
+}
+
+function removeFactory(props) {
+  const {
+    element,
+    correlationPropertyModdleElement,
+    correlationPropertyRetrievalExpressionModdleElement,
+    commandStack,
+  } = props;
+
+  return function (event) {
+    event.stopPropagation();
+    removeFirstInstanceOfItemFromArrayInPlace(
+      correlationPropertyModdleElement.correlationPropertyRetrievalExpression,
+      correlationPropertyRetrievalExpressionModdleElement
+    );
+    commandStack.execute('element.updateProperties', {
+      element,
+      properties: {},
+    });
+  };
+}
+
+function MessageCorrelationPropertyGroup(props) {
+  const {
+    idPrefix,
+    correlationPropertyModdleElement,
+    correlationPropertyRetrievalExpressionModdleElement,
+    translate,
+    moddle,
+    element,
+    commandStack,
+  } = props;
+  return [
+    {
+      id: `${idPrefix}-correlation-key`,
+      component: MessageCorrelationPropertySelect,
+      isEdited: isTextFieldEntryEdited,
+      idPrefix,
+      correlationPropertyModdleElement,
+      correlationPropertyRetrievalExpressionModdleElement,
+      translate,
+      moddle,
+      element,
+      commandStack,
+    },
+    {
+      id: `${idPrefix}-expression`,
+      component: MessageCorrelationExpressionTextField,
+      isEdited: isTextFieldEntryEdited,
+      idPrefix,
+      correlationPropertyRetrievalExpressionModdleElement,
+      translate,
+    },
+  ];
+}
+
+function MessageCorrelationPropertySelect(props) {
+  const {
+    idPrefix,
+    correlationPropertyModdleElement,
+    correlationPropertyRetrievalExpressionModdleElement,
+    translate,
+    parameter,
+    moddle,
+    element,
+    commandStack,
+  } = props;
+  const debounce = useService('debounceInput');
+
+  const setValue = (value) => {
+    const allCorrelationPropertyModdleElements = findCorrelationProperties(
+      correlationPropertyModdleElement,
+      moddle
+    );
+    const newCorrelationPropertyElement =
+      allCorrelationPropertyModdleElements.find((cpe) => cpe.id === value);
+
+    if (!newCorrelationPropertyElement.correlationPropertyRetrievalExpression) {
+      newCorrelationPropertyElement.correlationPropertyRetrievalExpression = [];
+    }
+    newCorrelationPropertyElement.correlationPropertyRetrievalExpression.push(
+      correlationPropertyRetrievalExpressionModdleElement
+    );
+    removeFirstInstanceOfItemFromArrayInPlace(
+      correlationPropertyModdleElement.correlationPropertyRetrievalExpression,
+      correlationPropertyRetrievalExpressionModdleElement
+    );
+    commandStack.execute('element.updateProperties', {
+      element,
+      properties: {},
+    });
+  };
+
+  const getValue = () => {
+    return correlationPropertyModdleElement.id;
+  };
+
+  const getOptions = () => {
+    const allCorrelationPropertyModdleElements = findCorrelationProperties(
+      correlationPropertyModdleElement,
+      moddle
+    );
+    const correlationPropertyObjectsForCurrentMessage =
+      findCorrelationPropertiesAndRetrievalExpressionsForMessage(element);
+    const options = [];
+    for (const cpe of allCorrelationPropertyModdleElements) {
+      const foundElement = correlationPropertyObjectsForCurrentMessage.find(
+        (cpo) => {
+          const cpme = cpo.correlationPropertyModdleElement;
+          return cpme.id === cpe.id;
+        }
+      );
+      if (
+        !foundElement ||
+        foundElement.correlationPropertyModdleElement ===
+          correlationPropertyModdleElement
+      ) {
+        options.push({
+          label: cpe.name,
+          value: cpe.id,
+        });
+      }
+    }
+    return options;
+  };
+
+  return SelectEntry({
+    id: `${idPrefix}-select`,
+    element: parameter,
+    label: translate('Correlation Property'),
+    getValue,
+    setValue,
+    getOptions,
+    debounce,
+  });
+}
+
+function MessageCorrelationExpressionTextField(props) {
+  const {
+    idPrefix,
+    parameter,
+    correlationPropertyRetrievalExpressionModdleElement,
+    translate,
+  } = props;
+
+  const debounce = useService('debounceInput');
+
+  const setValue = (value) => {
+    correlationPropertyRetrievalExpressionModdleElement.messagePath.body =
+      value;
+  };
+
+  const getValue = (_parameter) => {
+    return correlationPropertyRetrievalExpressionModdleElement.messagePath.body;
+  };
+
+  return TextFieldEntry({
+    element: parameter,
+    id: `${idPrefix}-textField`,
+    label: translate('Expression'),
+    getValue,
+    setValue,
+    debounce,
+  });
+}
--- a/app/spiffworkflow/messages/propertiesPanel/MessagesPropertiesProvider.js
+++ b/app/spiffworkflow/messages/propertiesPanel/MessagesPropertiesProvider.js
@ -5,6 +5,8 @@ import { MessageSelect } from './MessageSelect';
 import { MessagePayload } from './MessagePayload';
 import { MessageVariable } from './MessageVariable';
 import { CorrelationPropertiesArray } from './CorrelationPropertiesArray';
+import { MessageCorrelationPropertiesArray } from './MessageCorrelationPropertiesArray';
+import { MessageArray } from './MessageArray';
 import { isMessageElement, canReceiveMessage } from '../MessageHelpers';

 const LOW_PRIORITY = 500;
@ -20,7 +22,7 @@ export default function MessagesPropertiesProvider(
    return function pushGroup(groups) {
      if (is(element, 'bpmn:Collaboration')) {
        groups.push(
-          createCollaborationGroup(
+          ...createCollaborationGroup(
            element,
            translate,
            moddle,
@ -80,12 +82,44 @@ function createCollaborationGroup(
  commandStack,
  elementRegistry
 ) {
-  return {
-    id: 'correlation_keys',
-    label: translate('Correlation Keys'),
-    component: ListGroup,
-    ...CorrelationKeysArray({ element, moddle, commandStack, elementRegistry }),
-  };
+  return [
+    {
+      id: 'correlation_keys',
+      label: translate('Correlation Keys'),
+      component: ListGroup,
+      ...CorrelationKeysArray({
+        element,
+        moddle,
+        commandStack,
+        elementRegistry,
+        translate,
+      }),
+    },
+    {
+      id: 'correlation_properties',
+      label: translate('Correlation Properties'),
+      component: ListGroup,
+      ...CorrelationPropertiesArray({
+        element,
+        moddle,
+        commandStack,
+        elementRegistry,
+        translate,
+      }),
+    },
+    {
+      id: 'messages',
+      label: translate('Messages'),
+      component: ListGroup,
+      ...MessageArray({
+        element,
+        moddle,
+        commandStack,
+        elementRegistry,
+        translate,
+      }),
+    },
+  ];
 }

 /**
@ -133,13 +167,14 @@ function createMessageGroup(

  entries.push({
    id: 'correlationProperties',
-    label: translate('Correlation Properties'),
+    label: translate('Correlation'),
    component: ListGroup,
-    ...CorrelationPropertiesArray({
+    ...MessageCorrelationPropertiesArray({
      element,
      moddle,
      commandStack,
      elementRegistry,
+      translate,
    }),
  });

--- a/package-lock.json
+++ b/package-lock.json
@ -9,9 +9,9 @@
      "version": "0.0.8",
      "license": "MIT",
      "dependencies": {
-        "@bpmn-io/properties-panel": "^0.18.0",
-        "bpmn-js": "^9.2.2",
-        "bpmn-js-properties-panel": "^1.2.0",
+        "@bpmn-io/properties-panel": "^0.19.0",
+        "bpmn-js": "^9.4.0",
+        "bpmn-js-properties-panel": "^1.5.0",
        "diagram-js": "^8.5.0",
        "inherits": "^2.0.4",
        "inherits-browser": "^0.0.1",
@ -1929,9 +1929,9 @@
      }
    },
    "node_modules/@bpmn-io/properties-panel": {
-      "version": "0.18.0",
-      "resolved": "https://registry.npmjs.org/@bpmn-io/properties-panel/-/properties-panel-0.18.0.tgz",
-      "integrity": "sha512-2OCc6QplFKlCG8hmsAuUvd0JJTPjGvTJ6zxO73R9TpnUw7PKsXq2oIJjJfWsNdmvpmkxeyHoklOf5XpQXFjygw==",
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/@bpmn-io/properties-panel/-/properties-panel-0.19.0.tgz",
+      "integrity": "sha512-cw+MfA2gpCBsa9Q0+JT3Gc7OvR1NGXuyQj4yOk5QoQHNzxuIMNuz6EX2NvDsCrf0oSzc9z0FapbzDuJB+DSC1g==",
      "dependencies": {
        "@bpmn-io/feel-editor": "0.2.0",
        "classnames": "^2.3.1",
@ -3019,26 +3019,26 @@
      "dev": true
    },
    "node_modules/bpmn-js": {
-      "version": "9.2.2",
-      "resolved": "https://registry.npmjs.org/bpmn-js/-/bpmn-js-9.2.2.tgz",
-      "integrity": "sha512-Zs0e3fKEKIrnfVt+r4hkcqSg2XyMdXwp6x4xM0TDfGlduxyQWQ8rrqsjvnL4UEg4K0noBPqDce2vRawOilwReg==",
+      "version": "9.4.0",
+      "resolved": "https://registry.npmjs.org/bpmn-js/-/bpmn-js-9.4.0.tgz",
+      "integrity": "sha512-7dusZBYCFognA0TmspWaKZ47UjFhyRT+//hMdyLtPCKY1M0uAPXHoFv73MohlsEa7a75h0q6zjCj5W0/RHBwvg==",
      "dependencies": {
-        "bpmn-moddle": "^7.1.2",
+        "bpmn-moddle": "^7.1.3",
        "css.escape": "^1.5.1",
-        "diagram-js": "^8.5.0",
+        "diagram-js": "^8.9.0",
        "diagram-js-direct-editing": "^1.7.0",
        "ids": "^1.0.0",
        "inherits-browser": "0.0.1",
        "min-dash": "^3.5.2",
-        "min-dom": "^3.2.0",
+        "min-dom": "^3.2.1",
        "object-refs": "^0.3.0",
-        "tiny-svg": "^2.2.2"
+        "tiny-svg": "^2.2.4"
      }
    },
    "node_modules/bpmn-js-properties-panel": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/bpmn-js-properties-panel/-/bpmn-js-properties-panel-1.4.0.tgz",
-      "integrity": "sha512-+15Yg7FohrdpDuKqegxU9OyGgYcH6sZM06DjwBLKrpqHgmXEXMA0yD0UI9Rc95P4mRfsT4rAzGpZjYnsYgOshg==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/bpmn-js-properties-panel/-/bpmn-js-properties-panel-1.5.0.tgz",
+      "integrity": "sha512-0VAPk6xK/u+GepjGjt8HAXtBa2ab5o4Dkn5II8UgnFMoQThpvrsLras3vh1il8j/2vPhngAsfiA8z7Y9nJ6/Hw==",
      "dependencies": {
        "@bpmn-io/element-templates-validator": "^0.9.0",
        "@bpmn-io/extract-process-variables": "^0.5.0",
@ -3051,20 +3051,20 @@
        "semver-compare": "^1.0.0"
      },
      "peerDependencies": {
-        "@bpmn-io/properties-panel": "0.18.x",
+        "@bpmn-io/properties-panel": "0.19.x",
        "bpmn-js": "8.x || 9.x",
        "camunda-bpmn-js-behaviors": "0.1.x",
        "diagram-js": "7.x || 8.x"
      }
    },
    "node_modules/bpmn-moddle": {
-      "version": "7.1.2",
-      "resolved": "https://registry.npmjs.org/bpmn-moddle/-/bpmn-moddle-7.1.2.tgz",
-      "integrity": "sha512-Sax4LokRCTqlg26njjULN3ZGtCmwH5gZVUZTRF0jwJk+YpMQhSfSoUECxjNv8OROoLxu8Z+MjdOHIxgvJf7KwA==",
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/bpmn-moddle/-/bpmn-moddle-7.1.3.tgz",
+      "integrity": "sha512-ZcBfw0NSOdYTSXFKEn7MOXHItz7VfLZTrFYKO8cK6V8ZzGjCcdiLIOiw7Lctw1PJsihhLiZQS8Htj2xKf+NwCg==",
      "dependencies": {
        "min-dash": "^3.5.2",
        "moddle": "^5.0.2",
-        "moddle-xml": "^9.0.5"
+        "moddle-xml": "^9.0.6"
      }
    },
    "node_modules/brace-expansion": {
@ -3723,12 +3723,12 @@
      "dev": true
    },
    "node_modules/diagram-js": {
-      "version": "8.5.0",
-      "resolved": "https://registry.npmjs.org/diagram-js/-/diagram-js-8.5.0.tgz",
-      "integrity": "sha512-UHA/Zfs7kG22M9wXAifAyPb2OZ4lG4lFi0CZ0GC6/lXmOsSHwHVZ1s/h9UqaIXnzIKW8SnZoP3Rwqel1ZhZLzg==",
+      "version": "8.9.0",
+      "resolved": "https://registry.npmjs.org/diagram-js/-/diagram-js-8.9.0.tgz",
+      "integrity": "sha512-577bUEbkwZ7id4SCXcD2qrlKoRPXry2SDSPt5T6tEOjwKrTllKr5d1HZoJzGws4VMQq5fmY51Gce1iFT9S4Dlw==",
      "dependencies": {
        "css.escape": "^1.5.1",
-        "didi": "^8.0.0",
+        "didi": "^8.0.1",
        "hammerjs": "^2.0.1",
        "inherits-browser": "0.0.1",
        "min-dash": "^3.5.2",
@ -3751,9 +3751,9 @@
      }
    },
    "node_modules/didi": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/didi/-/didi-8.0.0.tgz",
-      "integrity": "sha512-PwqTBaYzzfJSyxvpXPcTWF6nDdCKx2mFAU5eup1ZSb5wbaAS9a/HiKdtcAUdie/VMLHoFI50jkYZcA+bhUOugw=="
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/didi/-/didi-8.0.1.tgz",
+      "integrity": "sha512-7oXiXbp8DHE3FfQsVBkc2pwePo3Jy2uyGS9trAeBmfxiZAP4WV23LWokRpMmyl3hlu8OEAsyMxx19i5P6TVaJQ=="
    },
    "node_modules/diff": {
      "version": "5.0.0",
@ -6622,9 +6622,9 @@
      }
    },
    "node_modules/moddle-xml": {
-      "version": "9.0.5",
-      "resolved": "https://registry.npmjs.org/moddle-xml/-/moddle-xml-9.0.5.tgz",
-      "integrity": "sha512-1t9N35ZMQZTYZmRDoh1mBVd0XwLB34BkBywNJ0+YlLLYxaDBjFR/I+fqwsY746ayYPBz6yNRg8JpLyFgNF+eHg==",
+      "version": "9.0.6",
+      "resolved": "https://registry.npmjs.org/moddle-xml/-/moddle-xml-9.0.6.tgz",
+      "integrity": "sha512-tl0reHpsY/aKlLGhXeFlQWlYAQHFxTkFqC8tq8jXRYpQSnLVw13T6swMaourLd7EXqHdWsc+5ggsB+fEep6xZQ==",
      "dependencies": {
        "min-dash": "^3.5.2",
        "moddle": "^5.0.2",
@ -8471,9 +8471,9 @@
      "dev": true
    },
    "node_modules/tiny-svg": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/tiny-svg/-/tiny-svg-2.2.3.tgz",
-      "integrity": "sha512-u5KGg889pD1W2c9GlLrTnAGzIkAO00/VXZGyzeiGHw+b9er8McLO0SnhxPQQDwDqFO0MrJ825AEsRUoTiDZFuQ=="
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/tiny-svg/-/tiny-svg-2.2.4.tgz",
+      "integrity": "sha512-NOi39lBknf4UdDEahNkbEAJnzhu1ZcN2j75IS2vLRmIhsfxdZpTChfLKBcN1ShplVmPIXJAIafk6YY5/Aa80lQ=="
    },
    "node_modules/tinydate": {
      "version": "1.3.0",
@ -10489,9 +10489,9 @@
      }
    },
    "@bpmn-io/properties-panel": {
-      "version": "0.18.0",
-      "resolved": "https://registry.npmjs.org/@bpmn-io/properties-panel/-/properties-panel-0.18.0.tgz",
-      "integrity": "sha512-2OCc6QplFKlCG8hmsAuUvd0JJTPjGvTJ6zxO73R9TpnUw7PKsXq2oIJjJfWsNdmvpmkxeyHoklOf5XpQXFjygw==",
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/@bpmn-io/properties-panel/-/properties-panel-0.19.0.tgz",
+      "integrity": "sha512-cw+MfA2gpCBsa9Q0+JT3Gc7OvR1NGXuyQj4yOk5QoQHNzxuIMNuz6EX2NvDsCrf0oSzc9z0FapbzDuJB+DSC1g==",
      "requires": {
        "@bpmn-io/feel-editor": "0.2.0",
        "classnames": "^2.3.1",
@ -11408,26 +11408,26 @@
      }
    },
    "bpmn-js": {
-      "version": "9.2.2",
-      "resolved": "https://registry.npmjs.org/bpmn-js/-/bpmn-js-9.2.2.tgz",
-      "integrity": "sha512-Zs0e3fKEKIrnfVt+r4hkcqSg2XyMdXwp6x4xM0TDfGlduxyQWQ8rrqsjvnL4UEg4K0noBPqDce2vRawOilwReg==",
+      "version": "9.4.0",
+      "resolved": "https://registry.npmjs.org/bpmn-js/-/bpmn-js-9.4.0.tgz",
+      "integrity": "sha512-7dusZBYCFognA0TmspWaKZ47UjFhyRT+//hMdyLtPCKY1M0uAPXHoFv73MohlsEa7a75h0q6zjCj5W0/RHBwvg==",
      "requires": {
-        "bpmn-moddle": "^7.1.2",
+        "bpmn-moddle": "^7.1.3",
        "css.escape": "^1.5.1",
-        "diagram-js": "^8.5.0",
+        "diagram-js": "^8.9.0",
        "diagram-js-direct-editing": "^1.7.0",
        "ids": "^1.0.0",
        "inherits-browser": "0.0.1",
        "min-dash": "^3.5.2",
-        "min-dom": "^3.2.0",
+        "min-dom": "^3.2.1",
        "object-refs": "^0.3.0",
-        "tiny-svg": "^2.2.2"
+        "tiny-svg": "^2.2.4"
      }
    },
    "bpmn-js-properties-panel": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/bpmn-js-properties-panel/-/bpmn-js-properties-panel-1.4.0.tgz",
-      "integrity": "sha512-+15Yg7FohrdpDuKqegxU9OyGgYcH6sZM06DjwBLKrpqHgmXEXMA0yD0UI9Rc95P4mRfsT4rAzGpZjYnsYgOshg==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/bpmn-js-properties-panel/-/bpmn-js-properties-panel-1.5.0.tgz",
+      "integrity": "sha512-0VAPk6xK/u+GepjGjt8HAXtBa2ab5o4Dkn5II8UgnFMoQThpvrsLras3vh1il8j/2vPhngAsfiA8z7Y9nJ6/Hw==",
      "requires": {
        "@bpmn-io/element-templates-validator": "^0.9.0",
        "@bpmn-io/extract-process-variables": "^0.5.0",
@ -11441,13 +11441,13 @@
      }
    },
    "bpmn-moddle": {
-      "version": "7.1.2",
-      "resolved": "https://registry.npmjs.org/bpmn-moddle/-/bpmn-moddle-7.1.2.tgz",
-      "integrity": "sha512-Sax4LokRCTqlg26njjULN3ZGtCmwH5gZVUZTRF0jwJk+YpMQhSfSoUECxjNv8OROoLxu8Z+MjdOHIxgvJf7KwA==",
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/bpmn-moddle/-/bpmn-moddle-7.1.3.tgz",
+      "integrity": "sha512-ZcBfw0NSOdYTSXFKEn7MOXHItz7VfLZTrFYKO8cK6V8ZzGjCcdiLIOiw7Lctw1PJsihhLiZQS8Htj2xKf+NwCg==",
      "requires": {
        "min-dash": "^3.5.2",
        "moddle": "^5.0.2",
-        "moddle-xml": "^9.0.5"
+        "moddle-xml": "^9.0.6"
      }
    },
    "brace-expansion": {
@ -11943,12 +11943,12 @@
      "dev": true
    },
    "diagram-js": {
-      "version": "8.5.0",
-      "resolved": "https://registry.npmjs.org/diagram-js/-/diagram-js-8.5.0.tgz",
-      "integrity": "sha512-UHA/Zfs7kG22M9wXAifAyPb2OZ4lG4lFi0CZ0GC6/lXmOsSHwHVZ1s/h9UqaIXnzIKW8SnZoP3Rwqel1ZhZLzg==",
+      "version": "8.9.0",
+      "resolved": "https://registry.npmjs.org/diagram-js/-/diagram-js-8.9.0.tgz",
+      "integrity": "sha512-577bUEbkwZ7id4SCXcD2qrlKoRPXry2SDSPt5T6tEOjwKrTllKr5d1HZoJzGws4VMQq5fmY51Gce1iFT9S4Dlw==",
      "requires": {
        "css.escape": "^1.5.1",
-        "didi": "^8.0.0",
+        "didi": "^8.0.1",
        "hammerjs": "^2.0.1",
        "inherits-browser": "0.0.1",
        "min-dash": "^3.5.2",
@ -11968,9 +11968,9 @@
      }
    },
    "didi": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/didi/-/didi-8.0.0.tgz",
-      "integrity": "sha512-PwqTBaYzzfJSyxvpXPcTWF6nDdCKx2mFAU5eup1ZSb5wbaAS9a/HiKdtcAUdie/VMLHoFI50jkYZcA+bhUOugw=="
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/didi/-/didi-8.0.1.tgz",
+      "integrity": "sha512-7oXiXbp8DHE3FfQsVBkc2pwePo3Jy2uyGS9trAeBmfxiZAP4WV23LWokRpMmyl3hlu8OEAsyMxx19i5P6TVaJQ=="
    },
    "diff": {
      "version": "5.0.0",
@ -14157,9 +14157,9 @@
      }
    },
    "moddle-xml": {
-      "version": "9.0.5",
-      "resolved": "https://registry.npmjs.org/moddle-xml/-/moddle-xml-9.0.5.tgz",
-      "integrity": "sha512-1t9N35ZMQZTYZmRDoh1mBVd0XwLB34BkBywNJ0+YlLLYxaDBjFR/I+fqwsY746ayYPBz6yNRg8JpLyFgNF+eHg==",
+      "version": "9.0.6",
+      "resolved": "https://registry.npmjs.org/moddle-xml/-/moddle-xml-9.0.6.tgz",
+      "integrity": "sha512-tl0reHpsY/aKlLGhXeFlQWlYAQHFxTkFqC8tq8jXRYpQSnLVw13T6swMaourLd7EXqHdWsc+5ggsB+fEep6xZQ==",
      "requires": {
        "min-dash": "^3.5.2",
        "moddle": "^5.0.2",
@ -15527,9 +15527,9 @@
      "dev": true
    },
    "tiny-svg": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/tiny-svg/-/tiny-svg-2.2.3.tgz",
-      "integrity": "sha512-u5KGg889pD1W2c9GlLrTnAGzIkAO00/VXZGyzeiGHw+b9er8McLO0SnhxPQQDwDqFO0MrJ825AEsRUoTiDZFuQ=="
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/tiny-svg/-/tiny-svg-2.2.4.tgz",
+      "integrity": "sha512-NOi39lBknf4UdDEahNkbEAJnzhu1ZcN2j75IS2vLRmIhsfxdZpTChfLKBcN1ShplVmPIXJAIafk6YY5/Aa80lQ=="
    },
    "tinydate": {
      "version": "1.3.0",
--- a/package.json
+++ b/package.json
@ -73,9 +73,9 @@
    "webpack-cli": "^4.9.2"
  },
  "dependencies": {
-    "@bpmn-io/properties-panel": "^0.18.0",
-    "bpmn-js": "^9.2.2",
-    "bpmn-js-properties-panel": "^1.2.0",
+    "@bpmn-io/properties-panel": "^0.19.0",
+    "bpmn-js": "^9.4.0",
+    "bpmn-js-properties-panel": "^1.5.0",
    "diagram-js": "^8.5.0",
    "inherits": "^2.0.4",
    "inherits-browser": "^0.0.1",
--- a/test/spec/bpmn/basic_message.bpmn
+++ b/test/spec/bpmn/basic_message.bpmn
@ -6,6 +6,9 @@
    <bpmn:messageFlow id="message_send_flow" name="Message Send Flow" sourceRef="send_message" targetRef="receive_message" />
    <bpmn:messageFlow id="message_response_flow" name="Message Response Flow" sourceRef="respond_to_message" targetRef="receive_message_response" />
    <bpmn:correlationKey name="message_correlation_key">
+      <bpmn:correlationPropertyRef>correlation_property_one</bpmn:correlationPropertyRef>
+    </bpmn:correlationKey>
+    <bpmn:correlationKey name="new_key">
      <bpmn:correlationPropertyRef>message_correlation_property</bpmn:correlationPropertyRef>
    </bpmn:correlationKey>
  </bpmn:collaboration>
@ -63,24 +66,17 @@
      <bpmn:messageEventDefinition id="MessageEventDefinition_0kakria" />
    </bpmn:intermediateThrowEvent>
  </bpmn:process>
+  <bpmn:correlationProperty id="correlation_property_one" name="Correlation Property One">
+    <bpmn:correlationPropertyRetrievalExpression messageRef="message_send">
+      <bpmn:formalExpression>new</bpmn:formalExpression>
+    </bpmn:correlationPropertyRetrievalExpression>
+  </bpmn:correlationProperty>
  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Collaboration_0oye1os">
      <bpmndi:BPMNShape id="Participant_0bjh770_di" bpmnElement="message_initiator" isHorizontal="true">
        <dc:Bounds x="120" y="52" width="600" height="250" />
        <bpmndi:BPMNLabel />
      </bpmndi:BPMNShape>
-      <bpmndi:BPMNEdge id="Flow_176e02g_di" bpmnElement="Flow_176e02g">
-        <di:waypoint x="215" y="177" />
-        <di:waypoint x="280" y="177" />
-      </bpmndi:BPMNEdge>
-      <bpmndi:BPMNEdge id="Flow_1qgz6p0_di" bpmnElement="Flow_1qgz6p0">
-        <di:waypoint x="478" y="177" />
-        <di:waypoint x="552" y="177" />
-      </bpmndi:BPMNEdge>
-      <bpmndi:BPMNEdge id="Flow_037vpjk_di" bpmnElement="Flow_037vpjk">
-        <di:waypoint x="380" y="177" />
-        <di:waypoint x="442" y="177" />
-      </bpmndi:BPMNEdge>
      <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">
        <dc:Bounds x="179" y="159" width="36" height="36" />
      </bpmndi:BPMNShape>
@ -97,17 +93,21 @@
      <bpmndi:BPMNShape id="Event_0kndoyu_di" bpmnElement="Event_0kndoyu">
        <dc:Bounds x="552" y="159" width="36" height="36" />
      </bpmndi:BPMNShape>
+      <bpmndi:BPMNEdge id="Flow_037vpjk_di" bpmnElement="Flow_037vpjk">
+        <di:waypoint x="380" y="177" />
+        <di:waypoint x="442" y="177" />
+      </bpmndi:BPMNEdge>
+      <bpmndi:BPMNEdge id="Flow_1qgz6p0_di" bpmnElement="Flow_1qgz6p0">
+        <di:waypoint x="478" y="177" />
+        <di:waypoint x="552" y="177" />
+      </bpmndi:BPMNEdge>
+      <bpmndi:BPMNEdge id="Flow_176e02g_di" bpmnElement="Flow_176e02g">
+        <di:waypoint x="215" y="177" />
+        <di:waypoint x="280" y="177" />
+      </bpmndi:BPMNEdge>
      <bpmndi:BPMNShape id="Participant_0mr0gg1_di" bpmnElement="message_receiver" isHorizontal="true">
        <dc:Bounds x="120" y="350" width="600" height="250" />
      </bpmndi:BPMNShape>
-      <bpmndi:BPMNEdge id="Flow_0505x87_di" bpmnElement="Flow_0505x87">
-        <di:waypoint x="248" y="480" />
-        <di:waypoint x="372" y="480" />
-      </bpmndi:BPMNEdge>
-      <bpmndi:BPMNEdge id="Flow_1273yit_di" bpmnElement="Flow_1273yit">
-        <di:waypoint x="408" y="480" />
-        <di:waypoint x="532" y="480" />
-      </bpmndi:BPMNEdge>
      <bpmndi:BPMNShape id="Event_052nccg_di" bpmnElement="receive_message">
        <dc:Bounds x="212" y="462" width="36" height="36" />
        <bpmndi:BPMNLabel>
@ -123,6 +123,14 @@
          <dc:Bounds x="362" y="505" width="57" height="27" />
        </bpmndi:BPMNLabel>
      </bpmndi:BPMNShape>
+      <bpmndi:BPMNEdge id="Flow_0505x87_di" bpmnElement="Flow_0505x87">
+        <di:waypoint x="248" y="480" />
+        <di:waypoint x="372" y="480" />
+      </bpmndi:BPMNEdge>
+      <bpmndi:BPMNEdge id="Flow_1273yit_di" bpmnElement="Flow_1273yit">
+        <di:waypoint x="408" y="480" />
+        <di:waypoint x="532" y="480" />
+      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge id="Flow_1ueajoz_di" bpmnElement="message_send_flow">
        <di:waypoint x="300" y="217" />
        <di:waypoint x="300" y="340" />