Tutorial: Create a reusable directive and add it to a widget

Angular Providers are reusable components that can be added to multiple widgets. Using the Widget Angular Providers table, create a directive that shows a category icon next to each result in the Quick Order widget.

Before you begin

Role required: admin or sp_admin

About this task

Angular Providers let you build angular directives and services that can be injected into your client script controller. The code in a Provider differs from a typical Angular directive or service because it must be anonymous, without being appended to a specific module.

Procedure

  1. Navigate to Service Portal > Service Portal Configuration > Portal Tables > Widget Angular Provider.
    The Widget Angular Providers table opens.
  2. Click New to create a new record.
  3. Fill out the form.
    1. Add the type and name.
      • Type: Directive
      • Name: categoryIcon
    2. Add the client script.
      function() {
        return {
          template: '<span class="fa fa-stack fa-lg"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-{{::icon}} fa-stack-1x fa-inverse"></i></span>',
          restrict: 'E',
          replace: true,
          scope: {
            category: '='
          },
          link: function(scope, element) {
      					
      var _iconMap = {
      		"b06546f23731300054b6a3549dbe5dd8": "tablet", /* Tablets */
      		"15706fc0a0a0aa7007fc21e1ab70c2f": "question", /* Can we help you? */
      		"d68eb4d637b1300054b6a3549dbe5db2": "mobile-phone", /* Mobiles */
      		"109cdff8c6112276003b17991a09ad65": "print", /* Office and Print */
      		"5d643c6a3771300054b6a3549dbe5db0": "print", /* Printers */
      		"2c0b59874f7b4200086eeed18110c71f": "plug", /* Peripherals */
      		"2809952237b1300054b6a3549dbe5dd4": "desktop" /* Software */
      	};
      			
      	scope.icon = _iconMap[scope.category] || "shopping-cart";
          }
        }
      }

      This script associates the sys_id of the Category record with the Service Catalog item. The icon that displays is the icon defined in the Category record in the Service Catalog.

    3. Click Save.
  4. Associate the new Angular directive with the Quick Order Widget.
    1. Navigate to <yourInstanceURL>/sp_config?id=widget_edit.
    2. Open the Quick Order widget.
    3. Under Related Lists, select Angular Providers.
    4. In the Angular Providers list, click New to associate an existing Angular Provider with the Quick Order widget.
    5. Add the following values to the form.
      • Angular Provider: categoryIcon
      • Widget: Quick Order

    6. Click Save.
  5. Add the categoryIcon directive to your Quick Order HTML template.
    1. From the Widget Editor, open the Quick Order widget.
    2. Replace the HTML template with the following script.
      <div class="panel panel-primary">
        <div class="panel-heading">Request an item from the catalog</div>
        <div class="panel-body">
          <input class="form-control" type="search" placeholder="Start typing here to search the list of catalog items" ng-model="c.data.keywords" ng-change="c.server.update()" ng-model-options="{debounce: 250}" />
          <h5 ng-if="!c.data.keywords">Showing the most popular items</h5>
          <ul class="list-group result-container">
            <li class="list-group-item" ng-repeat="item in c.data.items">
              <a href ng-click="c.select(item.sys_id)"><category-icon category="item.category" style="margin-right: 10px"></category-icon>{{item.name}}</a><span class="pull-right">{{item.price}}</span>
              <div class="catalog-item" ng-if="item.sys_id == c.openItem">
                  <sp-widget ng-if="c.catalogItemWidget" widget="c.catalogItemWidget" />
                </div>
            </li>
          </ul>
        </div>
        <div class="panel-footer" ng-if="c.data.keywords">
          <ng-pluralize count="c.data.items.length"
                       when="{'0': 'No items found for ',
                           '1': 'One item matching ',
                           'other': 'Found {} items matching '}">
          </ng-pluralize>
          {{c.data.keywords}}
        </div>
      </div>
      
  6. Refresh your test page preview to view the changes.

    A category icon displays beside each result.