Create incident button in footer of every knowledge article in esc portal

Kishor O · ‎10-28-2023

How to build create incident button in the footer of every KA in esc portal?

Once we create an incident from a particular KA incident comment and short description should be updated with the Knowledge article short description (KA name).

ChrisBurks · ‎11-03-2023

@Kishor O - Explanation is within the code comments

Widget build:

HTML Template

<div>
  <!-- anchor tag styled as button using ng-href to assign link -->
  <a ng-href="{{c.redirect}}" class="btn btn-default col-xs-12 col-sm-12 col-md-12 m-b-lg">Create an Incident</a>
</div>

Server Script

(function() {

	//if client sends a get request use the details to get the title
	if(input && input.action == 'GET ARTICLE TITLE'){
		var kaGr = new GlideRecord('kb_knowledge');
		if(input.is_article_number){
			if(kaGr.get('number', input.ka_id))
				data.title = kaGr.short_description.toString();
		}else{
			if(kaGr.get(input.ka_id))
				data.title = kaGr.short_description.toString();
		}
	}
})();

Client controller

api.controller = function($scope, $location) {

    var c = this;
    //use $location to grab parameters to place on redirect url
    var urlParams = $location.search();

    // get the value of sysparm_article or sys_id
    var ka_id = urlParams.sysparm_article || urlParams.sys_id;

    //check which param exists
    var isArticleNumber = urlParams.hasOwnProperty('sysparm_article') ? 'number' : 'sys_id';

    c.redirect = "";

    if (ka_id) {
        c.server.get({
            "action": "GET ARTICLE TITLE",
            "ka_id": ka_id,
            "is_article_number": isArticleNumber
        }).then(function(resp) {
            c.title = resp.data.title;

		//build url that points to the catalog item page including params with KA details
    	//start with question mark in case the page this widget is rendered in different portals
        //?id=sc_cat_item&sys_id=SYS_ID_TO_YOUR_RECORD_PRODUCER_HERE&ka_title=TITLE OF ARTICLE HERE
          c.redirect = "?id=sc_cat_item&sys_id=3f1dd0320a0a0b99000a53f7604a2ef9&ka_title=" + c.title;
        })
    }
);

Catalog Client Script (UI Type set to All or Mobile/Service Portal

function onLoad() {
    //get the url params
	try{
    var urlParams = decodeURIComponent(location.search);
	}catch(err){
		console.error("err", err)
	}
    //unlike working with AngularJS we need to work for getting each param
    //split the url string into an array by "&"
    var urlArr = urlParams.split("&")

    //array should look something like this ['?id=sc_cat_item','sys_id=SYS_ID_TO_YOUR_RECORD_PRODUCER_HERE','ka_title=TITLE OF ARTICLE HERE']
    //now we filter it down to just get the ka_title parameter and value and assign to the short_descrition variable
    g_form.setValue('short_description', urlArr.reduce(filterForTitle, ""))

	//callback function for reduce array method
    function filterForTitle(str, param) {
        //split each iteration by = 
        var paramValueArray = param.split("=");

        //assign str if param is the same as ka_title else return empty string
        str = paramValueArray[0] == 'ka_title' ? paramValueArray[1] : "";

        return str;
    }

}

Example

View solution in original post

ChrisBurks · ‎10-31-2023

@Kishor O Do you see any errors in the console? Does the "sysparm_article" parameter in the url when viewing the article?

Are you able to post some screenshots of your setup and/or the url (masking the instance needed) when viewing an article?

Kishor O · ‎10-31-2023

@ChrisBurks

ChrisBurks · ‎10-31-2023

@Kishor O In your screenshot you can notice that sysparm_article is not a parameter in the url.

You'll need to adjust the client controller script to get the sys_id parameter instead of the sysparm_article parameter or better yet look for one or the other.

For example

change

var ka_number = $location.search().sysparm_article;

to

var urlParams = $location.search();
var ka_number = urlParams.sys_id || urlParams.sysparm_article;

Kishor O · ‎10-31-2023

@ChrisBurks Thank you so much it worked for me. You are amazing.
But one issue is if user clicks that button more than one time it is creating another incident I will try find a way to restrict it. I would appreciate if you provide your comment on this.

Thanks

ChrisBurks · ‎10-31-2023

One way to accommodate that scenario is to add a check in the GlideRecord query to see if an incident is active, caller id of the person clicking the button, and short description equates to the ka name. If the query finds a match don't create the new incident. If it doesn't create one. Send back to the client side the results to notify the user on either result.

Also in the .then() of the call to the server after a successful submission throw a "disabled" class name on the button element.

Or another scenario is in the server side of the widget do the check for an existing incident first and disable the button if one is found. ( Note: Server side always runs first in a widget unless configured to run asynchronously)