How to create a dynamic modal on forms

[Paul Sisson]

I'd like to start by telling you I am no expert, and can't assure you that these tips are "ServiceNow approved". 

What I CAN tell you is, it worked. I hope this helps you in your ServiceNow journey. Have a great day blessed by Jesus Christ.

UI Action (button):

The main configuration point that mattered here was Client being checked, and the name of your function in the Script field being invoked in the Onclick field.

Then I wrote some code in the Script field:

function openDynamicModal() {
    var ga = new GlideAjax('getDynamicContent');
    var value = g_form.getValue('the_value_i_need_from_the_form');
    ga.addParam('sysparm_name', 'nameOfAJAXMethod');
    ga.addParam('sysparm_value', value);
   // Add more values like this as needed...then call AJAX
    ga.getXMLAnswer(function(response) {
        var data = JSON.parse(response);

        var modal = new GlideModal('name_from _ui_page');
        modal.setTitle('Title of modal', false, 500); // second param sets Read-Only to false, third sets modal size

        // Pass data to modal
        modal.setPreference('sysparm_value_from_ajax', data.value_from_ajax);
        modal.setPreference('sysparm_message_from_ajax', data.message_from_ajax);

        modal.render();
    });
}

UI Page

The main important configuration option here is the name. Make sure it matches what you're using in you GlideModal() invocation.

Then I wrote some code in the HTML field

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:j2="null" xmlns:g="glide" xmlns:g2="null">
   // getting our data here (use g2 to avoid caching issues)
    <g2:evaluate var="jvar_value" expression="RP.getParameterValue('sysparm_value_from_ajax')" />
    <g2:evaluate var="jvar_message" expression="RP.getParameterValue('sysparm_message_from_ajax')" />
    <style>
       /* styling stuff  */
    </style>

   <!-- Conditional rendering based on values we retrieved -->
    <j2:if test="$[jvar_value == 'data we wanted']">
                <div>
                    <p>$[jvar_value]</p>
                </div>
                <div id="message">
                    
                <div>
                    <button id="show_message_btn" onclick="seeMessage();" type="button">Show Message</button>
                </div>
    </j2:if>
    <!-- end conditional rendering -->
    <!-- fallback content -->
    <j2:if test="$[jvar_value != 'data we wanted']">
        <p>Some error message</p>
    </j2:if>
    <script>
        window.message_is_being_shown = false;

        function seeMessage() {
            if (!window.message_is_being_shown) {
                var message = 
                var newHTML = "<p>$[jvar_message]</p>";
                document.getElementById('message').innerHTML = newHTML;
                document.getElementById('show_message_btn').innerText = "Hide Message";
                window.message_is_being_shown = true;
            } else {
                document.getElementById('message').innerHTML = "<p>Click<span>Show Message</span>to view the message</p>"
                document.getElementById('show_message_btn').innerText = "Show Message";
                window.message_is_being_shown = false;
            }
        }
    </script>
</j:jelly>

AJAX Script Include (Script Include with Client Callable checked)

nameOfAJAXMethod: function() {
        var result = {
            value: "",
            message: "",
        };

        // Get values from UI Action (ga.addParam('sysparm_value', value))
         var value = this.getParameter('sysparm_value');
         // Do your ServiceNow magic here... queries, updates, whatever...

	result.value = "value your logic produced or whatever";
        result.message = "whatever you want here too, you can also expand this as much as you want with different properties"

            return new global.JSON().encode(result);
		}

[ankitbanerj]

Hi @Paul Sisson , sandbox enabled field should be checked. Kindly conifrm.

[Paul Sisson]

I don't have Sandbox enabled checked on my Script Include. Sorry brother.

[Ankur Bawiskar]

@Paul Sisson 

what was your business requirement and please do share screenshots so that it helps members.

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

[Paul Sisson]

My specific requirement was to provide data about the current state of one of our (lengthier) processes, where a flow has several "Wait for Condition" actions.

The enduser was meant to be able to see, where the flow currently was (via the value of a field on a record related to the RITM), what action needed to be taken to move the flow along in an approval fashion (along with a button to take that action), and what action needed to be taken to stop/reject the next phase (again with a button to take that action).

Won't be sharing any screenshots as I am not sure how comfortable my company is with me sharing our internal instance code.