UI action popup window

[chandusnow2]

When the user clicks the "Pause" UI action:

1. A popup should appear.
2. In the popup, a list of pause reasons (as selectable options) should be displayed.
3. If the user selects the option "Other" from the list:
   • A text field should dynamically appear within the same popup.
   • This text field allows the user to enter a custom pause reason.

[Bhavya11]

Hi @chandusnow2 ,

you can try something like below 

1. Create UI page below code for HTML

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:sn="smartn" xmlns:r="render">
    <g:ui_form>
        <div style="padding: 10px;">
            <p>Please select a reason for pausing this task:</p>
            
            <select id="pause_reason" name="pause_reason" class="form-control" onchange="reasonChanged()">
                <option value="">-- Select Reason --</option>
                <option value="Awaiting Customer">Awaiting Customer </option>
                <option value="System Maintenance">System Maintenance</option>
                <option value="Resource Unavailability">Resource Unavailability</option>
                <option value="Other">Other</option>
            </select>
            
            <div id="other_reason_div" style="display: none; margin-top: 15px;">
                <label for="other_reason">Custom Pause Reason:</label>
                <textarea id="other_reason" name="other_reason" class="form-control" rows="3" title="Custom Pause Reason"></textarea>
            </div>
            
            <div style="margin-top: 20px; text-align: right;">
                <g:dialog_buttons_ok_cancel ok="return validateAndSubmit()" cancel="cancelPause()"/>
            </div>
        </div>
    </g:ui_form>
</j:jelly>

Client script:

// Function called when the Pause Reason selection changes
function reasonChanged() {
    var reason = gel('pause_reason').value;
    var otherDiv = gel('other_reason_div');

    if (reason == 'Other') {
        otherDiv.style.display = 'block'; // Show the text field
    } else {
        otherDiv.style.display = 'none'; // Hide it
        gel('other_reason').value = ''; // Clear it if hidden
    }
}

// Function called when the OK button is clicked
function validateAndSubmit() {
    var reason = gel('pause_reason').value;
    var customReason = gel('other_reason').value.trim();

    if (reason == '') {
        alert('Please select a pause reason.');
        return false; // Prevent submission
    }

    if (reason == 'Other' && customReason == '') {
        alert('Please enter a custom pause reason.');
        return false; // Prevent submission
    }
    
    // Pass the final reason back to the UI Action's calling function
    var finalReason = (reason == 'Other') ? customReason : reason;
    
    // The GlideDialogWindow.get().destroy() closes the dialog
    GlideDialogWindow.get().destroy();
    
    if (typeof proceedPause == 'function') {
        proceedPause(finalReason);
    }
    
    return false; 

function cancelPause() {
    GlideDialogWindow.get().destroy();
}

2. Create ui action and call that ui page in script

function openPauseDialog() {
    var dialog = new GlideModal('YOUR_UI_PAGE_NAME', false, 500, 200); // Use the name of the UI Page you created
    dialog.setTitle('Enter Pause Reason');
    dialog.render();
}

function proceedPause(reason) {
    // For example, you can use a field or work_notes for logging.
    g_form.setValue('work_notes', reason); 
    }

If this information proves useful, kindly mark it as helpful or accepted solution.

Thanks,

BK

[Ankur Bawiskar]

@chandusnow2 

so what did you start with and where are you stuck?

This involves UI page logic

check these links

GlideDialogWindow: Advanced Popups Using UI Pages 

GlideDialog Window Example 

You can also use any AI tool to generate the script.

If my response helped please mark it correct and close the thread so that it benefits future readers.