.
 

Service Portal: Widgets as Catalog Variables | Part 1

May 24, 2019 10:52 pm

Published by

When displaying Catalog Items through the Service Portal it is possible to include custom Service Portal Widgets as Variables on the item, these can then be used to control other Variables on the item, allowing us limitless flexibility on the design and functionality of our Catalog Items. Let’s take a simple Catalog Item with a Select Box variable and a Yes/No variable and replace them with custom Widgets

Create the Catalog Item

  1. Go to Service Catalog > Maintain Items
  2. Click New
  3. Complete the form:
    • Name: Add to DL
    • Catalog: Service Catalog
    • Category: How can we help
    • Short Description: Add to DL
  4. Save

Create the Catalog Variables

We’ll create two variables that will actually store the data we set through our Widgets, these will be hidden and not visible to the user

  1. Add a variable
    • Type: Select Box
    • Question: Type
    • Name: type
    • Question Choices:
      1. User
      2. Group
  2. Add a variable
    • Type: Yes/No
    • Question: Notify subject
    • Name: notify_subject
    • Default value: No

Create a Widget for the ‘type’ Variable

  1. Open the Widget Editor and create a new Widget:
    • Name: [Variable] Add to DL: Type
  2. Add the following HTML/CSS/Client Script
<div class="btn-group">
  <label class="btn btn-primary" 
         ng-model="c.type" 
         uib-btn-radio="'user'">
    <span class="fa fa-user"></span>
  </label>
  <label class="btn btn-primary" 
         ng-model="c.type" 
         uib-btn-radio="'group'" 
         uncheckable>
    <span class="fa fa-users"></span>
  </label>
</div>
.fa { 
  font-size: 64px;
  min-width: 128px;
}
function($scope) {
  /* widget controller */
  var c = this;
  var g_form = $scope.page.g_form;
  
  $scope.$watch('c.type', function(newVal,oldVal){
    if(typeof newVal == 'undefined')
      return;

    g_form.setValue('type', newVal)
  })
}


In the Widget we are simply setting some data based on which button the user clicks. The key element is in the Client Script where we take that value and set the value of the relevant variables on the Catalog ItemĀ 

Add the Widget to the Catalog Item

  1. Open the Add to DL item
  2. Add a new variable
    • Type: Macro
    • Label: Type widget
    • Name: type_widget
    • Order: 100
    • Widget: [Variable] Add to DL: Type
  3. Save

Verify that the Widget and Catalog Item are working correctly by viewing the Add to DL Catalog Item through the Service Portal. Clicking on the User or Group icon should set the value of the ‘Type’ variable, if it does not, debug your Widget and re-test.

For our second variable we want a toggle switch – The UI Bootstrap library that Service Portal uses does not include this functionality, so we will add it via a Dependency. The files required can be found at http://ziscloud.github.io/angular-bootstrap-toggle/. Note that this is the UI Bootstrap implementation of the toggle functionality, not the standard Bootstrap implementation.

Create a Widget for the ‘notify_subject’ Variable

  1. In the Widget Editor create a new Widget:
    • Name: [Variable] Add to DL: Notify subject
  2. Click Open in Platform from the options menu in the top right
  3. In the Dependencies related list click New
  4. Complete the form
    • Name: Bootstrap Toggle
  5. In the JS Includes related list click New
  6. Complete the form:
    1. Display Name: angular-bootstrap-toggle.min.js
    2. Source: URL
    3. JS file url: https://cdn.jsdelivr.net/npm/angular-bootstrap-toggle@0.4.0/dist/angular-bootstrap-toggle.min.js
  7. Repeat this process to add the CSS Include
  8. Close the widget record in the platform UI and open it in the Widget EditorĀ 

    Best Practice: Remember, it is best practice to only edit a Widget in either the platform view or the Widget Editor at any one time – if you have the Widget open in both interfaces you can easily end up overwriting changes made in one interface from the other.

     

  9. Add the following HTML/Client script to the Widget
<toggle ng-model="c.notify_subject" 
        ng-change="c.changed()"
        on="Yes"
        off="No"></toggle>
function($scope) {
  /* widget controller */
  var c = this;
  var g_form = $scope.page.g_form;
  c.notify_subject=false; //Ensure this default value matches the default value of the variable

  c.changed=function(){
    if(c.notify_subject)
      g_form.setValue('notify_subject', 'Yes');
    else
      g_form.setValue('notify_subject', 'No');

  }
}

Add the widget as a variable

  1. Open the Add to DL item
  2. Add a new variable
    • Type: Macro with label
    • Label: Notify subject
    • Name: notify_subject_widget
    • Order: 200
    • Widget: [Variable] Add to DL: Notify subject
  3. Save

Verify that the widget is working by viewing the Add to DL Catalog Item through the Service Portal. Clicking on Notify subject toggle should set the value of the ‘Notify subject’ variable, if it does not, debug your widget and re-test.

Finally, we should complete our Catalog Item by hiding the actual variables so that only our Widget variables are displayed. Use a Catalog UI Policy to achieve this.

Conclusion

We have created two Service Portal Widgets that will replace two OOB Catalog Variables on a Catalog Item when the item is displayed through the Service Portal. At the moment the two Widgets are hard-coded to modify the values of two specific variable, it would be useful to extend the Widgets we’ve created to make them re-usable, for example we could add the Toggle Widget to any Catalog Item and have it target the value of any Yes/No variable – we will take a look at this in Part 2!