项目初始化

datax-modules/flowable-service-parent/flowable-modeler/src/main/resources/static/images/safari-pinned-tab.svg

+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="16.000000pt" height="16.000000pt" viewBox="0 0 16.000000 16.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.11, written by Peter Selinger 2001-2013
+</metadata>
+<g transform="translate(0.000000,16.000000) scale(0.004000,-0.004000)"
+fill="#000000" stroke="none">
+<path d="M989 3986 c-2 -2 -26 -7 -54 -10 -68 -9 -186 -43 -259 -74 -286 -123
+-511 -367 -609 -662 -57 -171 -56 -145 -54 -1275 l2 -1040 27 -100 c24 -86 89
+-255 107 -277 4 -4 155 141 336 322 l329 330 1 203 c1 201 1 204 29 260 31 64
+84 111 154 137 38 14 82 17 241 18 l194 0 404 404 403 403 -598 0 -597 0 -56
+28 c-117 57 -175 170 -151 292 21 102 85 176 182 210 64 23 1914 21 1980 -1
+62 -22 126 -86 150 -152 20 -53 20 -73 18 -1021 l-3 -966 -27 -47 c-35 -59
+-101 -115 -152 -130 -107 -30 -209 -4 -283 72 -78 79 -76 67 -77 733 l0 588
+-403 -403 -403 -403 0 -190 c0 -104 -5 -206 -10 -225 -15 -55 -65 -127 -107
+-153 -70 -44 -104 -49 -307 -49 l-191 0 -332 -331 -332 -331 70 -33 c38 -18
+102 -43 142 -56 158 -53 136 -52 1242 -52 949 0 1037 2 1115 18 227 48 420
+155 581 324 151 159 239 333 284 563 12 63 14 239 12 1120 l-2 1045 -26 96
+c-39 140 -81 231 -164 354 -101 151 -201 243 -356 328 -62 34 -219 100 -219
+91 0 -2 -12 1 -27 7 -93 36 -161 38 -1189 38 -556 1 -1013 -1 -1015 -3z"/>
+</g>
+</svg>

datax-modules/flowable-service-parent/flowable-modeler/src/main/resources/static/scripts/app-cfg.js

+/* Copyright 2005-2015 Alfresco Software, Ltd.
+ * 
+ * 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.
+ */
+
+'use strict';
+
+var FLOWABLE = FLOWABLE || {};
+
+var pathname = window.location.pathname.replace(/^(\/[^\/]*)(\/.*)?$/, '$1').replace(/\/$/, '');
+
+FLOWABLE.CONFIG = {
+	'onPremise' : true,
+	'contextRoot' : pathname,
+	'webContextRoot' : pathname,
+	'datesLocalization' : false
+};

datax-modules/flowable-service-parent/flowable-modeler/src/main/resources/static/scripts/common/controllers/about.js

+/* 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.
+ */
+'use strict';
+
+flowableApp.controller('AboutFlowablePopupCtrl', ['$rootScope', '$scope', '$http', '$translate', '$interval', '$dateFormatter', function($rootScope, $scope, $http, $translate, $interval, $dateFormatter) {
+    $scope.popup = {
+        loading: true,
+        activitiVersion: {},
+        licenseHolder: ''
+    };
+
+    $http({method: 'GET', url: FLOWABLE.APP_URL.getAboutInfoUrl()}).
+        success(function(response, status, headers, config) {
+            $scope.popup.licenseHolder = response.holder;
+            $scope.popup.activitiVersion = response.versionInfo.edition + ' v' + response.versionInfo.majorVersion + '.' + response.versionInfo.minorVersion + '.' + response.versionInfo.revisionVersion;
+            $scope.popup.activitiVersionType = response.versionInfo.type;
+            $scope.popup.loading = false;
+        }).
+        error(function(response, status, headers, config) {
+            $scope.popup.loading = false;
+        });
+
+
+    $scope.cancel = function() {
+        $scope.close();
+    };
+
+
+    $scope.close = function() {
+        $scope.$hide();
+    }
+
+}]);

datax-modules/flowable-service-parent/flowable-modeler/src/main/resources/static/scripts/common/providers-config.js

+/* 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.
+ */
+/**
+ * Configure the HTTP provider such that no caching happens when fetching
+ * a resource using $http.
+ */
+
+flowableModule.factory('NotPermittedInterceptor', [ '$q', '$window', function($q, $window) {
+    return {
+        responseError: function ( response ) {
+
+            if (response.status === 403) {
+                $window.location.href = FLOWABLE.CONFIG.contextRoot;
+                $window.location.reload();
+                return $q.reject(response);
+            }
+            else{
+                return $q.reject(response);
+            }
+        }
+    }
+}]);
+
+flowableModule.config(['$httpProvider', function($httpProvider) {
+
+    if (!$httpProvider.defaults.headers.get) {
+        $httpProvider.defaults.headers.get = {};
+    }
+
+    $httpProvider.defaults.headers.get['Cache-Control'] = 'no-cache, no-store, must-revalidate';
+    $httpProvider.defaults.headers.get['Pragma'] = 'no-cache';
+    $httpProvider.defaults.headers.get['Expires'] = '0';
+
+    $httpProvider.interceptors.push('NotPermittedInterceptor');
+
+}]);
\ No newline at end of file

datax-modules/flowable-service-parent/flowable-modeler/src/main/resources/static/scripts/common/services/recursion-helper.js

+/* 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.
+ */
+'use strict';
+
+// Recursion Helper service, makes it possible to use nested directives of the same type
+flowableModule.factory('RecursionHelper', ['$compile', function($compile){
+    return {
+        /**
+         * Manually compiles the element, fixing the recursion loop.
+         * @param element
+         * @param [link] A post-link function, or an object with function(s) registered via pre and post properties.
+         * @returns An object containing the linking functions.
+         */
+        compile: function(element, link){
+            // Normalize the link parameter
+            if(angular.isFunction(link)){
+                link = { post: link };
+            }
+
+            // Break the recursion loop by removing the contents
+            var contents = element.contents().remove();
+            var compiledContents;
+            return {
+                pre: (link && link.pre) ? link.pre : null,
+                /**
+                 * Compiles and re-adds the contents
+                 */
+                post: function(scope, element){
+                    // Compile the contents
+                    if(!compiledContents){
+                        compiledContents = $compile(contents);
+                    }
+                    // Re-add the compiled contents to the element
+                    compiledContents(scope, function(clone){
+                        element.append(clone);
+                    });
+
+                    // Call the post-linking function, if any
+                    if(link && link.post){
+                        link.post.apply(null, arguments);
+                    }
+                }
+            };
+        }
+    };
+}]);
\ No newline at end of file

datax-modules/flowable-service-parent/flowable-modeler/src/main/resources/static/scripts/common/services/resource-service.js

+/* 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.
+ */
+'use strict';
+
+// User service
+flowableModule.service('ResourceService', ['$http', '$q', 'appResourceRoot',
+    function ($http, $q, appResourceRoot) {
+
+        var loadedResources = {};
+
+        function loadStylesheet(relativeUrl, cache)
+        {
+            var url = appResourceRoot + relativeUrl;
+            if (!cache || !loadedResources[url])
+            {
+                if (cache) {
+                    loadedResources[url] = true;
+                }
+                if (document.createStyleSheet)
+                {
+                    try
+                    {
+                        document.createStyleSheet();
+                    } catch (e) { }
+                }
+                else {
+                    var link = document.createElement("link");
+                    link.rel = "stylesheet";
+                    link.type = "text/css";
+                    link.media = "all";
+                    link.href = url;
+                    document.getElementsByTagName("head")[0].appendChild(link);
+                }
+            }
+        }
+
+        function loadScript(relativeUrl, callback, cache)
+        {
+            var url = appResourceRoot + relativeUrl;
+            if (cache && loadedResources[url] && callback)
+            {
+                callback();
+            }
+            else
+            {
+                if (cache) {
+                    loadedResources[url] = true;
+                }
+
+                // Insert the node so it gets loaded
+                var script = document.createElement("script");
+                script.type="text/javascript";
+                script.src = url;
+
+                if (callback) {
+                    var done = false;
+
+                    // Attach handlers for all browsers
+                    script.onload = script.onreadystatechange = function()
+                    {
+                        if (!done && (!this.readyState || this.readyState == "loaded" || this.readyState == "complete"))
+                        {
+                            done = true;
+                            callback();
+                        }
+                    };
+                }
+                var el = document.getElementsByTagName("head")[0];
+                el.appendChild(script);
+            }
+        }
+
+        function loadScripts(relativeUrls, callback, cache)
+        {
+            function loadNext()
+            {
+                var relativeUrl = relativeUrls.shift();
+                if (relativeUrl)
+                {
+                    loadScript.call(this, relativeUrl, loadNext.bind(this), cache);
+                }
+                else
+                {
+                    if (callback)
+                    {
+                        callback();
+                    }
+                }
+            }
+            loadNext.call(this);
+        }
+
+        function loadFromHtml(url, callback, cache)
+        {
+            $http.get(url).success(function(responseText)
+            {
+                var xmlDoc;
+                if (window.DOMParser)
+                {
+                    var parser = new DOMParser();
+                    xmlDoc = parser.parseFromString(responseText, "text/xml");
+                }
+                else // Internet Explorer
+                {
+                    xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
+                    xmlDoc.async = false;
+                    xmlDoc.loadXML(responseText);
+                }
+                var resources = xmlDoc.getElementsByTagName("link");
+                var resourceUrl;
+                var resourceUrls = [];
+                for (var i = 0, il = resources.length; i < il; i++)
+                {
+                    resourceUrl = resources[i].getAttribute("href");
+                    if (resourceUrl)
+                    {
+                        loadStylesheet(resourceUrl, cache);
+                    }
+                }
+                resources = xmlDoc.getElementsByTagName("script");
+                for (i = 0, il = resources.length; i < il; i++)
+                {
+                    resourceUrl = resources[i].getAttribute("src");
+                    if (resourceUrl)
+                    {
+                        resourceUrls.push(resourceUrl);
+                    }
+                }
+                loadScripts(resourceUrls, callback, cache);
+            });
+        }
+
+        this.loadFromHtml = loadFromHtml;
+        this.loadScript = loadScript;
+        this.loadStylesheet = loadStylesheet;
+    }]);

datax-modules/flowable-service-parent/flowable-modeler/src/main/resources/static/scripts/configuration/app-definition-toolbar-default-actions.js

+/* 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.
+ */
+'use strict';
+
+var APP_DEFINITION_TOOLBAR = {
+    ACTIONS: {
+
+        saveModel: function (services) {
+
+            _internalCreateModal({
+                backdrop: true,
+                keyboard: true,
+                template: 'views/popup/app-definition-save-model.html?version=' + Date.now(),
+                scope: services.$scope
+            }, services.$modal, services.$scope);
+        },
+
+        help: function (services) {
+
+        },
+
+        feedback: function (services) {
+
+        },
+
+        closeEditor:  function (services) {
+        	services.$location.path('/apps');
+        }
+    }
+};
+
+/** Custom controller for the save dialog */
+angular.module('flowableModeler').controller('SaveAppDefinitionCtrl',
+    [ '$rootScope', '$scope', '$http', '$route', '$location', '$translate',
+    function ($rootScope, $scope, $http, $route, $location, $translate) {
+
+    var description = '';
+    if ($rootScope.currentAppDefinition.description) {
+    	description = $rootScope.currentAppDefinition.description;
+    }
+
+    var saveDialog = {
+        name: $rootScope.currentAppDefinition.name,
+        key: $rootScope.currentAppDefinition.key,
+        description: description,
+        publish: false
+    };
+
+    $scope.saveDialog = saveDialog;
+
+    $scope.status = {
+        loading: false
+    };
+
+    $scope.cancel = function () {
+    	$scope.$hide();
+    };
+
+    $scope.saveAndClose = function (force) {
+    	$scope.save(function() {
+    		$location.path('/apps');
+    	}, force);
+    };
+
+    $scope.save = function (saveCallback, force) {
+
+        if (!$scope.saveDialog.name || $scope.saveDialog.name.length == 0 ||
+        	!$scope.saveDialog.key || $scope.saveDialog.key.length == 0) {
+
+            return;
+        }
+
+        // Indicator spinner image
+        $scope.status.loading = true;
+
+        var data = {
+            appDefinition: $rootScope.currentAppDefinition,
+            publish: $scope.saveDialog.publish
+        };
+
+        data.appDefinition.name = $scope.saveDialog.name;
+        if ($scope.saveDialog.description && $scope.saveDialog.description.length > 0) {
+        	data.appDefinition.description = $scope.saveDialog.description;
+        }
+
+        if (force !== undefined && force !== null && force === true) {
+            data.force = true;
+        }
+
+        delete $scope.conflict;
+        $http({method: 'PUT', url: FLOWABLE.APP_URL.getAppDefinitionUrl($rootScope.currentAppDefinition.id), data: data}).
+            success(function(response, status, headers, config) {
+                // Regular error
+                if (response.error) {
+                    $scope.status.loading = false;
+                    $scope.saveDialog.errorMessage = response.errorDescription;
+                } else {
+                    $scope.$hide();
+                    $rootScope.addAlert($translate.instant('APP.POPUP.SAVE-APP-SAVE-SUCCESS', 'info'));
+                    if (saveCallback) {
+                        saveCallback();
+                    }
+                }
+
+            }).
+            error(function(data, status, headers, config) {
+                $scope.status.loading = false;
+                $scope.saveDialog.errorMessage = data.message;
+            });
+    };
+
+    $scope.isOkButtonDisabled = function() {
+        if ($scope.status.loading) {
+            return false;
+        } else if ($scope.error && $scope.error.hasCustomStencilItem) {
+            return false;
+        }
+        return true;
+    };
+
+    $scope.okClicked = function() {
+        if ($scope.error) {
+            if ($scope.error.conflictResolveAction === 'discardChanges') {
+                $scope.close();
+                $route.reload();
+            } else if ($scope.error.conflictResolveAction === 'overwrite'
+                || $scope.error.conflictResolveAction === 'newVersion') {
+                $scope.save();
+            } else if($scope.error.conflictResolveAction === 'saveAs') {
+                $scope.save(function() {
+                    $rootScope.ignoreChanges = true;  // Otherwise will get pop up that changes are not saved.
+                    $location.path('/apps');
+                });
+            }
+        }
+    };
+
+}]);

datax-modules/flowable-service-parent/flowable-modeler/src/main/resources/static/scripts/configuration/app-definition-toolbar.js

+/* 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.
+ */
+'use strict';
+
+var APP_DEFINITION_TOOLBAR_CONFIG = {
+    "items" : [
+        {
+            "type" : "button",
+            "title" : "APP_DEFINITION_TOOLBAR.ACTION.SAVE",
+            "cssClass" : "editor-icon editor-icon-save",
+            "action" : "APP_DEFINITION_TOOLBAR.ACTIONS.saveModel"
+        }
+    ],
+    
+    "secondaryItems" : [
+		{
+		    "type" : "button",
+		    "title" : "Close",
+		    "cssClass" : "glyphicon glyphicon-remove",
+		    "action" : "APP_DEFINITION_TOOLBAR.ACTIONS.closeEditor"
+		}
+    ]
+};
\ No newline at end of file

datax-modules/flowable-service-parent/flowable-modeler/src/main/resources/static/scripts/configuration/decision-table-toolbar-default-actions.js

+/* Copyright 2005-2015 Alfresco Software, Ltd.
+ *
+ * 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.
+ */
+'use strict';
+
+var DECISION_TABLE_TOOLBAR = {
+    ACTIONS: {
+
+        saveModel: function (services) {
+
+            _internalCreateModal({
+                backdrop: true,
+                keyboard: true,
+                template: 'views/popup/decision-table-save-model.html?version=' + Date.now(),
+                scope: services.$scope
+            }, services.$modal, services.$scope);
+        },
+
+        help: function (services) {
+
+        },
+
+        feedback: function (services) {
+
+        },
+
+        closeEditor:  function (services) {
+
+            var callback = function() {
+                services.$rootScope.decisiontableChanges = false;
+                
+                if (services.$rootScope.editorHistory.length > 0) {
+                	var navigationObject = services.$rootScope.editorHistory.pop();
+                	var additionalParameters = '';
+                	if (navigationObject.subProcessId && navigationObject.subProcessId.length > 0) {
+                		additionalParameters = '?subProcessId=' + navigationObject.subProcessId;
+                	}
+        			services.$location.url('/editor/' + navigationObject.id + additionalParameters);
+        		} else {
+        			services.$location.path('/decision-tables');
+        		}
+            };
+
+            if (services.$rootScope.decisiontableChanges == true) {
+
+                services.$scope.$emit("decisionTableChangesEvent");
+
+                var unbindMustSave = services.$scope.$on("mustSaveEvent", function(){
+                    //save the decision table data
+                    var description = '';
+                    if (services.$rootScope.currentDecisionTable.description) {
+                        description = services.$rootScope.currentDecisionTable.description;
+                    }
+
+                    var data = {
+                        newVersion: false
+                    };
+                    
+                    unbindEvents();
+                    services.DecisionTableBuilderService.saveDecisionTable(data, services.$rootScope.currentDecisionTable.name, 
+                    	null, description, callback);
+                });
+
+                var unbindDiscardDataEvent = services.$scope.$on("discardDataEvent", function() {
+                    unbindEvents();
+                    callback();
+                });
+
+                var unbindContinueEditingEvent = services.$scope.$on("continueEditingEvent", function () {
+                    unbindEvents();
+                });
+
+            } else {
+                callback();
+            }
+
+            var unbindEvents = function () {
+                unbindContinueEditingEvent();
+                unbindMustSave();
+                unbindDiscardDataEvent();
+            };
+
+        }
+    }
+};
+
+/** Custom controller for the save dialog */
+angular.module('flowableModeler')
+    .controller('SaveDecisionTableCtrl', [ '$rootScope', '$scope', '$http', '$route', '$location', '$translate', 'DecisionTableService', 'hotRegisterer',
+        function ($rootScope, $scope, $http, $route, $location, $translate, DecisionTableService, hotRegisterer) {
+
+            var description = '';
+            if ($rootScope.currentDecisionTableModel.description) {
+                description = $rootScope.currentDecisionTableModel.description;
+            }
+
+            $scope.saveDialog = {
+                name: $rootScope.currentDecisionTableModel.name,
+                key: $rootScope.currentDecisionTableModel.key,
+                description: description,
+                newVersion: false,
+                comment: ''
+            };
+
+            $scope.keyFieldPattern = /^[a-zA-Z_]\w*$/;
+
+            $scope.status = {
+                loading: false
+            };
+
+            $scope.cancel = function () {
+                $scope.$hide();
+            };
+
+            $scope.saveAndClose = function () {
+                $scope.save(function() {
+                    if ($rootScope.editorHistory.length > 0) {
+		    	        var navigationObject = $rootScope.editorHistory.pop();
+		    	        var additionalParameters = '';
+	                	if (navigationObject.subProcessId && navigationObject.subProcessId.length > 0) {
+	                		additionalParameters = '?subProcessId=' + navigationObject.subProcessId;
+	                	}
+		    	        $location.url('/editor/' + navigationObject.id + additionalParameters);
+		 
+		            } else {
+		            	$location.path('/decision-tables');
+		            }
+                });
+            };
+
+            $scope.save = function (additionalSaveCallback) {
+
+                if (!$scope.saveDialog.name || $scope.saveDialog.name.length == 0 || !$scope.saveDialog.key || $scope.saveDialog.key.length == 0) {
+                    return;
+                }
+
+                // Indicator spinner image
+                $scope.status = {
+                    loading: true
+                };
+
+                var data = {
+                    reusable: $scope.saveDialog.reusable,
+                    newVersion: $scope.saveDialog.newVersion,
+                    comment: $scope.saveDialog.comment
+                };
+
+                $rootScope.currentDecisionTableRules = $scope.model.rulesData;
+
+                var saveCallback = function() {
+                    $scope.$hide();
+                    
+                    $rootScope.currentDecisionTableModel.name = $scope.saveDialog.name;
+                    $rootScope.currentDecisionTableModel.key = $scope.saveDialog.key;
+                    $rootScope.currentDecisionTableModel.description = $scope.saveDialog.description;
+                    
+                    $rootScope.addAlertPromise($translate('DECISION-TABLE-EDITOR.ALERT.SAVE-CONFIRM', {name: $scope.saveDialog.name}), 'info');
+                    
+                    if (additionalSaveCallback) {
+                        additionalSaveCallback();
+                    }
+                    
+                    $rootScope.decisionTableChanges = false;
+                };
+
+                var errorCallback = function(errorMessage) {
+                	$scope.status.loading = false;
+                    $scope.saveDialog.errorMessage = errorMessage.message;
+                };
+
+                // deselect cells before thumbnail generations
+                var hotDecisionTableEditorInstance = hotRegisterer.getInstance('decision-table-editor');
+                if (hotDecisionTableEditorInstance) {
+                    hotDecisionTableEditorInstance.deselectCell();
+                }
+
+                DecisionTableService.saveDecisionTable(data, $scope.saveDialog.name, $scope.saveDialog.key, 
+                	$scope.saveDialog.description, saveCallback, errorCallback);
+            };
+
+            $scope.isOkButtonDisabled = function() {
+                if ($scope.status.loading) {
+                    return false;
+                } else if ($scope.error && $scope.error.conflictResolveAction) {
+                    if ($scope.error.conflictResolveAction === 'saveAs') {
+                        return !$scope.error.saveAs || $scope.error.saveAs.length == 0;
+                    } else {
+                        return false;
+                    }
+                }
+                return true;
+            };
+
+            $scope.okClicked = function() {
+                if ($scope.error) {
+                    if ($scope.error.conflictResolveAction === 'discardChanges') {
+                        $scope.close();
+                        $route.reload();
+                    } else if ($scope.error.conflictResolveAction === 'overwrite'
+                        || $scope.error.conflictResolveAction === 'newVersion') {
+                        $scope.save();
+                    } else if($scope.error.conflictResolveAction === 'saveAs') {
+                        $scope.save(function() {
+                            $rootScope.ignoreChanges = true;  // Otherwise will get pop up that changes are not saved.
+                            $location.path('/decision-tables');
+                        });
+                    }
+                }
+            };
+
+        }]);

datax-modules/flowable-service-parent/flowable-modeler/src/main/resources/static/scripts/configuration/decision-table-toolbar.js

+/* Copyright 2005-2015 Alfresco Software, Ltd.
+ *
+ * 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.
+ */
+'use strict';
+
+var DECISION_TABLE_TOOLBAR_CONFIG = {
+    "items" : [
+        {
+            "type" : "button",
+            "title" : "TOOLBAR.ACTION.SAVE",
+            "cssClass" : "editor-icon editor-icon-save",
+            "action" : "DECISION_TABLE_TOOLBAR.ACTIONS.saveModel",
+            "disableOnReadonly": true
+        }
+    ],
+    
+    "secondaryItems" : [
+		{
+		    "type" : "button",
+		    "title" : "TOOLBAR.ACTION.CLOSE",
+		    "cssClass" : "glyphicon glyphicon-remove",
+		    "action" : "DECISION_TABLE_TOOLBAR.ACTIONS.closeEditor"
+		}
+    ]
+};
\ No newline at end of file

datax-modules/flowable-service-parent/flowable-modeler/src/main/resources/static/scripts/configuration/form-builder-toolbar-default-actions.js

+/* 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.
+ */
+'use strict';
+
+var FORM_TOOLBAR = {
+    ACTIONS: {
+
+        saveModel: function (services) {
+
+            _internalCreateModal({
+                backdrop: true,
+                keyboard: true,
+                template: 'views/popup/form-save-model.html?version=' + Date.now(),
+                scope: services.$scope
+            }, services.$modal, services.$scope);
+        },
+
+        help: function (services) {
+
+        },
+
+        closeEditor:  function (services) {
+            if (services.$rootScope.editorHistory.length > 0) {
+        		var callback = function() {
+                    services.$rootScope.formChanges = false;
+
+        		    var navigationObject = services.$rootScope.editorHistory.pop();
+        		    var additionalParameters = '';
+                	if (navigationObject.subProcessId && navigationObject.subProcessId.length > 0) {
+                		additionalParameters = '?subProcessId=' + navigationObject.subProcessId;
+                	}
+        		    services.$location.url('/editor/' + navigationObject.id + additionalParameters);
+        		};
+
+        		if (services.$rootScope.formChanges == true) {
+
+        		    services.$scope.$emit("formChangesEvent");
+
+        		    var unbindMustSave = services.$scope.$on("mustSaveEvent", function(){
+        		        //save the form data
+        		        var description = '';
+        		        if (services.$rootScope.currentForm.description) {
+        		            description = services.$rootScope.currentForm.description;
+        		        }
+
+        		        var data = {
+        		            newVersion: false
+        		        };
+        		        unbindEvents();
+        		        services.FormBuilderService.saveForm(data, services.$rootScope.currentForm.name, description, callback);
+        		    });
+
+        		    var unbindDiscardDataEvent = services.$scope.$on("discardDataEvent", function() {
+        		        unbindEvents();
+        		        callback();
+        		    });
+
+        		    var unbindContinueEditingEvent = services.$scope.$on("continueEditingEvent", function () {
+        		        unbindEvents();
+        		    });
+
+        		} else {
+        		    callback();
+        		}
+
+            } else {
+            	services.$location.path('/forms');
+            }
+
+            var unbindEvents = function () {
+                unbindContinueEditingEvent();
+                unbindMustSave();
+                unbindDiscardDataEvent();
+            };
+
+        }
+    }
+};
+
+/** Custom controller for the save dialog */
+angular.module('flowableModeler')
+    .controller('SaveFormCtrl', [ '$rootScope', '$scope', '$http', '$route', '$location', '$translate', 'FormBuilderService',
+                         function ($rootScope, $scope, $http, $route, $location, $translate, FormBuilderService) {
+
+	var formKey = '';
+    if ($rootScope.currentForm.key) {
+    	formKey = $rootScope.currentForm.key;
+    }
+	
+    var description = '';
+    if ($rootScope.currentForm.description) {
+    	description = $rootScope.currentForm.description;
+    }
+
+    var saveDialog = { name: $rootScope.currentForm.name,
+    		formKey: formKey,
+            description: description,
+            reusable: false,
+            newVersion: false,
+            comment: ''};
+
+    $scope.saveDialog = saveDialog;
+
+    $scope.status = {
+        loading: false
+    };
+
+    $scope.cancel = function () {
+    	$scope.$hide();
+    };
+
+    $scope.saveAndClose = function () {
+    	$scope.save(function() {
+    	    if ($rootScope.editorHistory.length > 0) {
+    	        var navigationObject = $rootScope.editorHistory.pop();
+    	        var additionalParameters = '';
+            	if (navigationObject.subProcessId && navigationObject.subProcessId.length > 0) {
+            		additionalParameters = '?subProcessId=' + navigationObject.subProcessId;
+            	}
+    	        $location.url('/editor/' + navigationObject.id + additionalParameters);
+ 
+            } else {
+            	$location.path('/forms');
+            }
+    	});
+    };
+
+    $scope.save = function (additionalSaveCallback) {
+
+        if (!$scope.saveDialog.name || $scope.saveDialog.name.length == 0 ||
+        	!$scope.saveDialog.formKey || $scope.saveDialog.formKey.length == 0) {
+        	
+            return;
+        }
+
+        // Indicator spinner image
+        $scope.status = {
+        	loading: true
+        };
+
+        var data = {
+        	reusable: $scope.saveDialog.reusable,
+        	newVersion: $scope.saveDialog.newVersion,
+        	comment: $scope.saveDialog.comment
+        };
+
+        var saveCallback = function() {
+            $scope.$hide();
+            // TODO: i18n
+            $rootScope.addAlert("Saved form '" + $scope.saveDialog.name, 'info');
+            if (additionalSaveCallback) {
+                additionalSaveCallback();
+            }
+
+            $rootScope.formChanges = false;
+        };
+
+        var errorCallback = function(errorMessage) {
+        	$scope.status.loading = false;
+            $scope.saveDialog.errorMessage = errorMessage.message;
+        };
+
+        FormBuilderService.saveForm(data, $scope.saveDialog.name, $scope.saveDialog.formKey, 
+        	$scope.saveDialog.description, saveCallback, errorCallback);
+    };
+
+    $scope.isOkButtonDisabled = function() {
+        if ($scope.status.loading) {
+            return false;
+        } else if ($scope.error && $scope.error.conflictResolveAction) {
+            if ($scope.error.conflictResolveAction === 'saveAs') {
+                return !$scope.error.saveAs || $scope.error.saveAs.length == 0;
+            } else {
+                return false;
+            }
+        }
+        return true;
+    };
+
+    $scope.okClicked = function() {
+        if ($scope.error) {
+            if ($scope.error.conflictResolveAction === 'discardChanges') {
+                $scope.close();
+                $route.reload();
+            } else if ($scope.error.conflictResolveAction === 'overwrite'
+                || $scope.error.conflictResolveAction === 'newVersion') {
+                $scope.save();
+            } else if($scope.error.conflictResolveAction === 'saveAs') {
+                $scope.save(function() {
+                    $rootScope.ignoreChanges = true;  // Otherwise will get pop up that changes are not saved.
+                    if ($rootScope.editorHistory.length > 0) {
+                        var navigationObject = $rootScope.editorHistory.pop();
+                        var additionalParameters = '';
+		            	if (navigationObject.subProcessId && navigationObject.subProcessId.length > 0) {
+		            		additionalParameters = '?subProcessId=' + navigationObject.subProcessId;
+		            	}
+                        $location.url('/editor/' + navigationObject.id + additionalParameters);
+                        
+                    } else {
+                    	$location.path('/forms');
+                    }
+                });
+            }
+        }
+    };
+
+}]);

datax-modules/flowable-service-parent/flowable-modeler/src/main/resources/static/scripts/configuration/form-builder-toolbar.js

+/* 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.
+ */
+'use strict';
+
+var FORM_TOOLBAR_CONFIG = {
+    "items" : [
+        {
+            "type" : "button",
+            "title" : "FORM_TOOLBAR.ACTION.SAVE",
+            "cssClass" : "editor-icon editor-icon-save",
+            "action" : "FORM_TOOLBAR.ACTIONS.saveModel"
+        }
+    ],
+    
+    "secondaryItems" : [
+		{
+		    "type" : "button",
+		    "title" : "Close",
+		    "cssClass" : "glyphicon glyphicon-remove",
+		    "action" : "FORM_TOOLBAR.ACTIONS.closeEditor"
+		}
+    ]
+};
\ No newline at end of file

datax-modules/flowable-service-parent/flowable-modeler/src/main/resources/static/scripts/configuration/url-config.js

+/* 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.
+ */
+var FLOWABLE = FLOWABLE || {};
+
+/*
+ * Contains methods to retrieve the (mostly) base urls of the different end points.
+ * Two of the methods #getImageUrl and #getModelThumbnailUrl are exposed in the $rootScope for usage in the HTML views.
+ */
+FLOWABLE.APP_URL = {
+
+    /* ACCOUNT URLS */
+
+    getAccountUrl: function () {
+        return FLOWABLE.CONFIG.contextRoot + '/app/rest/account';
+    },
+
+    getLogoutUrl: function () {
+        return FLOWABLE.CONFIG.contextRoot + '/app/logout';
+    },
+
+    /* MODEL URLS */
+
+    getModelsUrl: function (query) {
+        return FLOWABLE.CONFIG.contextRoot + '/app/rest/models' + (query || "");
+    },
+
+    getModelUrl: function (modelId) {
+        return FLOWABLE.CONFIG.contextRoot + '/app/rest/models/' + modelId;
+    },
+
+    getModelModelJsonUrl: function (modelId) {
+        return FLOWABLE.CONFIG.contextRoot + '/app/rest/models/' + modelId + '/model-json';
+    },
+
+    getModelBpmn20ExportUrl: function (modelId) {
+        return FLOWABLE.CONFIG.contextRoot + '/app/rest/models/' + modelId + '/bpmn20?version=' + Date.now();
+    },
+
+    getCloneModelsUrl: function (modelId) {
+        return FLOWABLE.CONFIG.contextRoot + '/app/rest/models/' + modelId + '/clone';
+    },
+
+    getModelHistoriesUrl: function (modelId) {
+        return FLOWABLE.CONFIG.contextRoot + '/app/rest/models/' + modelId + '/history';
+    },
+
+    getModelHistoryUrl: function (modelId, modelHistoryId) {
+        return FLOWABLE.CONFIG.contextRoot + '/app/rest/models/' + modelId + '/history/' + modelHistoryId;
+    },
+
+    getModelHistoryModelJsonUrl: function (modelId, modelHistoryId) {
+        return FLOWABLE.CONFIG.contextRoot + '/app/rest/models/' + modelId + '/history/' + modelHistoryId + '/model-json';
+    },
+
+    getModelHistoryBpmn20ExportUrl: function (modelId, modelHistoryId) {
+        return FLOWABLE.CONFIG.contextRoot + '/app/rest/models/' + modelId + '/history/' + modelHistoryId + '/bpmn20?version=' + Date.now();
+    },
+
+    getCmmnModelDownloadUrl: function (modelId, modelHistoryId) {
+        return FLOWABLE.CONFIG.contextRoot + '/app/rest/models/' + modelId + (modelHistoryId ? '/history/' + modelHistoryId : '') + '/cmmn?version=' + Date.now();
+    },
+
+    getModelParentRelationsUrl: function (modelId) {
+        return FLOWABLE.CONFIG.contextRoot + '/app/rest/models/' + modelId + '/parent-relations';
+    },
+
+    /* APP DEFINITION URLS  */
+
+    getAppDefinitionImportUrl: function (renewIdmIds) {
+        return FLOWABLE.CONFIG.contextRoot + '/app/rest/app-definitions/import?renewIdmEntries=' + renewIdmIds;
+    },
+
+    getAppDefinitionTextImportUrl: function (renewIdmIds) {
+        return FLOWABLE.CONFIG.contextRoot + '/app/rest/app-definitions/text/import?renewIdmEntries=' + renewIdmIds;
+    },
+
+    getAppDefinitionUrl: function (modelId) {
+        return FLOWABLE.CONFIG.contextRoot + '/app/rest/app-definitions/' + modelId;
+    },
+
+    getAppDefinitionModelImportUrl: function (modelId, renewIdmIds) {
+        return FLOWABLE.CONFIG.contextRoot + '/app/rest/app-definitions/' + modelId + '/import?renewIdmEntries=' + renewIdmIds;
+    },
+
+    getAppDefinitionModelTextImportUrl: function (modelId, renewIdmIds) {
+        return FLOWABLE.CONFIG.contextRoot + '/app/rest/app-definitions/' + modelId + '/text/import?renewIdmEntries=' + renewIdmIds;
+    },
+
+    getAppDefinitionPublishUrl: function (modelId) {
+        return FLOWABLE.CONFIG.contextRoot + '/app/rest/app-definitions/' + modelId + '/publish';
+    },
+
+    getAppDefinitionExportUrl: function (modelId) {
+        return FLOWABLE.CONFIG.contextRoot + '/app/rest/app-definitions/' + modelId + '/export?version=' + Date.now();
+    },
+
+    getAppDefinitionBarExportUrl: function (modelId) {
+        return FLOWABLE.CONFIG.contextRoot + '/app/rest/app-definitions/' + modelId + '/export-bar?version=' + Date.now();
+    },
+
+    getAppDefinitionHistoryUrl: function (modelId, historyModelId) {
+        return FLOWABLE.CONFIG.contextRoot + '/app/rest/app-definitions/' + modelId + '/history/' + historyModelId;
+    },
+
+    getModelsForAppDefinitionUrl: function () {
+        return FLOWABLE.CONFIG.contextRoot + '/app/rest/models-for-app-definition';
+    },
+
+    getCmmnModelsForAppDefinitionUrl: function () {
+        return FLOWABLE.CONFIG.contextRoot + '/app/rest/cmmn-models-for-app-definition';
+    },
+
+    /* PROCESS INSTANCE URLS */
+
+    getProcessInstanceModelJsonUrl: function (modelId) {
+        return FLOWABLE.CONFIG.contextRoot + '/app/rest/process-instances/' + modelId + '/model-json';
+    },
+
+    getProcessInstanceModelJsonHistoryUrl: function (historyModelId) {
+        return FLOWABLE.CONFIG.contextRoot + '/app/rest/process-instances/history/' + historyModelId + '/model-json';
+    },
+
+    /* PROCESS DEFINITION URLS */
+
+    getProcessDefinitionModelJsonUrl: function (processDefinitionId) {
+        return FLOWABLE.CONFIG.contextRoot + '/app/rest/process-definitions/' + processDefinitionId + '/model-json';
+    },
+
+    /* PROCESS MODEL URLS */
+
+    getImportProcessModelUrl: function () {
+        return FLOWABLE.CONFIG.contextRoot + '/app/rest/import-process-model';
+    },
+
+    getImportProcessModelTextUrl: function () {
+        return FLOWABLE.CONFIG.contextRoot + '/app/rest/import-process-model/text';
+    },
+
+    /* DECISION TABLE URLS */
+
+    getDecisionTableModelsUrl: function () {
+        return FLOWABLE.CONFIG.contextRoot + '/app/rest/decision-table-models';
+    },
+
+    getDecisionTableImportUrl: function () {
+        return FLOWABLE.CONFIG.contextRoot + '/app/rest/decision-table-models/import-decision-table';
+    },
+
+    getDecisionTableTextImportUrl: function () {
+        return FLOWABLE.CONFIG.contextRoot + '/app/rest/decision-table-models/import-decision-table-text';
+    },
+
+    getDecisionTableModelUrl: function (modelId) {
+        return FLOWABLE.CONFIG.contextRoot + '/app/rest/decision-table-models/' + modelId;
+    },
+
+    getDecisionTableModelValuesUrl: function (query) {
+        return FLOWABLE.CONFIG.contextRoot + '/app/rest/decision-table-models/values?' + query;
+    },
+
+    getDecisionTableModelsHistoryUrl: function (modelHistoryId) {
+        return FLOWABLE.CONFIG.contextRoot + '/app/rest/decision-table-models/history/' + modelHistoryId;
+    },
+
+    getDecisionTableModelHistoryUrl: function (modelId, modelHistoryId) {
+        return FLOWABLE.CONFIG.contextRoot + '/app/rest/decision-table-models/' + modelId + '/history/' + modelHistoryId;
+    },
+
+    /* FORM MODEL URLS */
+
+    getFormModelsUrl: function () {
+        return FLOWABLE.CONFIG.contextRoot + '/app/rest/form-models';
+    },
+
+    getFormModelValuesUrl: function (query) {
+        return FLOWABLE.CONFIG.contextRoot + '/app/rest/form-models/values?' + query;
+    },
+
+    getFormModelUrl: function (modelId) {
+        return FLOWABLE.CONFIG.contextRoot + '/app/rest/form-models/' + modelId;
+    },
+
+    getFormModelHistoryUrl: function (modelId, modelHistoryId) {
+        return FLOWABLE.CONFIG.contextRoot + '/app/rest/form-models/' + modelId + '/history/' + modelHistoryId;
+    },
+
+    /* CASE MODEL URLS */
+
+    getCaseModelsUrl: function (query) {
+        return FLOWABLE.CONFIG.contextRoot + '/app/rest/case-models' + (query || "");
+    },
+
+    getCaseModelImportUrl: function () {
+        return FLOWABLE.CONFIG.contextRoot + '/app/rest/import-case-model';
+    },
+
+    getCaseModelTextImportUrl: function () {
+        return FLOWABLE.CONFIG.contextRoot + '/app/rest/import-case-model/text';
+    },
+
+    getCaseInstancesHistoryModelJsonUrl: function (modelHistoryId) {
+        return FLOWABLE.CONFIG.contextRoot + '/app/rest/case-instances/history/' + modelHistoryId + '/model-json';
+    },
+
+    getCaseInstancesModelJsonUrl: function (modelId) {
+        return FLOWABLE.CONFIG.contextRoot + '/app/rest/case-instances/' + modelId + '/model-json';
+    },
+
+    getCaseDefinitionModelJsonUrl: function (caseDefinitionId) {
+        return FLOWABLE.CONFIG.contextRoot + '/app/rest/case-definitions/' + caseDefinitionId + '/model-json';
+    },
+
+    /* IMAGE URLS (exposed in rootscope in app.js */
+
+    getImageUrl: function (imageId) {
+        return FLOWABLE.CONFIG.contextRoot + '/app/rest/image/' + imageId;
+    },
+
+    getModelThumbnailUrl: function (modelId, version) {
+        return FLOWABLE.CONFIG.contextRoot + '/app/rest/models/' + modelId + '/thumbnail' + (version ? "?version=" + version : "");
+    },
+
+    /* OTHER URLS */
+
+    getEditorUsersUrl: function () {
+        return FLOWABLE.CONFIG.contextRoot + '/app/rest/editor-users';
+    },
+
+    getEditorGroupsUrl: function () {
+        return FLOWABLE.CONFIG.contextRoot + '/app/rest/editor-groups';
+    },
+
+    getAboutInfoUrl: function () {
+        return FLOWABLE.CONFIG.contextRoot + '/app/rest/about-info';
+    }
+
+};

datax-modules/flowable-service-parent/flowable-modeler/src/main/resources/static/scripts/controllers/app-definition-toolbar-controller.js

+/* 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.
+ */
+angular.module('flowableModeler')
+    .controller('AppDefinitionToolbarController', ['$scope', '$http', '$modal', '$q', '$rootScope', '$translate', '$location', function ($scope, $http, $modal, $q, $rootScope, $translate, $location) {
+
+    	var toolbarItems = APP_DEFINITION_TOOLBAR_CONFIG.items;
+        $scope.items = [];
+        
+        for (var i = 0; i < toolbarItems.length; i++)
+        {
+        	$scope.items.push(toolbarItems[i]);
+        }
+        
+        $scope.secondaryItems = APP_DEFINITION_TOOLBAR_CONFIG.secondaryItems;
+
+        // Call configurable click handler (From http://stackoverflow.com/questions/359788/how-to-execute-a-javascript-function-when-i-have-its-name-as-a-string)
+        var executeFunctionByName = function(functionName, context /*, args */) {
+            var args = Array.prototype.slice.call(arguments).splice(2);
+            var namespaces = functionName.split(".");
+            var func = namespaces.pop();
+            for(var i = 0; i < namespaces.length; i++) {
+                context = context[namespaces[i]];
+            }
+            return context[func].apply(this, args);
+        };
+
+        // Click handler for toolbar buttons
+        $scope.toolbarButtonClicked = function(buttonIndex) {
+
+            // Default behaviour
+            var buttonClicked = $scope.items[buttonIndex];
+            var services = { '$scope' : $scope, '$rootScope' : $rootScope, '$http' : $http, '$modal' : $modal, '$q' : $q, '$translate' : $translate};
+            executeFunctionByName(buttonClicked.action, window, services);
+        };
+        
+        // Click handler for secondary toolbar buttons
+        $scope.toolbarSecondaryButtonClicked = function(buttonIndex) {
+            var buttonClicked = $scope.secondaryItems[buttonIndex];
+            var services = { '$scope' : $scope, '$rootScope' : $rootScope, '$http' : $http, '$modal' : $modal, '$q' : $q, '$translate' : $translate, '$location': $location};
+            executeFunctionByName(buttonClicked.action, window, services);
+        };
+}]);
\ No newline at end of file

datax-modules/flowable-service-parent/flowable-modeler/src/main/resources/static/scripts/controllers/app-definitions.js

+/* 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.
+ */
+'use strict';
+
+angular.module('flowableModeler')
+  .controller('AppDefinitionsCtrl', ['$rootScope', '$scope', '$translate', '$http', '$timeout','$location', '$modal', function ($rootScope, $scope, $translate, $http, $timeout, $location, $modal) {
+
+      // Main page (needed for visual indicator of current page)
+      $rootScope.setMainPageById('apps');
+
+	  $scope.model = {
+        filters: [
+            {id: 'apps', labelKey: 'APPS'}
+		],
+
+		sorts: [
+	        {id: 'modifiedDesc', labelKey: 'MODIFIED-DESC'},
+	        {id: 'modifiedAsc', labelKey: 'MODIFIED-ASC'},
+	        {id: 'nameAsc', labelKey: 'NAME-ASC'},
+	        {id: 'nameDesc', labelKey: 'NAME-DESC'}
+		]
+	  };
+
+	  if ($rootScope.appFilter) {
+		  $scope.model.activeFilter = $rootScope.appFilter.filter;
+		  $scope.model.activeSort = $rootScope.appFilter.sort;
+		  $scope.model.filterText = $rootScope.appFilter.filterText;
+
+	  } else {
+		  // By default, show first filter and use first sort
+	      $scope.model.activeFilter = $scope.model.filters[0];
+	      $scope.model.activeSort = $scope.model.sorts[0];
+	      $rootScope.appFilter = {
+	    		  filter: $scope.model.activeFilter,
+	    		  sort: $scope.model.activeSort,
+	    		  filterText: ''
+	      };
+	  }
+
+	  $scope.activateFilter = function(filter) {
+		  $scope.model.activeFilter = filter;
+		  $rootScope.appFilter.filter = filter;
+		  $scope.loadApps();
+	  };
+
+	  $scope.activateSort = function(sort) {
+		  $scope.model.activeSort = sort;
+		  $rootScope.appFilter.sort = sort;
+		  $scope.loadApps();
+	  };
+
+	  $scope.loadApps = function() {
+		  $scope.model.loading = true;
+
+		  var params = {
+		      filter: $scope.model.activeFilter.id,
+		      sort: $scope.model.activeSort.id,
+		      modelType: 3
+		  };
+
+		  if ($scope.model.filterText && $scope.model.filterText != '') {
+		    params.filterText = $scope.model.filterText;
+		  }
+
+		  $http({method: 'GET', url: FLOWABLE.APP_URL.getModelsUrl(), params: params}).
+		  	success(function(data, status, headers, config) {
+	    		$scope.model.apps = data;
+	    		$scope.model.loading = false;
+	        }).
+	        error(function(data, status, headers, config) {
+	           $scope.model.loading = false;
+	        });
+	  };
+
+	  var timeoutFilter = function() {
+	    $scope.model.isFilterDelayed = true;
+	    $timeout(function() {
+	        $scope.model.isFilterDelayed = false;
+	        if($scope.model.isFilterUpdated) {
+	          $scope.model.isFilterUpdated = false;
+	          timeoutFilter();
+	        } else {
+	          $scope.model.filterText = $scope.model.pendingFilterText;
+	          $rootScope.appFilter.filterText = $scope.model.filterText;
+	          $scope.loadApps();
+	        }
+	    }, 500);
+	  };
+
+	  $scope.filterDelayed = function() {
+	    if($scope.model.isFilterDelayed) {
+	      $scope.model.isFilterUpdated = true;
+	    } else {
+	      timeoutFilter();
+	    }
+	  };
+
+	  $scope.createApp = function() {
+
+          _internalCreateModal({
+			  template: 'views/popup/app-definition-create.html?version=' + Date.now(),
+			  scope: $scope
+		  }, $modal, $scope);
+	  };
+
+	  $scope.showAppDetails = function(app) {
+	    if (app) {
+	      $location.path("/apps/" + app.id);
+	    }
+	  };
+
+	  $scope.editAppDetails = function(app) {
+        if (app) {
+          $location.path("/app-editor/" + app.id);
+        }
+      };
+
+      $scope.importAppDefinition = function () {
+          _internalCreateModal({
+              template: 'views/popup/app-definitions-import.html?version=' + Date.now()
+          }, $modal, $scope);
+      };
+
+	  // Finally, load initial forms
+	  $scope.loadApps();
+  }]);
+
+
+angular.module('flowableModeler')
+    .controller('CreateNewAppCtrl', ['$rootScope', '$scope', '$http', '$location', '$translate', function ($rootScope, $scope, $http, $location, $translate) {
+
+        $scope.model = {
+            loading: false,
+            app: {
+                name: '',
+                key: '',
+                description: '',
+                modelType: 3
+            }
+        };
+
+        $scope.ok = function () {
+
+            if (!$scope.model.app.name || $scope.model.app.name.length == 0 ||
+            	!$scope.model.app.key || $scope.model.app.key.length == 0) {
+            	
+                return;
+            }
+
+            $scope.model.loading = true;
+
+            $http({method: 'POST', url: FLOWABLE.APP_URL.getModelsUrl(), data: $scope.model.app}).
+                success(function (data, status, headers, config) {
+                    $scope.$hide();
+
+                    $scope.model.loading = false;
+                    $location.path("/app-editor/" + data.id);
+
+                }).
+                error(function (response, status, headers, config) {
+                    $scope.model.loading = false;
+					
+					if (response && response.message && response.message.length > 0) {
+						$scope.model.errorMessage = response.message;
+					}
+                });
+        };
+
+        $scope.cancel = function () {
+            if (!$scope.model.loading) {
+                $scope.$hide();
+            }
+        };
+    }]);
+
+angular.module('flowableModeler')
+    .controller('DuplicateAppCtrl', ['$rootScope', '$scope', '$http', '$location', '$translate', function ($rootScope, $scope, $http, $location, $translate) {
+
+        $scope.model = {
+            loading: false,
+            app: {
+                id: '',
+                name: '',
+                key: '',
+                description: '',
+                modelType: 3
+            }
+        };
+
+        if ($scope.originalModel) {
+            //clone the model
+            $scope.model.app.name = $scope.originalModel.app.name;
+            $scope.model.app.key = $scope.originalModel.app.key;
+            $scope.model.app.description = $scope.originalModel.app.description;
+            $scope.model.app.modelType = $scope.originalModel.app.modelType;
+            $scope.model.app.id = $scope.originalModel.app.id;
+        }
+
+        $scope.ok = function () {
+
+            if (!$scope.model.app.name || $scope.model.app.name.length == 0) {
+                return;
+            }
+
+            $scope.model.loading = true;
+
+            $http({method: 'POST', url: FLOWABLE.APP_URL.getCloneModelsUrl($scope.model.app.id), data: $scope.model.app}).
+                success(function (data, status, headers, config) {
+                    $scope.$hide();
+
+                    $scope.model.loading = false;
+                    $location.path("/app-editor/" + data.id);
+
+                }).
+                error(function (response, status, headers, config) {
+                    $scope.model.loading = false;
+                    $scope.model.errorMessage = response.message;
+                });
+        };
+
+        $scope.cancel = function () {
+            if (!$scope.model.loading) {
+                $scope.$hide();
+            }
+        };
+    }]);
+
+angular.module('flowableModeler')
+.controller('ImportAppDefinitionCtrl', ['$rootScope', '$scope', '$http', 'Upload', '$location', function ($rootScope, $scope, $http, Upload, $location) {
+
+  $scope.model = {
+       loading: false,
+       renewIdmIds: false
+  };
+
+  $scope.onFileSelect = function($files, isIE) {
+
+      for (var i = 0; i < $files.length; i++) {
+          var file = $files[i];
+
+          var url;
+          if (isIE) {
+             url = FLOWABLE.APP_URL.getAppDefinitionTextImportUrl($scope.model.renewIdmIds);
+          } else {
+              url = FLOWABLE.APP_URL.getAppDefinitionImportUrl($scope.model.renewIdmIds);
+          }
+          Upload.upload({
+              url: url,
+              method: 'POST',
+              file: file
+          }).progress(function(evt) {
+	      $scope.model.loading = true;
+              $scope.model.uploadProgress = parseInt(100.0 * evt.loaded / evt.total);
+
+          }).success(function(data, status, headers, config) {
+              $scope.model.loading = false;
+
+              $location.path("/apps/" + data.id);
+              $scope.$hide();
+
+          }).error(function(data, status, headers, config) {
+
+              if (data && data.message) {
+                  $scope.model.errorMessage = data.message;
+              }
+
+              $scope.model.error = true;
+              $scope.model.loading = false;
+          });
+      }
+  };
+
+  $scope.cancel = function () {
+      if(!$scope.model.loading) {
+          $scope.$hide();
+      }
+  };
+}]);

datax-modules/flowable-service-parent/flowable-modeler/src/main/resources/static/scripts/controllers/casemodel.js

+/* 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.
+ */
+angular.module('flowableModeler')
+  .controller('CaseModelCtrl', ['$rootScope', '$scope', '$translate', '$http', '$location', '$routeParams','$modal', '$popover', '$timeout', 'appResourceRoot', 'ResourceService',
+                              function ($rootScope, $scope, $translate, $http, $location, $routeParams, $modal, $popover, $timeout, appResourceRoot, ResourceService) {
+
+    // Main page (needed for visual indicator of current page)
+    $rootScope.setMainPageById('casemodels');
+
+    // Initialize model
+    $scope.model = {
+        // Store the main model id, this points to the current version of a model,
+        // even when we're showing history
+        latestModelId: $routeParams.modelId
+    };
+    
+    $scope.loadCaseModel = function() {
+      var url;
+      if ($routeParams.modelHistoryId) {
+        url = FLOWABLE.APP_URL.getModelHistoryUrl($routeParams.modelId, $routeParams.modelHistoryId);
+      } else {
+        url = FLOWABLE.APP_URL.getModelUrl($routeParams.modelId);
+      }
+      
+      $http({method: 'GET', url: url}).
+        success(function(data, status, headers, config) {
+          $scope.model.caseModel = data;
+          
+          $scope.loadVersions();
+
+          $scope.model.cmmnDownloadUrl = FLOWABLE.APP_URL.getCmmnModelDownloadUrl($routeParams.modelId, $routeParams.modelHistoryId);
+
+
+    	  $rootScope.$on('$routeChangeStart', function(event, next, current) {
+    		  jQuery('.qtip').qtip('destroy', true);
+    	  });
+    	  
+          $timeout(function() {
+            jQuery("#cmmnModel").attr('data-model-id', $routeParams.modelId);
+            jQuery("#cmmnModel").attr('data-model-type', 'design');
+            
+            // in case we want to show a historic model, include additional attribute on the div
+            if(!$scope.model.caseModel.latestVersion) {
+              jQuery("#cmmnModel").attr('data-history-id', $routeParams.modelHistoryId);
+            }
+
+            var viewerUrl = appResourceRoot + "display-cmmn/displaymodel.html?version=" + Date.now();
+
+            // If Flowable has been deployed inside an AMD environment Raphael will fail to register
+            // itself globally until displaymodel.js (which depends ona global Raphael variable) is running,
+            // therefore remove AMD's define method until we have loaded in Raphael and displaymodel.js
+            // and assume/hope its not used during.
+            var amdDefine = window.define;
+            window.define = undefined;
+            ResourceService.loadFromHtml(viewerUrl, function(){
+                // Restore AMD's define method again
+                window.define = amdDefine;
+            });
+          });
+
+        }).error(function(data, status, headers, config) {
+          $scope.returnToList();
+        });
+    };
+    
+    $scope.useAsNewVersion = function() {
+        _internalCreateModal({
+    		template: 'views/popup/model-use-as-new-version.html',
+    		scope: $scope
+    	}, $modal, $scope);
+    };
+    
+    $scope.loadVersions = function() {
+      
+      var params = {
+        includeLatestVersion: !$scope.model.caseModel.latestVersion  
+      };
+      
+      $http({method: 'GET', url: FLOWABLE.APP_URL.getModelHistoriesUrl($scope.model.latestModelId), params: params}).
+      success(function(data, status, headers, config) {
+        if ($scope.model.caseModel.latestVersion) {
+          if (!data.data) {
+            data.data = [];
+          }
+          data.data.unshift($scope.model.caseModel);
+        }
+        
+        $scope.model.versions = data;
+      });
+    };
+    
+    $scope.showVersion = function(version) {
+      if(version) {
+        if(version.latestVersion) {
+            $location.path("/casemodels/" +  $scope.model.latestModelId);
+        } else{
+          // Show latest version, no history-suffix needed in URL
+          $location.path("/casemodels/" +  $scope.model.latestModelId + "/history/" + version.id);
+        }
+      }
+    };
+    
+    $scope.returnToList = function() {
+        $location.path("/casemodels/");
+    };
+    
+    $scope.editCaseModel = function() {
+        _internalCreateModal({
+    		template: 'views/popup/model-edit.html',
+	        scope: $scope
+    	}, $modal, $scope);
+    };
+
+    $scope.duplicateCaseModel = function() {
+      var modalInstance = _internalCreateModal({
+        template: 'views/popup/casemodel-duplicate.html?version=' + Date.now()
+      }, $modal, $scope);
+
+      modalInstance.$scope.originalModel = $scope.model;
+    };
+
+    $scope.deleteCaseModel = function() {
+        _internalCreateModal({
+    		template: 'views/popup/model-delete.html',
+    		scope: $scope
+    	}, $modal, $scope);
+    };
+    
+    $scope.openEditor = function() {
+      if ($scope.model.caseModel) {
+        $location.path("/editor/" + $scope.model.caseModel.id);
+      }
+    };
+      
+    $scope.toggleHistory = function($event) {
+        if(!$scope.historyState) {
+          var state = {};
+          $scope.historyState = state;
+          
+          // Create popover
+          state.popover = $popover(angular.element($event.target), {
+            template: 'views/popover/history.html',
+            placement: 'bottom-right',
+            show: true,
+            scope: $scope,
+            container: 'body'
+          });
+          
+          var destroy = function() {
+            state.popover.destroy();
+            delete $scope.historyState;
+          }
+          
+          // When popup is hidden or scope is destroyed, hide popup
+          state.popover.$scope.$on('tooltip.hide', destroy);
+          $scope.$on('$destroy', destroy);
+        }
+    };
+    
+    $scope.loadCaseModel();
+}]);

datax-modules/flowable-service-parent/flowable-modeler/src/main/resources/static/scripts/controllers/casemodels.js

+/* 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.
+ */
+'use strict';
+
+angular.module('flowableModeler')
+  .controller('CaseModelsCtrl', ['$rootScope', '$scope', '$translate', '$http', '$timeout','$location', '$modal', function ($rootScope, $scope, $translate, $http, $timeout, $location, $modal) {
+
+      // Main page (needed for visual indicator of current page)
+      $rootScope.setMainPageById('casemodels');
+      $rootScope.formItems = undefined;
+
+      // get latest thumbnails
+      $scope.imageVersion = Date.now();
+
+	  $scope.model = {
+        filters: [
+            {id: 'cases', labelKey: 'CASES'}
+		],
+
+		sorts: [
+		        {id: 'modifiedDesc', labelKey: 'MODIFIED-DESC'},
+		        {id: 'modifiedAsc', labelKey: 'MODIFIED-ASC'},
+		        {id: 'nameAsc', labelKey: 'NAME-ASC'},
+		        {id: 'nameDesc', labelKey: 'NAME-DESC'}
+		]
+	  };
+	  
+	  // By default, show first filter and use first sort
+      $scope.model.activeFilter = $scope.model.filters[0];
+      $scope.model.activeSort = $scope.model.sorts[0];
+
+	  $scope.activateFilter = function(filter) {
+		  $scope.model.activeFilter = filter;
+		  $rootScope.modelFilter.filter = filter;
+		  $scope.loadCaseModels();
+	  };
+
+	  $scope.activateSort = function(sort) {
+		  $scope.model.activeSort = sort;
+		  $rootScope.modelFilter.sort = sort;
+		  $scope.loadCaseModels();
+	  };
+
+	  $scope.loadCaseModels = function() {
+		  $scope.model.loading = true;
+
+		  var params = {
+		      filter: $scope.model.activeFilter.id,
+		      sort: $scope.model.activeSort.id,
+		      modelType: 5
+		  };
+
+		  if ($scope.model.filterText && $scope.model.filterText != '') {
+		    params.filterText = $scope.model.filterText;
+		  }
+
+		  $http({method: 'GET', url: FLOWABLE.APP_URL.getModelsUrl(), params: params}).
+		  	success(function(data, status, headers, config) {
+	    		$scope.model.caseModels = data;
+	    		$scope.model.loading = false;
+	        }).
+	        error(function(data, status, headers, config) {
+	           console.log('Something went wrong: ' + data);
+	           $scope.model.loading = false;
+	        });
+	  };
+
+	  var timeoutFilter = function() {
+	      $scope.model.isFilterDelayed = true;
+	      $timeout(function() {
+	          $scope.model.isFilterDelayed = false;
+	          if ($scope.model.isFilterUpdated) {
+	              $scope.model.isFilterUpdated = false;
+	              timeoutFilter();
+	          } else {
+	              $scope.model.filterText = $scope.model.pendingFilterText;
+	              $rootScope.modelFilter.filterText = $scope.model.filterText;
+	              $scope.loadCaseModels();
+	          }
+	      }, 500);
+	  };
+
+	  $scope.filterDelayed = function() {
+	      if ($scope.model.isFilterDelayed) {
+	          $scope.model.isFilterUpdated = true;
+	      } else {
+	          timeoutFilter();
+	      }
+	  };
+
+	  $scope.createCaseModel = function(mode) {
+	    var modalInstance = _internalCreateModal({
+	        template: 'views/popup/casemodel-create.html?version=' + Date.now()
+	    }, $modal, $scope);
+	  };
+
+	  $scope.importCaseModel = function () {
+          _internalCreateModal({
+              template: 'views/popup/casemodel-import.html?version=' + Date.now()
+          }, $modal, $scope);
+	  };
+
+	  $scope.showCaseModelDetails = function(caseModel) {
+	      if (caseModel) {
+	          $rootScope.editorHistory = [];
+	          $location.path("/casemodels/" + caseModel.id);
+	      }
+	  };
+
+	  $scope.editCaseModelDetails = function(caseModel) {
+		  if (caseModel) {
+		      $rootScope.editorHistory = [];
+              $location.path("/editor/" + caseModel.id);
+		  }
+	  };
+
+	  // Finally, load initial cases
+	  $scope.loadCaseModels();
+  }]);
+
+angular.module('flowableModeler')
+.controller('CreateNewCaseModelModelCtrl', ['$rootScope', '$scope', '$modal', '$http', '$location',
+                                          function ($rootScope, $scope, $modal, $http, $location) {
+
+    $scope.model = {
+       loading: false,
+       caseModel: {
+            name: '',
+            key: '',
+            description: '',
+           	modelType: 5
+       }
+    };
+
+    if ($scope.initialModelType !== undefined) {
+        $scope.model.caseModel.modelType = $scope.initialModelType;
+    }
+
+    $scope.ok = function () {
+
+        if (!$scope.model.caseModel.name || $scope.model.caseModel.name.length == 0 ||
+        	!$scope.model.caseModel.key || $scope.model.caseModel.key.length == 0) {
+        	
+            return;
+        }
+
+        $scope.model.loading = true;
+
+        $http({method: 'POST', url: FLOWABLE.APP_URL.getModelsUrl(), data: $scope.model.caseModel}).
+            success(function(data) {
+                $scope.$hide();
+
+                $scope.model.loading = false;
+                $rootScope.editorHistory = [];
+                $location.path("/case-editor/" + data.id);
+            }).
+            error(function(data, status, headers, config) {
+                $scope.model.loading = false;
+                $scope.model.errorMessage = data.message;
+            });
+    };
+
+    $scope.cancel = function () {
+        if(!$scope.model.loading) {
+            $scope.$hide();
+        }
+    };
+}]);
+
+angular.module('flowableModeler')
+.controller('DuplicateCaseModelCtrl', ['$rootScope', '$scope', '$modal', '$http', '$location',
+                                          function ($rootScope, $scope, $modal, $http, $location) {
+
+    $scope.model = {
+       loading: false,
+       caseModel: {
+            name: '',
+            key: '',
+            description: ''
+       }
+    };
+
+    if ($scope.originalModel) {
+        //clone the model
+        $scope.model.caseModel.name = $scope.originalModel.caseModel.name;
+        $scope.model.caseModel.key = $scope.originalModel.caseModel.key;
+        $scope.model.caseModel.description = $scope.originalModel.caseModel.description;
+        $scope.model.caseModel.id = $scope.originalModel.caseModel.id;
+        $scope.model.caseModel.modelType = $scope.originalModel.caseModel.modelType;
+    }
+
+    $scope.ok = function () {
+
+        if (!$scope.model.caseModel.name || $scope.model.caseModel.name.length == 0 || 
+        	!$scope.model.caseModel.key || $scope.model.caseModel.key.length == 0) {
+        	
+            return;
+        }
+
+        $scope.model.loading = true;
+
+        $http({method: 'POST', url: FLOWABLE.APP_URL.getCloneModelsUrl($scope.model.caseModel.id), data: $scope.model.caseModel}).
+            success(function(data) {
+                $scope.$hide();
+
+                $scope.model.loading = false;
+                $rootScope.editorHistory = [];
+                $location.path("/editor/" + data.id);
+            }).
+            error(function(data, status, headers, config) {
+                $scope.model.loading = false;
+                $scope.model.errorMessage = data.message;
+            });
+    };
+
+    $scope.cancel = function () {
+        if(!$scope.model.loading) {
+            $scope.$hide();
+        }
+    };
+}]);
+
+angular.module('flowableModeler')
+.controller('ImportCaseModelCtrl', ['$rootScope', '$scope', '$http', 'Upload', '$location', function ($rootScope, $scope, $http, Upload, $location) {
+
+  $scope.model = {
+       loading: false
+  };
+
+  $scope.onFileSelect = function($files, isIE) {
+
+      for (var i = 0; i < $files.length; i++) {
+          var file = $files[i];
+
+          var url;
+          if (isIE) {
+              url = FLOWABLE.APP_URL.getCaseModelTextImportUrl();
+          } else {
+              url = FLOWABLE.APP_URL.getCaseModelImportUrl();
+          }
+
+          Upload.upload({
+              url: url,
+              method: 'POST',
+              file: file
+          }).progress(function(evt) {
+	      $scope.model.loading = true;
+              $scope.model.uploadProgress = parseInt(100.0 * evt.loaded / evt.total);
+
+          }).success(function(data) {
+              $scope.model.loading = false;
+
+              $location.path("/editor/" + data.id);
+              $scope.$hide();
+
+          }).error(function(data) {
+
+              if (data && data.message) {
+                  $scope.model.errorMessage = data.message;
+              }
+
+              $scope.model.error = true;
+              $scope.model.loading = false;
+          });
+      }
+  };
+
+  $scope.cancel = function () {
+	  if(!$scope.model.loading) {
+		  $scope.$hide();
+	  }
+  };
+}]);

datax-modules/flowable-service-parent/flowable-modeler/src/main/resources/static/scripts/controllers/decision-table-toolbar-controller.js

+/* Copyright 2005-2015 Alfresco Software, Ltd.
+ *
+ * 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.
+ */
+angular.module('flowableModeler')
+    .controller('DecisionTableToolbarController', ['$scope', '$http', '$modal', '$q', '$rootScope', '$translate', '$location', 'DecisionTableService',
+        function ($scope, $http, $modal, $q, $rootScope, $translate, $location, DecisionTableService) {
+
+    	var toolbarItems = DECISION_TABLE_TOOLBAR_CONFIG.items;
+        $scope.items = [];
+        
+        for (var i = 0; i < toolbarItems.length; i++)
+        {
+        	$scope.items.push(toolbarItems[i]);
+        }
+        
+        $scope.secondaryItems = DECISION_TABLE_TOOLBAR_CONFIG.secondaryItems;
+
+        // Call configurable click handler (From http://stackoverflow.com/questions/359788/how-to-execute-a-javascript-function-when-i-have-its-name-as-a-string)
+        var executeFunctionByName = function(functionName, context /*, args */) {
+            var args = Array.prototype.slice.call(arguments).splice(2);
+            var namespaces = functionName.split(".");
+            var func = namespaces.pop();
+            for(var i = 0; i < namespaces.length; i++) {
+                context = context[namespaces[i]];
+            }
+            return context[func].apply(this, args);
+        };
+
+        // Click handler for toolbar buttons
+        $scope.toolbarButtonClicked = function(buttonIndex) {
+
+            // Default behaviour
+            var buttonClicked = $scope.items[buttonIndex];
+            var services = { '$scope' : $scope, '$rootScope' : $rootScope, '$http' : $http, '$modal' : $modal, '$q' : $q, '$translate' : $translate, 'DecisionTableService': DecisionTableService};
+            executeFunctionByName(buttonClicked.action, window, services);
+        };
+        
+        // Click handler for secondary toolbar buttons
+        $scope.toolbarSecondaryButtonClicked = function(buttonIndex) {
+            var buttonClicked = $scope.secondaryItems[buttonIndex];
+            var services = { '$scope' : $scope, '$rootScope' : $rootScope, '$http' : $http, '$modal' : $modal, '$q' : $q, '$translate' : $translate, '$location': $location, 'DecisionTableService': DecisionTableService };
+            executeFunctionByName(buttonClicked.action, window, services);
+        };
+}]);
\ No newline at end of file

datax-modules/flowable-service-parent/flowable-modeler/src/main/resources/static/scripts/controllers/decision-tables.js

+/* Copyright 2005-2015 Alfresco Software, Ltd.
+ *
+ * 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.
+ */
+'use strict';
+
+angular.module('flowableModeler')
+  .controller('DecisionTablesController', ['$rootScope', '$scope', '$translate', '$http', '$timeout','$location', '$modal', function ($rootScope, $scope, $translate, $http, $timeout, $location, $modal) {
+
+	  $rootScope.setMainPageById('decision-tables');
+	  $rootScope.decisionTableItems = undefined;
+
+      // get latest thumbnails
+      $scope.imageVersion = Date.now();
+
+	  $scope.model = {
+        filters: [
+            {id: 'decisionTables', labelKey: 'DECISION-TABLES'}
+		],
+
+		sorts: [
+		        {id: 'modifiedDesc', labelKey: 'MODIFIED-DESC'},
+		        {id: 'modifiedAsc', labelKey: 'MODIFIED-ASC'},
+		        {id: 'nameAsc', labelKey: 'NAME-ASC'},
+		        {id: 'nameDesc', labelKey: 'NAME-DESC'}
+		]
+	  };
+
+	  if ($rootScope.decisionTableFilter) {
+		  $scope.model.activeFilter = $rootScope.decisionTableFilter.filter;
+		  $scope.model.activeSort = $rootScope.decisionTableFilter.sort;
+		  $scope.model.filterText = $rootScope.decisionTableFilter.filterText;
+		  $scope.model.pendingFilterText = $scope.model.filterText; // The search textfield uses this
+
+	  } else {
+		  // By default, show first filter and use first sort
+	      $scope.model.activeFilter = $scope.model.filters[0];
+	      $scope.model.activeSort = $scope.model.sorts[0];
+	      $rootScope.decisionTableFilter = {
+	        filter: $scope.model.activeFilter,
+	        sort: $scope.model.activeSort,
+	        filterText: ''
+	      };
+	  }
+
+	  $scope.activateFilter = function(filter) {
+		  $scope.model.activeFilter = filter;
+		  $rootScope.decisionTableFilter.filter = filter;
+		  $scope.loadDecisionTables();
+	  };
+
+	  $scope.activateSort = function(sort) {
+		  $scope.model.activeSort = sort;
+		  $rootScope.decisionTableFilter.sort = sort;
+		  $scope.loadDecisionTables();
+	  };
+
+	  $scope.importDecisionTable = function () {
+          _internalCreateModal({
+              template: 'views/popup/decision-table-import.html?version=' + Date.now()
+          }, $modal, $scope);
+      };
+
+	  $scope.loadDecisionTables = function() {
+		  $scope.model.loading = true;
+
+		  var params = {
+		      filter: $scope.model.activeFilter.id,
+		      sort: $scope.model.activeSort.id,
+		      modelType: 4
+		  };
+
+		  if ($scope.model.filterText && $scope.model.filterText != '') {
+		    params.filterText = $scope.model.filterText;
+		  }
+
+		  $http({method: 'GET', url: FLOWABLE.APP_URL.getModelsUrl(), params: params}).
+		  	success(function(data, status, headers, config) {
+	    		$scope.model.decisionTables = data;
+	    		$scope.model.loading = false;
+	        }).
+	        error(function(data, status, headers, config) {
+	           $scope.model.loading = false;
+	        });
+	  };
+
+	  var timeoutFilter = function() {
+	    $scope.model.isFilterDelayed = true;
+	    $timeout(function() {
+	        $scope.model.isFilterDelayed = false;
+	        if($scope.model.isFilterUpdated) {
+	          $scope.model.isFilterUpdated = false;
+	          timeoutFilter();
+	        } else {
+	          $scope.model.filterText = $scope.model.pendingFilterText;
+	          $rootScope.decisionTableFilter.filterText = $scope.model.filterText;
+	          $scope.loadDecisionTables();
+	        }
+	    }, 500);
+	  };
+
+	  $scope.filterDelayed = function() {
+	    if($scope.model.isFilterDelayed) {
+	      $scope.model.isFilterUpdated = true;
+	    } else {
+	      timeoutFilter();
+	    }
+	  };
+
+	  $scope.createDecisionTable = function() {
+		  $rootScope.currentKickstartModel = undefined;
+	      $rootScope.currentDecisionTableModel = undefined;
+		  $scope.createDecisionTableCallback = function(result) {
+		      $rootScope.editorHistory = [];
+		      $location.url("/decision-table-editor/" + encodeURIComponent(result.id));
+		  };
+
+          _internalCreateModal({
+			  template: 'views/popup/decision-table-create.html?version=' + Date.now(),
+			  scope: $scope
+		  }, $modal, $scope);
+	  };
+
+	  $scope.showDecisionTableDetails = function(decisionTable) {
+	      if (decisionTable) {
+	      	  $rootScope.editorHistory = [];
+			  $rootScope.currentKickstartModel = undefined;
+	          $location.url("/decision-tables/" + encodeURIComponent(decisionTable.id));
+	      }
+	  };
+
+	  $scope.editDecisionTableDetails = function(decisionTable) {
+		  if (decisionTable) {
+		  	  $rootScope.editorHistory = [];
+			  $location.url("/decision-table-editor/" + encodeURIComponent(decisionTable.id));
+		  }
+	  };
+
+	  // Finally, load initial decisionTables
+	  $scope.loadDecisionTables();
+  }]);
+
+
+angular.module('flowableModeler')
+.controller('CreateNewDecisionTableCtrl', ['$rootScope', '$scope', '$http', function ($rootScope, $scope, $http) {
+
+    $scope.model = {
+       loading: false,
+       decisionTable: {
+            name: '',
+            key: '',
+            description: '',
+            modelType: 4
+       }
+    };
+
+    $scope.ok = function () {
+
+        if (!$scope.model.decisionTable.name || $scope.model.decisionTable.name.length == 0 ||
+        	!$scope.model.decisionTable.key || $scope.model.decisionTable.key.length == 0) {
+        	
+            return;
+        }
+
+        $scope.model.loading = true;
+
+        $http({method: 'POST', url: FLOWABLE.APP_URL.getModelsUrl(), data: $scope.model.decisionTable}).
+            success(function(data, status, headers, config) {
+                $scope.$hide();
+                $scope.model.loading = false;
+
+                if ($scope.createDecisionTableCallback) {
+                	$scope.createDecisionTableCallback(data);
+                	$scope.createDecisionTableCallback = undefined;
+                }
+
+            }).
+            error(function(data, status, headers, config) {
+                $scope.model.loading = false;
+                $scope.model.errorMessage = data.message;
+            });
+    };
+
+    $scope.cancel = function () {
+        if(!$scope.model.loading) {
+            $scope.$hide();
+        }
+    };
+}]);
+
+angular.module('flowableModeler')
+	.controller('DuplicateDecisionTableCtrl', ['$rootScope', '$scope', '$http',
+		function ($rootScope, $scope, $http) {
+
+			$scope.model = {
+				loading: false,
+                decisionTable: {
+					id: '',
+					name: '',
+					description: '',
+                    modelType: null
+				}
+			};
+
+			if ($scope.originalModel) {
+				//clone the model
+				$scope.model.decisionTable.name = $scope.originalModel.decisionTable.name;
+				$scope.model.decisionTable.key = $scope.originalModel.decisionTable.key;
+				$scope.model.decisionTable.description = $scope.originalModel.decisionTable.description;
+				$scope.model.decisionTable.modelType = $scope.originalModel.decisionTable.modelType;
+				$scope.model.decisionTable.id = $scope.originalModel.decisionTable.id;
+			}
+
+			$scope.ok = function () {
+
+				if (!$scope.model.decisionTable.name || $scope.model.decisionTable.name.length == 0) {
+					return;
+				}
+
+				$scope.model.loading = true;
+
+				$http({method: 'POST', url: FLOWABLE.APP_URL.getCloneModelsUrl($scope.model.decisionTable.id), data: $scope.model.decisionTable}).
+					success(function(data, status, headers, config) {
+						$scope.$hide();
+						$scope.model.loading = false;
+
+						if ($scope.duplicateDecisionTableCallback) {
+							$scope.duplicateDecisionTableCallback(data);
+							$scope.duplicateDecisionTableCallback = undefined;
+						}
+
+					}).
+					error(function(data, status, headers, config) {
+						$scope.model.loading = false;
+						$scope.model.errorMessage = data.message;
+					});
+			};
+
+			$scope.cancel = function () {
+				if(!$scope.model.loading) {
+					$scope.$hide();
+				}
+			};
+		}]);
+
+angular.module('flowableModeler')
+.controller('ImportDecisionTableModelCtrl', ['$rootScope', '$scope', '$http', 'Upload', '$location', function ($rootScope, $scope, $http, Upload, $location) {
+
+  $scope.model = {
+       loading: false
+  };
+
+  $scope.onFileSelect = function($files, isIE) {
+
+      for (var i = 0; i < $files.length; i++) {
+          var file = $files[i];
+
+          var url;
+          if (isIE) {
+              url = FLOWABLE.APP_URL.getDecisionTableTextImportUrl();
+          } else {
+              url = FLOWABLE.APP_URL.getDecisionTableImportUrl();
+          }
+
+          Upload.upload({
+              url: url,
+              method: 'POST',
+              file: file
+          }).progress(function(evt) {
+              $scope.model.loading = true;
+              $scope.model.uploadProgress = parseInt(100.0 * evt.loaded / evt.total);
+
+          }).success(function(data, status, headers, config) {
+              $scope.model.loading = false;
+
+              $location.path("/decision-table-editor/" + data.id);
+              $scope.$hide();
+
+          }).error(function(data, status, headers, config) {
+
+              if (data && data.message) {
+                  $scope.model.errorMessage = data.message;
+              }
+
+              $scope.model.error = true;
+              $scope.model.loading = false;
+          });
+      }
+  };
+
+  $scope.cancel = function () {
+      if(!$scope.model.loading) {
+          $scope.$hide();
+      }
+  };
+}]);

datax-modules/flowable-service-parent/flowable-modeler/src/main/resources/static/scripts/controllers/form-readonly-view.js

+/* 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.
+ */
+'use strict';
+
+angular.module('flowableModeler')
+  .controller('FormReadonlyViewController', ['$rootScope', '$scope', '$translate', '$http', '$timeout', '$location', '$modal', '$routeParams', '$popover',
+    function ($rootScope, $scope, $translate, $http, $timeout, $location, $modal, $routeParams, $popover) {
+
+      // Main page (needed for visual indicator of current page)
+      $rootScope.setMainPageById('forms');
+      
+      var guidSequence = 0;
+      
+      function setFieldDragDropAttributes (field, prefix) {
+          if (!field._guid) {
+              field._guid = prefix + guidSequence++;
+          }
+          
+          if (!field._width) {
+              field._width = 1;
+          }
+      }
+
+      if ($routeParams.modelId) {
+
+          var url;
+          if ($routeParams.modelHistoryId) {
+              url = FLOWABLE.APP_URL.getFormModelHistoryUrl($routeParams.modelId,$routeParams.modelHistoryId);
+          } else {
+              url = FLOWABLE.APP_URL.getFormModelUrl($routeParams.modelId);
+          }
+
+          $http({method: 'GET', url: url}).
+              success(function (response, status, headers, config) {
+                  if (response.formDefinition.fields) {
+                      for (var i = 0; i < response.formDefinition.fields.length; i++) {
+                          var field = response.formDefinition.fields[i];
+                          if (!field.params) {
+                              field.params = {};
+                          }
+                          setFieldDragDropAttributes(field, 'savedField');
+                      }
+
+                      $scope.formElements = response.formDefinition.fields;
+                  } else {
+                      $scope.formElements = [];
+                  }
+            
+                  $scope.formItems = $scope.formElements;
+                  
+                  $timeout(function () {
+                      // Flip switch in timeout to start watching all form-related models
+                      // after next digest cycle, to prevent first false-positive
+                      $scope.formLoaded = true;
+                  }, 200);
+              }).
+              error(function (response, status, headers, config) {
+                  $scope.model.loading = false;
+              });
+          
+      } else {
+          $scope.formLoaded = true;
+      }
+
+}]);

datax-modules/flowable-service-parent/flowable-modeler/src/main/resources/static/scripts/controllers/form-toolbar-controller.js

+/* 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.
+ */
+angular.module('flowableModeler')
+    .controller('FormToolbarController', ['$scope', '$http', '$modal', '$q', '$rootScope', '$translate', '$location', 'FormBuilderService', function ($scope, $http, $modal, $q, $rootScope, $translate, $location, FormBuilderService) {
+
+    	var toolbarItems = FORM_TOOLBAR_CONFIG.items;
+        $scope.items = [];
+        
+        for (var i = 0; i < toolbarItems.length; i++)
+        {
+        	$scope.items.push(toolbarItems[i]);
+        }
+        
+        $scope.secondaryItems = FORM_TOOLBAR_CONFIG.secondaryItems;
+
+        // Call configurable click handler (From http://stackoverflow.com/questions/359788/how-to-execute-a-javascript-function-when-i-have-its-name-as-a-string)
+        var executeFunctionByName = function(functionName, context /*, args */) {
+            var args = Array.prototype.slice.call(arguments).splice(2);
+            var namespaces = functionName.split(".");
+            var func = namespaces.pop();
+            for(var i = 0; i < namespaces.length; i++) {
+                context = context[namespaces[i]];
+            }
+            return context[func].apply(this, args);
+        };
+
+        // Click handler for toolbar buttons
+        $scope.toolbarButtonClicked = function(buttonIndex) {
+
+            // Default behaviour
+            var buttonClicked = $scope.items[buttonIndex];
+            var services = { '$scope' : $scope, '$rootScope' : $rootScope, '$http' : $http, '$modal' : $modal, '$q' : $q, '$translate' : $translate, 'FormBuilderService': FormBuilderService};
+            executeFunctionByName(buttonClicked.action, window, services);
+        };
+        
+        // Click handler for secondary toolbar buttons
+        $scope.toolbarSecondaryButtonClicked = function(buttonIndex) {
+            var buttonClicked = $scope.secondaryItems[buttonIndex];
+            var services = { '$scope' : $scope, '$rootScope' : $rootScope, '$http' : $http, '$modal' : $modal, '$q' : $q, '$translate' : $translate, '$location': $location, 'FormBuilderService': FormBuilderService};
+            executeFunctionByName(buttonClicked.action, window, services);
+        };
+}]);
\ No newline at end of file

datax-modules/flowable-service-parent/flowable-modeler/src/main/resources/static/scripts/controllers/form.js

+/* 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.
+ */
+angular.module('flowableModeler')
+  .controller('FormCtrl', ['$rootScope', '$scope', '$translate', '$http', '$location', '$routeParams','$modal', '$timeout', '$popover',
+                              function ($rootScope, $scope, $translate, $http, $location, $routeParams, $modal, $timeout, $popover) {
+
+    // Main page (needed for visual indicator of current page)
+    $rootScope.setMainPageById('forms');
+
+    $scope.formMode = 'read';
+
+    // Initialize model
+    $scope.model = {
+        // Store the main model id, this points to the current version of a model,
+        // even when we're showing history
+        latestModelId: $routeParams.modelId
+    };
+
+    $scope.loadForm = function() {
+      var url;
+      if ($routeParams.modelHistoryId) {
+        url = FLOWABLE.APP_URL.getModelHistoryUrl($routeParams.modelId, $routeParams.modelHistoryId);
+      } else {
+        url = FLOWABLE.APP_URL.getModelUrl($routeParams.modelId);
+      }
+
+      $http({method: 'GET', url: url}).
+        success(function(data, status, headers, config) {
+          $scope.model.form = data;
+          $scope.loadVersions();
+
+        }).error(function(data, status, headers, config) {
+          $scope.returnToList();
+        });
+    };
+
+    $scope.useAsNewVersion = function() {
+        _internalCreateModal({
+    		template: 'views/popup/model-use-as-new-version.html',
+    		scope: $scope
+    	}, $modal, $scope);
+    };
+
+    $scope.loadVersions = function() {
+
+      var params = {
+        includeLatestVersion: !$scope.model.form.latestVersion
+      };
+
+      $http({method: 'GET', url: FLOWABLE.APP_URL.getModelHistoriesUrl($scope.model.latestModelId), params: params}).
+	      success(function(data, status, headers, config) {
+	        if ($scope.model.form.latestVersion) {
+	          if (!data.data) {
+	            data.data = [];
+	          }
+	          data.data.unshift($scope.model.form);
+	        }
+
+	        $scope.model.versions = data;
+	      });
+    };
+
+    $scope.showVersion = function(version) {
+      if (version) {
+        if (version.latestVersion) {
+            $location.path("/forms/" +  $scope.model.latestModelId);
+        } else {
+          // Show latest version, no history-suffix needed in URL
+          $location.path("/forms/" +  $scope.model.latestModelId + "/history/" + version.id);
+        }
+      }
+    };
+
+    $scope.returnToList = function() {
+        $location.path("/forms/");
+    };
+
+    $scope.editForm = function() {
+        _internalCreateModal({
+    		template: 'views/popup/model-edit.html',
+	        scope: $scope
+    	}, $modal, $scope);
+    };
+
+    $scope.duplicateForm = function() {
+
+      var modalInstance = _internalCreateModal({
+        template: 'views/popup/form-duplicate.html?version=' + Date.now()
+      }, $modal, $scope);
+
+      modalInstance.$scope.originalModel = $scope.model;
+
+      modalInstance.$scope.duplicateFormCallback = function(result) {
+        $rootScope.editorHistory = [];
+        $location.path("/form-editor/" + result.id);
+      };
+    };
+
+    $scope.deleteForm = function() {
+        _internalCreateModal({
+    		template: 'views/popup/model-delete.html',
+    		scope: $scope
+    	}, $modal, $scope);
+    };
+
+    $scope.openEditor = function() {
+      if ($scope.model.form) {
+    	  $location.path("/form-editor/" + $scope.model.form.id);
+      }
+    };
+
+    $scope.toggleHistory = function($event) {
+      if (!$scope.historyState) {
+        var state = {};
+        $scope.historyState = state;
+
+        // Create popover
+        state.popover = $popover(angular.element($event.target), {
+          template: 'views/popover/history.html',
+          placement: 'bottom-right',
+          show: true,
+          scope: $scope,
+          container: 'body'
+        });
+
+        var destroy = function() {
+          state.popover.destroy();
+          delete $scope.historyState;
+        };
+
+        // When popup is hidden or scope is destroyed, hide popup
+        state.popover.$scope.$on('tooltip.hide', destroy);
+        $scope.$on('$destroy', destroy);
+      }
+    };
+
+    $scope.loadForm();
+
+}]);

datax-modules/flowable-service-parent/flowable-modeler/src/main/resources/static/scripts/controllers/forms.js

+/* 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.
+ */
+'use strict';
+
+angular.module('flowableModeler')
+  .controller('FormsCtrl', ['$rootScope', '$scope', '$translate', '$http', '$timeout','$location', '$modal', function ($rootScope, $scope, $translate, $http, $timeout, $location, $modal) {
+
+      // Main page (needed for visual indicator of current page)
+      $rootScope.setMainPageById('forms');
+      $rootScope.formItems = undefined;
+
+      // get latest thumbnails
+      $scope.imageVersion = Date.now();
+
+	  $scope.model = {
+        filters: [
+            {id: 'forms', labelKey: 'FORMS'}
+		],
+
+		sorts: [
+		        {id: 'modifiedDesc', labelKey: 'MODIFIED-DESC'},
+		        {id: 'modifiedAsc', labelKey: 'MODIFIED-ASC'},
+		        {id: 'nameAsc', labelKey: 'NAME-ASC'},
+		        {id: 'nameDesc', labelKey: 'NAME-DESC'}
+		]
+	  };
+
+	  if ($rootScope.formFilter) {
+		  $scope.model.activeFilter = $rootScope.formFilter.filter;
+		  $scope.model.activeSort = $rootScope.formFilter.sort;
+		  $scope.model.filterText = $rootScope.formFilter.filterText;
+
+	  } else {
+		  // By default, show first filter and use first sort
+	      $scope.model.activeFilter = $scope.model.filters[0];
+	      $scope.model.activeSort = $scope.model.sorts[0];
+	      $rootScope.formFilter = {
+	        filter: $scope.model.activeFilter,
+	        sort: $scope.model.activeSort,
+	        filterText: ''
+	      };
+	  }
+
+	  $scope.activateFilter = function(filter) {
+		  $scope.model.activeFilter = filter;
+		  $rootScope.formFilter.filter = filter;
+		  $scope.loadForms();
+	  };
+
+	  $scope.activateSort = function(sort) {
+		  $scope.model.activeSort = sort;
+		  $rootScope.formFilter.sort = sort;
+		  $scope.loadForms();
+	  };
+
+	  $scope.loadForms = function() {
+		  $scope.model.loading = true;
+
+		  var params = {
+		      filter: $scope.model.activeFilter.id,
+		      sort: $scope.model.activeSort.id,
+		      modelType: 2
+		  };
+
+		  if ($scope.model.filterText && $scope.model.filterText != '') {
+		    params.filterText = $scope.model.filterText;
+		  }
+
+		  $http({method: 'GET', url: FLOWABLE.APP_URL.getModelsUrl(), params: params}).
+		  	success(function(data, status, headers, config) {
+	    		$scope.model.forms = data;
+	    		$scope.model.loading = false;
+	        }).
+	        error(function(data, status, headers, config) {
+	           $scope.model.loading = false;
+	        });
+	  };
+
+	  var timeoutFilter = function() {
+	    $scope.model.isFilterDelayed = true;
+	    $timeout(function() {
+	        $scope.model.isFilterDelayed = false;
+	        if($scope.model.isFilterUpdated) {
+	          $scope.model.isFilterUpdated = false;
+	          timeoutFilter();
+	        } else {
+	          $scope.model.filterText = $scope.model.pendingFilterText;
+	          $rootScope.formFilter.filterText = $scope.model.filterText;
+	          $scope.loadForms();
+	        }
+	    }, 500);
+	  };
+
+	  $scope.filterDelayed = function() {
+	    if($scope.model.isFilterDelayed) {
+	      $scope.model.isFilterUpdated = true;
+	    } else {
+	      timeoutFilter();
+	    }
+	  };
+
+	  $scope.createForm = function() {
+	      $rootScope.currentKickstartModel = undefined;
+		  $scope.createFormCallback = function(result) {
+		      $rootScope.editorHistory = [];
+			  $location.path("/form-editor/" + result.id);
+		  };
+          _internalCreateModal({
+			  template: 'views/popup/form-create.html?version=' + Date.now(),
+			  scope: $scope
+		  }, $modal, $scope);
+	  };
+
+	  $scope.showFormDetails = function(form) {
+	      if (form) {
+	          $rootScope.editorHistory = [];
+	          $location.path("/forms/" + form.id);
+	      }
+	  };
+
+	  $scope.editFormDetails = function(form) {
+		  if (form) {
+		      $rootScope.editorHistory = [];
+			  $location.path("/form-editor/" + form.id);
+		  }
+	  };
+
+	  // Finally, load initial forms
+	  $scope.loadForms();
+  }]);
+
+
+angular.module('flowableModeler')
+.controller('CreateNewFormCtrl', ['$rootScope', '$scope', '$http',
+    function ($rootScope, $scope, $http) {
+
+    $scope.model = {
+       loading: false,
+       form: {
+            name: '',
+            key: '',
+            description: '',
+            modelType: 2
+       }
+    };
+
+    $scope.ok = function () {
+
+        if (!$scope.model.form.name || $scope.model.form.name.length == 0 ||
+        	!$scope.model.form.key || $scope.model.form.key.length == 0) {
+        	
+            return;
+        }
+
+        $scope.model.loading = true;
+
+        $http({method: 'POST', url: FLOWABLE.APP_URL.getModelsUrl(), data: $scope.model.form}).
+            success(function(data, status, headers, config) {
+                $scope.$hide();
+                $scope.model.loading = false;
+
+                if ($scope.createFormCallback) {
+                	$scope.createFormCallback(data);
+                	$scope.createFormCallback = undefined;
+                }
+
+            }).
+            error(function(data, status, headers, config) {
+                $scope.model.loading = false;
+                $scope.model.errorMessage = data.message;
+            });
+    };
+
+    $scope.cancel = function () {
+        if(!$scope.model.loading) {
+            $scope.$hide();
+        }
+    };
+}]);
+
+angular.module('flowableModeler')
+	.controller('DuplicateFormCtrl', ['$rootScope', '$scope', '$http',
+		function ($rootScope, $scope, $http) {
+
+			$scope.model = {
+				loading: false,
+				form: {
+					id: '',
+					name: '',
+					key: '',
+					description: '',
+					modelType: 2
+				}
+			};
+
+			if ($scope.originalModel) {
+				//clone the model
+				$scope.model.form.name = $scope.originalModel.form.name;
+				$scope.model.form.key = $scope.originalModel.form.key;
+				$scope.model.form.description = $scope.originalModel.form.description;
+				$scope.model.form.modelType = $scope.originalModel.form.modelType;
+				$scope.model.form.id = $scope.originalModel.form.id;
+			}
+
+			$scope.ok = function () {
+
+				if (!$scope.model.form.name || $scope.model.form.name.length == 0 ||
+					!$scope.model.form.key || $scope.model.form.key.length == 0) {
+					
+					return;
+				}
+
+				$scope.model.loading = true;
+
+				$http({method: 'POST', url: FLOWABLE.APP_URL.getCloneModelsUrl($scope.model.form.id), data: $scope.model.form}).
+					success(function(data, status, headers, config) {
+						$scope.$hide();
+						$scope.model.loading = false;
+
+						if ($scope.duplicateFormCallback) {
+							$scope.duplicateFormCallback(data);
+							$scope.duplicateFormCallback = undefined;
+						}
+
+					}).
+					error(function(data, status, headers, config) {
+						$scope.model.loading = false;
+						 $scope.model.errorMessage = data.message;
+					});
+			};
+
+			$scope.cancel = function () {
+				if(!$scope.model.loading) {
+					$scope.$hide();
+				}
+			};
+		}]);

datax-modules/flowable-service-parent/flowable-modeler/src/main/resources/static/scripts/controllers/model-common-actions.js

+/* 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.
+ */
+'use strict';
+
+angular.module('flowableModeler')
+.controller('EditModelPopupCtrl', ['$rootScope', '$scope', '$http', '$translate', '$location',
+    function ($rootScope, $scope, $http, $translate, $location) {
+
+        var model;
+        var popupType;
+        if ($scope.model.process) {
+            model = $scope.model.process;
+            popupType = 'PROCESS';
+        } else if ($scope.model.caseModel) {
+            model = $scope.model.caseModel;
+            popupType = 'CASE';
+        } else if ($scope.model.form) {
+            model = $scope.model.form;
+            popupType = 'FORM';
+        } else if ($scope.model.decisionTable) {
+            model = $scope.model.decisionTable;
+            popupType = 'DECISION-TABLE';
+        } else {
+            model = $scope.model.app;
+            popupType = 'APP';
+        }
+
+    	$scope.popup = {
+    		loading: false,
+    		popupType: popupType,
+        	modelName: model.name,
+        	modelKey: model.key,
+        	modelDescription: model.description,
+    		id: model.id
+    	};
+
+    	$scope.ok = function () {
+
+    		if (!$scope.popup.modelName || $scope.popup.modelName.length == 0 ||
+    			!$scope.popup.modelKey || $scope.popup.modelKey.length == 0) {
+    			
+    			return;
+    		}
+
+        	$scope.model.name = $scope.popup.modelName;
+        	$scope.model.key = $scope.popup.modelKey;
+        	$scope.model.description = $scope.popup.modelDescription;
+
+    		$scope.popup.loading = true;
+    		var updateData = {
+    			name: $scope.model.name, 
+    			key: $scope.model.key, description: 
+    			$scope.model.description
+    		};
+
+    		$http({method: 'PUT', url: FLOWABLE.APP_URL.getModelUrl($scope.popup.id), data: updateData}).
+    			success(function(data, status, headers, config) {
+    				if ($scope.model.process) {
+    					$scope.model.process = data;
+    				} else if ($scope.model.caseModel) {
+                        $scope.model.caseModel = data;
+    				} else if ($scope.model.form) {
+    					$scope.model.form = data;
+    				} else if ($scope.model.decisionTable) {
+    					$scope.model.decisionTable = data;
+    				} else {
+    					$scope.model.app = data;
+    				}
+
+    				$scope.addAlertPromise($translate('PROCESS.ALERT.EDIT-CONFIRM'), 'info');
+    				$scope.$hide();
+    				$scope.popup.loading = false;
+
+    				if (popupType === 'FORM') {
+                        $location.path("/forms/" +  $scope.popup.id);
+                    } else if (popupType === 'APP') {
+                        $location.path("/apps/" +  $scope.popup.id);
+                    } else if (popupType === 'DECISION-TABLE') {
+                        $location.path("/decision-tables/" +  $scope.popup.id);
+                    } else if (popupType === 'CASE') {
+                        $location.path("/casemodels/" +  $scope.popup.id);
+                    } else {
+                        $location.path("/processes/" +  $scope.popup.id);
+                    }
+
+    			}).
+    			error(function(data, status, headers, config) {
+    				$scope.popup.loading = false;
+    				$scope.popup.errorMessage = data.message;
+    			});
+    	};
+
+    	$scope.cancel = function () {
+    		if (!$scope.popup.loading) {
+    			$scope.$hide();
+    		}
+    	};
+}]);
+
+angular.module('flowableModeler')
+    .controller('DeleteModelPopupCtrl', ['$rootScope', '$scope', '$http', '$translate', function ($rootScope, $scope, $http, $translate) {
+
+        var model;
+        var popupType;
+        if ($scope.model.process) {
+            model = $scope.model.process;
+            popupType = 'PROCESS';
+        } else if ($scope.model.caseModel) {
+            model = $scope.model.caseModel;
+            popupType = 'CASE';
+        } else if ($scope.model.form) {
+            model = $scope.model.form;
+            popupType = 'FORM';
+        } else if ($scope.model.decisionTable) {
+            model = $scope.model.decisionTable;
+            popupType = 'DECISION-TABLE';
+        } else {
+            model = $scope.model.app;
+            popupType = 'APP';
+        }
+
+        $scope.popup = {
+            loading: true,
+            loadingRelations: true,
+            cascade: 'false',
+            popupType: popupType,
+            model: model
+        };
+
+        // Loading relations when opening
+        $http({method: 'GET', url: FLOWABLE.APP_URL.getModelParentRelationsUrl($scope.popup.model.id)}).
+            success(function (data, status, headers, config) {
+                $scope.popup.loading = false;
+                $scope.popup.loadingRelations = false;
+                $scope.popup.relations = data;
+            }).
+            error(function (data, status, headers, config) {
+                $scope.$hide();
+                $scope.popup.loading = false;
+            });
+
+        $scope.ok = function () {
+            $scope.popup.loading = true;
+            var params = {
+                // Explicit string-check because radio-values cannot be js-booleans
+                cascade: $scope.popup.cascade === 'true'
+            };
+
+            $http({method: 'DELETE', url: FLOWABLE.APP_URL.getModelUrl($scope.popup.model.id), params: params}).
+                success(function (data, status, headers, config) {
+                    $scope.$hide();
+                    $scope.popup.loading = false;
+                    $scope.addAlertPromise($translate(popupType + '.ALERT.DELETE-CONFIRM'), 'info');
+                    $scope.returnToList();
+                }).
+                error(function (data, status, headers, config) {
+                    $scope.$hide();
+                    $scope.popup.loading = false;
+                });
+        };
+
+        $scope.cancel = function () {
+            if (!$scope.popup.loading) {
+                $scope.$hide();
+            }
+        };
+    }]);
+
+angular.module('flowableModeler')
+.controller('UseAsNewVersionPopupCtrl', ['$rootScope', '$scope', '$http', '$translate', '$location', function ($rootScope, $scope, $http, $translate, $location) {
+
+	var model;
+	var popupType;
+	if ($scope.model.process) {
+		model = $scope.model.process;
+		popupType = 'PROCESS';
+	} else if ($scope.model.caseModel) {
+        model = $scope.model.caseModel;
+        popupType = 'CASE';
+	} else if ($scope.model.form) {
+        model = $scope.model.form;
+        popupType = 'FORM';
+    } else if ($scope.model.decisionTable) {
+        model = $scope.model.decisionTable;
+        popupType = 'DECISION-TABLE';
+    } else {
+        model = $scope.model.app;
+        popupType = 'APP';
+    }
+
+	$scope.popup = {
+		loading: false,
+		model: model,
+		popupType: popupType,
+		latestModelId: $scope.model.latestModelId,
+		comment: ''
+	};
+
+	$scope.ok = function () {
+		$scope.popup.loading = true;
+
+		var actionData = {
+			action: 'useAsNewVersion',
+			comment: $scope.popup.comment
+		};
+
+		$http({method: 'POST', url: FLOWABLE.APP_URL.getModelHistoryUrl($scope.popup.latestModelId, $scope.popup.model.id), data: actionData}).
+			success(function(data, status, headers, config) {
+
+                var backToOverview = function() {
+                    if (popupType === 'FORM') {
+                        $location.path("/forms/" +  $scope.popup.latestModelId);
+                    } else if (popupType === 'APP') {
+                        $location.path("/apps/" +  $scope.popup.latestModelId);
+                    } else if (popupType === 'DECISION-TABLE') {
+                        $location.path("/decision-tables/" +  $scope.popup.latestModelId);
+                    } else if (popupType === 'CASE') {
+                        $location.path("/casemodels/" +  $scope.popup.latestModelId);
+                    } else {
+                        $location.path("/processes/" +  $scope.popup.latestModelId);
+                    }
+                };
+
+
+                if (data && data.unresolvedModels && data.unresolvedModels.length > 0) {
+
+                    // There were unresolved models
+
+                    $scope.popup.loading = false;
+                    $scope.popup.foundUnresolvedModels = true;
+                    $scope.popup.unresolvedModels = data.unresolvedModels;
+
+                    $scope.close = function() {
+                        $scope.$hide();
+                        backToOverview();
+                    };
+
+
+                } else {
+
+                    // All models working resolved perfectly
+
+                    $scope.popup.loading = false;
+                    $scope.$hide();
+
+                    $scope.addAlertPromise($translate(popupType + '.ALERT.NEW-VERSION-CONFIRM'), 'info');
+                    backToOverview();
+
+                }
+
+			}).
+			error(function(data, status, headers, config) {
+				$scope.$hide();
+				$scope.popup.loading = false;
+			});
+	};
+
+	$scope.cancel = function () {
+		if (!$scope.popup.loading) {
+			$scope.$hide();
+		}
+	};
+}]);

datax-modules/flowable-service-parent/flowable-modeler/src/main/resources/static/scripts/controllers/process.js

+/* 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.
+ */
+angular.module('flowableModeler')
+  .controller('ProcessCtrl', ['$rootScope', '$scope', '$translate', '$http', '$location', '$routeParams','$modal', '$popover', '$timeout', 'appResourceRoot', 'ResourceService',
+                              function ($rootScope, $scope, $translate, $http, $location, $routeParams, $modal, $popover, $timeout, appResourceRoot, ResourceService) {
+
+    // Main page (needed for visual indicator of current page)
+    $rootScope.setMainPageById('processes');
+
+    // Initialize model
+    $scope.model = {
+        // Store the main model id, this points to the current version of a model,
+        // even when we're showing history
+        latestModelId: $routeParams.modelId
+    };
+    
+    $scope.loadProcess = function() {
+      var url;
+      if ($routeParams.modelHistoryId) {
+        url = FLOWABLE.APP_URL.getModelUrl($routeParams.modelId) + '/history/' + $routeParams.modelHistoryId;
+      } else {
+        url = FLOWABLE.APP_URL.getModelUrl($routeParams.modelId);
+      }
+      
+      $http({method: 'GET', url: url}).
+        success(function(data, status, headers, config) {
+          $scope.model.process = data;
+          
+          $scope.loadVersions();
+
+          $scope.model.bpmn20DownloadUrl = $routeParams.modelHistoryId == undefined ?
+              FLOWABLE.APP_URL.getModelBpmn20ExportUrl($routeParams.modelId) :
+              FLOWABLE.APP_URL.getModelHistoryBpmn20ExportUrl($routeParams.modelId, $routeParams.modelHistoryId);
+
+
+        	  $rootScope.$on('$routeChangeStart', function(event, next, current) {
+        		  jQuery('.qtip').qtip('destroy', true);
+        	  });
+        	  
+	          $timeout(function() {
+	            jQuery("#bpmnModel").attr('data-model-id', $routeParams.modelId);
+	            jQuery("#bpmnModel").attr('data-model-type', 'design');
+	            
+	            // in case we want to show a historic model, include additional attribute on the div
+	            if(!$scope.model.process.latestVersion) {
+	              jQuery("#bpmnModel").attr('data-history-id', $routeParams.modelHistoryId);
+	            }
+
+                var viewerUrl = appResourceRoot + "display/displaymodel.html?version=" + Date.now();
+
+                // If Flowable has been deployed inside an AMD environment Raphael will fail to register
+                // itself globally until displaymodel.js (which depends ona global Raphale variable) is running,
+                // therefore remove AMD's define method until we have loaded in Raphael and displaymodel.js
+                // and assume/hope its not used during.
+                var amdDefine = window.define;
+                window.define = undefined;
+                ResourceService.loadFromHtml(viewerUrl, function(){
+                    // Restore AMD's define method again
+                    window.define = amdDefine;
+                });
+              });
+
+        }).error(function(data, status, headers, config) {
+          $scope.returnToList();
+        });
+    };
+    
+    $scope.useAsNewVersion = function() {
+        _internalCreateModal({
+    		template: 'views/popup/model-use-as-new-version.html',
+    		scope: $scope
+    	}, $modal, $scope);
+    };
+    
+    $scope.loadVersions = function() {
+      
+      var params = {
+        includeLatestVersion: !$scope.model.process.latestVersion  
+      };
+      
+      $http({method: 'GET', url: FLOWABLE.APP_URL.getModelHistoriesUrl($scope.model.latestModelId), params: params}).
+      success(function(data, status, headers, config) {
+        if ($scope.model.process.latestVersion) {
+          if (!data.data) {
+            data.data = [];
+          }
+          data.data.unshift($scope.model.process);
+        }
+        
+        $scope.model.versions = data;
+      });
+    };
+    
+    $scope.showVersion = function(version) {
+      if(version) {
+        if(version.latestVersion) {
+            $location.path("/processes/" +  $scope.model.latestModelId);
+        } else{
+          // Show latest version, no history-suffix needed in URL
+          $location.path("/processes/" +  $scope.model.latestModelId + "/history/" + version.id);
+        }
+      }
+    };
+    
+    $scope.returnToList = function() {
+        $location.path("/processes/");
+    };
+    
+    $scope.editProcess = function() {
+        _internalCreateModal({
+    		template: 'views/popup/model-edit.html',
+	        scope: $scope
+    	}, $modal, $scope);
+    };
+
+    $scope.duplicateProcess = function() {
+      var modalInstance = _internalCreateModal({
+        template: 'views/popup/process-duplicate.html?version=' + Date.now()
+      }, $modal, $scope);
+
+      modalInstance.$scope.originalModel = $scope.model;
+    };
+
+    $scope.deleteProcess = function() {
+        _internalCreateModal({
+    		template: 'views/popup/model-delete.html',
+    		scope: $scope
+    	}, $modal, $scope);
+    };
+    
+    $scope.openEditor = function() {
+      if ($scope.model.process) {
+        $location.path("/editor/" + $scope.model.process.id);
+      }
+    };
+      
+    $scope.toggleHistory = function($event) {
+        if(!$scope.historyState) {
+          var state = {};
+          $scope.historyState = state;
+          
+          // Create popover
+          state.popover = $popover(angular.element($event.target), {
+            template: 'views/popover/history.html',
+            placement: 'bottom-right',
+            show: true,
+            scope: $scope,
+            container: 'body'
+          });
+          
+          var destroy = function() {
+            state.popover.destroy();
+            delete $scope.historyState;
+          }
+          
+          // When popup is hidden or scope is destroyed, hide popup
+          state.popover.$scope.$on('tooltip.hide', destroy);
+          $scope.$on('$destroy', destroy);
+        }
+    };
+    
+    $scope.loadProcess();
+}]);

datax-modules/flowable-service-parent/flowable-modeler/src/main/resources/static/scripts/controllers/processes.js

+/* 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.
+ */
+'use strict';
+
+angular.module('flowableModeler')
+  .controller('ProcessesCtrl', ['$rootScope', '$scope', '$translate', '$http', '$timeout','$location', '$modal', function ($rootScope, $scope, $translate, $http, $timeout, $location, $modal) {
+
+      // Main page (needed for visual indicator of current page)
+      $rootScope.setMainPageById('processes');
+      $rootScope.formItems = undefined;
+
+      // get latest thumbnails
+      $scope.imageVersion = Date.now();
+
+	  $scope.model = {
+        filters: [
+            {id: 'processes', labelKey: 'PROCESSES'}
+		],
+
+		sorts: [
+		        {id: 'modifiedDesc', labelKey: 'MODIFIED-DESC'},
+		        {id: 'modifiedAsc', labelKey: 'MODIFIED-ASC'},
+		        {id: 'nameAsc', labelKey: 'NAME-ASC'},
+		        {id: 'nameDesc', labelKey: 'NAME-DESC'}
+		]
+	  };
+
+	  if ($rootScope.modelFilter) {
+		  $scope.model.activeFilter = $rootScope.modelFilter.filter;
+		  $scope.model.activeSort = $rootScope.modelFilter.sort;
+		  $scope.model.filterText = $rootScope.modelFilter.filterText;
+
+	  } else {
+		  // By default, show first filter and use first sort
+	      $scope.model.activeFilter = $scope.model.filters[0];
+	      $scope.model.activeSort = $scope.model.sorts[0];
+	      $rootScope.modelFilter = {
+	        filter: $scope.model.activeFilter,
+	        sort: $scope.model.activeSort,
+	        filterText: ''
+	      };
+	  }
+
+	  $scope.activateFilter = function(filter) {
+		  $scope.model.activeFilter = filter;
+		  $rootScope.modelFilter.filter = filter;
+		  $scope.loadProcesses();
+	  };
+
+	  $scope.activateSort = function(sort) {
+		  $scope.model.activeSort = sort;
+		  $rootScope.modelFilter.sort = sort;
+		  $scope.loadProcesses();
+	  };
+
+	  $scope.loadProcesses = function() {
+		  $scope.model.loading = true;
+
+		  var params = {
+		      filter: $scope.model.activeFilter.id,
+		      sort: $scope.model.activeSort.id,
+		      modelType: 0
+		  };
+
+		  if ($scope.model.filterText && $scope.model.filterText != '') {
+		    params.filterText = $scope.model.filterText;
+		  }
+
+		  $http({method: 'GET', url: FLOWABLE.APP_URL.getModelsUrl(), params: params}).
+		  	success(function(data, status, headers, config) {
+	    		$scope.model.processes = data;
+	    		$scope.model.loading = false;
+	        }).
+	        error(function(data, status, headers, config) {
+	           console.log('Something went wrong: ' + data);
+	           $scope.model.loading = false;
+	        });
+	  };
+
+	  var timeoutFilter = function() {
+	      $scope.model.isFilterDelayed = true;
+	      $timeout(function() {
+	          $scope.model.isFilterDelayed = false;
+	          if ($scope.model.isFilterUpdated) {
+	              $scope.model.isFilterUpdated = false;
+	              timeoutFilter();
+	          } else {
+	              $scope.model.filterText = $scope.model.pendingFilterText;
+	              $rootScope.modelFilter.filterText = $scope.model.filterText;
+	              $scope.loadProcesses();
+	          }
+	      }, 500);
+	  };
+
+	  $scope.filterDelayed = function() {
+	      if ($scope.model.isFilterDelayed) {
+	          $scope.model.isFilterUpdated = true;
+	      } else {
+	          timeoutFilter();
+	      }
+	  };
+
+	  $scope.createProcess = function(mode) {
+	    var modalInstance = _internalCreateModal({
+	        template: 'views/popup/process-create.html?version=' + Date.now()
+	    }, $modal, $scope);
+	  };
+
+	  $scope.importProcess = function () {
+          _internalCreateModal({
+              template: 'views/popup/process-import.html?version=' + Date.now()
+          }, $modal, $scope);
+	  };
+
+	  $scope.showProcessDetails = function(process) {
+	      if (process) {
+	          $rootScope.editorHistory = [];
+	          $location.path("/processes/" + process.id);
+	      }
+	  };
+
+	  $scope.editProcessDetails = function(process) {
+		  if (process) {
+		      $rootScope.editorHistory = [];
+              $location.path("/editor/" + process.id);
+		  }
+	  };
+
+	  // Finally, load initial processes
+	  $scope.loadProcesses();
+  }]);
+
+angular.module('flowableModeler')
+.controller('CreateNewProcessModelCtrl', ['$rootScope', '$scope', '$modal', '$http', '$location',
+                                          function ($rootScope, $scope, $modal, $http, $location) {
+
+    $scope.model = {
+       loading: false,
+       process: {
+            name: '',
+            key: '',
+            description: '',
+           	modelType: 0
+       }
+    };
+
+    if ($scope.initialModelType !== undefined) {
+        $scope.model.process.modelType = $scope.initialModelType;
+    }
+
+    $scope.ok = function () {
+
+        if (!$scope.model.process.name || $scope.model.process.name.length == 0 ||
+        	!$scope.model.process.key || $scope.model.process.key.length == 0) {
+        	
+            return;
+        }
+
+        $scope.model.loading = true;
+
+        $http({method: 'POST', url: FLOWABLE.APP_URL.getModelsUrl(), data: $scope.model.process}).
+            success(function(data) {
+                $scope.$hide();
+
+                $scope.model.loading = false;
+                $rootScope.editorHistory = [];
+                $location.path("/editor/" + data.id);
+            }).
+            error(function(data, status, headers, config) {
+                $scope.model.loading = false;
+                $scope.model.errorMessage = data.message;
+            });
+    };
+
+    $scope.cancel = function () {
+        if(!$scope.model.loading) {
+            $scope.$hide();
+        }
+    };
+}]);
+
+angular.module('flowableModeler')
+.controller('DuplicateProcessModelCtrl', ['$rootScope', '$scope', '$modal', '$http', '$location',
+                                          function ($rootScope, $scope, $modal, $http, $location) {
+
+    $scope.model = {
+       loading: false,
+       process: {
+            name: '',
+            key: '',
+            description: ''
+       }
+    };
+
+    if ($scope.originalModel) {
+        //clone the model
+        $scope.model.process.name = $scope.originalModel.process.name;
+        $scope.model.process.key = $scope.originalModel.process.key;
+        $scope.model.process.description = $scope.originalModel.process.description;
+        $scope.model.process.id = $scope.originalModel.process.id;
+        $scope.model.process.modelType = $scope.originalModel.process.modelType;
+    }
+
+    $scope.ok = function () {
+
+        if (!$scope.model.process.name || $scope.model.process.name.length == 0 || 
+        	!$scope.model.process.key || $scope.model.process.key.length == 0) {
+        	
+            return;
+        }
+
+        $scope.model.loading = true;
+
+        $http({method: 'POST', url: FLOWABLE.APP_URL.getCloneModelsUrl($scope.model.process.id), data: $scope.model.process}).
+            success(function(data) {
+                $scope.$hide();
+
+                $scope.model.loading = false;
+                $rootScope.editorHistory = [];
+                $location.path("/editor/" + data.id);
+            }).
+            error(function(data, status, headers, config) {
+                $scope.model.loading = false;
+                $scope.model.errorMessage = data.message;
+            });
+    };
+
+    $scope.cancel = function () {
+        if(!$scope.model.loading) {
+            $scope.$hide();
+        }
+    };
+}]);
+
+angular.module('flowableModeler')
+.controller('ImportProcessModelCtrl', ['$rootScope', '$scope', '$http', 'Upload', '$location', function ($rootScope, $scope, $http, Upload, $location) {
+
+  $scope.model = {
+       loading: false
+  };
+
+  $scope.onFileSelect = function($files, isIE) {
+
+      for (var i = 0; i < $files.length; i++) {
+          var file = $files[i];
+
+          var url;
+          if (isIE) {
+              url = FLOWABLE.APP_URL.getImportProcessModelTextUrl();
+          } else {
+              url = FLOWABLE.APP_URL.getImportProcessModelUrl();
+          }
+
+          Upload.upload({
+              url: url,
+              method: 'POST',
+              file: file
+          }).progress(function(evt) {
+	      $scope.model.loading = true;
+              $scope.model.uploadProgress = parseInt(100.0 * evt.loaded / evt.total);
+
+          }).success(function(data) {
+              $scope.model.loading = false;
+
+              $location.path("/editor/" + data.id);
+              $scope.$hide();
+
+          }).error(function(data) {
+
+              if (data && data.message) {
+                  $scope.model.errorMessage = data.message;
+              }
+
+              $scope.model.error = true;
+              $scope.model.loading = false;
+          });
+      }
+  };
+
+  $scope.cancel = function () {
+	  if(!$scope.model.loading) {
+		  $scope.$hide();
+	  }
+  };
+}]);

datax-modules/flowable-service-parent/flowable-modeler/src/main/resources/static/scripts/resource-loader.js

+/* 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.
+ */
+(function(resources){
+
+    if (resources) {
+
+        // Pause angular bootstrap so we have time to register and override angular services/directives etc
+        window.name = 'NG_DEFER_BOOTSTRAP!';
+
+        function load(res, node, callback, scope) {
+            var resource;
+            if (res.tag === 'script') {
+                resource = document.createElement('script');
+                resource.type = res.type || 'text/javascript';
+                resource.src = res.src;
+
+                if (callback) {
+                    var done = false;
+
+                    // Attach handlers for all browsers
+                    resource.onload = resource.onreadystatechange = function()
+                    {
+                        if (!done && (!this.readyState || this.readyState == "loaded" || this.readyState == "complete"))
+                        {
+                            done = true;
+                            callback.call(scope ? scope : this, res);
+                        }
+                    };
+                }
+            }
+            else if (res.tag === 'link') {
+                resource = document.createElement('link');
+                resource.rel = res.rel || 'stylesheet';
+                resource.href = res.href;
+            }
+
+            if (node.nextSibling) {
+                node.parentNode.insertBefore(resource, node.nextSibling);
+            }
+            else {
+                node.parentNode.appendChild(resource);
+            }
+
+            if (res.tag === 'link' && callback) {
+                callback.call(scope ? scope : this, res);
+            }
+        }
+
+        function getResourceLoaderElement() {
+            var scripts = document.getElementsByTagName('script');
+            for (var i = 0, il = scripts.length; i < il; i++) {
+                if (scripts[i].src.indexOf('scripts/resource-loader.js') != -1) {
+                    return scripts[i];
+                }
+            }
+            return null;
+        }
+
+        var res = resources['*'];
+        var resourceLoaderElement = getResourceLoaderElement();
+        var appName = resourceLoaderElement.getAttribute('app');
+        if (resources.hasOwnProperty(appName)) {
+            res = resources[appName];
+        }
+
+        var loadedResources = 0;
+        for (var i = 0, il = res.length; i < il; i++) {
+            load(res[i], resourceLoaderElement, function(){
+                loadedResources++;
+                if (loadedResources == res.length) {
+                    // Let angular resume bootstrap
+                    var interval = window.setInterval(function(){
+                        if (angular && typeof angular.resumeBootstrap == 'function') {
+                            angular.resumeBootstrap();
+                            window.clearInterval(interval);
+                        }
+                    }, 20);
+
+                }
+            });
+        }
+    }
+
+})(FLOWABLE.CONFIG.resources);
\ No newline at end of file

datax-modules/flowable-service-parent/flowable-modeler/src/main/resources/static/scripts/services/decision-table-service.js

+/* Copyright 2005-2015 Alfresco Software, Ltd.
+ *
+ * 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.
+ */
+'use strict';
+
+// Decision Table service
+angular.module('flowableModeler').service('DecisionTableService', [ '$rootScope', '$http', '$q', '$timeout', '$translate',
+    function ($rootScope, $http, $q, $timeout, $translate) {
+
+        var httpAsPromise = function(options) {
+            var deferred = $q.defer();
+            $http(options).
+                success(function (response, status, headers, config) {
+                    deferred.resolve(response);
+                })
+                .error(function (response, status, headers, config) {
+                    console.log('Something went wrong during http call:' + response);
+                    deferred.reject(response);
+                });
+            return deferred.promise;
+        };
+
+        this.filterDecisionTables = function(filter) {
+            return httpAsPromise(
+                {
+                    method: 'GET',
+                    url: FLOWABLE.APP_URL.getDecisionTableModelsUrl(),
+                    params: {filter: filter}
+                }
+            );
+        };
+
+        /**
+         * Fetches the details of a decision table.
+         */
+        this.fetchDecisionTableDetails = function(modelId, historyModelId) {
+            var url = historyModelId ?
+                FLOWABLE.APP_URL.getDecisionTableModelHistoryUrl(encodeURIComponent(modelId), encodeURIComponent(historyModelId)) :
+                FLOWABLE.APP_URL.getDecisionTableModelUrl(encodeURIComponent(modelId));
+            return httpAsPromise({ method: 'GET', url: url });
+        };
+
+        function cleanUpModel (decisionTableDefinition) {
+            delete decisionTableDefinition.isEmbeddedTable;
+            var expressions = (decisionTableDefinition.inputExpressions || []).concat(decisionTableDefinition.outputExpressions || []);
+            if (decisionTableDefinition.rules && decisionTableDefinition.rules.length > 0) {
+                decisionTableDefinition.rules.forEach(function (rule) {
+                    var headerExpressionIds = [];
+                    expressions.forEach(function(def){
+                        headerExpressionIds.push(def.id);
+                    });
+
+                    // Make sure that the rule has all header ids defined as attribtues
+                    headerExpressionIds.forEach(function(id){
+                        if (!rule.hasOwnProperty(id)) {
+                            rule[id] = "";
+                        }
+                    });
+
+                    // Make sure that the rule does not have an attribute that is not a header id
+                    delete rule.$$hashKey;
+                    for (var id in rule) {
+                        if (headerExpressionIds.indexOf(id) === -1) {
+                            delete rule[id];
+                            delete rule.validationErrorMessages;
+                        }
+                    }
+
+                });
+            }
+        }
+
+        this.saveDecisionTable = function (data, name, key, description, saveCallback, errorCallback) {
+
+            data.decisionTableRepresentation = {
+            	name: name,
+            	key: key
+            };
+
+            if (description && description.length > 0) {
+                data.decisionTableRepresentation.description = description;
+            }
+
+            var decisionTableDefinition = angular.copy($rootScope.currentDecisionTable);
+
+            data.decisionTableRepresentation.decisionTableDefinition = decisionTableDefinition;
+            decisionTableDefinition.modelVersion = '2';
+            decisionTableDefinition.key = key;
+            decisionTableDefinition.rules = angular.copy($rootScope.currentDecisionTableRules);
+
+			html2canvas(jQuery('#decision-table-editor'), {
+                onrendered: function (canvas) {
+                    var scale = canvas.width / 300.0;
+
+                    var extra_canvas = document.createElement('canvas');
+                    extra_canvas.setAttribute('width', 300);
+                    extra_canvas.setAttribute('height', canvas.height / scale);
+
+                    var ctx = extra_canvas.getContext('2d');
+                    ctx.drawImage(canvas, 0, 0, canvas.width, canvas.height, 0, 0, 300, canvas.height / scale);
+
+                    data.decisionTableImageBase64 = extra_canvas.toDataURL('image/png');
+
+                    $http({
+	                    method: 'PUT',
+	                    url: FLOWABLE.APP_URL.getDecisionTableModelUrl($rootScope.currentDecisionTable.id),
+	                    data: data}).
+	                
+	                	success(function (response, status, headers, config) {
+
+                            if (saveCallback) {
+                                saveCallback();
+                            }
+                        }).
+                        error(function (response, status, headers, config) {
+                            if (errorCallback) {
+                                errorCallback(response);
+                            }
+                        });
+                }
+            });
+        };
+
+        this.getDecisionTables = function (decisionTableIds, callback) {
+
+            if (decisionTableIds.length > 0) {
+
+                var decisionTableIdParams = '';
+                for (var i = 0; i < decisionTableIds.length; i++) {
+                    if (decisionTableIdParams.length > 0) {
+                        decisionTableIdParams += '&';
+                    }
+                    decisionTableIdParams += 'decisionTableId=' + decisionTableIds[i];
+                }
+                if (decisionTableIdParams.length > 0) {
+                    decisionTableIdParams += '&';
+                }
+                decisionTableIdParams += 'version=' + Date.now();
+
+                $http({method: 'GET', url: FLOWABLE.APP_URL.getDecisionTableModelValuesUrl(decisionTableIdParams)}).
+                    success(function (data) {
+                        if (callback) {
+                            callback(data);
+                        }
+                    }).
+
+                    error(function (data) {
+                        console.log('Something went wrong when fetching decision table(s):' + JSON.stringify(data));
+                    });
+                    
+            } else {
+                if (callback) {
+                    callback();
+                }
+            }
+        };
+
+    }]);

datax-modules/flowable-service-parent/flowable-modeler/src/main/resources/static/scripts/services/identity-services.js

+/* 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.
+ */
+'use strict';
+
+angular.module('flowableModeler').service('UserService', ['$http', '$q',
+    function ($http, $q) {
+
+        var httpAsPromise = function(options) {
+            var deferred = $q.defer();
+            $http(options).
+                success(function (response, status, headers, config) {
+                    deferred.resolve(response);
+                })
+                .error(function (response, status, headers, config) {
+                    deferred.reject(response);
+                });
+            return deferred.promise;
+        };
+
+        /*
+         * Filter users based on a filter text.
+         */
+        this.getFilteredUsers = function (filterText, taskId, processInstanceId) {
+            var params = {filter: filterText};
+            if(taskId) {
+                params.excludeTaskId = taskId;
+            }
+            if (processInstanceId) {
+                params.exclusdeProcessId = processInstanceId;
+            }
+
+            return httpAsPromise({
+                method: 'GET',
+                url: FLOWABLE.APP_URL.getEditorUsersUrl(),
+                params: params
+            });
+        };
+
+    }]);
+
+angular.module('flowableModeler').service('GroupService', ['$http', '$q',
+    function ($http, $q) {
+
+        var httpAsPromise = function(options) {
+            var deferred = $q.defer();
+            $http(options).
+                success(function (response, status, headers, config) {
+                    deferred.resolve(response);
+                })
+                .error(function (response, status, headers, config) {
+                    deferred.reject(response);
+                });
+            return deferred.promise;
+        };
+
+        /*
+         * Filter functional groups based on a filter text.
+         */
+        this.getFilteredGroups = function (filterText) {
+            var params;
+            if(filterText) {
+                params = {filter: filterText};
+            }
+
+            return httpAsPromise({
+                method: 'GET',
+                url: FLOWABLE.APP_URL.getEditorGroupsUrl(),
+                params: params
+            });
+        };
+    }]);

datax-modules/flowable-service-parent/flowable-modeler/src/main/resources/static/scripts/services/util-services.js

+/* 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.
+ */
+/**
+ * Service with small utility methods
+ */
+angular.module('flowableModeler').service('UtilityService', [ '$window', '$document', '$timeout', function ($window, $document, $timeout) {
+
+    this.scrollToElement = function(elementId) {
+        $timeout(function() {
+            var someElement = angular.element(document.getElementById(elementId))[0];
+            if (someElement) {
+                if (someElement.getBoundingClientRect().top > $window.innerHeight) {
+                    $document.scrollToElement(someElement, 0, 1000);
+                }
+            }
+        });
+    };
+
+}]);
\ No newline at end of file

datax-modules/flowable-service-parent/flowable-modeler/src/main/resources/static/styles/common/style-retina.css

+/* Retina tweaks */
+@media 	only screen and (-webkit-min-device-pixel-ratio: 1.5),
+only screen and (   min--moz-device-pixel-ratio: 1.5),
+only screen and (     -o-min-device-pixel-ratio: 3/2),
+only screen and (        min-device-pixel-ratio: 1.5),
+only screen and (min-resolution: 192dpi) {
+
+    .navbar-header .navbar-brand {
+        background-size: 148px 25px;
+    }
+
+    .account .google-drive {
+        background: transparent url('../../images/google-drive-2x.png') 50% 50% no-repeat;
+        background-size: 34px 34px;
+    }
+
+    .account .alfresco {
+        background: transparent url('../../images/alfresco-2x.png') 50% 50% no-repeat;
+        background-size: 34px 34px;
+    }
+
+    .account .alfresco-cloud {
+        background: transparent url('../../images/alfresco-cloud-2x.png') 50% 50% no-repeat;
+        background-size: 34px 34px;
+    }
+}
\ No newline at end of file

datax-modules/flowable-service-parent/flowable-modeler/src/main/resources/static/views/app-definition-builder.html

+
+<div class="subheader editor-toolbar" id="editor-header">
+    <div class="fixed-container">
+        <div class="btn-group">
+            <div class="btn-toolbar pull-left" ng-controller="AppDefinitionToolbarController" ng-cloak>
+                <button id="{{item.id}}"
+                        title="{{item.title | translate}}"
+                        ng-repeat="item in items"
+                        ng-switch on="item.type"
+                        class="btn btn-inverse" ng-class="{'separator': item.type == 'separator'}"
+                        ng-disabled="item.type == 'separator' || item.enabled == false"
+                        ng-click="toolbarButtonClicked($index)">
+                    <i ng-switch-when="button" ng-class="item.cssClass" class="toolbar-button" data-toggle="tooltip" title="{{item.title | translate}}"></i>
+                    <div ng-switch-when="separator" ng-class="item.cssClass"></div>
+                </button>
+              </div>
+            </div>
+            <div class="btn-group pull-right" ng-show="!secondaryItems.length">
+                <div class="btn-toolbar pull-right" ng-controller="AppDefinitionToolbarController">
+                <button title="{{item.title | translate}}" ng-repeat="item in secondaryItems" ng-switch on="item.type" class="btn btn-inverse" ng-class="{'separator': item.type == 'separator'}"
+                    ng-disabled="item.type == 'separator'" ng-click="toolbarSecondaryButtonClicked($index)" id="{{item.id}}">
+                    <i ng-switch-when="button" ng-class="item.cssClass" class="toolbar-button" data-toggle="tooltip" title="{{item.title | translate}}"></i>
+                    <div ng-switch-when="separator" ng-class="item.cssClass"></div>
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="container-fluid content" ng-if="currentAppDefinition" auto-height offset="40">
+    <h2>{{'APP.DETAILS.TITLE' | translate:currentAppDefinition}}</h2>
+    <div class="content-canvas-wrapper">
+        <div class="content-canvas">
+            <div class="row">
+                <div class="col-xs-4">
+                    <div class="preview-wrapper active">
+                        <h3>{{'APP.TITLE.PREVIEW' | translate}}</h3>
+                        <div class="app preview {{currentAppDefinition.definition.theme}}">
+                            <div class="app-content">
+                                <h3>{{currentAppDefinition.name}}</h3>
+                                <p>{{currentAppDefinition.description}}</p>
+                            </div>
+                            <div class="backdrop">
+                                <i ng-show="!currentAppDefinition.definition.icon" class="icon icon-choice"></i>
+                                <i ng-show="currentAppDefinition.definition.icon" class="glyphicon {{currentAppDefinition.definition.icon}}"></i>
+                            </div>
+                            <div class="logo">
+                                <i ng-show="!currentAppDefinition.definition.icon" class="icon icon-choice"></i>
+                                <i ng-show="currentAppDefinition.definition.icon" class="glyphicon {{currentAppDefinition.definition.icon}}"></i>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="col-xs-8">
+                    <div class="form-group">
+                        <label>{{'APP.ICON' | translate}}</label>
+                        <div id="toggle-icon-select" class="selection" ng-click="changeIcon($event)">
+                            <i class="glyphicon {{currentAppDefinition.definition.icon}}"></i> {{'APP.ACTION.SELECT-ICON' | translate}} <i class="icon icon-caret-down"></i>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-xs-8">
+                    <div class="form-group">
+                        <label>{{'APP.THEME' | translate}}</label>
+                        <div id="toggle-theme-select" class="selection" ng-click="changeTheme($event)">
+                            <span class="app app-swatch {{currentAppDefinition.definition.theme}}"></span> {{'APP.ACTION.SELECT-THEME' | translate}} <i class="icon icon-caret-down"></i>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-xs-8">
+					<div class="form-group">
+						<label for="groupAccessApp">{{'APP.GROUPS-ACCESS' | translate}}</label>
+						<input ng-disabled="model.loading" type="text" class="form-control"
+							id="groupAccessApp" ng-model="currentAppDefinition.definition.groupsAccess"
+							custom-keys enter-pressed="changeGroups($event)" />
+					</div>
+				</div>
+				<div class="col-xs-8">
+					<div class="form-group">
+						<label for="userAccessApp">{{'APP.USERS-ACCESS' | translate}}</label>
+						<input ng-disabled="model.loading" type="text" class="form-control"
+							id="userAccessApp" ng-model="currentAppDefinition.definition.usersAccess"
+							custom-keys enter-pressed="changeUsers($event)" />
+					</div>
+				</div>                 
+            </div>
+
+            <div class="row">
+                <div class="col-xs-12">
+                    <h3>{{'APP.DETAILS.MODELS-TITLE' | translate}}
+
+                    </h3>
+                    <div class="btn-group">
+                        <button id="toggle-included-models" class="btn btn-default" ng-click="editIncludedModels($event)" class="stencil-info-edit-properties">
+                            {{'APP.ACTION.EDIT-MODELS' | translate}}
+                        </button>
+                    </div>
+                    <div class="no-results" ng-show="!currentAppDefinition.definition.models.length && !currentAppDefinition.definition.cmmnModels.length">
+                        {{'APP.DETAILS.NO-MODELS-SELECTED' | translate}}
+                    </div>
+                </div>
+            </div>
+            
+            <br/>
+            
+            <div class="row">
+                <div class="tabs-wrapper">
+
+                <div tab-control="tabs" active-tab="appBuilder.activeTab">
+                </div>
+                
+                <div class="col-xs-12 item-wrapper" ng-show="appBuilder.activeTab == 'bpmn'">
+                    <div class="item fadein" ng-repeat="model in currentAppDefinition.definition.models">
+                        <div class="item-box" ng-style="{'background-image': 'url(\'' + getModelThumbnailUrl(model.id) + '\')'}">
+                            <div class="actions">
+                                <span class="badge">v{{model.version}}</span>
+                            </div>
+                            <div class="details">
+                                <h3 class="truncate" title="{{model.name}}">
+                                    {{model.name}}
+                                </h3>
+                                <p>{{model.description}}</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="col-xs-12 item-wrapper" ng-show="appBuilder.activeTab == 'cmmn'">
+                    <div class="item fadein" ng-repeat="model in currentAppDefinition.definition.cmmnModels">
+                        <div class="item-box" ng-style="{'background-image': 'url(\'' + getModelThumbnailUrl(model.id) + '\')'}">
+                            <div class="actions">
+                                <span class="badge">v{{model.version}}</span>
+                            </div>
+                            <div class="details">
+                                <h3 class="truncate" title="{{model.name}}">
+                                    {{model.name}}
+                                </h3>
+                                <p>{{model.description}}</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

datax-modules/flowable-service-parent/flowable-modeler/src/main/resources/static/views/app-definition.html

+
+<div class="subheader" ng-if="model.app">
+	<div class="fixed-container">
+		<div class="btn-group pull-right">
+			<button type="button" class="btn btn-default" ng-click="useAsNewVersion()" ng-if="!model.app.latestVersion">
+				{{'APP.ACTION.USE-AS-NEW-VERSION' | translate}}
+			</button>
+			<a href="{{model.appExportUrl}}" class="btn btn-default" title="{{'APP.ACTION.EXPORT-ZIP' | translate}}" ng-if="model.app.latestVersion">
+                <i class="glyphicon glyphicon-save"></i>
+            </a>
+            <a href="{{model.appBarExportUrl}}" class="btn btn-default" title="{{'APP.ACTION.EXPORT-BAR' | translate}}" ng-if="model.app.latestVersion">
+                <i class="glyphicon glyphicon-export"></i>
+            </a>
+            <button type="button" class="btn btn-default" ng-click="importAppDefinition()" ng-if="model.app.latestVersion" translate>APPS-LIST.ACTION.IMPORT</button>
+			<button type="button" class="btn btn-default" ng-click="publish()" ng-if="model.app.latestVersion">
+                {{'APP.ACTION.PUBLISH' | translate}}
+            </button>
+		    <button type="button" class="btn btn-default" ng-click="openEditor()" ng-if="model.app.latestVersion">
+                <i class="glyphicon glyphicon-edit icon-and-label"></i> {{'APP.ACTION.OPEN-IN-EDITOR' | translate}}
+            </button>
+		</div>
+		<div class="btn-group pull-right">
+			<button type="button" class="btn btn-default" ng-click="editApp()" ng-disabled="!model.app.latestVersion"
+				title="{{'APP.ACTION.EDIT' | translate}}">
+				<i class="glyphicon glyphicon-pencil"></i>
+			</button>
+            <button type="button" class="btn btn-default" ng-click="duplicateApp()" ng-disabled="!model.app.latestVersion"
+				title="{{'APP.ACTION.DUPLICATE' | translate}}">
+                <i class="editor-icon editor-icon-copy"></i>
+			</button>
+			<button type="button" class="btn btn-default" ng-click="deleteApp()" title="{{'APP.ACTION.DELETE' | translate}}"
+				ng-disabled="!model.app.latestVersion">
+				<i class="glyphicon glyphicon-trash"></i>
+			</button>
+		</div>		
+		<div class="pull-right">
+			<a ng-click="returnToList()" class="action">&larr; {{'GENERAL.ACTION.RETURN-TO-LIST' | translate}}</a>
+		</div>
+		<h2><span class="version">v{{model.app.version}}</span>{{model.app.name}}</h2>
+		<div class="clearfix">
+			<div class="col-xs-4 details">
+				<span><i class="glyphicon glyphicon-user"></i>{{'APP.DETAILS.CREATED-BY' | translate:model.app}}</span> 
+				<span><i class="glyphicon glyphicon-pencil"></i>{{'APP.DETAILS.LAST-UPDATED-BY' | translate:model.app}}</span>
+			</div>
+			<div class="col-xs-8 details clearfix">
+                <div class="related btn-group">
+                    <button id="toggle-history" type="button" class="btn btn-subtle" ng-click="toggleHistory($event)"
+                        title="{{'APP.ACTION.EDIT' | translate}}">
+                        {{'APP.DETAILS.HISTORY-TITLE' | translate}} <span class="counter" ng-show="model.versions.data.length">{{model.versions.data.length}}</span>
+                    </button>
+                </div>
+                <p ng-if="model.app.description">
+                    {{model.app.description}}
+                </p>
+                <p ng-if="!model.app.description && model.app.latestVersion" class="hint">
+                    <a ng-click="editApp()" class="subtle-select">
+                        {{'APP.DETAILS.NO-DESCRIPTION' | translate}} <i class="glyphicon glyphicon-pencil"></i>
+                    </a>
+                </p>
+            </div>
+		</div>
+	</div>
+</div>
+<div class="container-fluid content" ng-if="model.app" auto-height offset="40">
+    <h2>{{'APP.DETAILS.TITLE' | translate:model.app}}</h2>
+    <div class="content-canvas-wrapper">
+        <div class="content-canvas">
+            <div class="row" ng-if="model.appDefinition.definition.models && (model.appDefinition.definition.models.length > 0 || model.appDefinition.definition.cmmnModels.length > 0)">
+                <div class="col-xs-4">
+                    <div class="preview-wrapper active">
+                        <h3>{{'APP.TITLE.PREVIEW' | translate}}</h3>
+                        <div class="app preview {{model.appDefinition.definition.theme}}">
+                            <div class="app-content">
+                                <h3>{{model.app.name}}</h3>
+                                <p>{{model.app.description}}</p>
+                            </div>
+                            <div class="backdrop">
+                                <i ng-show="!model.appDefinition.definition.icon" class="icon icon-choice"></i>
+                                <i ng-show="model.appDefinition.definition.icon" class="glyphicon {{model.appDefinition.definition.icon}}"></i>
+                            </div>
+                            <div class="logo">
+                                <i ng-show="!model.appDefinition.definition.icon" class="icon icon-choice"></i>
+                                <i ng-show="model.appDefinition.definition.icon" class="glyphicon {{model.appDefinition.definition.icon}}"></i>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="row">
+                <div class="col-xs-12">
+                    <h3>{{'APP.DETAILS.MODELS-TITLE' | translate}}
+
+                    </h3>
+                    <div class="no-results" ng-show="!model.appDefinition.definition.models.length && !model.appDefinition.definition.cmmnModels.length">
+                        {{'APP.DETAILS.NO-MODELS-SELECTED' | translate}}
+                    </div>
+                </div>
+            </div>
+            
+            <br/>
+            
+            <div class="row">
+                
+                <div class="tabs-wrapper">
+
+                <div tab-control="tabs" active-tab="model.activeTab">
+                </div>
+                
+                <div class="col-xs-12 item-wrapper" ng-show="model.activeTab == 'bpmn'">
+                    <div class="item fadein" ng-repeat="model in model.appDefinition.definition.models">
+                        <div class="item-box" ng-style="{'background-image': 'url(\'' + getModelThumbnailUrl(model.id) + '\')'}">
+                            <div class="actions">
+                                <span class="badge">v{{model.version}}</span>
+                            </div>
+                            <div class="details">
+                                <h3 class="truncate" title="{{model.name}}">
+                                    {{model.name}}
+                                </h3>
+                                <p>{{model.description}}</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="col-xs-12 item-wrapper" ng-show="model.activeTab == 'cmmn'">
+                    <div class="item fadein" ng-repeat="model in model.appDefinition.definition.cmmnModels">
+                        <div class="item-box" ng-style="{'background-image': 'url(\'' + getModelThumbnailUrl(model.id) + '\')'}">
+                            <div class="actions">
+                                <span class="badge">v{{model.version}}</span>
+                            </div>
+                            <div class="details">
+                                <h3 class="truncate" title="{{model.name}}">
+                                    {{model.name}}
+                                </h3>
+                                <p>{{model.description}}</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

datax-modules/flowable-service-parent/flowable-modeler/src/main/resources/static/views/app-definitions.html

+
+<div class="subheader" id="list-header">
+	<div class="fixed-container">
+	    <div class="btn-group pull-right">
+	        <button type="button" class="btn btn-default" ng-click="createApp()" translate>APPS-LIST.ACTION.CREATE</button>
+	        <button type="button" class="btn btn-default" ng-click="importAppDefinition()" translate>APPS-LIST.ACTION.IMPORT</button>
+	    </div>
+	    <h2>{{'APPS-LIST.TITLE' | translate}}</h2>
+	</div>
+</div>
+<div class="container-fluid content" auto-height offset="40">
+        <div class="col-xs-2 filter-wrapper">
+            <div class="input-group">
+                <span class="input-group-addon"> <i
+                    class="glyphicon glyphicon-search"></i>
+                </span> <input type="text" ng-model="model.pendingFilterText" class="form-control" ng-change="filterDelayed()"
+                    placeholder="{{'APPS-LIST.SEARCH-PLACEHOLDER' | translate}}">
+            </div>
+            <ul class="filter-list">
+                <li ng-repeat="filter in model.filters" ng-class="{'current' : filter.id == model.activeFilter.id}">
+                    <a ng-click="activateFilter(filter)">{{'APPS-LIST.FILTER.' + filter.labelKey | translate}}</a>
+                </li>
+            </ul>
+        </div>
+        
+        <div class="col-xs-10 item-wrapper" id="list-items">
+            <div class="dropdown-subtle pull-right" ng-show="model.apps.size != 0">
+                <div class="btn-group btn-group-sm" activiti-fix-dropdown-bug>
+                    <button type="button" class="btn btn-default dropdown-toggle"
+                        data-toggle="dropdown">{{'FORMS-LIST.SORT.' + model.activeSort.labelKey | translate}} <i class="caret"></i></button>
+                    <ul class="dropdown-menu pull-right">
+                        <li ng-repeat="sort in model.sorts">
+                            <a ng-click="activateSort(sort)">{{'APPS-LIST.SORT.' + sort.labelKey | translate}}</a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div class="message clearfix">
+                <div class="loading pull-left" ng-show="model.loading">
+                    <div class="l1"></div><div class="l2"></div><div class="l2"></div>
+                </div>
+                <div ng-if="!model.loading">
+                    <span ng-if="model.apps.size > 1">{{'APPS-LIST.FILTER.' + model.activeFilter.labelKey + '-COUNT' | translate:model.apps}}</span>
+                    <span ng-if="model.apps.size == 1">{{'APPS-LIST.FILTER.' + model.activeFilter.labelKey + '-ONE' | translate}}</span>
+                    <span ng-if="model.apps.size == 0 && (!model.filterText || model.filterText == '') &&  model.activeFilter.id != 'myApps'">{{'APPS-LIST.FILTER.' + model.activeFilter.labelKey + '-EMPTY' | translate}}</span>
+                    <span ng-if="model.apps.size > 0 && model.filterText !='' && model.filterText !== undefined">{{'APPS-LIST.FILTER.FILTER-TEXT' | translate:model}}</span>
+                    <span ng-if="model.apps.size == 0 && model.filterText !='' && model.filterText !== undefined">{{'APPS-LIST.FILTER.FILTER-TEXT-EMPTY' | translate:model}}</span>
+
+                </div>
+            </div>
+
+            <div class="help-container fixed" ng-if="model.apps.size == 0 && !model.loading && model.activeFilter.id == 'myApps' &&  (!model.filterText || model.filterText == '')">
+                <div>
+                    <div class="help-text wide">
+                        <div class="description">
+                            {{'APPS-LIST.FILTER.NO-APPS' | translate}}
+                        </div>
+                        <div class="help-entry" ng-click="createApp()">
+                            <span class="glyphicon glyphicon-plus-sign"></span>
+                            <span translate="APPS-LIST.FILTER.NO-APPS-CALL-TO-ACTION"></span>
+                            <br>
+                            <span class="note" translate="APPS-LIST.FILTER.NO-APPS-NOTE"></span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="item fadein" ng-repeat="app in model.apps.data">
+                <div class="app {{app.appDefinition.theme ? app.appDefinition.theme : 'theme-1'}}">
+                    <div class="app-actions">
+                        <span class="badge">v{{app.version}}</span>
+                        <div class="btn-group pull-right">
+                            <button type="button" ng-click="showAppDetails(app); $event.stopPropagation();" class="btn btn-default" title="{{'APP.ACTION.DETAILS' | translate}}">
+                                <i class="glyphicon glyphicon-search"></i>
+                            </button>
+                            <button type="button" ng-click="editAppDetails(app); $event.stopPropagation();" class="btn btn-default" title="{{'APP.ACTION.OPEN-IN-EDITOR' | translate}}">
+                                <i class="glyphicon glyphicon-edit"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <a ng-click="showAppDetails(app)">
+                        <div class="app-content">
+                            <h3>{{app.name}}</h3>
+                
+                            <p>{{app.description}}</p>
+                        </div>
+                        <div class="backdrop">
+                            <i ng-show="!app.appDefinition.icon" class="icon icon-choice"></i>
+                            <i ng-show="app.appDefinition.icon" class="glyphicon {{app.appDefinition.icon}}"></i>
+                        </div>
+                        <div class="logo">
+                            <i ng-show="!app.appDefinition.icon" class="icon icon-choice"></i>
+                            <i ng-show="app.appDefinition.icon" class="glyphicon {{app.appDefinition.icon}}"></i>
+                        </div>
+                    </a>
+                </div>
+            </div>
+            
+            <div class="show-more" ng-if="model.apps.data.length < model.apps.total">
+                <a>{{'APPS-LIST.ACTION.SHOW-MORE' | translate}}</a>
+            </div>
+        </div>
+</div>
\ No newline at end of file

datax-modules/flowable-service-parent/flowable-modeler/src/main/resources/static/views/casemodel.html

+
+<div class="subheader" ng-if="model.caseModel">
+	<div class="fixed-container">
+		<div class="btn-group pull-right">
+			<button type="button" class="btn btn-default" ng-click="openEditor()" ng-if="model.caseModel.latestVersion">
+				<i class="glyphicon glyphicon-edit icon-and-label"></i> {{'CASE.ACTION.OPEN-IN-EDITOR' | translate}}
+			</button>
+			<button type="button" class="btn btn-default" ng-click="useAsNewVersion()" ng-if="!model.caseModel.latestVersion">
+				{{'CASE.ACTION.USE-AS-NEW-VERSION' | translate}}
+			</button>
+		</div>
+		<div class="btn-group pull-right">
+	        <a href="{{model.cmmnDownloadUrl}}" class="btn btn-default" title="{{'CASE.ACTION.EXPORT_CMMN' | translate}}">
+	            <i class="glyphicon glyphicon-save"></i>
+	        </a>
+		</div>
+		<div class="btn-group pull-right">
+			<button type="button" class="btn btn-default" ng-click="editCaseModel()" ng-disabled="!model.caseModel.latestVersion"
+				title="{{'CASE.ACTION.EDIT' | translate}}">
+				<i class="glyphicon glyphicon-pencil"></i>
+			</button>
+            <button type="button" class="btn btn-default" ng-click="duplicateCaseModel()" ng-disabled="!model.caseModel.latestVersion"
+                    title="{{'CASE.ACTION.DUPLICATE' | translate}}">
+                <i class="editor-icon editor-icon-copy"></i>
+            </button>
+			<button type="button" class="btn btn-default" ng-click="deleteCaseModel()" title="{{'CASE.ACTION.DELETE' | translate}}"
+				ng-disabled="!model.caseModel.latestVersion">
+				<i class="glyphicon glyphicon-trash"></i>
+			</button>
+		</div>		
+		<div class="pull-right">
+			<a ng-click="returnToList()" class="action">&larr; {{'GENERAL.ACTION.RETURN-TO-LIST' | translate}}</a>
+		</div>
+		<h2><span class="version">v{{model.caseModel.version}}</span>{{model.caseModel.name}}</h2>
+		<div class="clearfix">
+			<div class="col-xs-4 details">
+				<span><i class="glyphicon glyphicon-user"></i>{{'CASE.DETAILS.CREATED-BY' | translate:model.caseModel}}</span> 
+				<span><i class="glyphicon glyphicon-pencil"></i>{{'CASE.DETAILS.LAST-UPDATED-BY' | translate:model.caseModel}}</span>
+			</div>
+			<div class="col-xs-8 details clearfix">
+                <div class="related btn-group">
+                    <button id="toggle-history" type="button" class="btn btn-subtle" ng-click="toggleHistory($event)"
+                        title="{{'CASE.ACTION.EDIT' | translate}}">
+                        {{'CASE.DETAILS.HISTORY-TITLE' | translate}} <span class="counter" ng-show="model.versions.data.length">{{model.versions.data.length}}</span>
+                    </button>
+                </div>
+                <a ng-show="model.stencil" ng-click="goToStencil()" class="pull-right action">{{model.stencil.name}}</a>
+                <p ng-if="model.caseModel.description">
+                    {{model.caseModel.description}}
+                </p>
+                <p ng-if="!model.caseModel.description && model.caseModel.latestVersion" class="hint">
+                    <a ng-click="editCaseModel()" class="subtle-select">
+                        {{'CASE.DETAILS.NO-DESCRIPTION' | translate}} <i class="glyphicon glyphicon-pencil"></i>
+                    </a>
+                </p>
+            </div>
+		</div>
+	</div>
+</div>
+<div class="content center-pane" ng-if="model.caseModel" auto-height offset="40" >
+        
+	<div class="model-preview-wrapper" ng-if="model.caseModel.modelType && model.caseModel.modelType != 1">
+	   <div id="cmmnModel"></div>
+	</div>
+</div>

datax-modules/flowable-service-parent/flowable-modeler/src/main/resources/static/views/casemodels.html

+
+<div class="subheader">
+	<div class="fixed-container">
+		<div class="btn-group pull-right">
+			<button type="button" class="btn btn-default" ng-click="createCaseModel()" translate>CASE-LIST.ACTION.CREATE</button>
+			<button type="button" class="btn btn-default" ng-click="importCaseModel()" translate>CASE-LIST.ACTION.IMPORT</button>
+		</div>
+		<h2>{{'CASE-LIST.TITLE' | translate}}</h2>
+	</div>
+</div>
+<div class="container-fluid content" auto-height offset="40">
+		<div class="col-xs-2 filter-wrapper">
+			<div class="input-group">
+				<span class="input-group-addon"> <i
+					class="glyphicon glyphicon-search"></i>
+				</span> <input type="text" ng-model="model.pendingFilterText" class="form-control" ng-change="filterDelayed()"
+					placeholder="{{'CASE-LIST.SEARCH-PLACEHOLDER' | translate}}">
+			</div>
+			<ul class="filter-list">
+				<li ng-repeat="filter in model.filters" ng-class="{'current' : filter.id == model.activeFilter.id}">
+					<a ng-click="activateFilter(filter)">{{'CASE-LIST.FILTER.' + filter.labelKey | translate}}</a>
+				</li>
+			</ul>
+		</div>
+
+		<div class="col-xs-10 item-wrapper" id="list-items">
+			<div class="dropdown-subtle pull-right">
+				<div class="btn-group btn-group-sm" activiti-fix-dropdown-bug>
+					<button type="button" class="btn btn-default dropdown-toggle"
+						data-toggle="dropdown">{{'CASE-LIST.SORT.' + model.activeSort.labelKey | translate}} <i class="caret"></i></button>
+					<ul class="dropdown-menu pull-right">
+						<li ng-repeat="sort in model.sorts">
+							<a ng-click="activateSort(sort)">{{'CASE-LIST.SORT.' + sort.labelKey | translate}}</a>
+						</li>
+					</ul>
+				</div>
+			</div>
+			<div class="message clearfix">
+				<div class="loading pull-left" ng-show="model.loading">
+					<div class="l1"></div><div class="l2"></div><div class="l2"></div>
+				</div>
+				<div ng-if="!model.loading">
+					<span ng-if="model.caseModels.size > 1">{{'CASE-LIST.FILTER.' + model.activeFilter.labelKey + '-COUNT' | translate:model.caseModels}}</span>
+					<span ng-if="model.caseModels.size == 1">{{'CASE-LIST.FILTER.' + model.activeFilter.labelKey + '-ONE' | translate}}</span>
+					<span ng-if="model.caseModels.size > 0 && model.filterText !='' && model.filterText !== undefined">{{'CASE-LIST.FILTER.FILTER-TEXT' | translate:model}}</span>
+					<span ng-if="model.caseModels.size == 0 && model.filterText !='' && model.filterText !== undefined">{{'CASE-LIST.FILTER.FILTER-TEXT-EMPTY' | translate:model}}</span>
+				</div>
+			</div>
+
+            <div class="help-container fixed" ng-if="model.caseModels.size == 0 && (!model.filterText || model.filterText == '')">
+                <div>
+                    <div class="help-text wide">
+                        <div class="description">
+                            {{'CASE-LIST.FILTER.CASES-EMPTY' | translate}}
+                        </div>
+                        <div class="help-entry" ng-click="createCaseModel()">
+                            <span class="glyphicon glyphicon-plus-sign"></span>
+                            <span translate="CASE-LIST.FILTER.CASES-CMMN-HINT"></span>
+                            <br>
+                        </div>
+						<div class="help-entry" ng-click="importCaseModel()">
+                            <span class="glyphicon glyphicon-plus-sign"></span>
+                            <span translate="CASE-LIST.FILTER.CASES-CMMN-IMPORT-HINT"></span>
+                            <br>
+                        </div>
+                    </div>
+                </div>
+            </div>
+			<div class="item fadein" ng-repeat="caseModel in model.caseModels.data track by $index">
+				<div class="item-box" ng-style="{'background-image': 'url(\'' + getModelThumbnailUrl(caseModel.id, imageVersion) + '\')'}" ng-click="showCaseModelDetails(caseModel);">
+					<div class="actions">
+						<span class="badge">v{{caseModel.version}}</span>
+						<div class="btn-group pull-right">
+							<button id="detailsButton" type="button" ng-click="showCaseModelDetails(caseModel); $event.stopPropagation();" class="btn btn-default" title="{{'CASE.ACTION.DETAILS' | translate}}">
+								<i class="glyphicon glyphicon-search"></i>
+							</button>
+							<button id="editButton" type="button" ng-click="editCaseModelDetails(caseModel); $event.stopPropagation();" class="btn btn-default" title="{{'CASE.ACTION.OPEN-IN-EDITOR' | translate}}">
+								<i class="glyphicon glyphicon-edit"></i>
+							</button>
+						</div>
+					</div>
+					<div class="details">
+						<h3 class="truncate" title="{{caseModel.name}}">
+							{{caseModel.name}}
+						</h3>
+						<div class="basic-details truncate">
+							<span><i class="glyphicon glyphicon-user"></i> {{caseModel.createdBy}}</span> <span title="{{caseModel.lastUpdated | dateformat:'LLLL'}}"><i class="glyphicon glyphicon-pencil"></i> {{caseModel.lastUpdated | dateformat}}</span>
+						</div>
+						<p>{{caseModel.description}}</p>
+					</div>
+				</div>
+			</div>
+
+			<div class="show-more" ng-if="model.caseModels.data.length < model.caseModels.total">
+				<a>{{'CASE-LIST.ACTION.SHOW-MORE' | translate}}</a>
+			</div>
+		</div>
+</div>