Pull variable description into HTML widget on the Service Portal

alexcolbert · ‎04-25-2019

Hi Community,

My company is in the planning process to move from CMS to Service Portal and I've come across a particular bit of functionality that I'm having trouble replicating in Service Portal.

A previous developer (now left) developed a UI macro which reads the description field of a macro variable type and displays the contents on the catalog item form.

Example

Form:

I know that UI Macro's will not render on the Service Portal, so I was looking to duplicate this functionality into a widget.

Unfortunately my skills with Angular JS are non-existent so i was hoping someone might have a suggestion on how i can duplicate the above functionality.

Thanks!

Alex

alexcolbert · ‎04-26-2019

Thanks very much for your help with this.

From searching around on the community I've come up with a solution which achieves exactly what I need.

I can pull the sys_id of the object variable in the client controller and then pass this into the server script. I've then used the script you gave me to get the description and display this on the portal:

HTML:

<div>  
<h1>{{ data.desc }}</h1>  
</div>

Client

function($scope) {  
     var c = this;  
  
    c.data.message = $scope.page.field.sys_id;
	c.server.update();
	}

Server

(function() {
  /* populate the 'data' object */
  /* e.g., data.table = $sp.getValue('table'); */
data.desc = '';
	
var item = new GlideRecord('item_option_new');

item.addQuery('sys_id', input.message);
item.query();

while(item.next()){

data.desc = item.getDisplayValue('description');

}
})();

I can now plug this widget into all of my Macro variables and it will grab the description and display it onto the form in the portal.

Your help was much appreciated!

View solution in original post

alexcolbert · ‎04-25-2019

Thanks!

That has got me close to what I'm looking for.

The difficulty now, is that the script is asking for a specific variable sys_id.

I have 77 separate variables. With this approach I would still need 77 separate widgets as I would have to input the sys_id of each variable into the Server script.

Can you recommend a way that using 1 widget, I would be able to grab the description field of any Macro variable where it is used?

Thanks very much for your help!

Alikutty A · ‎04-25-2019

This is a dynamic approach, Just a single widget/page will do. This is the page where all catalog items are rendered on portal. So whenever you open this page, the sys_id will be present on the URL. You dont need separate widgets for each of the items.

The page is sc_cat_item and widget is SC Catalog Item

alexcolbert · ‎04-25-2019

I think I'm missing something.

When I have 2 Macro variables on the same catalog item, I need them to use the same widget in order to pull the variable description field onto the portal form.

Based on your script, where you've got:

item.addEncodedQuery('cat_item='+id+'^sys_id=SYS_ID_OF_MACRO_VARIABLE); //Replace with sys_id of macro

I'm entering the sys_id of the individual Macro variables. This mean I've got 2 widgets as I have to hard code the sys_id for each variable.

Have I done this wrong?

Thanks again for your help.

Alikutty A · ‎04-25-2019

Can you set this up for a single macro field and see if this works out?

We will require additional logic to handle multiple macros.

alexcolbert · ‎04-25-2019

Yes it definitely works for a single macro variable:

Portal:

Script:

(function() {
  /* populate the 'data' object */
  /* e.g., data.table = $sp.getValue('table'); */
data.desc = '';
var id = $sp.getParameter('sys_id'); //SYS_ID of catalog item available on page URL

	
// Query the related macro variable description using this sys_id from the variables table ie item_option_new

var item = new GlideRecord('item_option_new');

item.addEncodedQuery('cat_item='+id+'^sys_id=680d44163720300054b6a3549dbe5d3c'); //Replace with sys_id of macro
item.query();

while(item.next()){

data.desc = item.getDisplayValue('description');

}
})();