Service portal - widgets to display the content of the link

Jesi Perinbaraj · ‎11-23-2016

I need to create a Service Portal page, which will have two widgets, one with a couple of links and the other widget needs to display the page according to the link clicked on the first widget.

The links would be direct service now URL. I am sure there must be a target function where we can mention the target widget / class / div. I want something similar to the Service Catalog SP page. Please suggest.

Thanks in advance.

ChrisBurks · ‎11-23-2016

Jessie,

I think I see what you are trying to do:

Based on the screenshot below if you look at the yellow highlighted sections. If I hover over the "Can We Help You?" link you can see at the bottom of the screenshot that the link points to the same exact page it's on but the sys_id in the url is pointing to the "Can We Help You?" category. But the current category is the "Hardware" category highlighted in red. And you can see the correlating url set in the address bar with the "Hardware" category sys_id.

If I click on the "Can We Help You?" link then it will set the url in the address bar to the same exact page but changing the sys_id to the "Can We Help You?" category sys_id. See screenshot below. This will change the items to display the "Can We Help You?" category items.

The sys_id set in the url in the address bar is now taken in the server script. If you follow the script you'll see that sys_id is used to get the items from the category that correlates to that sys_id.

In conclusion this page is set up with two widgets to communicate with each other by using a link to point to itself but supply a different value for the sys_id parameter. When a new parameter is supplied new items will display based on the new value accepted by the other widget.

I hope this helps.

P.S. Aside from the "How to Communicate Between Two Widgets" way another technique is to use the URL and place parameters on it.

View solution in original post

ChrisBurks · ‎11-23-2016

How to communicate between widgets in Service Portal

One way to do this is have the widget with the "links" when clicked pass to the other widget the link info. Then the other widget based on the "link" info display the page. The above link explains how to communicate between widgets. Or the other thing you can do is take a look at what the Service Catalog SP page is doing and model your code in that fashion.

Jesi Perinbaraj · ‎11-23-2016

Hi Chris,

Thanks for the suggestion. I did went through the mentioned link. But there more than two widgets have been used and there are called based on which link is clicked. I want to know if there is a way with just two widgets (just like the Service Catalog SP page) is possible.

I see this in SC Category Page: <a target="{{item.target}}" ng-href="{{getItemHREF(item)}}" class="panel-body block">

I think this is for a particular item displayed on the widget?

Can you please tell me if a URL from the first widget can be directed in the other widget the same way? If yes, please give an example.

Thanks.

ChrisBurks · ‎11-23-2016

Hello Jessie,

That url is not calling another widget. It's calling another Service Portal page. To link to another Service Portal page simply construct the url with the portal url suffix and the id of the page.

For example if you do an inspect element when the SC Category page is rendered you'll see that in the URL it contains https://<name of your instance>.service-now.com/sp/?id=sc_cat_item&sys_id=<some catalog item sys id>

Notice "sp" which is the portal url suffix, "id=sc_cat_item" which is the page id of the Service Catalog page, and finally "sys_id=<a sys_id>" which is a parameter that will be collected in the widget on the Service Catalog page where in the server script you'll will find something like some variable is equal to $sp.getParameter('sys_id');

In conclusion the url is not pointing to a widget but to a page that has a widget on it.

For future reference when you do run into a widget communicating with another widget although the article contains an example of three widgets doesn't mean three widgets have to be used. It can still be used with just two widgets.

Jesi Perinbaraj · ‎11-23-2016

Hi Chris,

Thank you so much! that was a clear answer. I just have one more question, might be a silly one. Now if i have the first widget with two hyperlinks. When I click on it, the second widget should be redirected to the that page. How is the link info or the link passed to the other widget?

Thanks