Directives are one of the many important components available in Service Portal thanks to Angular.js. You’ve probably already used many of Angular’s built-in directives without knowing it, such as: ng-repeat, ng-model or ng-class. But did you know you can also develop and use your own directives in your Service Portal widgets?
To illustrate a very basic example, let’s navigate to the “Angular Providers” module, and start by creating a new record with the following:
Name: “spButton”
Type: “Directive”
Client Script:
1 2 3 4 5 6 7 8 9 10 11 12 | function(){ return { link: function($scope){ $scope.displayMessage = function() { alert('Hello World'); }; }, restrict: 'A', // use 'A' for attribute or 'E' for element replace: 'true', template: '<div ng-click="displayMessage()" class="btn btn-primary">This is a Directive</div>' }; } |
To use your Angular Provider you will need to associate it with a widget by linking the two together using the “Angular Providers” related list on the widget form.
Now you can use the directive within any of the HTML of that widget. For example:
1 2 3 | <div sp-button></div> <!-- for Attribute --> <sp-button></sp-button> <!-- for Element --> |
Note: The name of the directive is camel-case “spButton,” however when used in HTML, it needs to be hyphenated (e.g. spButton -> sp-button).
Now when that widget is rendered, you will see the following button any time that directive is used:
When this button is pressed, it will bring up an alert with the message, “Hello World”.
Founder of 
Intressting, but do you have also a working example with parameter like
scope: {
field: ‘=’
}
Hello Nathan,
Thanks for the example. But I have a question. Is it possible to use templateUrl instead of template? I don’t want to have html directly in javascript string, but in some linked file. Is it possible in Servce portal please?
Thanks,
Jakub
Thanks Nathan very helpful.
@Jakub Pobiecky – yes you can do that.
create an ng-template for the widget and use an ng-include to retrieve the template. Make sure you replace template with templateUrl in the directive definition.
Hi Nathan,
Can we give button name as per our wish . In this example when i use sp-button i can always see button name “This is a Directive” . If we want have diff button names . Do we need to create more directives
Can we make some Server side querying on this? Been struggling to make it with the angular providers.
I’m getting a parser error when trying to add your above example into the client script field. Any ideas what I am doing wrong?