Create the UI Action
Navigate to All > System UI > UI Actions
Click New
Name: Show table data
Table: Select your table
Action name: show_pop_up
Client Callable: Yes
Onclick: openModal();
Script:
function openModal() {
var gm = new GlideModal("list_on_popup_page");
gm.setTitle("Table Data");
gm.render();
}
Click Submit
Create the UI Page
Navigate to All > System UI > UI Pages
Click New
Name: list_on_popup_page
Application: Global (or your scoped app)
Category: General
HTML:
<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide">
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<p id="err_message" class="notification notification-error" style="display:none"></p>
<div class="control-label col-sm-12">
<label>Select a Table</label>
</div>
<div class="col-sm-12">
<g:ui_reference
name="target_table_pick"
table="sys_db_object"
completer="AJAXTableCompleter"
columns="name,label"
order_by="label"
onchange="clearErr()" />
</div>
<div class="modal-footer">
<button class="btn btn-primary" onclick="return onShowList();">Show List</button>
</div>
<div id="listContainer" style="margin-top: 20px;"></div>
</body>
</html>
</j:jelly>
Client Script:
function onShowList() {
clearErr();
var sysId = gel('target_table_pick').value.trim();
if (!sysId) {
$j("#err_message").html("Please select a table.").show();
return false;
}
var ga = new GlideAjax('GetTableRecordsAJAX');
ga.addParam('sysparm_name', 'getRecords');
ga.addParam('sysparm_table_sysid', sysId);
ga.getXMLAnswer(function(response) {
$j('#listContainer').html(response);
});
return false;
}
function clearErr() {
$j("#err_message").hide().html("");
}
Click Submit
Create the Script Include
Navigate to All > System Definition > Script Includes
Click New
Name: GetTableRecordsAJAX
API Name: global.GetTableRecordsAJAX
Client Callable: True
Script:
var GetTableRecordsAJAX = Class.create();
GetTableRecordsAJAX.prototype = Object.extendsObject(AbstractAjaxProcessor, {
getRecords: function() {
var sysId = this.getParameter('sysparm_table_sysid');
var gr = new GlideRecord('sys_db_object');
if (!gr.get(sysId)) {
return "<p>Invalid sys_id.</p>";
}
var tableName = gr.getValue('name');
var grData = new GlideRecord(tableName);
grData.setLimit(5);
grData.query();
var html = "<table><tr>";
if (grData.isValidField('number')) html += "<th>number</th>";
if (grData.isValidField('name')) html += "<th>name</th>";
if (grData.isValidField('short_description')) html += "<th>short_description</th>";
if (grData.isValidField('state')) html += "<th>State</th>";
html += "</tr>";
while (grData.next()) {
html += "<tr>";
if (grData.isValidField('number')) html += "<td>" + grData.getValue('number') + "</td>";
if (grData.isValidField('name')) html += "<td>" + grData.getValue('name') + "</td>";
if (grData.isValidField('short_description')) html += "<td>" + grData.getValue('short_description') + "</td>";
if (grData.isValidField('state')) html += "<td>" + grData.getDisplayValue('state') + "</td>";
html += "</tr>";
}
html += "</table>";
return html;
}
});
Click Submit
Result:
