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!

[Ankur Bawiskar]

Glad to help

[mkader]

How can I dot-walk using this solution to a field on another table?

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

[Ankur Bawiskar]

Hi,

like this

<td>${jvar_user.location.city}</td>

Regards
Ankur

[mkader]

Can you tell me what I am doing wrong? I was testing this in my PDI, I am now trying to load this in my Work instance:

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
	<g:evaluate var="jvar_id" expression="RP.getWindowProperties().get('u_number')"/>
	<g:evaluate var="jvar_user" object="true">
		var userRecord = new GlideRecord('u_restaurant_equipment');
		userRecord.addQuery('sys_id', 'IN', '${jvar_id}');
		userRecord.query();
		userRecord;
	</g:evaluate>
	<table id="sTable"  border="1" align="left" style="width:auto; margin:2rem;"> 
		<tr bgcolor="#dbe5f1">
			<th class="padding"><b>Equipment Name</b></th>
			<th class="padding"><b>Equipment Model</b></th>
			<th class="padding"><b>Equipment Type</b></th>
			<th class="padding">Number</th>
		</tr>
		<j:while test="${jvar_user.next()}">
			<tr>
				<td class="padding">${jvar_user.u_number.u_equipment_name.getDisplayValue()}</td>
				<td class="padding">${jvar_user.u_sku.u_equipment_model}</td>
				<td class="padding">${jvar_user.u_sku.u_equipment_type}</td>
				<td class="padding">${jvar_user.u_number}</td>
			</tr>
		</j:while>	
	</table>
	<style>
		.padding {
			padding-left: 1rem;
			padding-right: 1rem;
		}
	</style>

</j:jelly>

u_number is the list reference. u_restaurant_equipment is the table where all this information lives. I am unable to pull back any data including the number.  

[Ankur Bawiskar]

Are you using this in scoped application?

If yes then update as this

        <g:evaluate var="jvar_id" expression="RP.getWindowProperties.u_number"/>

Regards
Ankur