Popup info links for Service Portal

Sometimes customer needs to put much text into the Annotation for a Catalog Variable. Here is how we can show this information using a modal popup. We will link a KB article to variable annotation and show the article when a link is clicked. Here now it looks like in action:

Solution

1. Create a new table

New table: SC 2 KB (for storing relations between Catalog Item and Knowledge article) Fields: Number (string), Name (string), Catalog Item (Reference to sc_cat_item), KB Article (Reference to kb_knowledge)

2. Edit widget “SC Catalog Item” (client script)

Of cource, you should clone this widget prior to edit it.

/**
* Create an interval to check if any link should be binded to trigger a
* popup on-click
*/
if (c.data.sc2kb.length){
  var sc2kbRunnerInterval = $interval(function(){
    initSc2KbLinks(c.data.sc2kb);
  },1000);
}

/**
* Function that creating the binding
*/
function initSc2KbLinks(config) {
  for (let index = 0; index < config.length; index++) {
    const element = config[index];
    var docEl = $document[0].getElementById(element.number);
    if (docEl) {
      var target = angular.element(docEl);
      target.bind("click", function() {
        showKnowledgeArticle({
          sys_id: element.kb
        });
      });
      c.data.sc2kb.splice(index, 1);
    }
  }

  if (!config.length) {
    sc2kbRunnerInterval && $interval.cancel(sc2kbRunnerInterval);
  }
}

Additionally put inside the $scope.$on("$destroy", function () { function expression:

// Destroy interval if it has been created
sc2kbRunnerInterval && $interval.cancel(sc2kbRunnerInterval);

3. Edit widget “SC Catalog Item” (server script)

// Get sc2kb records only at init time
if (!input){
  data.sc2kb = getSc2Kb(String(data.sys_id));
}

/**
  * Retrieve Catalog Item <-> Knowledge relations
  */
function getSc2Kb(catItemSysId) {
  var result = [];
  var grSc2Kb = new GlideRecord('u_sc_2_kb');
  grSc2Kb.addQuery('u_cat_item', catItemSysId);
  grSc2Kb.query();
  while (grSc2Kb.next()) {
    result.push({
      name: grSc2Kb.getValue('u_name'),
      number: grSc2Kb.getValue('u_number'),
      kb: String(grSc2Kb.u_kb_knowledge.sys_id)
    });
  }
  return result;
}

Usage

Put such code to the Catalog variable field Instructions, replacing the “id” with an ID of your “SC 2 KB” record.

<a id="SCB001" title="Click here to get more help" href="#" rel="nofollow">Click here to get more help</a>

Click on such link should bring up a popup with content of KB article configured for this relation.