how to auto populate the data in the tabular format using ui page.

Go to solution
Manoj50
Tera Contributor

‎01-27-2022 03:43 AM

This is the ui page that i have created in the ui based on the city of user i am trying to get the details as below ,

as per the script i am able to get the details of user column but i need to populate country and email of that user as well 

can any suggest me to achieve the same.

find_real_file.png

HTML code:

<?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','country','Email'];
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 = "";
}
}

 

 

Thanks in advance.

Labels:
Preview file
22 KB
Preview file
21 KB
0 Helpfuls
  • 1,437 Views
1 ACCEPTED SOLUTION

Go to solution
Ankur Bawiskar
Tera Patron
Tera Patron

‎01-27-2022 04:03 AM

Hi,

I had shared something similar solution few years ago

enhance for other columns

Client Script: updated

function showUsers() {

    var tableHeaders =  ['User','country','Email'];
    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 country = row.insertCell(0);
                var email = row.insertCell(1);

                var user = row.insertCell(0);

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

                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 = "";
    }
}

Output:

find_real_file.png

Regards
Ankur

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

View solution in original post

Preview file
41 KB
9 REPLIES 9

Go to solution
Ankur Bawiskar
Tera Patron
Tera Patron
In response to Manoj50

‎01-27-2022 06:50 AM

Hi,

something like this

function showUsers() {

	var tableHeaders = ['User','country code','Email','Manager','company'];
	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 country = row.insertCell(0);
				var email = row.insertCell(1);
				var manager = row.insertCell(2);
				var company = row.insertCell(3);

				var user = row.insertCell(0);

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

				if(gr.manager){
					var rec = new GlideRecord('sys_user');
					rec.get(gr.manager);
					manager.innerHTML = rec.name;
				}
				if(gr.company){
					var rec1 = new GlideRecord('core_company');
					rec1.get(gr.company);
					company.innerHTML = gr.name;
				}

				if(gr.email)
					email.innerHTML = gr.email;

				if(gr.country)
					country.innerHTML = gr.country;

				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 = "";
	}
}

Regards
Ankur

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

Go to solution
Manoj50
Tera Contributor
In response to Ankur Bawiskar

‎01-29-2022 08:32 AM

Hi Ankur,

 The above code worked for me.

thanks for the help

 

0 Helpfuls

Go to solution
Ankur Bawiskar
Tera Patron
Tera Patron
In response to Manoj50

‎01-29-2022 08:36 AM

Glad to know.

Please mark response helpful as well.

Regards
Ankur

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

Go to solution
Manoj50
Tera Contributor
In response to Ankur Bawiskar

‎01-31-2022 07:54 PM

Hi @Ankur

 

I have created one more button called "Print" if i click on the print the data which was displaying should download as PDF and attachment should store in one of ServiceNow table.

can you please help me on this.

Thanks in advance

0 Helpfuls

Go to solution
reddy8055
Tera Contributor
In response to Ankur Bawiskar

‎11-13-2022 05:56 PM

Hi,

Is client script onload or onchange? I have similar requirement and i am using this script.

Thanks,

0 Helpfuls