Display records on custom table in UI page

Prem13 · ‎03-26-2020

I need to show the list of users based on the city entered , on a custom table which i created on ui page.

i have city field which is of text field and a button.

below that i do have table

Note :- I doesnt want to use <iframe>

HTML:-

<input type="text" id="citytext" size="4"></input>
<button onclick="go()">Go</button>

<table id="statsTable" class="table table-striped table-bordered hide-query-stats">
<tr>
<th></th>	
<th>Miles </th>
<th>Company</th>
<th>Main Phone</th>
<th>Primary Contact</th>
<th>Contact phone</th>
<th>Address</th>
<th>City</th>
<th>State</th>
<th>Zipcode</th>
<th>Country</th>
</tr>
<tr>
	<td></td>
	<td></td>
<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
</tr>
</table>

Client script:-

function go()
{
	 var tr = document.querySelectorAll('#statsTable tr');
	tr[0].children[0].textContent = 'Miles';

	alert(tr);
	var a=gel("citytext").value;
	var gr = new GlideRecord("sys_user");
gr.addQuery("city", a);
gr.query();
while(gr.next()) {
	for (var i = 1; i <= gr.length; i++) {

    tr[i].children[0].textContent = gr.name;
  
  }
}

}

Ankur Bawiskar · ‎03-29-2020

Hi Prem,

here goes the UI Page code:

HTML:

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

	<html>	
		<style>
			table {
			border-collapse: collapse;
			width: 100%;
			}

			th, td {
			text-align: left;
			padding: 8px;
			}

			tr:nth-child(even){background-color: #f2f2f2}

			th {
			background-color: #4CAF50;
			color: white;
			}
		</style>

		<body>	
			<input type="text" id="citytext" size="4"></input>	
			<br/>

			<input type="button" onclick="showUsers()" name="Search" value="Search"></input>
			<br/>
			<div id="dvTable">
			</div>

			<p id="no_users" style="color:blue;display:none">No users matching query</p>

		</body>
	</html>

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

	<html>	
		<style>
			table {
			border-collapse: collapse;
			width: 100%;
			}

			th, td {
			text-align: left;
			padding: 8px;
			}

			tr:nth-child(even){background-color: #f2f2f2}

			th {
			background-color: #4CAF50;
			color: white;
			}
		</style>

		<body>	
			<input type="text" id="citytext" size="4"></input>	
			<br/>

			<input type="button" onclick="showUsers()" name="Search" value="Search"></input>
			<br/>
			<div id="dvTable">
			</div>

			<p id="no_users" style="color:blue;display:none">No users matching query</p>

		</body>
	</html>

</j:jelly>

Client Script:

function showUsers() {

	var tableHeaders = ['User'];
	var city = gel('citytext').value;

	var gr = new GlideRecord("sys_user");
	if (city != ''){
		gr.addQuery('city', city);	
		gr.query();

		if (gr.rows.length > 0) {

			var table = document.createElement("TABLE");
			table.border = "2";
			table.padding = "10px";
			table.id = "myTable";
			var columnCount = tableHeaders.length;
			var row = table.insertRow(-1);
			for (var i = 0; i < columnCount; i++) {
				var headerCell = document.createElement("TH");
				headerCell.innerHTML = tableHeaders[i];
				row.appendChild(headerCell);
			}

			while (gr.next()) {
				row = table.insertRow(-1);

				var user = row.insertCell(0);

				if (gr.name != '') {
					user.innerHTML = gr.name;
				} else {
					user.innerHTML = '';
				}

				var dvTable = document.getElementById("dvTable");
				dvTable.innerHTML = "";
				dvTable.appendChild(table);
			}
			document.getElementById('no_users').style.display = 'none';
		}
		else{
			document.getElementById('no_users').style.display = '';
			var Table = document.getElementById("dvTable");
			Table.innerHTML = "";
		}

	}
	else{
		var Table = document.getElementById("dvTable");
		Table.innerHTML = "";
	}
}

Screenshot of output: Users with City as Phoenix

UI Page showing 2 records

Mark ✅ Correct if this solves your issue and also mark 👍 Helpful if you find my response worthy based on the impact.
Thanks
Ankur

Regards,
Ankur
✨ Certified Technical Architect || ✨ 9x ServiceNow MVP || ✨ ServiceNow Community Leader

View solution in original post

MJN2 · ‎01-02-2024

I have used it but getting the error.

Error at line (37) The processing instruction target matching "[xX][mM][lL]" is not allowed.

Simmy Johncy · ‎01-07-2021

Hi Ankur

I was using your code as a reference for a similar requirement. I was wondering why you had 2 Jelly code blocks in your HTML code. Does it have any purpose? or is it simply an error?

Also, how would we go about adding multiple rows for the same record? For example, what if I wanted the Name and Title of the User - the same row or multiple rows ?

1. (Name1 Title1)

(Name2 Title2)

2. (Name1)

(Title1)

(Name2)

(Title2)

Thanks

Simmy

Ankur Bawiskar · ‎01-07-2021

Hi,

It's by mistake. it got copied twice

Regards
Ankur

Regards,
Ankur
✨ Certified Technical Architect || ✨ 9x ServiceNow MVP || ✨ ServiceNow Community Leader

Pradeep36 · ‎07-29-2021

Hello Ankur,

@Ankur Bawiskar

I have similar requirement , instead of show them on list view i want to show user record with necessary fields.

Example

On incident form

affected user: xxxxxx

on the form we should have one ui action, to call this is ui page, onclick, ui page should populate with user details mentioned on affected user field