Client Controller syntax change in widget

[sandeep_kr]

Hi Experts,

In Paris version when I try to create new Widget there was a surprise! client controller syntax in different.

api.controller=function() {
/* widget controller */
var c = this;
};

which is different than Orlando. I have limited knowledge in Angular. Can someone help me to understand the syntax of new client controller and what are the benefits of using new syntax.

Thanks in advance.

[brianrichards]

I can't find it in the release notes, but the Paris release version of the client controller syntax actually resolves an issue (that is always ignored) with the syntax in how the widget client controller field was populated before. It now conforms with expected Angular syntax.

Interesting catch.

[Ryan Magsam1]

I came here with the same question and checked out the documentation that you linked to, @brianrichards 

What's strange is the syntax still doesn't match documentation.

SN Code

api.controller=function() {
  /* widget controller */
  var c = this;
};

Documented code

myApp.controller('GreetingController', ['$scope', function($scope) {
  $scope.greeting = 'Hola!';
}]);

I'm assuming for comparison that "api" and "myApp" are both angular module objects, but will do some testing to find out.

[sajerond]

Hi Ryan, I needed this information to copy from an HTML field to an html field on a portal page.  Work's better than I expected.  Thank you

[Oleg]

It's recommended to use old syntax (without "api.controller=" prefix) in the code of controller. In general, the code will be used not directly in the way. ServiceNow generates automatically separate JS-file with the prefix "api.controller=" and the standard code ("function(...){...}"). You can easy verify it.

For example, the standard Service Portal home contains Icon Link widget, with the following code of client controller:

function($scope, spAriaUtil) {
	$scope.accessibilityModeEnabled = spAriaUtil.isAccessibilityEnabled();
}

If you open the home page, open Developer Tools and search for the text "function($scope, spAriaUtil) {" you will find it with the prefix "api.controller=":

I did the test on Orlando-Instance. The same prefix exist for all other client controllers.

You can search more in the client code of Service Portal and find the following code fragment, which did that. In the same way the code of the "Link" will be prepend with "link=":

function loadDirective(scope, directiveName) {
	if (scope.widget.providers) {
		lazyLoader.providers(scope.widget.providers);
	}
	lazyLoader.directive(directiveName, function($injector) {
		var api = {
			restrict: 'C',
			replace: false
		};
		if (typeof scope.data.replace !== 'undefined')
			api.replace = scope.data.replace;
		if (scope.widget.template)
			api.template = scope.widget.template;
		if (scope.widget.client_script) {
			try {
				var stmt = 'api.controller=' + scope.widget.client_script;
				var src = scope.widget.id || directiveName;
				stmt = "//# sourceURL=" + src + ".js\n" + stmt;
				eval(stmt);
				api.controller.displayName = src;
				if (scope.widget.controller_as) {
					api.controllerAs = scope.widget.controller_as;
					api.bindToController = {
						data: '=',
						options: '=',
						widget: '=',
						server: '='
					};
				}
			} catch (e) {
				console.log(e);
				console.log(scope.widget.client_script);
			}
		}
		api.link = function(sc, elem, attr, ctrl) {
			var link;
			if (scope.widget.link) {
				eval('link=' + scope.widget.link);
				if (link) {
					link(sc, elem, attr, ctrl)
				}
			}
			;
		}
		;
		return api;
	});
}