Service Portal modal widget basics

[yundlu316]

Our team currently has a HTML widget in place that is basically a link that pulls up a knowledge article.   Instead of it taking a user to another page, we would like to use the modal widget and just have it pop up on the same page.   In this example, would we pull the modal widget into the designer page in the same container as the HTML widget?   Or is the idea to embed widgets into the modal widget a la <sp-widget id=""></sp-widget>?   How does the modal widget work exactly?

Thanks!

[sndangibbard]

Hi David

This is the solution I came up with. Essentially it involves

• Cloning and customizing the KB Article Page Widget - this is the widget that displays KB articles. We need to customize this in order to display it inside a modal
• Create a new custom widget to replace your existing HTML widget. This new widget will call the spModal API from Client Script to invoke a modal containing the relevant KB article

Cloning KB Article Page Widget

1. From your Widget Editor page choose 'Edit an existing widget' and select KB Article Page
2. From the actions menu in the top-right corner of the Widget Editor, select "Clone KB Article Page"
3. Name your cloned Widget: KB Article Modal [kb_article_modal
4. In the Server Script of your new cloned Widget replace line 4:
   

   articleGR.get($sp.getParameter('sys_id'));

   with:
   

   articleGR.get(input.sys_id);
   
   

   Why? The original line is trying to get the sys_id of the record we want to display through a URL parameter. In our new line we are passing that sys_id over in the input object
5. Save

Create a new Widget

This Widget will replace your existing HTML Widget. Of course you can generate your list of Article links any way you wish, they don't have to be static. When a user clicks on an article link, we pass the sys_id of the article to the controller. In the controller we call the spModal API to open a modal that loads our custom KB Article Modal Widget and displays the desired article

HTML

<div>
   <a href="javascript:void(0)" data-article="7cd4fec83786e20086efc74a54990e54" ng-click="c.openOverlay($event)">KB Article</a>
</div>

Client Script

function(spModal) {
   var c = this;
   c.openOverlay = function($event){
   //pull data-article attribute from clicked element
   var articleId = $event.currentTarget.dataset['article'];

   //open modal
   spModal.open({
   //load our custom kb article widget
   widget: 'dg_article',

   //pass article id to article widget
   widgetInput: { sys_id:articleId },

   //force modal to large size
   size: 'lg'
   })

   }
}

Please do let me know if this has helped and when you get it working! For more info about the spModal API you can take a look at the documentation: https://github.com/service-portal/documentation

Thanks

Dan

documentation/documentation/spModal.md

[yundlu316]

Dan, thanks so much!   super detailed.   I'm following your steps and am stuck on the HTML portion for KB Articles.   Your KB Article link above just takes me to the main community page.   Thanks!

[sndangibbard]

Sorry David, my HTML got mangled, it should look something like this:

<a href = "javascript:void(0);" data-article="SYS_ID_OF_ARTICLE">Click here for article</a>

[Skylar2]

Hey Dan,

Came across this article while trying to replicate similar functionality. I was just trying to print some stuff on server and client side. When I call my widget

c.openKnowledgeArticleModal = function(id) {
 spModal.open({
  size: 'md',
  title: 'Knowledge Article',
  widget: 'kb_article_page_v2',
  buttons: [{label:'${Close}', cancel: true}],
  widgetInput: {
   sys_id: 'id'
  }
 })
};

and then the modal loads, but the article doesn't, and so i commented out all server and client code, and just put in $sp.log('hello'); and i only get a hello from the client side ...

So I don't know what's up but trying to find some documentation on how to execute this.