Adding a Wiget to an Incident record (Not in Service Portal)

[Dcalpanda]

Hello,

I am able to add a widget to Service Portal, however I am trying to get the widget on a actual incident record. 

This widget is a chat bot that can be asked question to assist our agents in getting information quickly to assist users with issues.

Possible to UI Action/Macro?
Or would this be direct DOM Manipulation?

Thanks,

Dustin

[-O-]

Since it is possible to add AngularJS modules to forms it must be possible to add Widgets too, but that would be overkill.

But you can adapt a widget to include into a form by basically extracting the Body HTML template and Client controller.

So I very recently created a widget demo app that had

<div>
	<p ng-repeat="line in lines track by line.index">{{ line.text }}</p>
	<a href="#" ng-click="addLine()">Add Line</a>&nbsp;|&nbsp;<a href="#" ng-click="clearLine()">Clear Line</a>
</div>

as Body HTML template and

api.controller = function ($scope) {
	var c = this;

	$scope.lines = [];
	$scope.addLine = addLine;
	$scope.clearLine = clearLine;

	function addLine () {
		$scope.lines.push({
			'text': 'Line ' + ($scope.lines.length + 1),
			'index': $scope.lines.length,
		});
	}

	function clearLine () {
		$scope.lines = [];
	}
};

as Client controller.

And here's how this can be added to any (Core UI) form:

1. Create a UI Script that has u_lines_demo as API name and

   angular.module('uLinesDemo', []);
   angular.module('uLinesDemo')
   	.directive('uLinesDemo', uLinesDemoDirective);
   
   jQuery(document).ready(uLinesDemoBootstrap);
   
   function uLinesDemoBootstrap () {
   	if (window.NOW && window.NOW.singleFormBootstrap)
   		return;
   
   	angular.bootstrap(document.getElementById('uLinesDemoApp'), ['uLinesDemo']);
   }
   
   function uLinesDemoController ($rootScope, $scope) {
   	var c = this;
   
   	$scope.lines = [];
   	$scope.addLine = addLine;
   	$scope.clearLine = clearLine;
   
   	function addLine () {
   		$scope.lines.push({
   			'text': 'Line ' + ($scope.lines.length + 1),
   			'index': $scope.lines.length,
   		});
   	}
   
   	function clearLine () {
   		$scope.lines = [];
   	}
   }
   
   function uLinesDemoDirective () {
   	return {
   		'controller': uLinesDemoController,
   		'replace': true,
   		'scope': {},
   		'template': `
   <div>
   	<p ng-repeat="line in lines track by line.index">{{ line.text }}</p>
   	<a href="#" ng-click="addLine()">Add Line</a>&nbsp;|&nbsp;<a href="#" ng-click="clearLine()">Clear Line</a>
   </div>
   `,
   	};
   }​

   as Script.
2. Create a UI Macro that has u_lines_demo as Name and

   <?xml version="1.0" encoding="utf-8" ?>
   <j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
   	<j2:if test="${ !jvar_useConcourse; }">
   		<g:inline template="amb_common.xml" />
   		<g2:requires name="scripts/angular_includes_1.5.11.js" includes="true" />
   		<g2:requires name="scripts/js_includes_ngCommon.js" />
   	</j2:if>
   	<g2:requires name="/u_lines_demo.jsdbx?v=1.0" position="last" />
   	<div id="uLinesDemoApp">
   		<p>${ gs.getMessage('Lines Demo'); }</p>
   		<u-lines-demo />
   	</div>
   </j:jelly>​

   as XML.
3. Create a UI Formatter that has Lines Demo as Name, Task [task] as Table, u_lines_demo as Formatter and uLinesDemo as Angular module.
4. Add the newly created module to any form of a table based on Task [task].

And here's the end result, the UI Formatter added to the Incident form, after pressing the Add Line couple of time:

 And here's a video of it working: