Customization Guide

<li>
    <a ui-sref="request-form({roId: '00ff16f7-919b-94a0-4938-1972f0c47b11', serviceId: 'd478e445-df58-dcd4-77d1-b2a4e43a24cb'})">Create new service</a>
</li>

Where roid is the internal ID of the Request Offering and serviceId is the internal ID of the Service Offering. You can get both id’s, roId and serviced, from the URL:
http://localhost:14108/EndUser/ServiceCatalog/CreateRequest/00ff16f7-919b-94a0-4938-1972f0c47b11?serviceId=d478e445-df58-dcd4-77d1-b2a4e43a24cb

Dynamic Navigation

The dynamic navigation is used to load folders and views directly from Service Manager. For more details about this topic, please refer to the Administration Guide - Custom views.

The only setting that not comes from Service Manager is the navigation icon. To define a navigation icon, you have to create a custom CSS class. The name for this class needs to be calculated by the rule: icon-@folder.Name.Replace(".", "").

For example: If the folder name is itnetX.ITSMPortalSupporting.EndUser.Activities.Folder then the class name will be icon-itnetXITSMPortalSupportingEndUserActivitiesFolder.

To define an icon, you can use the following snippet:

.icon-itnetXITSMPortalSupportingEndUserActivitiesFolder:before {
  content: "\e91f" !important;
}

The content is an Unicode symbol which can be found under wwwroot\lib\ui\fonts\itnetx-iconfont\itnetx-iconfont.*. You can use codes from 900 to 957 (HEX). To get a full list of icons you can navigate to /Admin/Helpers/IconsSample

Also you can use any regular static images.

Change loading from automatic to manual

To remove the automatic loading of a view, you need to remove the foreach operator at line 20 in the _EndUserNavigation.cshtml and add all the links manually:

To add an item for the Home view please use the following snippet:

<li ui-sref-active="active">
   <div class="link-row"><i class="icon-itnetXITSMPortalSupportingEndUserHomeFolder"></i><a   
   ui-sref="home">Home</a></div>
</li>

To add additional views you need to know the ID. You can find the ID in the URL when you open the view:

Then you can use the ID for the item, like the following:

<li ui-sref-active="active">
    <div class="link-row">
        <i class="icon-itnetXITSMPortalSupportingEndUserRequestsFolder"></i>
        <a ui-sref="folder({folderId:'23764111-917d-8b59-3e4b-9e3ef77bfd95'})">Requests</a>
    </div>
</li>

To find out the right icon class you can use the Select Element tool of the development tool integrated in your browser (F12):

The following shows a list of common icons:

A problem when disabling the automatic loading is the localization. If you don’t need to translate views to different languages then you must use hardcoded strings in the file as shown in the Request sample above.

If you need to translate the views in different languages you need to add the new strings to the resx file. Please refer to the Administration Guide - Localization for more information.

This is applicable only if you want to show views in manual way. For automatic views localization from Service Manager are used.

In the end, a sample could look like the following. In this case the order is Home, Requests, Service Catalog, Activities and KB:

<ul class="list-unstyled nav-sidebar">
        <li>
            <div class="link-row sub-menu">
                <i class="icon-add1"></i>
                <ul class="list-unstyled sub-links">
                    <li><a href="" ui-sref="service-catalog">@GlobalLocalizer["EndUserCreateRequestButton"]</a></li>
                    @*<!-- Sample menu for direct items. See #323 -->
                         <li><a href="">Create new activity</a></li>
                        <li><a href="">Create new service</a></li>*@
                </ul>
            </div>
        </li>
        <li ui-sref-active="active">
            <div class="link-row"><i class="icon-itnetXITSMPortalSupportingEndUserHomeFolder"></i><a ui-sref="home">Home</a></div>
        </li>
        <li ui-sref-active="active">
            <div class="link-row"><i class="icon-itnetXITSMPortalSupportingEndUserRequestsFolder"></i><a ui-sref="folder({folderId: '23764111-917d-8b59-3e4b-9e3ef77bfd95'})">Requests</a></div>
        </li>
        <li ui-sref-active="active">
            @if (sdkService.PortalSettings.EndUserPortalSettings.ServiceCatalogMode == itnetX.ITSMPortal.Areas.EndUser.Models.ServiceCatalogModeEnum.Browser && sdkService.PortalSettings.EndUserPortalSettings.ServiceCataloDefaultSOId != Guid.Empty)
            {
                <div class="link-row"><i class="icon-text150"></i><a ui-sref="service-catalog-list({soId: '@sdkService.PortalSettings.EndUserPortalSettings.ServiceCataloDefaultSOId'})">@GlobalLocalizer["EndUserMainMenuServiceCatalog"]</a></div>
            }
            else
            {
                <div class="link-row"><i class="icon-text150"></i><a ui-sref="service-catalog">@GlobalLocalizer["EndUserMainMenuServiceCatalog"]</a></div>
            }
        </li>
        <li ui-sref-active="active">
            <div class="link-row"><i class="icon-itnetXITSMPortalSupportingEndUserActivitiesFolder"></i><a ui-sref="folder({folderId: '02736d52-9b2a-cf42-d9cb-8130db28ac0e'})">Activities</a></div>
        </li>
        <li ui-sref-active="active">
            <div class="link-row"><i class="icon-information51"></i><a ui-sref="knowledge-base">@GlobalLocalizer["EndUserMainMenuKB"]</a></div>
        </li>
    </ul>

Authorization

Security Helper

With the ITSM Portal v3 you can check user roles against the following:

Check AD Group Membership

To check the AD Group membership of an user you can user the following ASPN.NET Core IsInRole method:

@if (User.IsInRole(@"SCSMSOL\SCSMAdmins"))
{
    <somehtml> </somehtml>
}

Check User Role Profile Membership

You can use the following PowerShell Snippet to get a list of available User Roles:

Import-Module SMLets
$mg = New-SCSMSession -PassThru
$mg.Security.GetProfiles() | select DisplayName, Id

To check the User Role Profile membership you have to use the SDK service provider. This provider needs to be added to each view definition, as it is not available as default. Add the following line on top of the view definition (*.cshtml):

@inject itnetX.ITSMPortal.Models.SDK.ISdkService sdkService

After that you will able to use provide to check Profile User Role Membership:

@if (sdkService.IsUserInProfile(itnetX.ITSMPortal.Models.SDK.UserRoleProfileEnum.Administrator))
{
    <somehtml></somehtml>
}

Please Note

The check against the User Role should have no performance impact because all the available User Roles for the User are cached in the session. This means also if you change an User Role you have to wait until the section expires (default idle time is 10 minutes) or you reset the session.

Custom Console Tasks

Console Tasks are available for forms and views. The assignment of a task is based on the object class.

Tasks are full based on Angular JS (Angular 1) framework, so this section assumes that you have basic knowledge of Angular 1.

Create Task File Templates

To create a new task, you must create a new .js file or for out of the box tasks you can use the wwwroot/lib/itsmportal/ang.itsmportal.consoleTasksDefinition.js file.

For a new empty file, you can use the following snippet:

(function () {
    'use strict';

    var app;
    try { app = angular.module('itsmPortal.analyst'); }
    catch (e) {
        // module not found, exit
        return;
    }

    app.run(['consoleTasks', '$templateCache', 'globalizeWrapper', '$rootScope', '$http',
          function (consoleTasks, $templateCache, globalizeWrapper, $rootScope, $http) {

              // PUT YOUR TASKS HERE
          }]
      );
})();

The creation of the main task, which needs to be added in the // PUT YOUR TASK HERE section, is described below.

Create Main Task

To create a new task, you need to define a new console task object and then register the task for a specific class. To create the console task object you have to prepare the function for the task execution and for the task checking. A simple template for a task could look like the following:

var refreshFormTask = consoleTasks.createConsoleTask(
    "TASKIDNOSPACESPLEASE",
    "Task Display Name", // will be displayed on the page
    "cssclass",
    // execute task
    function (selectedObjects, scope) {
        var self = this;
        // TASK LOGIC HERE
    },
    //check criteria
    function (objects, scope) {
        // CHECK SOMEHTING HERE
            return true;
        }
    );

// register task
consoleTasks.registerConsoleTask("System.Entity", refreshFormTask);

If you will use your task only for one class then you can skip the variable and define the class inside the registerConsoleTask function:

consoleTasks.registerConsoleTask("System.Entity", 
consoleTasks.createConsoleTask(
    "TASKIDNOSPACESPLEASE",
    "Task Display Name", // will be displayed on the page
    "cssclass",
    // execute task
    function (selectedObjects, scope) {
            var self = this;
            // TASK LOGIC HERE
        },
        //check criteria
        function (objects, scope) {
            // CHECK SOMEHTING HERE
            return true;
        }
    ));

Add the main task into the previously created template.

You can find more Console Task samples in the appendix

Variables

The following list shows available variables for task execution and checking functions:

Extension Customization

Sometimes you will need to change the XML data of the request offering extension object (this object stores extended configuration, such as multimapping, prompt layout, etc.) manually. To do this, you have to export the XML data file, add your changes and import it again.

• Export XML Data
  To export the XML data you can use the following snippet. The following section needs to be changed:
  • $roDisplayName
  • ([xml]$ext.MultiMappings).Save("D:\!Tmp\$extId.xml")

Import-Module SMLets

# Change this section
$roDisplayName = "Showcase: multimapping"

$clExt = Get-SCSMClass -Name itnetX.Extensions.ITSMPortalCMDB$
$clRO = Get-SCSMClass -Name System.RequestOffering$

$ro =  Get-SCSMObject -Class $clRO -Filter "DisplayName = '$roDisplayName'"
if(!$ro){
    throw "Request offering '$roDisplayName' not found"
    return
}

$extId = "ITSMPortal_" + $ro.Path

$ext = Get-SCSMObject -Class $clExt -Filter "Name = '$extId'"
if(!$ext){
    throw "Extension for request offering '$roDisplayName' not found (Name: '$extId')"
    return
}
# Change this section
([xml]$ext.MultiMappings).Save("D:\!Tmp\$extId.xml") 

• Modify XML Data
  Do your required changes to the XML.
• Import XML Data
  Now you can import the changed XML data back into Service Manager. Therefore, you can use the following snippet. Same as above you have to change these two properties:
  • $roDisplayName
  • ([xml]$ext.MultiMappings).Save("D:\!Tmp\$extId.xml")

Import-Module SMLets

# !!!! CHANGE THIS !!!
$roDisplayName = "Showcase: multimapping"

$clExt = Get-SCSMClass -Name itnetX.Extensions.ITSMPortalCMDB$
$clRO = Get-SCSMClass -Name System.RequestOffering$

$ro =  Get-SCSMObject -Class $clRO -Filter "DisplayName = '$roDisplayName'"
if(!$ro){
    throw "Request offering '$roDisplayName' not found"
    return
}

$extId = "ITSMPortal_" + $ro.Path

$ext = Get-SCSMObject -Class $clExt -Filter "Name = '$extId'"
if(!$ext){
    throw "Extension for request offering '$roDisplayName' not found (Name: '$extId')"
    return
}

$multimappingXml = [xml](Get-Content "D:\!Tmp\$extId.xml")
$ext.Item($null, "MultiMappings").Value = $multimappingXml.OuterXml
$ext.Commit() 

Client-side development: Custom JavaScript files

You can place any JavaScript files in the wwwroot\lib\custom\ (this folder doesn’t exist by default) and all *.js files will be loaded by both portals: Analyst and End User.

We suggest to use Angular Modules for client-side development purposes.

JS files from custom folder will be used for both, Analyst and EndUser parts, so please check if specific module is available, for instance:

var app;
try { app = angular.module('itsmPortal.analyst'); }
catch (e) {
    // module not found, exit
    return;
}

Since version 3.1.0.4 you can use helper to do that:

var itsmPortalAnalystApp = angular.moduleSafe('itsmPortal.analyst');
if (!itsmPortalAnalystApp) { return; }

External Validation

You can use external validation for any prompt types in Request Offerings. Please refer to the Administration Guide for more information how to use and configure External Validation.

External Validation allows you to achieve complex validation of data input by your users, such as check if a user name already exists, check if the requested space is available on the network share, etc. You can implement any scenario for External Validation, but keep the performance in mind: your script should not run longer than a few seconds, better less, because the webpage will be blocked while the validation runs.

External Validation is based on PowerShell. All scripts are stored inside the SCSM CMDB as instances of the class itnetX Validation Script. You can create new scripts from the request offering configuration dialog, or using the Add task on the Validation Scripts view in the SCSM Console .

How it works

When external validation is enabled on a user prompt, the validation script will be executed when the value of the given prompt is changed.

Moment of execution

When you use external validation with a user prompt of type string, then the validation and writes to the data model will happen after the string text box loses focus (aka on-blur), for instance when the cursor leaves the textbox. If external validation is not enabled, then data is written to the model on change of the text box (each key press).

The API will gather all data from the current request offering and send it to the server. The server will find the script in the CDMB and execute it against the retrieved data.

The PowerShell script must return $true or $false as the last object in the execution context. For example, these snippets are correct:

# Script 1
$formData
return $true
# End of Script 1

# Script 2
$true
# End of Script 2

# Script 3
return $formData["f_c658a8820750ee5596517c12a68b44e9"] -eq "test"
# End of Script 3 

The Following snippet is not correct (because the last returned object is not $true or $false):

# Script 1
$formData["f_c658a8820750ee5596517c12a68b44e9"] -eq "test"
$value
# End of Script 1 

Dynamic validation message

Since version 3.7.13 you may return a string instead of $false
Returning a string will be interpreted as $false(invalid). Furthermore, the returned string will overwrite the specified validation message.

Validation Scripts variables

You can use the following pre-defined variables in your script:

$value

The current data of the user prompt the validation occurs for. Contains processed arrays. All other values are always strings (see Data Format section below).

$formData

The $formData variable contains the pure data model. You can get the current data for any question. To do that you have to use the indexer operator ([]) and provide the indexer name for prefix “f_” and question ID in 32-digit format (00000000000000000000000000000000, “N” format for .NET ToString() method), for instance:

$formData["f_c658a8820750ee5596517c12a68b44e9"]

If you only know the ordinal of the question you can use the question id and retrieve the data from the $questions variable like this:

$Q3 = $questions | ? {$_.Ordinal -eq 3}
write-host $Q3

If the data is an array (this is the case for attachments and repeating tables), then the indexer name will have a “[]” postfix, because the data model is sent to the server as application/x-www-form-urlencoded.

Keep in mind: instead of $formData, the $value variable always contains processed data, so if data is an array then $value will contain the actual array, but $formData will contain a comma-separated string

$question and $questions

The $question and $questions variable contain information about the current or all questions. Each question supports following properties:

Data Format

Depending on the prompt type, $value and $formData can contain different values:

Query Result data format

As mentioned in the table above, $value (and $formData) contain a serialized JSON object. This object always contains one property “answers”. This property can be null or represent one or more selected objects. Also, this object contains information about the repeating table (RTRow), question id and question ordinal. Sample object:

{
  "answers": [
    {
      "$Id$": "2a0489b4-5091-876b-9d6c-c4fbff0a6b65",
      "DisplayName": "Anton Gritsenko",
      "Domain": "SCSMSOL",
      "UserName": "gritsenko.eng"
    }
  ],
  "RTRow": 0,
  "questionId": "ca40619a7bde4a2995117296e7316931",
  "questionOrdinal": "7"
}

Each object in the “Answers” array contains at least two properties: $Id$ (internal ID of the object in CMDB) and DisplayName. All other properties depend on the Display Columns configuration of the Query Result

File Attachment data format

Files are uploaded to the server before data is written to the main data model, so when your validation script starts, the file will already be uploaded to server. The main data model will contain two properties for each entry: file name and file id.

As mentioned in the $formData section, the $value and the $formData variables contain different values: $value contains an array of file names, but $formData contains a comma-separated string, and the indexer name will have a “[]” postfix:

f_c658a8820750ee5596517c12a68b44e9[]: file1, file2, file3

Also, $formData contains a comma-separated string with file ids (guids). The indexer name has the prefix “fileids_” (instead of just “f_” in the main model) and the same “[]” postfix, for instance:

fileids_f_63e5403aac74499f823939f7585b531e[]: 85bf7c84-0c5b-417b-9dbc-883350f78a78,ab4aa1f0-8242-439a-a186-9eaae4d948c4

You can read the file content from the $uploadPath folder. File name inside this folder will match the file id (we are not using the real file name, to avoid collision).

Debugging validation scripts

Any data written to the standard output (out-default) will be displayed as a message box in the portal, so you can use the Write-Host or Out-Default cmdlets to show data from your script:

if($value)
{
  write-host $value
  write-host $value.GetType().FullName
}
$question | Get-Member | out-default
return $true 

Output:

You cannot change the type of the message box. It will always be displayed as an information, regardless of the validation result.

Tips & Tricks

1. Enable the Summery Page of a Request Offering to be able to use External Validation for the whole Request Offering before the user can submit. External Validation
2. Performance: try to avoid using more than 2 validation scripts on the same page. Validation always occurs on the first page load if values are not null (default values), so having many validations may slow down the user experience.
3. Debugging: you can emulate the $mg variable using SMLets (New-SCSMSession or Get-SCSMSession -PassThru)
4. Debugging: You can save all variables to XML on the server side and then play around locally

External Data

External Data is designed to provide a quick way to show data results from external sources, such as SQL, CSV files, and PowerShell scripts in Query Result.

Query Result gets data using OData 4 query regardless of whether it is a regular query result or an external data query.

The configuration of External Data is covered in External Validarion.

External Data PowerShell Script variables

The PowerShell script is the most powerful and flexible way to get data from an external source. To get data from an external source you can use the following variables.

For an explanation of variables which are also used for External Validation scripts, please see Validation Scripts variables

$queryParams

Query Result supports following OData parameters: $filter,$orderby, $top, $skip, $select, $expand, $count, $format, $skiptoken, $deltatoken, $inlinecount, but only $filter and $orderby is used in case of Query Result.

The $filter contains full filter query in OData format, and is not empty only if user use the filter box in Query Result. Sample $filter value:

(substringof('test',tolower(Name))) or (substringof('test', tolower(ServicesDependedOn)))

Where Name and ServicesDependedOn are columns name and ‘test’ is value from filter box of Query Result.

We provide more simple way to access filter by $filterValue. You no need to use $filter parameter until you will query data using custom script out of portal UI. In this case you fill free to use any supported parameters of OData.

The $orderBy parameter contains list of columns separated by coma (,) with possible “desc” at the end to describe descendent order. Sample values:

"UserName"
"UserName desc"

$formData

The $formData variable contains the pure data model. You can get the current data for any question. To do that you have to use the indexer operator ([]) and provide the indexer name for prefix “f_” and question ID in 32-digit format (00000000000000000000000000000000, “N” format for .NET ToString() method), for instance:

$formData["f_c658a8820750ee5596517c12a68b44e9"]

If you only know the ordinal of the question you can use the question id and retrieve the data from the $questions variable like this:

$Q3 = $questions | ? {$_.Ordinal -eq 3}
write-host $Q3

If the data is an array (this is the case for attachments and repeating tables), then the indexer name will have a “[]” postfix, because the data model is sent to the server as application/x-www-form-urlencoded.

Keep in mind: instead of $formData, the $value variable always contains processed data, so if data is an array then $value will contain the actual array, but $formData will contain a comma-separated string

$formData in Form Filling Activities

The $formData variable will provide the ffa instance id if a External Data Script is used within a Form Filling Activity. This Id can be used to get the Parent Work Item of the FFA. Check the appendix for an example

Tips & Tricks

1. Debugging: you can emulate the $mg variable using SMLets (New-SCSMSession or Get-SCSMSession -PassThru)
2. Debugging: You can save all variables to XML on the server side and then play around locally
3. Usage: You can use External Data as a proxy to query data from other sources and then get them using a Web API in JSON format. To do that you have to create a Request Offering with one prompt of External Data type and do not publish this request offering. Then you can use following base URL to access data:
   
   /api/EndUser/ServiceCatalog/GetQueryResultData/%RO_ID%/%QuestionId%
   
   where %RO_ID% is request offering ID (Guid) and %QuestionId% is prompt id (Guid). You can use any OData valid parameters with query. Sample:
   
   http://server/api/EndUser/ServiceCatalog/GetQueryResultData/830b0f02-5209-f954-d1fc-139869705137/aaa9b2495bfe44ca87e0c32589aded5c/?$inlinecount=allpages
   
   If you need more information about this please contact customer@operaio.ch.
4. Usage: if you want to get data from other questions you can use $questions variables

Global Search Customization

Per default, the Global Search of the ITSM Portal searches for Work Items that contain the search string in their Display Name property.

This article describes how you can search for additional properties, like Description, and how you can add additional columns to your search results view.

Work Items Search

The Work Items Search in the End User Portal is defined in
\Areas\EndUser\Views\Items\GlobalSearch.WorkItems.cshtml

The Work Items Search in the Analyst Portal is defined in
\Areas\Analyst\Views\Analyst\GlobalSearch.WorkItems.cshtml

First of all, create a copy of this file and name it GlobalSearch.WorkItems_%YourTheme%.cshtml. Where %YoureTheme% is the name of the theme you are currently using, which is base by default. Otherwise your changes will be overwritten with the next ITSM Portal update.

Open your copy of the GlobalSearch.WorkItems.cshtml and locate the <div e-columns> node. This node holds all columns that will be displayed in the Search Results View. All columns with the attribute e-type="string" will be searched by the search engine. All other columns will be displayed only.

You may add several additional columns to enable the search engine to search additional properties of Work Items

Example - Search for Description

Add the following column to be able to search the Description property of a Work Item:

<div e-column e-field="Description.Value" e-headertext="Description" e-type="string"></div>

Save the changes and reload the Portal using CTRL+F5.

You should now be able to search for the description of any Work Item as well.

If you want to display a property of type string, but you don't want the search engine to search this property, change the attribute e-type="string" of that column to e-type="text".

If you want to be able to search an additional property, but you don't want to display the according column to the users, simply add the property e-visible="false" to that column

Service Catalog & Knowledge Base Search

The End User Portal additionally searches for Request Offerings and Knowledge Base Articles as well. Both can be customized in the same way as the Work Items Search.

The Service Catalog Search is defined in
\Areas\EndUser\Views\Items\GlobalSearch.ServiceCatalog.cshtml

The Knowledge Base Search is defined in
\Areas\EndUser\Views\Items\GlobalSearch.KB.cshtml

Example - Customize Service Catalog Search to use Tags

I some scenarios you may want to make Request Offerings in your Service Catalog to be searchable by tags/keywords. This section explains the customizations needed to be able to do so.

First of all, create a copy of GlobalSearch.ServiceCatalog.cshtml as explained here.

The Class System.RequestOffering does not own any property for Tags or Keywords. Therefore we will simply use the property Notes to add our Tags. The Notes property is of the type string so we will add our Tags as strings, separated by spaces. This should be enough for the search engine to find all request offerings that contain a given string in the Notes property.

Add the following column to the <div e-columns> node to allow the search engine to search the Notes property:

<div e-column e-field="Notes.Value" e-headertext="Tags" e-type="string" e-visible="false"></div>

Update a Request Offering with Tags/Keywords

There are 2 possibilities to update the Notes property of a request offering

Add Tags using SCSM Console

1. In your SCSM Console, go to Library\Service Catalog\Request Offerings\All Request Offerings
2. Select the Offering you want to add some tags and click Edit RO for ITSM Portal
3. In the Edit Request Offering Dialog, scroll to the Publish section
4. Enter your Tags in the Internal notes input
5. Click 'OK'

Done, you have updated your Request Offering with some Tags

Add Tags using Powershell

Use the following powershell snippet to update the Notes property with the desired tags.

$displayName = "Offering Display Name here"
$tags = "tag1 tag2 tag3 etc"

$offeringClass = Get-SCSMClass -Name System.RequestOffering$
$typeproj = Get-SCSMTypeProjection -Name System.RequestOffering.RequestOfferingViewProjection$
$offering = Get-SCSMObjectProjection -ProjectionObject $typeproj -Filter "DisplayName -eq $displayName"
$prop = @{"Notes" = $tags}
$offering | Set-SCSMObjectProjection -PropertyValues $prop

Grid engine

Grids are used widely on the portal to show info: views in Analyst Portal, table on forms, Query Result in Analyst portal.

With the current engine you can do filtering, sorting and grouping. Each grid (table or view) have different options enabled, but most of them use two main features: inline columns and OData data query.

General info

Grid engine build on ui-grid component.

Inline columns

By default, ui-grid expect static array of columns defined in the JavaScript. We did extend this and provide ability to define columns directly in HTML markup. To do that you must defined div element with ui-grid attribute and add ui-grid-inlinecolumns attribute. Then you can define column using divs like this:

<div id="f_@(Model.Id.ToString("N"))_selected" 
  ui-grid="gridOptionsSelected" ui-grid-inlinecolumns
  ui-grid-data="selectedObjects">
    <div e-columns>
        <div e-column e-width="35" e-field="some" e-name="''">
            <div class="ui-grid-cell-contents"><a class="removeselected" href=""><i class="icon-delete84"></i></a></div>
        </div>
        @foreach (var column in questionConfig.Columns)
        {
            if (column.PropertyType == "binary")
            {
                <div e-column e-field="@(column.PropertyName).Value" e-headerText="'@column.PropertyDisplayName'" e-type="@column.PropertyType">
                    <div class="ui-grid-cell-contents"><img src="" ng-src="data:image/png;base64,{{row.entity.@(column.PropertyName).Value}}" /></div>
                </div>
            }
            else if (column.PropertyType == "datetime")
            {
                <div e-column e-field="@(column.PropertyName).Value" e-headerText="'@column.PropertyDisplayName'" e-type="@column.PropertyType">
                    <div class="ui-grid-cell-contents"><span itx-datetime="row.entity.@(column.PropertyName).Value"></span></div>
                </div>

            }
            else
            {
                <div e-column e-field="@(column.PropertyName).Value" e-headerText="'@column.PropertyDisplayName'" e-type="@column.PropertyType"></div>
            }
        }
    </div>
</div>

Div with attribute e-columns defines containers for column, each div with attribute e-column will be used as individual columns.

Columns configuration

You can use any valid ui-grid column option with the e- prefix. You must use additional dash if parameter have capital letter: e-field, e-enable-filtering as so on. If column require complex configuration (JSON object) you can use string notation.

You can skip cellTemplate parameters and use inline HTML: all HTML inside of the dic e-column will by used as cell template.

Note

The ui-grid requires that all cells templates was wrapped by div with CSS class ui-grid-cell-contents. If can skip this div, it will be added automatically by the e-column

Here is sample configuration of the Query Result view:

<div e-column e-field="@(questionConfig.Columns[i].PropertyName).Value" e-headerText="'@questionConfig.Columns[i].PropertyDisplayName'" e-type="@questionConfig.Columns[i].PropertyType">
  <div class="ui-grid-cell-contents"><span itx-datetime="row.entity.@(questionConfig.Columns[i].PropertyName).Value"></span></div>
</div>
<div e-column e-field="@(questionConfig.Columns[i].PropertyName).Value" e-enable-Hiding="false" e-enable-filtering="false" e-headerText="'@questionConfig.Columns[i].PropertyDisplayName'" e-type="@questionConfig.Columns[i].PropertyType"></div>

List of mostly used attributes for column configuration:

End User portal: custom query result UI

The End User allows you to create very custom UI for query result: you can change any piece of the UI, create your own list, catalog or shop experience using query to CMDB.

Here is list of high-level steps that you need to do:

1. Create custom cshtml view in \Areas\EndUser\Views\ServiceCatalog\
2. Create custom script in \wwwroot\lib\custom\ (see Client-side development: Custom JavaScript files for more info)
3. Create custom CSS

You can request additional info from our Support Team if you are really interested in this topic.

Appendix

Forms Customization (Analyst)

The below specified controls can use the following shared attributes:

Shared attributes are not supported for itx-actionlog and itx-attachmentsdropdowncontrol.

Available Controls

Operaio provides some out of the box controls which can be used:

Control Name	Configuration	Description	UI for Analyst portal
itx-stringcontrol	multiline (bool)	Render a string control with header.
itx-instancepickercontrol	classortypeprojectionid (guid) cssiconclass (string) alias (string) columns (string) filter (string, odata)	Render a generic instance picker.
itx-userpickercontrol	alias (string) use-global-operator (bool) columns (string)	Render a user picker control.
itx-enumcontrol	property (string) show-fullpath (bool)	Render an enum picker control
itx-checkboxcontrol		Render a checkbox control
itx-datetimecontrol	show-time-part (bool) linked-mindate (propert) linked-mindate="ScheduledStartDate"	Render a date and time picker
itx-gridpickercontrol	target-class (guid) available-show (bool) available-header (string) available-method (string) alias (string) do-not-preload (bool) default-class (guid)	Render a grid with add/remove button in separated block. the optional default-class attribute sets the initially selected class for the picker. do-not-preload="true" will prevent the picker from loading data until the user executes a search query.
itx-actionlog	analyst-log (string) system-log (string) user-log (string) attachments (string)	Render an Action Log control in separated block
itx-attachmentsdropdowncontrol	property (string)	Render a drop-down field with attachments
itx-attachmentsgridcontrol	addedby-alias (string)	Render attachments as grid
itx-userinputcontrol		Render User Input (XML) as HTML table
itx-numbercontrol	max (decimal) min (decimal) decimals (int)	Render spinner for int and decimal values. Decimals attribute allows you to set number count after the dot (0 is default, means integer)

Within a control you can access properties from other classes than the target class. You have to use the Type Projections Alias ([TPAlias].[Property]). The following example show a property of another class within a gridpicker:
<div e-column e-field="RWIAssignedUser.DisplayName.Value" e-headertext="@GlobalLocalizer["AssignedTo"]"></div>
Make sure you update your Type Projections as required, to access the property from the other class.

itx-instancepickercontrol

itx-isntancepickercontrol render single instance picker control and allow to choose one using picker with the grid. You can define columns in the picker using “columns” attribute. You must set this property as JSON array where each object is ui-grid column definition, for example (this is default columns for this control):

[
    { 
        field: "DisplayName.Value", 
        name: localization("DisplayName") 
    }, 
    { 
        field: "$Class$.DisplayName", 
        allowFiltering: false, 
        allowSorting: false, 
        name: localization("Type") 
    }, 
    { 
        field: "$LastModified$.Value", 
        allowFiltering: false, 
        name: localization("LastModified"), 
        cellTemplate: '<div class="ui-grid-cell-contents"><span itx-datetime="row.entity.$LastModified$.Value"></span></div>' 
    }
]

To use inside of the form it’s hard to specify such string, because you must escape all HTML characters, but you can use Razor syntax to simplify this:

<itx- instancepickercontrol property="DisplayName" 
    alias="AffectedUser" 
    header="@GlobalLocalizer["AffectedUser"]" 
    columns-span="4" 
    columns="[@("{ field: \"DisplayName.Value\", sort: { priority: 0, direction: 'asc' }, name: \"" + sdkService.GlobalLocalizer["DisplayName"] + "\" },{ field: \"UserName.Value\", name: \"" + sdkService.GlobalLocalizer["UserName"] + "\" }, { field: \"$Class$.DisplayName\", enableSorting: false, name: \"" + sdkService.GlobalLocalizer["Type"] + "\" }")]" 
/>

itx-userpickercontrol

itx-userpickercontrol is just a special case of the itx-isntancepickercontrol with predefined class and columns. You can redefined columns in same way as for itx-isntancepickercontrol.

Form Sample

Default Form

@using itnetX.ITSMPortal.Models.Forms
@using itnetX.ITSMPortal.Models.EMO;
@using itnetX.ITSMPortal.Shared.EMO;
@using itnetX.ITSMPortal.Models.MVC;

@model FormModel
@{
    ViewBag.Title = Model.FormName;
    Layout = Model.Layout;
    Model.CSSClass = "am-block";
}
@section emo_tabs{
    <itx-formtabs>
        <itx-tab header="@GlobalLocalizer["GeneralTab"]" id="general" />
        <itx-tab header="@GlobalLocalizer["RelatedItemsTab"]" id="relateditems" />
        <itx-tab header="@GlobalLocalizer["HistoryTab"]" id="history" />
    </itx-formtabs>
}

@section emo_header{
    <div class="col-sm-3">
        <ul class="list-unstyled">
            <li><b>@GlobalLocalizer["CITypeHeader"]</b><span ng-bind="formContext.$Class$.DisplayName" /></li>
        </ul>
    </div>
    <div class="col-sm-3">
        <ul class="list-unstyled">
            <li><b ng-bind="formContext.Status.DisplayName"></b><span ng-bind="formContext.Status.Value" /></li>
        </ul>
    </div>
    <div class="col-sm-3">
        <ul class="list-unstyled">
            <li><b>@GlobalLocalizer["CreatedOnHeader"]</b><span itx-datetime="formContext.$TimeAdded$.Value" /></li>
            <li><b>@GlobalLocalizer["LastModifiedHeader"]</b><span itx-datetime="formContext.$LastModified$.Value" /></li>
        </ul>
    </div>
}

@await Html.PartialAsync("[Subfolder]/[DefaultForm File Name]")
@await Html.PartialAsync("CI_RelatedItemsTab", new RelatedItemsSettings() { WIsAffectedAlias =  "RelatedWorkItem", WIsAlias = "ImpactedWorkItem", CIsAlias = "RelatedConfigItem", KBsAlias = "RelatedKnowledgeArticles", AttachmentsAlias = "FileAttachment" })
@await Html.PartialAsync("HistoryTab")

General Tab

One Column Mode

<div class="tab-pane active" id="general">
    <div class="itx-mod-col-slg">
        <div class="card-block collapse-card">
            <div class="header"><a href="#" class="heading pull-left"><span>Section Header</span></a><a href="#" class="arrow-collapse-btn pull-right"><i class="icon-dropdown_up"></i></a></div>
            <div class="collapse-content">
                <form role="form">
                    <div class="form-group">
                        <div class="row">
                            <!-- Add -->
                        </div>
                    </div>
            </div>
        </div>
    </div>
</div>

Many Columns Mode

<div class="tab-pane active itx-row" id="general">
    <div class="itx-mod-col-slg">
        <div class="card-block collapse-card">
            <div class="header"><a href="#" class="heading pull-left"><span>First section of Column 1</span></a><a href="#" class="arrow-collapse-btn pull-right"><i class="icon-dropdown_up"></i></a></div>
            <div class="collapse-content">

            </div>
        </div>
    </div>
    <div class="itx-mod-col-slg">
        <div class="card-block collapse-card">
            <div class="header"><a href="#" class="heading pull-left"><span>First section of Column 2</span></a><a href="#" class="arrow-collapse-btn pull-right"><i class="icon-dropdown_up"></i></a></div>
            <div class="collapse-content">

            </div>
        </div>
    </div>
</div>

Forms Customization (End User)

Shared Attributes

The below specified controls can use the following shared attributes:

Please Note
Shared attrbitues are not supported for itx-actionlog and itx-attachmentsdropdowncontrol.

Available Controls

Control Name	Configuration	Description	UI for End User portal
itx-stringcontrol	multiline (bool)	Render a string control with header.
itx-instancepickercontrol	classortypeprojectionid (guid) cssiconclass (string) alias (string)	Render a generic instance picker.
itx-userpickercontrol	alias (string) use-global-operator (bool)	Render a user picker control.
itx-enumcontrol		Render an enum picker control
itx-checkboxcontrol		Render a checkbox control
itx-datetimecontrol	show-time-part (bool)	Render a date and time picker
itx-gridpickercontrol		Render a grid with add/remove button in separated block
itx-actionlog	analyst-log (string) system-log (string) user-log (string) attachments (string)	Render an Action Log control in separated block
itx-attachmentsdropdowncontrol	property (string)	Render a drop-down field with attachments
itx-attachmentsgridcontrol	addedby-alias (string)	Render attachments as grid
itx-userinputcontrol		Render User Input (XML) as HTML table
@Html.Partial("Activities")		Add this section to display the Activities of for instance a Service Request

The parse-url attribute can only be used in the End User Portal. For links in views there is no need to add this attribute, they will be detected automatically.

Form Sample

@using itnetX.ITSMPortal.Models.Forms
@using itnetX.ITSMPortal.Models.EMO;
@using itnetX.ITSMPortal.Shared.EMO;
@using itnetX.ITSMPortal.Models.MVC;

@model FormModel
@{
    ViewBag.Title = Model.FormName;
    Layout = Model.Layout;
}
<div class="row title-cont-bl mod-req-p">
    <div class="col-lg-12">
        <div class="alert-bl pull-left"><i itx-objecticon="formContext"></i><span>{{formContext.Id.Value}}</span></div>
        <div class="h-status_rate-wrap pull-left">
            <h1>{{formContext.Title.Value}}</h1>
            <div class="status-rate-wrap">
                <div class="status pull-left"><i itx-statusicon="formContext.Status"></i><span>{{formContext.Status.Value}}</span></div>
            </div>
        </div><a class="cancel" href="" ng-click="closeForm()"><i class="icon-close"></i></a>
    </div>
</div>
<div class="row">
    <div class="col-lg-6">
        <div class="row">
            <div class="col-xs-6">
                <!-- Add-->
            </div>
            <div class="col-xs-6">
                <!-- Add-->
            </div>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="row">
            <div class="col-xs-6">
                <!-- Add-->
            </div>
            <div class="col-xs-6">
                <!-- Add-->
            </div>
        </div>
    </div>
</div>

Console Task - Samples

The following example shows a console task which sets the status of an Incident to "Pending".

(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 ****************/
        var pendingIncidentTask = consoleTasks.createConsoleTask(
            "PendingIncidentTask", // Unique Internal Name for Task (no spaces)
            localization("PendingTask"), // Task display name (add string to resources)
            "pending", // CSS class used for icon
            // execute task
            function (selectedObjects, scope) {
                var self = this;
                // Context: From

                // create scope for dialog
                var dataContext = {
                    Comment: new EMObjectData("Comment", { Value: '' }, true)
                };
                var dialogScope = scope.$new(true);
                dialogScope.consoleTaskContext = dataContext;

                itsmportal.ui.showDialogForm(
                    localization("PendingTask"), // title
                    dataContext,  // context
                    $compile('<div class="form-group"><label>Comment:</label><textarea type="text" class="form-control required" name="Comment" ng-model="consoleTaskContext.Comment.Value" /></div>')(dialogScope), // form
                    // the following function is executed as soon as the user clicks OK in the dialog
                    function (dialogData) {
                        dialogScope.consoleTaskContext["Status"] = { EnumId: "b6679968-e84e-96fa-1fec-8cd4ab39c3de", IsDirty: true };

                        formEvents.fire("itxCreateActionLog", {
                            type: "System.WorkItem.ActionLogEnum.TaskExecuted",
                            title: localization("PendingTaskActionLogTitle"),
                            description: dialogScope.consoleTaskContext["Comment"].Value
                        });
                        delete dialogScope.consoleTaskContext["Comment"]

                        for (var i = 0; i < selectedObjects.length; i++) {
                            scope.$parent.update(dialogScope.consoleTaskContext);
                        }

                        dialogData.dialog.close();
                        dialogScope.$destroy();
                    }
                );
            },

            //check criteria
            function (objects, scope) {
                // only show task when user is on the Form and with status Active
                return scope.isForm && objects.length == 1 && objects[0].Status.EnumName == "IncidentStatusEnum.Active";
            }
        );
        // register the new task to be available for Incidents
        consoleTasks.registerConsoleTask("System.WorkItem.Incident", pendingIncidentTask);
        /************* END OF TASK ****************/
        }]);
})();

Get Parent Work Item of Form Filling Activity in External Data Script

When using External Data scripts, External Validation scripts or Default value scripts in a Form Filling Activity you might want to have the data of the FFA Parent WorkItem available too.

The following script will find the Parent WI of the FFA by specifying the FFA Id. The FFA Id itself is available in the $formData variable: $activityId = $formData["_ffaInstance"]

param(
    [guid]
    $activityId
)
Import-Module SMLets

function Get-SCSMParentWI($wiId){
    return Get-SCSMRelationshipObject -Filter "RelationshipId = '2da498be-0485-b2b2-d520-6ebd1698e61b' and TargetObjectId = '$wiId'"    
}

$wiId = $activityId
do{
    $relObj = Get-SCSMParentWI $wiId
    if($relObj){
        $rootWi = $relObj.SourceObject
    }
}
while($relObj.SourceObject -and ($wiId = $relObj.SourceObject.Id))
return $rootWi