OnChange Events

app/spiffworkflow/DataObject/DataObjectInterceptor.js

@@ -87,6 +87,7 @@ export default class DataObjectInterceptor extends CommandInterceptor {
           dataObject = existingDataObjects[0];
         } else {
           dataObject = bpmnFactory.create('bpmn:DataObject');
+          dataObject.name = 'DataObject Name';
         }
         // set the reference to the DataObject
         shape.businessObject.dataObjectRef = dataObject;
@@ -107,7 +108,7 @@ export default class DataObjectInterceptor extends CommandInterceptor {
           element: shape,
           moddleElement: shape.businessObject,
           properties: {
-            name: idToHumanReadableName(shape.businessObject.dataObjectRef.id),
+            name: idToHumanReadableName(shape.businessObject.dataObjectRef.name),
           },
         });
       }

app/spiffworkflow/DataObject/propertiesPanel/DataObjectArray.js

@@ -57,6 +57,7 @@ export function DataObjectArray(props) {
     const newDataObject = moddle.create('bpmn:DataObject');
     const newElements = process.get('flowElements');
     newDataObject.id = moddle.ids.nextPrefixed('DataObject_');
+    newDataObject.name = 'DataObject Name';
     newDataObject.$parent = process;
     newElements.push(newDataObject);
     commandStack.execute('element.updateModdleProperties', {
@@ -153,11 +154,14 @@ function DataObjectNameTextField(props) {
     // Update references name
     const references = findDataObjectReferenceShapes(element.children, dataObject.id);
     for (const ref of references) {
+      const stateName = ref.businessObject.dataState && ref.businessObject.dataState.name ? ref.businessObject.dataState.name : '';
+      const newName = stateName ? `${value} [${stateName}]` : value;
+      
       commandStack.execute('element.updateProperties', {
         element: ref,
         moddleElement: ref.businessObject,
         properties: {
-          name: idToHumanReadableName(value),
+          name: newName,
         },
         changed: [ref],
       });

app/spiffworkflow/DataObject/propertiesPanel/DataObjectSelect.js

@@ -1,6 +1,6 @@
-import {useService } from 'bpmn-js-properties-panel';
+import { useService } from 'bpmn-js-properties-panel';
 import { SelectEntry } from '@bpmn-io/properties-panel';
-import {findDataObjects, idToHumanReadableName} from '../DataObjectHelpers';
+import { findDataObjects, idToHumanReadableName } from '../DataObjectHelpers';
 
 /**
  * Finds the value of the given type within the extensionElements
@@ -32,20 +32,26 @@ export function DataObjectSelect(props) {
   const setValue = value => {
     const businessObject = element.businessObject;
     const dataObjects = findDataObjects(businessObject.$parent)
-    for (const flowElem of dataObjects) {
-      if (flowElem.$type === 'bpmn:DataObject' && flowElem.id === value) {
+    for (const dataObject of dataObjects) {
+      if (dataObject.$type === 'bpmn:DataObject' && dataObject.id === value) {
+        
         commandStack.execute('element.updateModdleProperties', {
-          element,
+          element: element,
           moddleElement: businessObject,
           properties: {
-            dataObjectRef: flowElem
+            dataObjectRef: dataObject
           }
         });
+
+        // Construct the new name by : the dataObject name and the current state
+        const stateName = businessObject.dataState && businessObject.dataState.name ? businessObject.dataState.name : '';
+        const newName = stateName ? `${dataObject.name} [${stateName}]` : dataObject.name;
+
+        // Update the name property of the DataObjectReference
         commandStack.execute('element.updateProperties', {
-          element,
-          moddleElement: businessObject,
+          element: element,
           properties: {
-            'name': idToHumanReadableName(flowElem.id)
+            name: newName
           }
         });
       }
@@ -58,7 +64,7 @@ export function DataObjectSelect(props) {
     let dataObjects = findDataObjects(parent);
     let options = [];
     dataObjects.forEach(dataObj => {
-      options.push({label: dataObj.id, value: dataObj.id})
+      options.push({ label: dataObj.id, value: dataObj.id })
     });
     return options;
   }
@@ -68,9 +74,9 @@ export function DataObjectSelect(props) {
     element={element}
     description={"Select the Data Object this represents."}
     label={"Which Data Object does this reference?"}
-    getValue={ getValue }
-    setValue={ setValue }
-    getOptions={ getOptions }
+    getValue={getValue}
+    setValue={setValue}
+    getOptions={getOptions}
     debounce={debounce}
   />;