Pull variable description into HTML widget on the Service Portal

alexcolbert
Kilo Guru

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

find_real_file.png

Form:

find_real_file.png

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

 

 

1 ACCEPTED SOLUTION

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

12 REPLIES 12

Thats cool!

The code below will display data from two different macros. Since this is a single widget the data will be displayed together. If you need to display data at different positions then you will need a second widget for Macro 2

HTML

 

<div ng-if="!!data.desc1" style="color:red">{{data.desc1}}</div>
<div ng-if="!!data.desc2" style="color:red">{{data.desc2}}</div>

Server Script

data.desc1 = '';
data.desc2 = '';
var id = $sp.getParameter('sys_id'); 

//Query Macro1
var item = new GlideRecord('item_option_new');
item.addEncodedQuery('cat_item='+id+'^sys_id=680d44163720300054b6a3549dbe5d3c'); item.query();

if(item.next()){
 data.desc1 = item.getDisplayValue('description');
}

//Query Macro 2
var item = new GlideRecord('item_option_new');
item.addEncodedQuery('cat_item='+id+'^sys_id=sys_id_macor_2'); 
item.query();

if(item.next()){
 data.desc2 = item.getDisplayValue('description');
}

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!

Thanks Alex. This snippet helps in many areas around scripting..