Merge "wf composition updates"

14 files changed, 368 insertions, 148 deletions

diff --git a/workflow-designer-ui/src/main/frontend/src/features/version/composition/Composition.js b/workflow-designer-ui/src/main/frontend/src/features/version/composition/Composition.js
index f1d60197..d898f717 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/version/composition/Composition.js
+++ b/workflow-designer-ui/src/main/frontend/src/features/version/composition/Composition.js
@@ -22,11 +22,12 @@ import { getComposition } from './compositionSelectors';
 import { getWorkflowName } from '../../workflow/workflowSelectors';
 import { activitiesSelector } from 'features/activities/activitiesSelectors';
 import { getInputOutputForComposition } from 'features/version/inputOutput/inputOutputSelectors';
-
+import { getVersionInfo } from 'features/version/general/generalSelectors';
 function mapStateToProps(state) {
     return {
         composition: getComposition(state),
         name: getWorkflowName(state),
+        versionName: getVersionInfo(state).name,
         activities: activitiesSelector(state),
         inputOutput: getInputOutputForComposition(state)
     };
diff --git a/workflow-designer-ui/src/main/frontend/src/features/version/composition/CompositionView.js b/workflow-designer-ui/src/main/frontend/src/features/version/composition/CompositionView.js
index 69e68402..c19ef94b 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/version/composition/CompositionView.js
+++ b/workflow-designer-ui/src/main/frontend/src/features/version/composition/CompositionView.js
@@ -24,13 +24,14 @@ import PropTypes from 'prop-types';
 import CompositionButtons from './components/CompositionButtonsPanel';
 import { setElementInputsOutputs } from './bpmnUtils.js';
 import { I18n } from 'react-redux-i18n';
-
+import { PROCESS_DEFAULT_ID } from './compositionConstants';
 class CompositionView extends Component {
     static propTypes = {
         compositionUpdate: PropTypes.func,
         showErrorModal: PropTypes.func,
         composition: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
         name: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+        versionName: PropTypes.string,
         inputOutput: PropTypes.object,
         activities: PropTypes.array
     };
@@ -39,6 +40,7 @@ class CompositionView extends Component {
         super();
         this.generatedId = 'bpmn-container' + Date.now();
         this.fileInput = React.createRef();
+        this.bpmnContainer = React.createRef();
         this.selectedElement = false;
         this.state = {
             diagram: false
@@ -61,7 +63,7 @@ class CompositionView extends Component {
             },
             workflow: {
                 activities: activities,
-                onChange: this.onActivityChanged,
+                getActivityInputsOutputs: this.getActivityInputsOutputs,
                 workflowInputOutput: inputOutput
             }
         });
@@ -69,33 +71,21 @@ class CompositionView extends Component {
         this.modeler.attachTo('#' + this.generatedId);
         this.setDiagramToBPMN(composition ? composition : newDiagramXML);
         this.modeler.on('element.out', () => this.exportDiagramToStore());
+        this.bpmnContainer.current.click();
     }
 
-    componentDidUpdate(prevProps) {
-        if (prevProps.composition !== this.props.composition) {
-            this.setDiagramToBPMN(this.props.composition);
-        }
-    }
-    onActivityChanged = async (bo, selectedValue) => {
+    getActivityInputsOutputs = selectedValue => {
         const selectedActivity = this.props.activities.find(
             el => el.name === selectedValue
         );
-        const config = this.modeler.get('config');
 
         if (selectedActivity) {
             const inputsOutputs = {
                 inputs: selectedActivity.inputs,
                 outputs: selectedActivity.outputs
             };
-            config.workflow.selectedActivityInputs = inputsOutputs;
-            this.modeler.config = config;
-            setElementInputsOutputs(
-                bo,
-                inputsOutputs,
-                this.modeler.get('moddle'),
-                true
-            );
-        }
+            return inputsOutputs;
+        } else return { inputs: [], outputs: [] };
     };
 
     setDiagramToBPMN = diagram => {
@@ -108,14 +98,26 @@ class CompositionView extends Component {
             }
             let canvas = modeler.get('canvas');
             canvas.zoom('fit-viewport');
+            let { businessObject } = canvas._rootElement;
+
+            this.setDefaultIdAndName(businessObject);
             setElementInputsOutputs(
-                canvas._rootElement.businessObject,
+                businessObject,
                 this.props.inputOutput,
                 this.modeler.get('moddle')
             );
         });
     };
+    setDefaultIdAndName = businessObject => {
+        const { name } = this.props;
+        if (!businessObject.name) {
+            businessObject.name = name;
+        }
 
+        if (businessObject.id === PROCESS_DEFAULT_ID) {
+            businessObject.id = name.toLowerCase().replace(/\s/g, '_');
+        }
+    };
     exportDiagramToStore = () => {
         this.modeler.saveXML({ format: true }, (err, xml) => {
             if (err) {
@@ -128,7 +130,7 @@ class CompositionView extends Component {
     };
 
     exportDiagram = () => {
-        const { name, showErrorModal } = this.props;
+        const { name, showErrorModal, versionName } = this.props;
         this.modeler.saveXML({ format: true }, (err, xml) => {
             if (err) {
                 return showErrorModal(
@@ -136,7 +138,10 @@ class CompositionView extends Component {
                 );
             }
             const blob = new Blob([xml], { type: 'text/html;charset=utf-8' });
-            fileSaver.saveAs(blob, `${name}-diagram.bpmn`);
+            fileSaver.saveAs(
+                blob,
+                `${name.replace(/\s/g, '').toLowerCase()}-${versionName}.bpmn`
+            );
         });
     };
 
@@ -171,7 +176,11 @@ class CompositionView extends Component {
                     name="file-input"
                     style={{ display: 'none' }}
                 />
-                <div className="bpmn-container" id={this.generatedId} />
+                <div
+                    ref={this.bpmnContainer}
+                    className="bpmn-container"
+                    id={this.generatedId}
+                />
                 <div className="bpmn-sidebar">
                     <div
                         className="properties-panel"
diff --git a/workflow-designer-ui/src/main/frontend/src/features/version/composition/bpmnUtils.js b/workflow-designer-ui/src/main/frontend/src/features/version/composition/bpmnUtils.js
index d5916f1c..ada2bdc4 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/version/composition/bpmnUtils.js
+++ b/workflow-designer-ui/src/main/frontend/src/features/version/composition/bpmnUtils.js
@@ -24,13 +24,15 @@ function getExtension(element, type) {
     })[0];
 }
 
-export function updatedData(moddle, inputData, existingArray, type) {
+export function updatedData(moddle, inputData, existingArray, type, parent) {
     return inputData.map(item => {
         const existingInput = existingArray.find(el => el.name === item.name);
-        return moddle.create(
+        const updatedElement = moddle.create(
             type,
             existingInput ? { ...item, value: existingInput.value } : item
         );
+        updatedElement.$parent = parent;
+        return updatedElement;
     });
 }
 
@@ -46,6 +48,7 @@ export function setElementInputsOutputs(
         businessObject.extensionElements = moddle.create(
             bpmnElementsTypes.EXTENSION_ElEMENTS
         );
+        businessObject.extensionElements.$parent = businessObject.id;
     }
 
     const existingInputOutput = getExtension(
@@ -60,7 +63,8 @@ export function setElementInputsOutputs(
             ? []
             : (existingInputOutput && existingInputOutput.inputParameters) ||
               [],
-        bpmnElementsTypes.INPUT_PARAMETER
+        bpmnElementsTypes.INPUT_PARAMETER,
+        businessObject.id
     );
 
     const processOutputs = updatedData(
@@ -70,15 +74,16 @@ export function setElementInputsOutputs(
             ? []
             : (existingInputOutput && existingInputOutput.outputParameters) ||
               [],
-        bpmnElementsTypes.OUTPUT_PARAMETER
+        bpmnElementsTypes.OUTPUT_PARAMETER,
+        businessObject.id
     );
 
     const processInputOutput = moddle.create(bpmnElementsTypes.INPUT_OUTPUT);
+    processInputOutput.$parent = businessObject.id;
     processInputOutput.inputParameters = [...processInputs];
     processInputOutput.outputParameters = [...processOutputs];
 
     const extensionElements = businessObject.extensionElements.get('values');
-
     businessObject.extensionElements.set(
         'values',
         extensionElements
diff --git a/workflow-designer-ui/src/main/frontend/src/features/version/composition/compositionConstants.js b/workflow-designer-ui/src/main/frontend/src/features/version/composition/compositionConstants.js
index 499e8ef9..7f3537f6 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/version/composition/compositionConstants.js
+++ b/workflow-designer-ui/src/main/frontend/src/features/version/composition/compositionConstants.js
@@ -21,3 +21,5 @@ export const bpmnElementsTypes = {
     INPUT_PARAMETER: 'camunda:InputParameter',
     OUTPUT_PARAMETER: 'camunda:OutputParameter'
 };
+
+export const PROCESS_DEFAULT_ID = 'Process_1';
diff --git a/workflow-designer-ui/src/main/frontend/src/features/version/composition/custom-properties-provider/provider/camunda/parts/WorkflowServiceTaskDelegateProps.js b/workflow-designer-ui/src/main/frontend/src/features/version/composition/custom-properties-provider/provider/camunda/parts/WorkflowServiceTaskDelegateProps.js
index dbd12cb6..fee8583b 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/version/composition/custom-properties-provider/provider/camunda/parts/WorkflowServiceTaskDelegateProps.js
+++ b/workflow-designer-ui/src/main/frontend/src/features/version/composition/custom-properties-provider/provider/camunda/parts/WorkflowServiceTaskDelegateProps.js
@@ -4,14 +4,19 @@ import ImplementationTypeHelper from 'bpmn-js-properties-panel/lib/helper/Implem
 import ServiceTaskDelegateProps from 'bpmn-js-properties-panel/lib/provider/camunda/parts/ServiceTaskDelegateProps';
 import workflowImplementationType from './implementation/WorkflowImplementationType';
 import workflowActivity from './implementation/WorkflowActivity';
-import { implementationType as implementationTypeConst } from './implementation/implementationConstants';
+import {
+    implementationType as implementationTypeConst,
+    serviceTaskEntries
+} from './implementation/implementationConstants';
+import Delegate from './implementation/Delegate';
+import ResultVariable from './implementation/ResultVariable';
 
 const getImplementationType = element => {
     let implementationType = ImplementationTypeHelper.getImplementationType(
         element
     );
 
-    if (!implementationType) {
+    if (!implementationType || implementationType === 'expression') {
         const bo = getBusinessObject(element);
         if (bo) {
             if (
@@ -25,6 +30,10 @@ const getImplementationType = element => {
     return implementationType;
 };
 
+const hideResultVariable = element => {
+    return getImplementationType(element) !== 'expression';
+};
+
 const getBusinessObject = element =>
     ImplementationTypeHelper.getServiceTaskLikeBusinessObject(element);
 
@@ -47,11 +56,14 @@ function WorkflowServiceTaskDelegateProps(
 
     if (isServiceTaskLike(getBusinessObject(element))) {
         group.entries = group.entries.filter(
-            entry => entry.id !== 'implementation'
+            entry =>
+                entry.id !== serviceTaskEntries.IMPLEMENTATION &&
+                entry.id !== serviceTaskEntries.DELEGATE &&
+                entry.id !== serviceTaskEntries.RESULT_VARIABLE
         );
 
-        group.entries = [
-            ...workflowImplementationType(
+        group.entries = group.entries.concat(
+            workflowImplementationType(
                 element,
                 bpmnFactory,
                 {
@@ -64,9 +76,10 @@ function WorkflowServiceTaskDelegateProps(
                     hasServiceTaskLikeSupport: true
                 },
                 translate
-            ),
-            ...group.entries,
-            ...workflowActivity(
+            )
+        );
+        group.entries = group.entries.concat(
+            workflowActivity(
                 element,
                 config,
                 bpmnFactory,
@@ -76,7 +89,32 @@ function WorkflowServiceTaskDelegateProps(
                 },
                 translate
             )
-        ];
+        );
+
+        group.entries = group.entries.concat(
+            Delegate(
+                element,
+                bpmnFactory,
+                {
+                    getBusinessObject: getBusinessObject,
+                    getImplementationType: getImplementationType
+                },
+                translate
+            )
+        );
+
+        group.entries = group.entries.concat(
+            ResultVariable(
+                element,
+                bpmnFactory,
+                {
+                    getBusinessObject: getBusinessObject,
+                    getImplementationType: getImplementationType,
+                    hideResultVariable: hideResultVariable
+                },
+                translate
+            )
+        );
     }
 }
 
diff --git a/workflow-designer-ui/src/main/frontend/src/features/version/composition/custom-properties-provider/provider/camunda/parts/implementation/Delegate.js b/workflow-designer-ui/src/main/frontend/src/features/version/composition/custom-properties-provider/provider/camunda/parts/implementation/Delegate.js
new file mode 100644
index 00000000..f6a0b247
--- /dev/null
+++ b/workflow-designer-ui/src/main/frontend/src/features/version/composition/custom-properties-provider/provider/camunda/parts/implementation/Delegate.js
@@ -0,0 +1,78 @@
+'use strict';
+
+import entryFactory from 'bpmn-js-properties-panel/lib/factory/EntryFactory';
+import cmdHelper from 'bpmn-js-properties-panel/lib/helper/CmdHelper';
+
+const DELEGATE_TYPES = ['class', 'expression', 'delegateExpression'];
+
+const PROPERTIES = {
+    class: 'camunda:class',
+    expression: 'camunda:expression',
+    delegateExpression: 'camunda:delegateExpression'
+};
+
+function isDelegate(type) {
+    return DELEGATE_TYPES.indexOf(type) !== -1;
+}
+
+function getAttribute(type) {
+    return PROPERTIES[type];
+}
+
+export default function(element, bpmnFactory, options, translate) {
+    var getImplementationType = options.getImplementationType,
+        getBusinessObject = options.getBusinessObject;
+
+    function getDelegationLabel(type) {
+        switch (type) {
+            case 'class':
+                return translate('Java Class');
+            case 'expression':
+                return translate('Expression');
+            case 'delegateExpression':
+                return translate('Delegate Expression');
+            default:
+                return '';
+        }
+    }
+
+    var delegateEntry = entryFactory.textField({
+        id: 'delegate',
+        label: translate('Value'),
+        dataValueLabel: 'delegationLabel',
+        modelProperty: 'delegate',
+
+        get: function(element) {
+            var bo = getBusinessObject(element);
+            var type = getImplementationType(element);
+            var attr = getAttribute(type);
+            var label = getDelegationLabel(type);
+            return {
+                delegate: bo.get(attr),
+                delegationLabel: label
+            };
+        },
+
+        set: function(element, values) {
+            var bo = getBusinessObject(element);
+            var type = getImplementationType(element);
+            var attr = getAttribute(type);
+            var prop = {};
+            prop[attr] = values.delegate || '';
+            return cmdHelper.updateBusinessObject(element, bo, prop);
+        },
+
+        validate: function(element, values) {
+            return isDelegate(getImplementationType(element)) &&
+                !values.delegate
+                ? { delegate: 'Must provide a value' }
+                : {};
+        },
+
+        hidden: function(element) {
+            return !isDelegate(getImplementationType(element));
+        }
+    });
+
+    return [delegateEntry];
+}
diff --git a/workflow-designer-ui/src/main/frontend/src/features/version/composition/custom-properties-provider/provider/camunda/parts/implementation/InputOutput.js b/workflow-designer-ui/src/main/frontend/src/features/version/composition/custom-properties-provider/provider/camunda/parts/implementation/InputOutput.js
index 8962a309..2bbef4f2 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/version/composition/custom-properties-provider/provider/camunda/parts/implementation/InputOutput.js
+++ b/workflow-designer-ui/src/main/frontend/src/features/version/composition/custom-properties-provider/provider/camunda/parts/implementation/InputOutput.js
@@ -31,12 +31,12 @@ function getOutputParameter(element, insideConnector, idx) {
     return inputOutputHelper.getOutputParameter(element, insideConnector, idx);
 }
 
-function createElement(type, parent, factory, properties) {
+export function createElement(type, parent, factory, properties) {
     const el = elementHelper.createElement(type, properties, parent, factory);
     return el;
 }
 
-function createInputOutput(parent, bpmnFactory, properties) {
+export function createInputOutput(parent, bpmnFactory, properties) {
     return createElement(
         'camunda:InputOutput',
         parent,
diff --git a/workflow-designer-ui/src/main/frontend/src/features/version/composition/custom-properties-provider/provider/camunda/parts/implementation/InputOutputHelper.js b/workflow-designer-ui/src/main/frontend/src/features/version/composition/custom-properties-provider/provider/camunda/parts/implementation/InputOutputHelper.js
index cb4745e3..595ab799 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/version/composition/custom-properties-provider/provider/camunda/parts/implementation/InputOutputHelper.js
+++ b/workflow-designer-ui/src/main/frontend/src/features/version/composition/custom-properties-provider/provider/camunda/parts/implementation/InputOutputHelper.js
@@ -4,10 +4,7 @@ var ModelUtil = require('bpmn-js/lib/util/ModelUtil'),
 
 var extensionElementsHelper = require('bpmn-js-properties-panel/lib/helper/ExtensionElementsHelper'),
     implementationTypeHelper = require('bpmn-js-properties-panel/lib/helper/ImplementationTypeHelper');
-import {
-    IMPLEMENTATION_TYPE_VALUE,
-    implementationType
-} from './implementationConstants';
+import { implementationType } from './implementationConstants';
 
 var InputOutputHelper = {};
 
@@ -156,7 +153,7 @@ InputOutputHelper.isCreateDeleteSupported = function(element) {
     const bo = getBusinessObject(element);
     return (
         (element.type !== 'bpmn:ServiceTask' ||
-            bo[implementationType.ACTIVITY] !== IMPLEMENTATION_TYPE_VALUE) &&
+            !bo[implementationType.ACTIVITY]) &&
         element.type !== 'bpmn:Process'
     );
 };
diff --git a/workflow-designer-ui/src/main/frontend/src/features/version/composition/custom-properties-provider/provider/camunda/parts/implementation/InputOutputParameter.js b/workflow-designer-ui/src/main/frontend/src/features/version/composition/custom-properties-provider/provider/camunda/parts/implementation/InputOutputParameter.js
index 58b3d67e..10e258e3 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/version/composition/custom-properties-provider/provider/camunda/parts/implementation/InputOutputParameter.js
+++ b/workflow-designer-ui/src/main/frontend/src/features/version/composition/custom-properties-provider/provider/camunda/parts/implementation/InputOutputParameter.js
@@ -33,7 +33,7 @@ function ensureInputOutputSupported(element, insideConnector) {
     return inputOutputHelper.isInputOutputSupported(element, insideConnector);
 }
 
-export default function(element, bpmnFactory, options, translate, config) {
+export default function(element, bpmnFactory, options, translate) {
     var typeInfo = {
         'camunda:Map': {
             value: 'map',
@@ -420,95 +420,5 @@ export default function(element, bpmnFactory, options, translate, config) {
         })
     );
 
-    //workflow source parameter  (type = text) ///////////////////////////////////////////////////////
-    const workflowInputs = config.workflowInputOutput.inputs.map(item => ({
-        name: item.name,
-        value: item.name
-    }));
-
-    const workflowOutputs = config.workflowInputOutput.outputs.map(item => ({
-        name: item.name,
-        value: item.name
-    }));
-
-    const workflowSources = [
-        { name: '', value: '' },
-        ...workflowInputs,
-        ...workflowOutputs
-    ];
-
-    entries.push(
-        entryFactory.selectBox({
-            id: 'parameter-workflowSource',
-            label: 'Workflow Source Parameter',
-            selectOptions: workflowSources,
-            modelProperty: 'workflowSource',
-
-            get: function(element, node) {
-                return {
-                    workflowSource: (getSelected(element, node) || {})
-                        .workflowSource
-                };
-            },
-
-            set: function(element, values, node) {
-                const properties = {
-                    workflowSource: undefined
-                };
-
-                properties.workflowSource = values.workflowSource;
-                const param = getSelected(element, node);
-                values.workflowSource = values.workflowSource || undefined;
-
-                return cmdHelper.updateBusinessObject(element, param, values);
-            },
-
-            hidden: function(element, node) {
-                const selected = getSelected(element, node);
-                return !inputOutputHelper.isWorkflowSourceSupported(
-                    element,
-                    selected
-                );
-            }
-        })
-    );
-
-    //workflow target parameter  (type = text) ///////////////////////////////////////////////////////
-    entries.push(
-        entryFactory.selectBox({
-            id: 'parameter-workflowTarget',
-            label: 'Workflow Target Parameter',
-            selectOptions: workflowSources,
-            modelProperty: 'workflowTarget',
-
-            get: function(element, node) {
-                return {
-                    workflowTarget: (getSelected(element, node) || {})
-                        .workflowTarget
-                };
-            },
-
-            set: function(element, values, node) {
-                const properties = {
-                    workflowTarget: undefined
-                };
-
-                properties.workflowTarget = values.workflowTarget;
-                const param = getSelected(element, node);
-                values.workflowTarget = values.workflowTarget || undefined;
-
-                return cmdHelper.updateBusinessObject(element, param, values);
-            },
-
-            hidden: function(element, node) {
-                const selected = getSelected(element, node);
-                return !inputOutputHelper.isWorkflowTargetSupported(
-                    element,
-                    selected
-                );
-            }
-        })
-    );
-
     return entries;
 }
diff --git a/workflow-designer-ui/src/main/frontend/src/features/version/composition/custom-properties-provider/provider/camunda/parts/implementation/InputOutputUpdater.js b/workflow-designer-ui/src/main/frontend/src/features/version/composition/custom-properties-provider/provider/camunda/parts/implementation/InputOutputUpdater.js
new file mode 100644
index 00000000..bc05b878
--- /dev/null
+++ b/workflow-designer-ui/src/main/frontend/src/features/version/composition/custom-properties-provider/provider/camunda/parts/implementation/InputOutputUpdater.js
@@ -0,0 +1,74 @@
+/*
+* Copyright © 2018 European Support Limited
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*http://www.apache.org/licenses/LICENSE-2.0
+*
+ * Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+import cmdHelper from 'bpmn-js-properties-panel/lib/helper/CmdHelper';
+import { createInputOutput, createElement } from './InputOutput';
+import InputOutputHelper from './InputOutputHelper';
+import { INPUT, OUTPUT } from './implementationConstants';
+
+export default ({ element, bo, bpmnFactory, activityInputsOutputs }) => {
+    const commands = [];
+    const existedInputOutput = InputOutputHelper.getInputOutput(element);
+
+    let newInputOutput = createInputOutput(element, bpmnFactory, {
+        inputParameters: [],
+        outputParameters: []
+    });
+
+    const inputs = activityInputsOutputs.inputs.map(({ name, value }) =>
+        createElement(INPUT, newInputOutput, bpmnFactory, {
+            name,
+            type: 'Text',
+            value
+        })
+    );
+
+    const outputs = activityInputsOutputs.inputs.map(({ name, value }) =>
+        createElement(OUTPUT, newInputOutput, bpmnFactory, {
+            name,
+            type: 'Text',
+            value
+        })
+    );
+
+    newInputOutput.inputParameters = inputs;
+    newInputOutput.outputParameters = outputs;
+
+    const objectToRemove = existedInputOutput ? [existedInputOutput] : [];
+    const extensionElements =
+        bo.extensionElements ||
+        createElement('bpmn:ExtensionElements', bo, bpmnFactory, []);
+
+    if (!bo.extensionElements) {
+        commands.push(
+            cmdHelper.updateBusinessObject(element, bo, {
+                extensionElements
+            })
+        );
+    }
+
+    commands.push(
+        cmdHelper.addAndRemoveElementsFromList(
+            element,
+            extensionElements,
+            'values',
+            'extensionElements',
+            [newInputOutput],
+            objectToRemove
+        )
+    );
+    return commands;
+};
diff --git a/workflow-designer-ui/src/main/frontend/src/features/version/composition/custom-properties-provider/provider/camunda/parts/implementation/ResultVariable.js b/workflow-designer-ui/src/main/frontend/src/features/version/composition/custom-properties-provider/provider/camunda/parts/implementation/ResultVariable.js
new file mode 100644
index 00000000..a0b425fe
--- /dev/null
+++ b/workflow-designer-ui/src/main/frontend/src/features/version/composition/custom-properties-provider/provider/camunda/parts/implementation/ResultVariable.js
@@ -0,0 +1,52 @@
+'use strict';
+
+import { is } from 'bpmn-js/lib/util/ModelUtil';
+
+import assign from 'lodash.assign';
+
+var entryFactory = require('bpmn-js-properties-panel/lib/factory/EntryFactory'),
+    cmdHelper = require('bpmn-js-properties-panel/lib/helper/CmdHelper');
+
+export default function(element, bpmnFactory, options, translate) {
+    var getBusinessObject = options.getBusinessObject,
+        hideResultVariable = options.hideResultVariable,
+        id = options.id || 'resultVariable';
+
+    var resultVariableEntry = entryFactory.textField({
+        id: id,
+        label: translate('Result Variable'),
+        modelProperty: 'resultVariable',
+
+        get: function(element) {
+            var bo = getBusinessObject(element);
+            return { resultVariable: bo.get('camunda:resultVariable') };
+        },
+
+        set: function(element, values) {
+            var bo = getBusinessObject(element);
+
+            var resultVariable = values.resultVariable || undefined;
+
+            var props = {
+                'camunda:resultVariable': resultVariable
+            };
+
+            if (is(bo, 'camunda:DmnCapable') && !resultVariable) {
+                props = assign(
+                    { 'camunda:mapDecisionResult': 'resultList' },
+                    props
+                );
+            }
+
+            return cmdHelper.updateBusinessObject(element, bo, props);
+        },
+
+        hidden: function() {
+            if (typeof hideResultVariable === 'function') {
+                return hideResultVariable.apply(resultVariableEntry, arguments);
+            }
+        }
+    });
+
+    return [resultVariableEntry];
+}
diff --git a/workflow-designer-ui/src/main/frontend/src/features/version/composition/custom-properties-provider/provider/camunda/parts/implementation/WorkflowActivity.js b/workflow-designer-ui/src/main/frontend/src/features/version/composition/custom-properties-provider/provider/camunda/parts/implementation/WorkflowActivity.js
index 90fe84fc..50d53b56 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/version/composition/custom-properties-provider/provider/camunda/parts/implementation/WorkflowActivity.js
+++ b/workflow-designer-ui/src/main/frontend/src/features/version/composition/custom-properties-provider/provider/camunda/parts/implementation/WorkflowActivity.js
@@ -2,9 +2,12 @@ import entryFactory from 'bpmn-js-properties-panel/lib/factory/EntryFactory';
 import cmdHelper from 'bpmn-js-properties-panel/lib/helper/CmdHelper';
 import {
     implementationType,
-    IMPLEMENTATION_TYPE_VALUE
+    IMPLEMENTATION_TYPE_VALUE,
+    SERVICE_TASK_NAME
 } from './implementationConstants';
 
+import InputOutputUpdater from './InputOutputUpdater';
+
 const workflowActivity = (element, config, bpmnFactory, options, translate) => {
     const { getImplementationType, getBusinessObject } = options;
 
@@ -20,25 +23,49 @@ const workflowActivity = (element, config, bpmnFactory, options, translate) => {
 
         get: function(element) {
             var bo = getBusinessObject(element);
+            const value = bo.get(implementationType.ACTIVITY);
+            const activityValue =
+                value && value.indexOf(IMPLEMENTATION_TYPE_VALUE) > -1
+                    ? value.substr(IMPLEMENTATION_TYPE_VALUE.length)
+                    : '';
+
             return {
-                workflowActivity: bo.get(implementationType.ACTIVITY_RESOURCE)
+                workflowActivity: activityValue
             };
         },
 
         set: function(element, values) {
             var bo = getBusinessObject(element);
-            config.onChange(bo, values.workflowActivity);
+
             const commands = [];
             const dataForUpdate = {};
-            dataForUpdate[implementationType.ACTIVITY_RESOURCE] =
-                values.workflowActivity;
+
+            const activityInputsOutputs = config.getActivityInputsOutputs(
+                values.workflowActivity
+            );
+
             dataForUpdate[
                 implementationType.ACTIVITY
-            ] = IMPLEMENTATION_TYPE_VALUE;
+            ] = `${IMPLEMENTATION_TYPE_VALUE}${values.workflowActivity}`;
+
+            dataForUpdate[implementationType.EXPRESSION] =
+                implementationType.EXPRESSION_VALUE;
+
+            dataForUpdate[SERVICE_TASK_NAME] = values.workflowActivity;
+
             commands.push(
                 cmdHelper.updateBusinessObject(element, bo, dataForUpdate)
             );
-            return commands;
+            return [
+                ...commands,
+                ...InputOutputUpdater({
+                    element,
+                    bo,
+                    bpmnFactory,
+                    activityInputsOutputs,
+                    commands
+                })
+            ];
         },
 
         validate: function(element, values) {
diff --git a/workflow-designer-ui/src/main/frontend/src/features/version/composition/custom-properties-provider/provider/camunda/parts/implementation/WorkflowImplementationType.js b/workflow-designer-ui/src/main/frontend/src/features/version/composition/custom-properties-provider/provider/camunda/parts/implementation/WorkflowImplementationType.js
index eac00fdd..729cc22b 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/version/composition/custom-properties-provider/provider/camunda/parts/implementation/WorkflowImplementationType.js
+++ b/workflow-designer-ui/src/main/frontend/src/features/version/composition/custom-properties-provider/provider/camunda/parts/implementation/WorkflowImplementationType.js
@@ -103,7 +103,6 @@ export default function(element, bpmnFactory, options, translate) {
                 var bo = getBusinessObject(element);
                 var oldType = getType(element);
                 var newType = values.implType;
-
                 var props = assign({}, DELEGATE_PROPS);
 
                 if (DEFAULT_DELEGATE_PROPS.indexOf(newType) !== -1) {
@@ -142,13 +141,14 @@ export default function(element, bpmnFactory, options, translate) {
                         );
                     }
                 }
-
                 props = assign(props, ACTIVITY_PROPS);
                 props[implementationType.ACTIVITY] = undefined;
+
                 var commands = [];
                 if (newType === 'workflowActivity') {
                     props[implementationType.ACTIVITY] = '';
-                    props[implementationType.ACTIVITY_RESOURCE] = '';
+                    props[implementationType.RESULT_VARIABLE] = undefined;
+                    props[implementationType.EXPRESSION] = undefined;
                 } else {
                     var inputsOutputs = extensionElementsHelper.getExtensionElements(
                         bo,
@@ -217,7 +217,6 @@ export default function(element, bpmnFactory, options, translate) {
                         );
                     }
                 }
-
                 return commands;
             }
         })
diff --git a/workflow-designer-ui/src/main/frontend/src/features/version/composition/custom-properties-provider/provider/camunda/parts/implementation/implementationConstants.js b/workflow-designer-ui/src/main/frontend/src/features/version/composition/custom-properties-provider/provider/camunda/parts/implementation/implementationConstants.js
index 054017f3..efc70800 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/version/composition/custom-properties-provider/provider/camunda/parts/implementation/implementationConstants.js
+++ b/workflow-designer-ui/src/main/frontend/src/features/version/composition/custom-properties-provider/provider/camunda/parts/implementation/implementationConstants.js
@@ -1,6 +1,34 @@
+/*
+* Copyright © 2018 European Support Limited
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*http://www.apache.org/licenses/LICENSE-2.0
+*
+ * Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
 export const implementationType = {
     ACTIVITY: 'implementation',
-    ACTIVITY_RESOURCE: 'resourses'
+    EXPRESSION: 'camunda:expression',
+    EXPRESSION_VALUE: '${ExecuteActivity.execute(execution)}',
+    RESULT_VARIABLE: 'camunda:resultVariable'
+};
+
+export const IMPLEMENTATION_TYPE_VALUE = 'activity:';
+export const SERVICE_TASK_NAME = 'name';
+
+export const serviceTaskEntries = {
+    IMPLEMENTATION: 'implementation',
+    DELEGATE: 'delegate',
+    RESULT_VARIABLE: 'resultVariable'
 };
 
-export const IMPLEMENTATION_TYPE_VALUE = 'activity';
+export const INPUT = 'camunda:InputParameter';
+export const OUTPUT = 'camunda:OutputParameter';