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!

[mkader]

No this is not a scoped application. This is the UI Macro that I setup in my work instance and it is currently working:

<?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 userRecord = new GlideRecord('u_restaurant_equipment');
		userRecord.addEncodedQuery('sys_idIN' + current.u_number.toString());    
		
		userRecord.query();
		while(userRecord.next()){
		var jsonObj = {};
		jsonObj["number"] = userRecord.u_number.getDisplayValue();
		jsonObj["equipment_name"] = userRecord.u_number.u_equipment_name.toString();
		jsonObj["equipment_model"] = userRecord.u_number.u_equipment_model.toString();
		jsonObj["equipment_type"] = userRecord.u_number.u_equipment_type.getDisplayValue();
		arr.push(jsonObj);
		}
		arr;
	</g2:evaluate> 
	<table id="sTable"  border="1" align="left" style="width:90%;margin-left:2rem; margin-right: 2rem;"> 
		<tr bgcolor="lightblue">
			<th class="paddingLeft">Equipment Name</th>
			<th class="paddingLeft"><b>Equipment Model</b></th>
			<th class="paddingLeft"><b>Equipment Type</b></th>
			<th class="paddingLeft"><b>Number</b></th>
		</tr>
		<j2:forEach items="$[jvar_jsonObj]" var="jvar_json">                             
			<tr>
				<td class="paddingLeft">$[jvar_json.equipment_name]</td>
				<td class="paddingLeft">$[jvar_json.equipment_model]</td>
				<td class="paddingLeft">$[jvar_json.equipment_type]</td>
				<td class="paddingLeft">$[jvar_json.number]</td>
			</tr>
		</j2:forEach> 
	</table>
	
	<style>
		.paddingLeft {
			padding-left: 1rem;
			padding-right: 1rem;
		}
	</style>
</j:jelly>

[mkader]

It was the dot-walk that was not working:

<td>${jvar_user.getDisplayValue('location.city')}</td>

[mkader]

It was the dot-walk that was not working. 

This is what I did to make it work:

<td>${jvar_user.getDisplayValue('location.city')}</td>

[mkader]

It's the dot-walk that did not work

This is what I did to make it work:

<td>${jvar_user.getDisplayValue('location.city')}</td>

[Ankur Bawiskar]

Glad that it worked