Scripting Help with UI Action and UI Page

Su522 · ‎06-21-2024

Would someone please help with the scripting for a UI Action and a UI Page.

We have a UI Action on the 'Interaction table' called "Create Incident"

When this UI Action is clicked > it auto closes the Interaction and creates an Incident (this is working)

What is needed is a popup box before the Incident is created > the pop up will have 1 mandatory field, for text input for a "Comment"

see screenshot

The text "Comment" that is input into the pop up needs to be copied to the Incident 'Description' field.

Here is the code that I have so far:

UI Action Script:

var gm = new GlideModal("get_desc_new_incident", false, 'modal-sm');

gm.setTitle("Please provide additional comments");

// gm.setPreference("short_description", short_description);

gm.setWidth(150);

gm.render();

g_form.submit("ws_create_incident"); });

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:ui_form>

<div >

<span style="padding:16px;font-weight:bold;">Please provide additional comments</span>

</div>

</div>

Cancel

</button>

OK

</button>

</span>

</div>

</g:ui_form>

</j:jelly>

Needed:

How can we resize the popup? And where in the code? (Needs to be smaller)

How can we call the UI Page from the UI Action (this is not working)

How can we take the "Comment" text input and insert it into the newly created Incident?

Help is greatly appreciated!!!

Thank you

HrishabhKumar · ‎06-21-2024

Hi @Su522 ,

Based on your questions I have provided some modification in logic and script, try this.

1. You have to resize the Popup

To resize the popup, you can set the width and height in your GlideModal configuration.

2. Then call the UI Page from the UI Action

You need to correctly call the UI Page and ensure the modal shows up with the desired properties.

3. Insert the "Comment" text input into the newly created Incident

You'll need to pass the input from the UI Page back to the UI Action script and use it to create the Incident.

Modification in script

UI Action Script

var gm = new GlideModal("get_desc_new_incident", false, 'modal-sm');
gm.setTitle("Please provide additional comments");
gm.setPreference("sys_id", g_form.getUniqueValue());
gm.setWidth(300); // Set desired width
gm.setHeight(200); // Set desired height
gm.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:ui_form>
        <input id="clientData" name="clientData" value="${RP.getWindowProperties().get('clientData')}" type="hidden" />
        <input type="hidden" id="sys_id" name="sys_id" value="${sys_id}" />
        
        <div class="row">
            <div>
                <span style="padding:16px;font-weight:bold;">Please provide additional comments</span>
            </div>
        </div>
        <div class="row">
            <div class="form-horizontal">
                <div class="form-group" style="margin-left:16px !important;margin-right:16px !important">
                    <textarea id="comments" name="comments" class="form-control" spellcheck="true" style="overflow: hidden; word-wrap: break-word; resize: none;" required="required"></textarea>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <span class="pull-right">
                <button class="btn btn-default" id="cancel_button" onclick="window.GlideModalForm.prototype.locate(this).destroy(); return false" style="min-width: 5em;" title="" type="submit">
                    Cancel
                </button>
                <button class="btn btn-primary" id="ok_button" onclick="actionOK()" style="min-width: 5em;" title="" type="submit">
                    OK
                </button>
            </span>
        </div>
    </g:ui_form>

    <script type="text/javascript">
        function actionOK() {
            var comments = document.getElementById('comments').value;
            var sysId = document.getElementById('sys_id').value;
            
            // Pass data back to the server-side script
            GlideAjax.getMessage({
                'sys_id': sysId,
                'comments': comments
            }, function(response) {
                window.GlideModalForm.prototype.locate(this).destroy();
                g_form.submit('ws_create_incident');
            });
        }
    </script>
</j:jelly>

Server-Side Script

Create a GlideAjax script include to handle the server-side processing of the comment and incident creation:

var CreateIncidentWithComment = Class.create();
CreateIncidentWithComment.prototype = Object.extendsObject(AbstractAjaxProcessor, {
    createIncident: function() {
        var sysId = this.getParameter('sys_id');
        var comments = this.getParameter('comments');
        
        // Get the interaction record
        var interaction = new GlideRecord('interaction');
        if (interaction.get(sysId)) {
            // Create new incident
            var incident = new GlideRecord('incident');
            incident.initialize();
            incident.short_description = interaction.short_description; // or any other fields you want to copy
            incident.description = comments; // Set the description field to the comments
            
            var newIncidentSysId = incident.insert();
            
            // Close the interaction
            interaction.state = 'closed';
            interaction.update();
            
            return newIncidentSysId;
        }
    }
});

This is how all three works together:

UI Action Script: Initializes and renders the modal with the required size.
UI Page HTML: Contains a form for comment input and a script to handle form submission, which sends the input back to the server.
Server-Side Script: Processes the comment, creates the incident, and closes the interaction.

Thanks,

Hope this helps.

If my response proves helpful please mark it helpful and accept it as solution to close this thread.

Su522 · ‎06-24-2024

@HrishabhKumar Thank you very much! I'm trying this now...

How do I use a GlideAjax callback in the UI Action?