logo

NJP

Glide Modal Forms

Import · Feb 04, 2020 · article

Glide Modal Forms are a great way of avoiding confusion with users struggling with "insert and stay" as they make it abundantly clear that a new record has been created. Angular modal windows look great and allow you to avoid any Jelly XML madness.

In this example, we'll use the GlideModalForm API to clone a change task (replacing the OOB version). The advantage of this method is we can (1) automatically change values like the state, as who wants to clone a closed task to become another closed task and (2) we can give the user the opportunity to update values as needed.

image

Here's our code

function copyCurrentTask() {

    //isolate script needs to be disabled for this script to work as we need access to jQuery
    var jQuery = this.jQuery;
    //find all the elements visible on this page
    var allFields = jQuery('[id*="element."]');
    //the table name will always be the middle of the id (for example, element.incident.number)
    var thisTable = allFields[0].id.match(/element\.([\S\s]+)\./)[1];
    var valuePairs = '';

    //Loop through the fields and build up a list of values to be displayed on our cloned record
    this.jQuery.each(allFields,function(field){
        var fieldName = allFields[field].id.replace('element.'+thisTable+'.','');
        var fieldValue = fieldName=='state' ? '1' : g_form.getValue(fieldName);//we always want the state to be open (no point cloning a closed record)

        if(fieldName !='number' || fieldValue!=''){
            valuePairs+= fieldName + '=' + fieldValue+'^';
        }
    });

    //Use Glide Modal to display our cloned form
    var d = new GlideModalForm('Copy Change Task', thisTable,glideModalComplete);
    d.addParm('sysparm_query', valuePairs);//here's where we pass our values to the modal record (which would otherwise be blank)
    d.setOnloadCallback(glideModalOnLoad);
    d.render();

    function glideModalOnLoad(glideForm){
        //On Load we want to hide the "Copy Task" button to avoid any confusion
        jQuery("#dialog_frame").contents().find("button:contains('Copy Task')").css('visibility','hidden');
    }

    function glideModalComplete(action_verb, sys_id, table, displayValue){
        //On complete, we want to navigate back to the previous screen (which will be the change record itself)
        g_navigation.openRecord('change_request', g_form.getValue('change_request'));
    }

}

I've attached the UI Action to this article, but please be aware, this will overwrite the default action (which is server side rather than client side)

Have fun

View original source

https://www.servicenow.com/community/now-platform-articles/glide-modal-forms/ta-p/2326642