Applies to: WebFront 4

Note: This article requires at least WebFront v4.0.8155

Background

The implementation of custom tasks in the HTML version of WebFront differs from how it was implemented in the Silverlight version. Silverlight had a lot of drawbacks, but a huge benefit was the elevated trust functionality that allowed commands to be executed locally on the client.

In WebFront 4, since HTML doesn't have the elevated trust functionality, we have aligned with the industry standard and are using JavaScript code to support tasks instead. This means that you need to rewrite tasks in JavaScript to make it work in WebFront, but it provides a greater flexibility to support any type of task if they can be built in JavaScript.

How to Add a Basic Console Task

As a basic example, this section will describe how you can add a custom task that we have created for displaying a direct link to a work item both in the standard console (PowerShell) and WebFront.

Creating Custom Task in SCSM Console

1. Open Service Manager console
2. Click Library bar
3. Click Tasks
4. Click Create Task in Task menu
5. Provide a Task name, in this example we will use WebFront URL
6. You need to select Target class, in this example we will select Work Item class, select a management back you want to save in and click Next
7. Skip selecting Category and click Next
8. Type PowerShell.exe as Full path to command
9. Copy and paste below PowerShell code-snippet in Parameters

   $id = [System.Guid]::Parse('$Context/?$Id$?'); $url = 'https://WEBFRONT_URL/#/entity/' + $id.ToString(); Start-Process $url;

10. Replace WEBFRONT_URL with URL to your WebFront server
11. Deselect Log in action log when this task is run and Show output when this task is run, then click Next
12. Click Create
13. Verify functionality by opening the SCSM console, open any Work Item and click WebFront URL task, it should open the Work Item in WebFront

Find Custom Task ID using Internet Explorer

To be able to show the task we added above in WebFront and add a JavaScript implementation of the task, we need to identify the ID of the task.  

1. Open WebFront in Internet Explorer
2. In Internet Explorer, click Settings - F12 Developer Tools
3. Click Console tab and make sure that Verbose logging is shown
   
4. Open any Work Item form (IR,SR,CR, etc.)
5. Find entry "Debug: Task 'WebFront URL..'
   
6. Note the ID of the Task, since it will be used in the next step

Configuring the JavaScript Task

When you have a console task and console task ID, you are ready to add the JavaScript code and white list the task in WebFront.

1. Go to folder C:\inetpub\WebFront\content\customTasks
2. Open Notepad or your favorite JavaScript editor, paste the below JavaScript code-snippet and save the file as deep-link-task.js or use file from zip archive attached in this article. Either way, make sure there is a copy in the folder C:\inetpub\WebFront\content\customTasks
   

   'use strict';
   
   define(function (require) {
       var TaskViewModel = require('taskViewModel');
       require('knockout.validation');
   
       function ViewModel(context, params) {
           var self = this;
           TaskViewModel.call(self, context);
   
           // Since this task doesn't have a UI the execute method is executed immediately.
           self.execute = function () {
               prompt("Copy link to current location", window.location.href);
               return $.Deferred().resolve().promise();
           };
       }
   
       return ViewModel;
   });

3. Edit or create file C:\inetpub\WebFront\content\customTasks\_tasks.json if it doesn't exist
4. Open file in Notepad or your favorite JavaScript editor
5. If the file didn't exist, copy and paste below code-snippet to the file. If file already existed, just copy and paste row 3 to 7 and add another section separated with a comma

   {
   "tasks": [
   	{
    	"id": "e2b2325b-4db2-8ac6-8170-7dd6f8c81fbf",
    	"name": "deepLinkCopy",
   	"viewModel": "./content/customTasks/deep-link-task"
    	}
    	]
   }

6. Replace id with task id collected in Find Custom Task ID using Internet Explorer section above
7. Save file
8. Verify functionality by opening WebFront, open any Work Item and click WebFront URL task, it should open a prompt with a direct URL to the Work Item that you can copy

Advanced Console Task

Advanced tasks that include both JavaScript and HTML can be written as well. Please be aware that tasks need to be present in the standard SCSM console and task ID needs to be collected according to section Find Custom Task ID using Internet Explorer.

If task only should be used in WebFront, placeholder command tasks could be added using the SCSM console and their task IDs could then be used to show tasks in WebFront.

The zip archive attached to this article contains some generic sample tasks.

• Sample task with comments: sample-task.js
• Sample task with user-interface and comments: sample-task-with-ui.js/sample-task-with-ui.html

Real World Samples

Change Incident Status

Sample adding task to Incident form that shows a dialog with a drop-down for choosing status.

Sample files in article zip archive

• change-incident-status.js
• change-incident-status.html

_tasks.json entry sample:

 {
 "id": "REPLACE_WITH_TASK_ID",
 "name": "changeIncidentStatus",
 "viewModel": "./content/customTasks/change-incident-status",
 "template": "text!./content/customTasks/change-incident-status.html"
 }

Note: Above is a good example of how you declare a UI defined in an HTML file by adding a template declaration to the task.

Convert Incident to Service Request

Sample converting an Incident to a Service Request opening Service Request form and copying properties.

Sample files in article zip archive

• convert-incident-to-service-request.js

_tasks.json entry sample:

{
 "id": "REPLACE_WITH_TASK_ID",
 "name": "convertToServiceRequest",
 "viewModel": "./content/customTasks/convert-incident-to-service-request"
 }

Set Affected User Property

Sample for changing properties on an affected user on an Incident.

Sample files in article zip archive

• set-affected-user-property.js

_tasks.json entry sample:

 {
 "id": "062a09e7-ca25-a4b6-e348-fe412eeb605f",
 "name": "setAffectedUserProperty",
 "viewModel": "./content/customTasks/set-affected-user-property"
 }

Adding Remote Desktop Console Task

If you want to implement an RDP console task in WebFront you can make use of the existing out-of-the-box task for Remote Control. Find the identifier of the task as described earlier. Use the sample files and task declaration described below.

1. Copy file rdp-task.js zip archive attached in this article to C:\inetpub\WebFront\content\customTasks
   
2. Edit or create file C:\inetpub\WebFront\content\customTasks\_tasks.json if it doesn't exist
3. Open file in Notepad
4. If the file didn't exist, copy and paste below code-snippet to the file, if file already existed just copy and paste row 3 to 7 and add another section separated with a comma

   {
   "tasks": [
               {
               "id": "REPLACE_WITH_TASK_ID",
               "name": "rdpTask",
                "viewModel": "./content/customTasks/rdp-task"
               }
    	    ]
   }

5. Save file
6. Verify functionality by opening WebFront, open any Work Item that has a computer as affected Configuration Item and click Remote Control task, it should prompt download a Remote Desktop Connection file to connect to the computer