UI Action

Ketan Pandey
Tera Expert

‎08-21-2023 10:04 AM

We have created a custom field called meeting id,also have ui button ..on incident table.

on click ,the ui action should open the ui page.ui page will have grid table ..which will show all meetings records for today in a grid table.user can select any record from the grid and click on the ok button,it will selected meeting id to incident table and close the table

 

please guide how to do this.please share code examples 

0 Helpfuls
  • 248 Views
1 REPLY 1

SwarnadeepNandy
Mega Sage

‎08-21-2023 10:57 AM

Hello @Ketan Pandey,

 

To create a UI page with a grid table that shows the meeting records for today and allows the user to select one and update the incident table, you will need to do the following steps:

The codes maynot exactly fit your purpose, Please make sure to do the due diligence and adapt the code accordingly. 

  • Create a UI page with the name “meeting_selector” and the HTML template as shown below. This template will use a UI macro called “meeting_grid” to display the meeting records in a grid table. You can also customize the style and script of the UI page as you wish.

 

<html>
<head>
    <style>
        /* Add your custom CSS here */
    </style>
</head>
<body>
    <div id="container">
        <h1>Select a meeting</h1>
        <div id="grid">
            <j:include template="meeting_grid"/>
        </div>
        <div id="buttons">
            <button id="ok" onclick="ok()">OK</button>
            <button id="cancel" onclick="cancel()">Cancel</button>
        </div>
    </div>
    <script>
        /* Add your custom JavaScript here */
        function ok() {
            // Get the selected meeting id from the grid
            var meeting_id = getSelectedMeetingId();
            // Close the dialog and pass the meeting id to the parent window
            window.parent.g_form.setValue("meeting_id", meeting_id);
            window.parent.GlideDialogWindow.get().destroy();
        }

        function cancel() {
            // Close the dialog without passing any value
            window.parent.GlideDialogWindow.get().destroy();
        }

        function getSelectedMeetingId() {
            // Loop through the grid rows and find the one that is checked
            var grid = document.getElementById("grid");
            var rows = grid.getElementsByTagName("tr");
            for (var i = 0; i < rows.length; i++) {
                var row = rows[i];
                var checkbox = row.getElementsByTagName("input")[0];
                if (checkbox.checked) {
                    // Return the meeting id from the hidden column
                    return row.getElementsByTagName("td")[1].innerText;
                }
            }
            // Return null if no row is checked
            return null;
        }
    </script>
</body>
</html>
​

 

  • Create a UI macro with the name “meeting_grid” and the XML template as shown below. This template will use GlideRecord to query the meeting table and display the records that match the current date in a grid table. You can also customize the columns and filters of the grid table as you wish.

 

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
    <g:evaluate>
        // Get the current date in yyyy-MM-dd format
        var today = new GlideDate();
        today.setDisplayValue(gs.nowDateTime());
        today.setNumericValue(today.getNumericValue() - today.getNumericValue() % 86400000);
        var todayStr = today.getByFormat("yyyy-MM-dd");
        
        // Query the meeting table for records that match the current date
        var gr = new GlideRecord("meeting");
        gr.addQuery("date", todayStr);
        gr.query();
    </g:evaluate>
    <table id="meeting_grid">
        <thead>
            <tr>
                <th>Select</th>
                <th style="display:none;">Meeting ID</th>
                <th>Meeting Name</th>
                <th>Start Time</th>
                <th>End Time</th>
                <th>Location</th>
                <th>Agenda</th>
            </tr>
        </thead>
        <tbody>
            <j:while test="$gr.next()">
                <tr>
                    <td><input type="radio" name="meeting"/></td>
                    <td style="display:none;">${gr.sys_id}</td>
                    <td>${gr.name}</td>
                    <td>${gr.start_time}</td>
                    <td>${gr.end_time}</td>
                    <td>${gr.location}</td>
                    <td>${gr.agenda}</td>
                </tr> 
            </j:while>   
        </tbody>    
    </table>    
</j:jelly>

 

  • Create a UI action with the name “Select Meeting” and the script as shown below. This script will open a GlideDialogWindow with the UI page “meeting_selector” and pass the current incident sys_id as a parameter. You can also customize the title and size of the dialog window as you wish.

 

function selectMeeting() {
    // Get the current incident sys_id
    var incident_id = g_form.getValue("sys_id");
    
    // Initialize and open the dialog window with the UI page "meeting_selector"
    var dialog = new GlideDialogWindow("meeting_selector");
    dialog.setTitle("Select Meeting");
    dialog.setSize(800, 600);
    dialog.setPreference("incident_id", incident_id);
    dialog.render();
}

 

  • Add the UI action to the incident form and test it. You should be able to see a dialog window with a grid table of meeting records for today. You can select one of them and click OK to update the meeting id field on the incident form. You can also click Cancel to close the dialog window without updating anything.

 

Hope this helps.

 

Again this is a close enough/rough structure. Please adapt the codes accordingly.

 

Feel free to mark the answer correct or helpful.

 

Kind Regards,

Swarnadeep Nandy

0 Helpfuls