open a widget using spModal on click of an image

jigyasa23
Kilo Expert

I wish to open knowledge article in modal window( popup) upon click of an image on a widget ,

i am using 'Knowledge Article Content' cloned version of this widget to view the article content. I am using spModal to achieve this but a blank modal window is getting opened (PFA the image for the same) upon click of the image.

PFB the code that i have written;

//server side
.
.
.
. //part of the code
var contentItem = new GlideRecord("sc_cat_item_content");
contentItem.addQuery("sc_catalog", data.catalog_id);
contentItem.addQuery("category", grCategory.sys_id);
contentItem.query();
while (contentItem.next()) {
var Citem = {};
Citem.name = contentItem.name.getDisplayValue();
Citem.icon = contentItem.icon.getDisplayValue();
Citem.Id = contentItem.sys_id.getDisplayValue();
Citem.url =contentItem.kb_article.sys_id.getDisplayValue();
Citem.cat = contentItem.category.getDisplayValue();
Citem.isFavorite = new portalFavorites().isFavorite('sc_cat_item_content', Citem.Id);
item.Citems.push(Citem);
}
data.items.push(item);


//Client side

c.onWidget = function(widgetId,widgetInput) {
alert(widgetInput);
spModal.open({
title: 'Displaying widget ' + widgetId,
widget: widgetId,
widgetInput: widgetInput || {}
}).then(function(){
console.log('widget dismissed');
})
}


//HTML

 <tr ng-repeat="citem in scat.Citems">
<td><favorite-toggle item ="citem"></favorite-toggle></td>
<td>
<img ng-src={{::citem.icon}} ng-click="c.onWidget('ca_knowledge_article_content',citem.url)" class="img-thumbnail img-fluid pointer"> 
</td>
<td class='text-left item-title' ng-click="c.openCI(citem.url)">
{{citem.name}}
</td>

 

my question is how would the knowledge article content know which kb sysid to open?

 

I have attached the images for your reference.

 

 

1 REPLY 1

Anil Lande
Kilo Patron

Hi,

When you widgetId to spmodal at that time you need to pass sys_id of article in options in widget input:

 

widgetInput: widgetInput || {}

https://www.youtube.com/watch?v=-KSal66RbV8

https://www.youtube.com/watch?v=cIzxhifafAE

 

Also you need to handle these input options as widget schema in your widget which is displaying KB article.

https://developer.servicenow.com/dev.do#!/learn/learning-plans/quebec/servicenow_application_develop...

 

Thanks,

Anil Lande

Please appreciate the efforts of community contributors by marking appropriate response as correct answer and helpful, this may help other community users to follow correct solution in future.
Thanks
Anil Lande