How to: Create custom controls

If you want to create own, custom controls to use in the ITSM Portal, follow this step by step guide to create a demo-control
The Demo control will be a button which can be added to any html view or form of the portal by adding the following html markup: <democontrol></democontrol>

• Create the folder <portalFolder>\wwwroot\lib\custom
• Create a new file in that folder and name it ang.democontrol.js
• Add The following content to your javascript file:

(function () {
    // Directive DemoControl
    'use strict';
    var app = angular.module('itsmPortal');
    app.directive("democontrol", demoControl);
    function demoControl() {
        return {
            template: '<button href="#" ng-click="demoClick();">Demo Button</button>',
            link: function($scope, element, attrs) {
              $scope.demoClick = function () {
                    alert("Hello from Demo Control");
                }
            }
        };
    }
})();

• Restart IIS

If the directive name contains a uppercase letter, angular will convert this into a dash followed by the corresponding lowercase letter.
Example:
app.directive("democontrol", ...) results in <democontrol></democontrol> where as app.directive("demoControl", ...) will result in <demo-control></demo-control>
For more information about AngularJS directives, visit the corresponding documentation site: https://docs.angularjs.org/guide/directive