Camunda Tasklist: HTML string($sce)

How to read an HTML string in Camunda Tasklist forms

Create Filter

'use strict';
define('sanitize-ng-module', [
    'angular'
], function (angular) {

    var sanitizeModule = angular.module('my.sanitize.module', []);

    sanitizeModule.controller('sanController', ['$scope', function ($scope) {
        //$scope.var1 = 1;
        //$scope.var2 = 'Second variable';


    }]);

    sanitizeModule.filter('trusted', function($sce){
            return function(html){
                return $sce.trustAsHtml(html)
            }
        })


});

Add Filter to Custom Scripts

Tasklist allows you to include arbitrary JavaScript files. This allows you to extend Tasklist with custom code, such as , create your own modules and their directives. This means that you can create your own controllers and have better control of your developing within Camunda.

Add your files to the customScripts property of the app/tasklist/scripts/config.js file:

window.camTasklistConf = {
    app: {
        name: 'Dashboard',
        vendor: 'Camunda'
    },
    customScripts: {
        // AngularJS module names
        ngDeps: ['my.sanitize.module'],
        deps: ['sanitize-ng-module'],
        shim: {
         
        },
        paths: {
        
            'sanitize-ng-module': 'scripts/sanitize-ng-module/script'
        }
    },
  

    shortcuts: {
        claimTask: {
            key: 'ctrl+alt+c',
            description: 'claims the currently selected task'
        },
        focusFilter: {
            key: 'ctrl+shift+f',
            description: 'set the focus to the first filter in the list'
        },
        focusList: {
            key: 'ctrl+alt+l',
            description: 'sets the focus to the first task in the list'
        },
        focusForm: {
            key: 'ctrl+alt+f',
            description: 'sets the focus to the first input field in a task form'
        },
        startProcess: {
            key: 'ctrl+alt+p',
            description: 'opens the start process modal dialog'
        }
    }
};

Implement in Form

To use in your form, remember to define your controller.

<div ng-controller="sanController">
<div ng-bind-html="data.content | trusted"></div>
</div>
<script cam-script type="text/javascript">
$scope.data={};
$scope.data.content="<p>Hello</p>"
</script>

Thank you for reading! Feel free to make any other suggestions or recommendations for future challenges. Leave a few claps if you enjoyed it !