Create a record to a table when user put the inputs in a pop up window form

Poorva Bhawsar
Mega Sage

Hi Community,

I have a ui action on incident form. When user clicks on this ui action, it will display a pop up window with some fields to be filled in and to create a record in a table.

Pasting my code below:

UI Action:

Table: Incident

Action name: Register Time Worked

Show insert, show update, client and form button checked.

Onclick: registercall()

Script:

function registercall() {
var gdw = new GlideDialogWindow('time_worked_popup');
    gdw.setSize(750,300);
    gdw.setPreference('sys_id',g_form.getUniqueValue());
    gdw.render();
}
 
UI Page:
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">
    <!-- <g:evaluate>
            var tableName = RP.getWindowProperties().get('task_time_worked');  // Getting the Target Table Name for which the operation needs to be done
            tableName;
    </g:evaluate> -->

    <table>
    <tr>
    <td style="width:40%">
    <g:form_label><b>User:</b></g:form_label>      
    </td>
    <td style="width:100%">
        <g:ui_reference name="user" id="user" query="active=true" table="sys_user"/>
    </td>
    </tr>
    </table>

    <g:evaluate>
    <table>
    <tr>
    <td class ="paddingBetweenCols" style="width:25%">
        var choices = new GlideRecord('sys_choice'); //Querying the choice table to get the values which needs to be displayed in the Dialog Box
        choices.addQuery('name', task_time_worked);
        choices.addQuery('u_action', 'u_choice_type'); //Give your Field Name created which needs to be displayed in the UI Page which opens on click on UI action
        choices.addQuery('inactive', false);
        choices.orderBy('sequence');
        choices.query();
        choices;
    </td>
    </tr>
    </table>
    </g:evaluate>
    <table>
        <tr>
            <td style="width:55%">
                <label for="action"> <b>Action:</b> </label>
            </td>
            <td>
                <select id="action">
                    <option value="" selected="selected"> --Select-- </option>
                    <option value=""> Meeting </option>
                    <option value=""> Troubleshoot </option>
                    <option value=""> Investigation </option>
                    <option value=""> Outcall </option>
                    <option value=""> Incall </option>
                    <j:while test="${choices.next()}">
                        <option value="${choices.value}">${choices.label}</option>
                    </j:while>
                </select>
            </td>
           
        </tr>

        <table>
        <tr>
            <td style="width:100%">
            <b>Call Responded:</b> <g:ui_checkbox name="call responded" id="callrespon"/>
            </td>
        </tr>
        </table>

        <table>
        <tr>
            <td style="width:100%">
            <b>Call Not-Responded:</b> <g:ui_checkbox name="call not responded" id="callnotrespon"/>
            </td>
        </tr>
        </table>

        <table>
            <tr>
            <td style="width:25%" id="timeworked">
            <g:form_label><b>Time worked:</b></g:form_label>
            </td>
            <td><b>Days</b><input type="text" id="days" onChange="validateHours(this.value)"/></td>
            <td><b>Hours</b><input type="number" min="0" max="23" id="hours" onChange="validateHours(this.value)"/></td>
            <td><input type="number" min="0" max="59" id="minutes" onChange="validateMinutes(this.value)"/></td>
            <td><input type="number" min="0" max="59" id="seconds" onChange="validateSeconds(this.value)"/></td>
            </tr>
        </table>

        <table>
            <tr>
            <td style="width:44%">
            <g:form_label><b>Comments:</b></g:form_label>
            </td>
            <td style="width:60%">
                <input type="text" aria-label="comments" name="comments" id="comments" maxlength="25"/>
            </td>
            </tr>
        </table>
   
        <tr>
            <td colspan="2" style="text-align:right;padding-top:10px;">
                <button class="btn btn-default" onclick="closeWindow()" style="margin-right:10px;">Cancel</button>
                <button class="btn btn-primary" onclick="update_ticket()">Ok</button>
            </td>
        </tr>
       
    </table>
   

</j:jelly>
 
Client Script:
function closeWindow() {
    GlideDialogWindow.get().destroy();
}

function update_ticket() {
    var gr = new GlideRecord('task_time_worked');
    gr.initialize();
    gr.newRecord();
    gr.user=current.user;
    //gel('user').value;
    gr.action=current.action;
    gr.u_call_responded=current.u_call_responded;
    gr.u_call_not_responded= current.u_call_not_responded;
    gr.time_worked = current.time_worked;
    gr.comments = current.comments;
    gr.insert();
    //GlideDialogWindow.get().destroy();
}
 
I am able to click on the button on incident form and then its displaying the pop up window with some fields in it.
PoorvaBhawsar_0-1700726064340.png

 

When user clicks on cancel button, its cancelling this window. When user clicks on ok button its doing nothing, even its not submitting the details which user has entered on this form.

I want to create a record in a table when user clicks on ok button and map these fields to those fields which are there in that table.

 

Thanks,

Poorva Bhawsar

 

1 REPLY 1

Amit Gujarathi
Giga Sage
Giga Sage

HI @Poorva Bhawsar ,
I trust you are doing great.
It seems like your UI Action and UI Page setup in ServiceNow are functioning correctly, but there's an issue with the update_ticket client script that is supposed to create a record in the task_time_worked table. The problem likely lies in the way you are trying to capture and send the form data to the server.

 

Your current update_ticket function needs to be modified to correctly capture form data. Here’s a revised version:

function update_ticket() {
    var user = document.getElementById('user').value;
    var action = document.getElementById('action').value;
    var call_responded = document.getElementById('callrespon').checked;
    var call_not_responded = document.getElementById('callnotrespon').checked;
    var days = document.getElementById('days').value;
    var hours = document.getElementById('hours').value;
    var minutes = document.getElementById('minutes').value;
    var seconds = document.getElementById('seconds').value;
    var comments = document.getElementById('comments').value;

    var time_worked = calculateTimeWorked(days, hours, minutes, seconds);

    var gr = new GlideRecord('task_time_worked');
    gr.initialize();
    gr.setValue('user', user);
    gr.setValue('action', action);
    gr.setValue('u_call_responded', call_responded);
    gr.setValue('u_call_not_responded', call_not_responded);
    gr.setValue('time_worked', time_worked);
    gr.setValue('comments', comments);
    gr.insert();
}

You need a function to calculate the time worked based on days, hours, minutes, and seconds. Here's an example:

function calculateTimeWorked(days, hours, minutes, seconds) {
    // Convert everything to seconds and sum up
    var totalSeconds = parseInt(days) * 86400 + parseInt(hours) * 3600 + parseInt(minutes) * 60 + parseInt(seconds);
    return totalSeconds; // You can format this as needed
}

Was this answer helpful?


Please consider marking it correct or helpful.


Your feedback helps us improve!


Thank you!


Regards,


Amit Gujrathi