Need help to convert a widget code to UI Macro

[Murali krishna3]

Hi all,

I have created a widget which works similar to reference variable to show active user records on one of the catalog item. Did it so because when I use the variable attributes on the list collector or reference type variables to show extra informartion about user and if those fields are empty they are misaligned. The works well on the portal but when I see it on RITM in itil view, it just shows label of the variable not the text field. Need to show that on RITM after submitting it. So, need to convert it to UI Macro in order to show it on the RITM where I am not familiar with the jelly scripting to do that.

Here is my code:

----HTML----
<div class="panel panel-default">
  <div class="panel-heading">
    <h4 class="panel-title">Location</h4>
  </div>
  <div class="panel-body">
   <sn-record-picker
                      field="name" 
                      table="'sys_user'"   
                      display-field="'name'" 
                      display-fields="'user_name,title,email'" 
                      value-field="'sys_id'" 
                      search-fields="'name'" 
                      page-size="100" >
    </sn-record-picker>
  </div>
</div>


 ---------------client script---------- 
 function($scope, spUtil) {

	var c = this;

	$scope.user = {
		displayValue: c.data.user.name,
		value: c.data.user.sys_id,
		name: 'name'
	};

	$scope.$on("field.change", function(evt, parms) {
		if (parms.field.name == 'name')
			c.data.setLocation = parms.newValue;
		
		c.server.update().then(function(response) {		
			spUtil.update($scope);
		})
	});
	
}

----------------server script----------

(function(){

var userSysId = "";
if (input.setLocation)
	userSysId = input.setLocation;
else
	userSysId = gs.getUser().getRecord();

var userGR = GlideRecord('sys_user');
userGR.get(userSysId);
data.user = {};
$sp.getRecordDisplayValues(data.user, userGR, 'sys_id,user_name,title,email');

})();

Really appreciate anyone's help on this. 

Thanks,

Murali Pasikanti

[jxsaxton421]

You should not need to convert it to UI macro since Servicenow has developed the Catalog Item widget. You just need to make sure it's linked properly. 

If you do need to convert it,

the HTML should be fine (except for the SN record picker, I think that is an Angular directive)

You should be able to have a jelly evaluate section to get the user. 

The stuff in your client script is not going to work, you'll have to do normal on click events.

[Murali krishna3]

Hello Joshua, 

Thanks for the quick reply.

Right the catalog item widget is linked as it is needed to.

But the thing is it is using sc-cat-item directive to fetch for the variables on the catalog item form, where I could not edit that. I discovered the sn-record-picker code from one of the community post and I made all the changes to it to reflect my requirement.

I found that I could use

 <g:ui_reference name="userRecords" id="userRecords" table="sys_user" completer="AJAXTableCompleter" onchange="generateTable()"/>

to show the reference field

Could you guide me with rest of the code, like how to set value in it if I am doing it from the portal?

[Murali krishna3]

Hello Joshua, 

Thanks for the quick reply.

Right the catalog item widget is linked as it is needed to.

But the thing is it is using sc-cat-item directive to fetch for the variables on the catalog item form, where I could not edit that. I discovered the sn-record-picker code from one of the community post and I made all the changes to it to reflect my requirement.

I found that I could use

 <g:ui_reference name="userRecords" id="userRecords" table="sys_user" completer="AJAXTableCompleter" onchange="generateTable()"/>

to show the reference field

Could you guide me with rest of the code, like how to set value in it if I am doing it from the portal?

[mariusnkluften]

Hi, Murali!

By RITM in "itil view", do you mean in the backend/platform view after you've submitted it and you're viewing the variables submitted in the Information/Variables tab?

Do you need to be able to change the value after submitting the request? Or is it fine to just display the chosen value?

A neat line of code you can use to "transfer" the value from the widget to the actual Variable, and furthermore make it accessible later on is this one:

$scope.page.g_form.setValue('widget-variable-name', 'Value');

This will set the value of the widget variable field, just like a single-line text variable will set the value of that single-line text variable. Whatever you put into this variable, will be accessible later in BR/Workflow/UI Macro.

How to access the data in Jelly:

<g:evaluate var="user_location">
  var location = jelly.jvar_question_value; // Access the data you set on the variable
  location;  // This line will set the g:evaluate var: user_location to this value
</g:evaluate>

Now, you can access the variable in the HTML, like this:

<input disabled="true" class="form-control">"${user_location}"</input>

(disabled and class will make it look like other fields, and make it read-only)

Accessing variables set with Jelly code is done with

${} - Phase 1

$[] - Phase 2

(Phases just makes Jelly easier to work with... *shrug* Just refer to the Jelly Cheat Sheet, if you need more info)

Not entirely sure if you need to wrap it with "'s, but that should work.

As far as I was able to determine in a project I did involving this, sn-record-picker is an Angular directive and I was not able to inject it even though I was able to get Angular working with my UI Macro. 

Let me know if this did anything for you! 🙂