Creating an Angular Directive in Service Portal

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:

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:

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:

screenshot-2016-11-04-17-35-40

When this button is pressed, it will bring up an alert with the message, “Hello World”.

4 comments

  1. 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

  2. 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.

  3. 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

Leave a Reply

Your email address will not be published. Required fields are marked *