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

Ankur Bawiskar · ‎03-29-2020

Hi Prem,

So you have 1 UI page and input text box; when you click the button of UI page it should display list of records from table?

Regards
Ankur

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

Prem13 · ‎03-29-2020

yes ankur,

There is field called City.

Where i need to show the users who belong to that city in a custom table

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

Nitin26 · ‎01-04-2022

Hi Ankur,

I tried it and it's working. Can I make this visible somehow on end user portal as well?