Create a UI Macro/UI Action and display pop-up for selected list items

[mkader]

Hello,

I have a UI Macro and a UI formatter that displays the selected items from my list and populates them in an html table. The list field I have references the user table. What I want to be able to do is create an icon next to the list field, and when selected, a pop-up will show with the selected items. The pop-up needs to display the First Name, Last Name, Manager, and Location of each selected user. 

Below is my UI Macro. I need to rewrite this to show a pop-up with this content vs showing it in a list.

UI Macro:

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

	<g2:evaluate jelly="true" object="true" var="jvar_jsonObj">	
		var arr = [];
		var user = new GlideRecord('sys_user');
		user.addEncodedQuery('sys_idIN' + current.watch_list.toString());    
		user.orderBy('name'); 
		user.query();
		while(user.next()){
		var jsonObj = {};
		jsonObj["firstName"] = user.first_name.toString();
		jsonObj["lastName"] = user.last_name.toString();
		jsonObj["manager"] = user.manager.getDisplayValue();
		jsonObj["location"] = user.location.getDisplayValue();
		arr.push(jsonObj);
		}
		arr;
	</g2:evaluate> 
	<table id="sTable"  border="1" align="left" style="width:600px"> 
		<tr bgcolor="#dbe5f1"><th><b>First Name</b></th><th><b>Last Name</b></th><th><b>Manager</b></th><th>Location</th></tr>
		<j2:forEach items="$[jvar_jsonObj]" var="jvar_json">                             
			<tr><td>$[jvar_json.firstName]</td><td>$[jvar_json.lastName]</td><td>$[jvar_json.manager]</td><td>$[jvar_json.location]</td></tr>
		</j2:forEach> 
	</table>

</j:jelly>

List Field (Additional Approvers):

Example Output:

***EDIT*** 

Can this be done using a UI Page and a UI Action, if so how do I do it?

@Ankur Bawiskar @asifnoor 

Thanks!

[Community Alums]

Add this attribute to the list field - ref_contributions=<your UI MAcro here).

Then just try and see how it goes. You will definetely need some tweking but thats how its done in general. I am adding the UI Macro I use to add the "Addme" buttin/icon to a field.

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<j:set var="jvar_n" value="add_me_${ref}" />
<a id="${jvar_n}" onclick="addMe('${ref}')" >
<img border="0" src="images/icons/user_obj.gifx" title="${gs.getMessage('Add me')}" alt="${gs.getMessage('Add me')}"/>
</a>

<script>
function addMe(reference){
var s = reference.split('.');
var referenceField = s[1];
g_form.setValue(referenceField, '$[gs.getUserID()]'); //This will work and on phase 1 (not only on 2 - tested it and works)
}

</script>
<g:breakpoint />
</j:jelly>

Cheers,

Joro

[mkader]

@Joro Klifov - Thanks for your response. I know how to add an icon, but separating the values and displaying them in a pop-up is the tricky part that I am getting stuck on.

[Community Alums]

I think I dont get your need quite well. Can you tell me again plz?

Cant you just call a glidemodal and pass the json you use there and then just iterate it?

Something like:

//Get the values to pass into the dialog
var comments_text = g_form.getValue("comments");
var short_text = g_form.getValue("short_description");
var number = g_form.getValue("number");

//Initialize and open the Dialog Window
var dialog = new GlideDialogWindow("task_comments_dialog"); //Render the dialog containing the UI Page 'task_comments_dialog'
dialog.setTitle("Escalation Reason"); 
dialog.setPreference("comments_text", comments_text); 
dialog.setPreference("short_text", short_text); 
dialog.render(); //Open the dialog

[mkader]

Sorry. I have a list field "Additional Approver". I want to invoke a UI Macro on that field. I need an icon that displays next to the Additional Approver field. When the icon is clicked, a pop-up window appears and it displays the First Name, Last Name, Manager, and Location of each user in the pop-up from the selected "Additional Approvers". 

EX: John Doe, Jane Doe, and Kathy Doe are selected on the "Additional Approver" list dictionary (references user table). I click the newly added icon, and a pop-up displays with additional info from the user table:

Pop-Up window:

First Name	Last Name	Manager	Location
John	Doe	Kathy Peele	New York
Jane	Doe	Paul Peters	Ohio
Kathy	Doe	James Jackson	California