Can we get records from table in Ui Page ?

Snehal13 · ‎07-30-2024

I have to get records from incident table on ui page. The ui page has a date field and a button. When users provides date and clicks on button, it must return rhe incidents created on that date.

I used glideajax and get response, how to parse response. Stuck at parsing the response and showing proper data in loop

Bhavya11 · ‎07-30-2024

hi @Snehal13 ,

Please try below code in UI page

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide">
    <html>
        <head>
            <title>Incident Search</title>
            <script type="text/javascript">
                function getIncidents(){
                    var dateField = document.getElementById('date_field').value;
                    if (!dateField) {
                        alert('Please select a date.');
                        return;
                    }

                    var ga = new GlideAjax('IncidentFetcher');
                    ga.addParam('sysparm_name', 'getIncidentsByDate');
                    ga.addParam('sysparm_date', dateField);
                    ga.getXMLAnswer(function(response) {
                        var resultsDiv = document.getElementById('results');
                        resultsDiv.innerHTML = '';
                        var incidents = JSON.parse(response);
                        if (incidents.length === 0) {
                            resultsDiv.innerHTML = '<p>No incidents found for the selected date.</p>';
                            return;
                        }
                        var table = '<table><tr><th>Number</th><th>Short Description</th><th>Created</th></tr>';
                        incidents.forEach(function(incident) {
                            table += '<tr><td>' + incident.number + '</td><td>' + incident.short_description + '</td><td>' + incident.sys_created_on + '</td></tr>';
                        });
                        table += '</table>';
                        resultsDiv.innerHTML = table;
                    });
                }
            </script>
        </head>
        <body>
            <h2>Search Incidents by Date</h2>
            <div>
                <label for="date_field">Enter Date (YYYY-MM-DD):</label>
                <input type="date" id="date_field" name="date_field"/>
                <button onclick="getIncidents()">Get Incidents</button>
            </div>
            <div id="results"></div>
        </body>
    </html>
</j:jelly>

Script include: Client callable script

var IncidentFetcher = Class.create();
IncidentFetcher.prototype = Object.extendsObject(AbstractAjaxProcessor, {
   getIncidentsByDate: function() {
        var date = this.getParameter('sysparm_date');
        var gr = new GlideRecord('incident');
        gr.addQuery('sys_created_on', '>=', date + ' 00:00:00');
        gr.addQuery('sys_created_on', '<=', date + ' 23:59:59');
        gr.query();
        
        var incidents = [];
        while (gr.next()) {
            incidents.push({
                number: gr.getValue('number'),
                short_description: gr.getValue('short_description'),
                sys_created_on: gr.getValue('sys_created_on')
            });
        }
        
        return JSON.stringify(incidents);
    }
});

Output:

Please mark helpful & correct answer if it's really worthy for you.

Thanks,

BK