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

Harsh Vardhan · ‎04-25-2019

adding one thread here, i did not test but you can try with that.

https://community.servicenow.com/community?id=community_question&sys_id=94b84361db5cdbc01dcaf3231f96...

Alikutty A · ‎04-25-2019

Hi,

You can create a new widget with the following content in its HTML code. Add the required description within the div tags

<div style="color:red">Add your required content here in the widget</div>

Then place this widget in your macro settings.

Thanks!

alexcolbert · ‎04-25-2019

Hi,

Thanks for your reply.

I did think of this, but it will involve creating a separate widget for every macro variable where this UI macro has been used (there are 77 of them). Ideally I'd like to just create one widget that pulls the value of the variable description.

Thanks for your help!

Alikutty A · ‎04-25-2019

To keep it dynamic, you need to write a server script in your widget that fetches the description value from the catalog item variable.

Sample Server Script:

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=SYS_ID_OF_MACRO_VARIABLE); //Replace with sys_id of macro

item.query();

if(item.next()){

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

}

On your HTML code, use the data.desc