How to create ui page that is used in Ui action.

Roshini · ‎10-21-2024

Hi Team,
I have a requirement to create a UI action name "On hold" and once the on hold is clicked a Ui page should popup and it will ask the user to select
1) on hold reason :- drop down with values awaiting caller, awaiting change, awaiting problem
2) due date
3) based on the on hold reason selected "caller name (text field), change number (reference field to change table), problem number (reference field to problem) needs to be dispalyed.

And the same values which is passed in the UI page needs to be updated in the form as well.

Can some one help me with this

Chaitanya Redd1 · ‎10-21-2024

Hi,

Create a client callable script include as shown below>

var OnHoldProcessor = Class.create();
OnHoldProcessor.prototype = Object.extendsObject(AbstractAjaxProcessor, {
    processOnHold: function() {
        var sys_id = this.getParameter('sys_id');
        var on_hold_reason = this.getParameter('on_hold_reason');
        var due_date = this.getParameter('due_date');
        var caller_name = this.getParameter('caller_name');
        var change_number = this.getParameter('change_number');
        var problem_number = this.getParameter('problem_number');

        var gr = new GlideRecord('incident'); // Change to your table
        if (gr.get(sys_id)) {
            gr.setValue('on_hold_reason', on_hold_reason);
            gr.setValue('due_date', due_date);

            if (on_hold_reason == 'awaiting_caller') {
                gr.setValue('caller', caller_name);
            } else if (on_hold_reason == 'awaiting_change') {
                gr.setValue('change_number', change_number);
            } else if (on_hold_reason == 'awaiting_problem') {
                gr.setValue('problem_number', problem_number);
            }

            gr.update();
        }

        return 'success';
    }
});

UI Page:

Name: on_hold_ui_page
HTML:

<g:ui_page>
   <script type="text/javascript">
       // Function to handle On Hold reason selection
       function onHoldReasonChange() {
           var reason = g_form.getValue('on_hold_reason');
           if (reason == 'awaiting_caller') {
               document.getElementById('caller_name').style.display = 'block';
               document.getElementById('change_number').style.display = 'none';
               document.getElementById('problem_number').style.display = 'none';
           } else if (reason == 'awaiting_change') {
               document.getElementById('caller_name').style.display = 'none';
               document.getElementById('change_number').style.display = 'block';
               document.getElementById('problem_number').style.display = 'none';
           } else if (reason == 'awaiting_problem') {
               document.getElementById('caller_name').style.display = 'none';
               document.getElementById('change_number').style.display = 'none';
               document.getElementById('problem_number').style.display = 'block';
           }
       }
   </script>
   
   <div>
      <label for="on_hold_reason">On Hold Reason:</label>
      <select id="on_hold_reason" name="on_hold_reason" onchange="onHoldReasonChange()">
          <option value="">--Select--</option>
          <option value="awaiting_caller">Awaiting Caller</option>
          <option value="awaiting_change">Awaiting Change</option>
          <option value="awaiting_problem">Awaiting Problem</option>
      </select>
   </div>

   <div>
      <label for="due_date">Due Date:</label>
      <input type="date" id="due_date" name="due_date"/>
   </div>

   <div id="caller_name" style="display:none;">
      <label for="caller">Caller Name:</label>
      <input type="text" id="caller" name="caller"/>
   </div>

   <div id="change_number" style="display:none;">
      <label for="change_number">Change Number:</label>
      <input type="text" id="change_number" name="change_number"/>
   </div>

   <div id="problem_number" style="display:none;">
      <label for="problem_number">Problem Number:</label>
      <input type="text" id="problem_number" name="problem_number"/>
   </div>

   <div>
      <button onclick="saveOnHoldDetails()">Save</button>
      <button onclick="closeDialog()">Cancel</button>
   </div>

   <script type="text/javascript">
       function saveOnHoldDetails() {
           var sys_id = '${sys_id}';
           var onHoldReason = document.getElementById('on_hold_reason').value;
           var dueDate = document.getElementById('due_date').value;
           var caller = document.getElementById('caller').value;
           var changeNumber = document.getElementById('change_number').value;
           var problemNumber = document.getElementById('problem_number').value;

           // Make an AJAX call to update the record
           var ga = new GlideAjax('OnHoldProcessor'); // GlideAjax to process the data
           ga.addParam('sys_id', sys_id);
           ga.addParam('on_hold_reason', onHoldReason);
           ga.addParam('due_date', dueDate);
           ga.addParam('caller_name', caller);
           ga.addParam('change_number', changeNumber);
           ga.addParam('problem_number', problemNumber);
           ga.getXMLAnswer(function(response) {
               closeDialog();
               g_form.refresh(); // Refresh the form after update
           });
       }

       function closeDialog() {
           // Close the dialog
           GlideDialogWindow.get().destroy();
       }
   </script>
</g:ui_page>

UI Action:

Name: On Hold
Table: The table where you want this action (e.g., Incident, Task)
Action name: on_hold
Condition: Add conditions if necessary to show the button only in certain states or roles.

// Open the UI page using GlideDialogWindow or spModal depending on your UI (Service Portal or Platform)
function onHoldAction() {
    var dialog = new GlideDialogWindow('on_hold_ui_page'); // UI Page name
    dialog.setTitle('Set On Hold');
    dialog.setSize(500, 600);
    dialog.setPreference('sys_id', g_form.getUniqueValue()); // Pass the sys_id of the record
    dialog.render();
}

Thanks,

Chaitanya

Roshini · ‎10-21-2024

Thank you so much for your detailed script.
But i tried the same, with copy paste also. But the On hold ui action is not even giving me the dialog window.
Am getting below when am clicking on hold

Chaitanya Redd1 · ‎10-24-2024

Hi,

UI Action:

function onHoldAction() {
    var dialog = new GlideDialogWindow('on_hold_ui_page'); // Ensure this is the exact UI page name
    dialog.setTitle('Set On Hold');
    dialog.setSize(500, 600);
    dialog.setPreference('sys_id', g_form.getUniqueValue()); // Pass the sys_id of the current record
    dialog.render();
}

The UI Page name 'on_hold_ui_page' matches exactly with the name of the UI page

UI Page:

<g:ui_page>
   <script type="text/javascript">
       function onHoldReasonChange() {
           var reason = document.getElementById('on_hold_reason').value;
           document.getElementById('caller_name').style.display = (reason == 'awaiting_caller') ? 'block' : 'none';
           document.getElementById('change_number').style.display = (reason == 'awaiting_change') ? 'block' : 'none';
           document.getElementById('problem_number').style.display = (reason == 'awaiting_problem') ? 'block' : 'none';
       }
   </script>

   <div>
      <label for="on_hold_reason">On Hold Reason:</label>
      <select id="on_hold_reason" name="on_hold_reason" onchange="onHoldReasonChange()">
          <option value="">--Select--</option>
          <option value="awaiting_caller">Awaiting Caller</option>
          <option value="awaiting_change">Awaiting Change</option>
          <option value="awaiting_problem">Awaiting Problem</option>
      </select>
   </div>

   <div>
      <label for="due_date">Due Date:</label>
      <input type="date" id="due_date" name="due_date"/>
   </div>

   <div id="caller_name" style="display:none;">
      <label for="caller">Caller Name:</label>
      <input type="text" id="caller" name="caller"/>
   </div>

   <div id="change_number" style="display:none;">
      <label for="change_number">Change Number:</label>
      <input type="text" id="change_number" name="change_number"/>
   </div>

   <div id="problem_number" style="display:none;">
      <label for="problem_number">Problem Number:</label>
      <input type="text" id="problem_number" name="problem_number"/>
   </div>

   <div>
      <button onclick="saveOnHoldDetails()">Save</button>
      <button onclick="closeDialog()">Cancel</button>
   </div>

   <script type="text/javascript">
       function saveOnHoldDetails() {
           var sys_id = g_dialog.get('sys_id'); // Use g_dialog to get the sys_id preference
           var onHoldReason = document.getElementById('on_hold_reason').value;
           var dueDate = document.getElementById('due_date').value;
           var caller = document.getElementById('caller').value;
           var changeNumber = document.getElementById('change_number').value;
           var problemNumber = document.getElementById('problem_number').value;

           // Use GlideAjax to call the script include
           var ga = new GlideAjax('OnHoldProcessor');
           ga.addParam('sys_id', sys_id);
           ga.addParam('on_hold_reason', onHoldReason);
           ga.addParam('due_date', dueDate);
           ga.addParam('caller_name', caller);
           ga.addParam('change_number', changeNumber);
           ga.addParam('problem_number', problemNumber);

           // Get the response and handle it
           ga.getXMLAnswer(function(response) {
               closeDialog();  // Close the dialog once the data is processed
               g_form.refresh();  // Refresh the form to reflect the updates
           });
       }

       function closeDialog() {
           // Close the dialog window
           GlideDialogWindow.get().destroy();
       }
   </script>
</g:ui_page>

Using g_dialog.get() to access preferences: This retrieves the passed sys_id properly.
Correctly handling dynamic fields: The onHoldReasonChange() function handles showing and hiding the correct fields based on the selected reason.
AJAX Call: The saveOnHoldDetails() function makes an AJAX call to your server-side Script Include

Script Include: Looks fine just check it's client callable or not