How to: Create custom console tasks

Scope

Console Tasks are available in the ITSM Analyst portal to execute custom actions (e.g. set the status of a selected IR to resolved)

This guide explains how to create such a console task that fits your needs.
You may also refer to the ITSM Portal Customization Guide.

Console tasks are written in JavaScript
If you are not familiar with JavaScript use the following link for an easy to learn tutorial https://www.w3schools.com/js/

Create new Task

To create a new task, you must create a new .js file in wwwroot\lib\custom folder.
Use the following Code-snippet as a template for your new empty .js file:

(function () {
    'use strict';
    var app;
    try { app = angular.module('itsmPortal.analyst'); }
    catch (e) {
        // module not found, exit
        return;
    }
    app.run(['consoleTasks', '$q', '$templateCache', 'globalizeWrapper', '$stateParams', '$rootScope', '$http', '$templateRequest', 'localization', '$compile', '$state', '$timeout', '$sce', 'CurrentUserFactory', 'backend', 'formEvents', 'dialogUI', 'createTasks', 'messages',
        function (consoleTasks, $q, $templateCache, globalizeWrapper, $stateParams, $rootScope, $http, $templateRequest, localization, $compile, $state, $timeout, $sce, CurrentUserFactory, backend, formEvents, dialogUI, createTasks, messages) {
            //PUT YOUR TASKS HERE
        }]);
})();

You can now add multiple console tasks to your .js file by creating a console task object fore each task and register those tasks for specific classes (e.g. System.WorkItem.Incident).

the folder wwwroot\lib\custom does not exists by default. You are free to create the folder.

Create Console Task Object

Use the following function to create a new Console Task Object

var consoleTaskObj = consoleTasks.createConsoleTask(id, displayName, icon, consoleTask, checkCriteria);

Register Console Task Object

Use the following function to register a previously created Console Task Object for a certain target class.

consoleTasks.registerConsoleTask(targetClass, consoleTaskObject);

If you wish to register your console task for multiple target classes you may call registerConsoleTask for each target class

Create an Action Log Entry

In some cases you may want to add an Action Log Entry to your Ticket after executing a Console Task (e.g. mail sent)
To do so, you'll need to fire a FormEvent as shown in the example below:

formEvents.fire(
    "itxCreateActionLog", {
        type: "System.WorkItem.ActionLogEnum.TaskExecuted",
        title: "Hello World",
        description: "What a wonderfull day it is!"
    });

This example will add an Action Log Entry with "Hello World" as Title and "What a woderfull day it is!" as content.

Icons

Out of the box Icons

The following Icons are available out of the box:

The css class definitions are done in wwwroot\lib\ui\themes\base\analyst\styles.css
The Icon-sprites can be found here: wwwroot\lib\ui\themes\base\images\sprite-tasks-16x16.png

Custom Icons

You may want to use another icon than one of those provided out of the box.
This section describes how to create and use a custom console task icon

• Create the icon in the size 16x16 px (All data formats should work fine, I prefer .png)
• Save the icon in wwwroot\lib\ui\themes\base\images\example.png
• Create or edit the custom.css file in wwwroot\lib\ui\themes\base\analyst
• Add the following css rules to your custom.css file:

.task-icon.example-icon {
  background-image: url('../images/example.png');
}

Done! You may now use your new icon in a console task by defining its icon as "example-icon".

Example

Hello World

The following Example shows a custom console task that is only available if you open an incident request form.
When executing this task an alert-prompt with the content "Hello World" will be shown and "Hello World" will be attached to the incident request description

(function () {
    'use strict';
    var app;
    try { app = angular.module('itsmPortal.analyst'); }
    catch (e) {
        // module not found, exit
        return;
    }
    app.run(['consoleTasks', '$q', '$templateCache', 'globalizeWrapper', '$stateParams', '$rootScope', '$http', '$templateRequest', 'localization', '$compile', '$state', '$timeout', '$sce', 'CurrentUserFactory', 'backend', 'formEvents', 'dialogUI', 'createTasks', 'messages',
        function (consoleTasks, $q, $templateCache, globalizeWrapper, $stateParams, $rootScope, $http, $templateRequest, localization, $compile, $state, $timeout, $sce, CurrentUserFactory, backend, formEvents, dialogUI, createTasks, messages) {
            /************* BEGIN OF TASK ****************/
            //create console task object
            var taskHelloWorld = consoleTasks.createConsoleTask(
                "taskHelloWorld",
                "Hello World",
                "mark-completed",
                //console task
                function (objects, scope){
                    var self = this;
                    var IRobject = objects[0];
                    alert("Hello World");
                    IRobject.Description.Value += "Hello World";
                    scope.update(IRobject);
                },
                //check criteria
                function (objects, scope) {
                    return scope.isForm;
                }
            );
            //register task
            consoleTasks.registerConsoleTask("System.WorkItem.Incident", taskHelloWorld);
            /************* END OF TASK ****************/
        }]);
})();