Explaining an OOTB UI page

[gunishi]

Hi there, 

Could someone please provide a line-by-line explanation for this code? I am new to jelly scripting and XML and am trying to recreate something similar for my requirements. 

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:dialog_notes_ok_cancel dialog_id="change_confirm_cancel"

textarea_id="change_confirm_reason_text"

textarea_label="${gs.getMessage('Reason')}"

textarea_label_title="${gs.getMessage('A reason is required to cancel this change')}"

textarea_name="change_confirm_reason_text"

textarea_onkeyup="enableButton()"

textarea_onchange="enableButton()"

textarea_style="height:auto; width: 100%; resize: vertical;"

textarea_title="${gs.getMessage('Enter the reason here')}"

ok=""

ok_action="cancelChangeRequest"

ok_id="change_confirm_ok_btn"

ok_title="${gs.getMessage('Cancel change request')}"

ok_type="button"

ok_style_class="btn btn-primary disabled"

cancel_title="${gs.getMessage('Close the dialog')}"

/>

</j:jelly>

Client script:
function cancelChangeRequest() {

    var textArea = $("change_confirm_reason_text");

    if (textArea)

         moveToCancel(textArea.value.trim());

}

(function() {

    $("change_confirm_reason_text").focus();

})();

Many thanks in advance,

G

[Dr Atul G- LNG]

I already provide you OOTB way mate, not sure why you creating multiple threads of same issue.

[gunishi]

Hi @Dr Atul G- LNG 

I would appreciate if you could refrain from answering my questions in future. 

Your answers have often been aggressive, vague and not helpful. You have also privately messaged to pressure me into accepting your answers as solutions when they have not answered my question or met my requirements. 

I have had to ask questions many times as your responses often discourage others from helping me. 

I have been left feeling patronised and anxious when asking questions and don't think anyone on this platform should be made to feel this way.

I have reported your answers and will not hesitate to do so again if this behaviour continues. Please stop contacting me.

Kind regards, 

G

[Dr Atul G- LNG]

Hi @gunishi 

Thanks for true feedback and I accept this in a positive manner.  I appreciate you took time and provided the feedback to work upon.

Keep Learning N Keep Growing.

[ChrisBurks · Accepted solution]

HTML/XML:

<!-- This first line declares what type of document it is. It is similar to the DOCTYPE for an html page-->
<?xml version="1.0" encoding="utf-8" ?>

<!-- This is the initial jelly tag to tell the system that everything in between may have some jelly code and it sets up namespacing-->
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

<!-- this is actually one line of code. It's a jelly tag that is calling a UI Macro by the name of dialog_notes_ok_cancel. All the attributes on this tag are accepting parameters/values to be placed into the script that this tag brings in. After taking in the inputs it will render what the dialog_notes_ok_cancel macro contains-->
<g:dialog_notes_ok_cancel dialog_id="change_confirm_cancel"

textarea_id="change_confirm_reason_text"

textarea_label="${gs.getMessage('Reason')}"

textarea_label_title="${gs.getMessage('A reason is required to cancel this change')}"

textarea_name="change_confirm_reason_text"

textarea_onkeyup="enableButton()"

textarea_onchange="enableButton()"

textarea_style="height:auto; width: 100%; resize: vertical;"

textarea_title="${gs.getMessage('Enter the reason here')}"

ok=""

ok_action="cancelChangeRequest"

ok_id="change_confirm_ok_btn"

ok_title="${gs.getMessage('Cancel change request')}"

ok_type="button"

ok_style_class="btn btn-primary disabled"

cancel_title="${gs.getMessage('Close the dialog')}"

/>
<!-- The end of the dialog_notes_ok_cancel tag-->

</j:jelly>



 

Client Script:

// A function that will execute when the OK button is clicked
function cancelChangeRequest() {

    var textArea = $("change_confirm_reason_text");

    if (textArea)

         moveToCancel(textArea.value.trim());

}

// an IIFE that puts the focus on the change_confirm_reason_text textarea element
(function() {

    $("change_confirm_reason_text").focus();

})();

You can find the UI Macro within your ServiceNow platform

[gunishi]

Hi @ChrisBurks 

Thank you for taking the time to provide all this information. This has really helped clarify things for me so I appreciate it!

Kind regards, 

G