Not able to copy description with line Breaks from UI Action to UI Page

Deepika18
Tera Guru

Hi All,

 

I have created an UI Action on Case form to create a Incident with all the information available on Case.

 

As "Service Offering" is not available on Case I have created a dialog box using UI Page and GlideModal asking for service offering.

 

But now everything is fine except the description is not getting copied with Line breaks. The Line breaks are getting disappeared in HTML in UI Page. 

Requesting you to help me with this issue.
@Ankur Bawiskar 

1 ACCEPTED SOLUTION

@Deepika18 

I was able to use solution from that link and used text area in HTML

UI Action:

AnkurBawiskar_0-1750859534856.png

 

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>
		<g:evaluate var="jvar_sysid"
					expression="RP.getWindowProperties().get('sysid')"/> 

					
Description: <textarea id="description" rows="10" cols="30" name="description" value=""/>
			</g:ui_form>
</j:jelly>

Client Script:

addLoadEvent(function(){
	var m = GlideModal.prototype.get("showHTMLLineBreaks");
	var p = m.getPreference("description");
	document.getElementById("description").innerHTML = p; //create div with same id in HTML and set the innerHTML to the preference we grabbed from the Client Script
});

Output

AnkurBawiskar_1-1750859587296.png

 

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

Regards,
Ankur
Certified Technical Architect  ||  9x ServiceNow MVP  ||  ServiceNow Community Leader

View solution in original post

11 REPLIES 11

Ankur Bawiskar
Tera Patron
Tera Patron

@Deepika18 

you need to handle it separately if description field is HTML type

please share your UI action and UI page code

also check this

"Simple Modal Confirm" UI Page 

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

Regards,
Ankur
Certified Technical Architect  ||  9x ServiceNow MVP  ||  ServiceNow Community Leader

@Ankur Bawiskar Sure Please find the below

UI Page HTML :

 

<g:ui_form>
    <input type="hidden" aria-hidden="true" name="case_sys_id" value="$[sysparm_sys_id]" />
     <input type="hidden" aria-hidden="true" name="inc_short_description" value="$[sysparm_short_description]" />
     <input type="hidden" aria-hidden="true" name="inc_description" value="$[sysparm_description]" />
    <input type="hidden" aria-hidden="true" name="assignment_group" value="$[sysparm_assignmentGrp]" />
    <input type="hidden" aria-hidden="true" name="assigned_to" value="$[sysparm_assignedTo]" />
    <input type="hidden" aria-hidden="true" name="inc_caller_id" value="$[sysparm_callerID]" />


    <!-- the missing mandatory fields error message text -->
    <g2:evaluate jelly="true" object="true">
        var mandatory_msg = "The following mandatory fields are not filled in:";
    </g2:evaluate>
    <input type="hidden" aria-hidden="true" id="mandatory_msg" name="mandatory_msg" value="$[HTML:mandatory_msg]" />

    <!-- mandatory fields error message -->
    <div style="display: none;" id="mandatory_error_msg_div" class="outputmsg_div" aria-live="polite" role="region" data-server-messages="false">
        <div id="output_messages" class="outputmsg_container">
            <button aria-label="Clear message" title="Clear message" id="close-messages-btn" class="btn btn-icon close icon-cross" onclick="uAcmeHideErrorMessage(); return false;" />
            <div class="outputmsg_div" aria-live="polite" role="region" data-server-messages="false">
                <div role="alert" class="outputmsg outputmsg_error notification notification-error">
                    <span class="notification-icon icon-cross-circle">
                        <span class="sr-only"></span>
                    </span>
                    <span id="mandatory_error_msg" class="outputmsg_text"></span>
                </div>
            </div>
        </div>
        <br />
    </div>

    <div>
        Select the Service Offering.
    </div>

    <br />

    <div class="form-horizontal">
        <!-- Group picker -->
        <div class="form-group is-required" id="group_picker_wrapper">
            <label class="col-sm-12 col-md-4 control-label" for="group_picker">
                <span mandatory="true" class="required-marker label_description" />
                <span id="group_picker_label" title="Service Offering">
                    Service Offering
                </span>
            </label>
            <div class="col-sm-12 col-md-4 form-field input_controls">
                <div class="is-required" style="width:450px">
                    <g2:ui_reference id="group_picker" name="group_picker" table="service_offering" order_by="name" show_popup="false" completer="AJAXTableCompleter" onchange="uAcmeFieldOnChange('group_picker')" />
                </div>
            </div>
        </div>
    </div>

    <!-- action buttons -->
    <div class="modal-footer">
        <span class="pull-right">
            <g:dialog_buttons_ok_cancel ok="return uAcmeActionOk();" />
        </span>
    </div>

</g:ui_form>
 
Client script :
 
(function() {
    try {

        document.activeElement.blur();


        document.getElementById("sys_display.group_picker").focus();


        uAcmeFieldOnChange("group_picker");
        alert(typeof group_picker);

    } catch (err) {}
})();



function uAcmeFieldOnChange(fieldName) {
    var field = $(fieldName);
    var wrapper = $(fieldName + "_wrapper");

    if (!field.value.trim()) {
        wrapper.removeClassName('is-filled');
    } else {
        wrapper.addClassName('is-filled');
    }
}


function uAcmeHideErrorMessage() {
    try {
        document.getElementById("mandatory_error_msg_div").style.display = "none";
    } catch (err) {}
}


function uAcmeActionOk() {
    var result = true;
    var missingData = [];

    //verify the mandatory fields have been filled in
    try {
        gelObject = gel("group_picker");
        if (gelObject.value.trim() == "") {
            result = false;
            missingData.push(document.getElementById("group_picker_label").innerHTML);
        }
    } catch (err) {
        return false;
    }

    if (!result) {
        document.getElementById("mandatory_error_msg").innerHTML = gel("mandatory_msg").value + " " + missingData.join(", ");
        document.getElementById("mandatory_error_msg_div").style.display = "block";
    }

    alert(typeof group_picker);
    return result;
}
 
Processing Script :
 
(function() {
    //run on the server to create the new Incident
    var caseId = typeof case_sys_id !== "undefined" ? case_sys_id : "";
    var shortDescription = typeof inc_short_description !== "undefined" ? inc_short_description : "";
    var description = typeof inc_description !== "undefined" ? inc_description : "";
    var serviceOffering = typeof group_picker !== "undefined" ? group_picker : "";
    var assignmentGroup = typeof assignment_group !== "undefined" ? assignment_group : "";
    var assignedTo = typeof assigned_to !== "undefined" ? assigned_to : "";
    var caller = typeof inc_caller_id !== "undefined" ? inc_caller_id : "";

    gs.log("Deepika " + inc_description);


    if (serviceOffering) {
        var inc = new GlideRecord("incident");
        inc.newRecord();
        inc.setValue("u_case", caseId);
        inc.setValue("service_offering", serviceOffering);
        inc.setValue("short_description", shortDescription);
        inc.setValue("description", description);
        inc.setValue("assignment_group", assignmentGroup);
        inc.setValue("assigned_to", assignedTo);
        inc.setValue("caller_id", caller);
        if (inc.insert()) {

            var inci = inc.getUniqueValue();
            var caseNum = new GlideRecord('sn_customerservice_case');
            caseNum.addQuery('sys_id', caseId);
            caseNum.query();

            if (caseNum.next()) {
                caseNum.setValue("incident", inci);
                caseNum.update();
            }
            response.sendRedirect(inc.getLink()); //redirect to the new incident

        } else {

            gs.addErrorMessage("Could not create a new Incident");
            var urlOnStack = GlideSession.get().getStack().bottom();
            response.sendRedirect(urlOnStack);
        }
    }

})();
 
 
 
UI Action :
 
function copyCaseToIncident() {

    var sysId = g_form.getUniqueValue();

    var caseDesc = g_form.getValue('description') ;
    alert(caseDesc);

    var openedBy = new GlideAjax('getOpenedBy');
    openedBy.addParam('sysparm_name', 'openBy');
    openedBy.addParam('sysparm_caseID', sysId);
    openedBy.getXMLWait();
    var user = openedBy.getAnswer();

    var createIncWindow = new GlideModal("CreateIncident");
    createIncWindow.setTitle("Create Incident");
    createIncWindow.setBackdropStatic(true);
    createIncWindow.setWidth(700);
    createIncWindow.setPreference("sysparm_sys_id", sysId);
    createIncWindow.setPreference("sysparm_short_description", g_form.getValue("short_description"));
    createIncWindow.setPreference("sysparm_description", caseDesc);
    createIncWindow.setPreference("sysparm_assignedTo", g_form.getValue("assigned_to"));
    createIncWindow.setPreference("sysparm_assignmentGrp", g_form.getValue("assignment_group"));
    createIncWindow.setPreference("sysparm_callerID", user);
    createIncWindow.render();
}

@Deepika18 

is description field HTML or string type?

share screenshots of what's coming in UI page and what do you expect?

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

Regards,
Ankur
Certified Technical Architect  ||  9x ServiceNow MVP  ||  ServiceNow Community Leader

@Ankur Bawiskar 
This is in the description of Case

Deepika18_0-1750855516573.png

and this is the result in Incident form.

Deepika18_1-1750855538504.png


Expected : I want it to be the same way as it is in the case form