How to make field read only in ui page until value is not selected

keshav77 · ‎01-31-2025

Hi All,

I want to make fields only read-only on the basis of selection of that the second filed become editable.

for example I created 3 fields 1. caller and 2. caller department and 3. call location.

Now I want caller department and caller location should be readonly until caller is selected how I can do that in ui page .

Ankur Bawiskar · ‎01-31-2025

@keshav77

it's for UI page?

then do this

1) make the 2nd field readonly by default

2) have onchange event on 1st and if value is not empty then open the 2nd field

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

keshav77 · ‎01-31-2025

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

<style>

.card {

border: 1px solid #ccc;

border-radius: 0.2px;

padding: 10px;

width: 100% !important;

}

</style>

<g:evaluate var="jvar_sysid" expression="RP.getWindowProperties().sysparm_sys_id" />

<g:evaluate var="jvar_vendor_id" expression="RP.getWindowProperties().sysparm_vendor_id" />

<g:evaluate var="jvar_current_assessment_id" expression="RP.getWindowProperties().sysparm_assessment_id" />

<g:evaluate var="jvar_vendor_prefix" expression="RP.getWindowProperties().sys_param_vendor_prefix" />

<g:ui_form>

<label id='title_name'>Assign Selected Findings to Existing Assessment </label>

</div>

<g:ui_reference name="rbu" id="rbu" table="cmn_cost_center" query="u_active=true" onchange="onRbuChange(this)" />

</div>

<label style="font-weight:bold;">Solution Central Asset</label>

</div>

<g:ui_reference name="solution_central_asset" id="solution_central_asset" table="u_cmdb_ci_solution_central_asset"

query="sys_class_name=u_cmdb_ci_solution_central_asset^active=true" onchange="onSolutionchange(this)" />

</div>

<label style="font-weight:bold;">Application Name</label>

</div>

<g:ui_reference name="application_name" id="application_name" table="cmdb_ci" columns="name" query="sys_class_name=cmdb_ci_business_app^active=true" onchange="onAppChange(this)" />

</div>

<label style="font-weight:bold;" title="Select Assessment from the lookup or you can create new assessment using 'Create Assessment Button' to move findings">Assessment Name</label>

</div>

<g:ui_reference name="assessment" id="assessment" table="sn_vul_pen_test_assessment_request" columns="u_assessment_name" columns_search="true"

query="assessment_typeIN1,3^sys_class_name=sn_vul_pen_test_assessment_request^active=true"

onchange="onAssessmentChange(this)" />

</div>

<button id="actionButton" type="button" class="btn btn-primary" onclick="SaveDetails()" style="display:none;font-style:normal !important;margin-right:5px;"><i class="fa fa-floppy-o" aria-hidden="true"></i> Move to Assessment </button>

<button id="btnCancel_Detail" type="reset" class="btn btn-secondary" onclick="onCancel()" style="font-style:none;"><i class="fa fa-times" aria-hidden="true"></i> Cancel </button>

</div>

</g:ui_form>

</div>

</j:jelly> this is my HTML I am trying making once user select RBU Then only solution center is editable and when solution centers selected then application name ad assissment is editable.

var vendorId = $('jVendorId').value;

var vulns = $('jVarId').value;

var vendor_prefix = $('jVendorPrefix').value;

var current_assessment = $('jAssessmentId').value;

var assessment = "";

var applicationId = "";

var solutionCentralAssetId = "";

function onRbuChange(e) {

var jTxt_solution = gel('lookup.solution_central_asset');

jTxt_solution.setAttribute('onclick', "mousePositionSave(event); reflistOpen('solution_central_asset', 'not', 'u_cmdb_ci_solution_central_asset', '', 'false', '', 'sys_class_name=u_cmdb_ci_solution_central_asset^active=true^u_risk_bu=" + e.value + "', '')");

}

// function onSolutionchange(e) {

// solutionCentralAssetId = e.value;

// var jTxt_solution = gel('lookup.application_name');

// jTxt_solution.setAttribute('onclick', "mousePositionSave(event); reflistOpen('application_name', 'not', 'cmdb_ci', '', 'false', '', 'sys_class_name=cmdb_ci_business_app^active=true^u_cmdb_ci_solution_central=" + e.value + "', '')");

//}

function onSolutionchange(e) {

solutionCentralAssetId = e.value;

var jTxt_app = gel('lookup.application_name');

jTxt_app.setAttribute('onclick', "mousePositionSave(event); reflistOpen('application_name', 'not', 'cmdb_ci_business_app', '', 'false', '', 'sys_class_name=cmdb_ci_business_app^active=true^u_solution_central_asset=" + e.value + "', '')");

var jTxt_assessment = gel('lookup.assessment');

jTxt_assessment.setAttribute('onclick', "mousePositionSave(event); reflistOpen('assessment', 'not', 'sn_vul_pen_test_assessment_request', '', 'false', '', 'assessment_typeIN1,3^sys_class_name=sn_vul_pen_test_assessment_request^active=true^u_solution_central_asset=" + e.value + "', '')");

}

function onAppChange(e) {

applicationId = e.value;

var jTxt_assessment = gel('lookup.assessment');

jTxt_assessment.setAttribute('onclick', "mousePositionSave(event); reflistOpen('assessment', 'not', 'sn_vul_pen_test_assessment_request', '', 'false', '', 'assessment_typeIN1,3^sys_class_name=sn_vul_pen_test_assessment_request^active=true^application=" + e.value + "', '')");

}

function onAssessmentChange(e) {

assessment = e.value;

if (e.value != "" && e.value != null) {

jQuery("#actionButton").show();

jQuery("#addButton").hide();

} else {

jQuery("#actionButton").hide();

jQuery("#addButton").show();

}

assessment = document.getElementById('assessment').value;

if (assessment != "" && assessment != null) {

jQuery("#actionButton").show();

jQuery("#addButton").hide();

} else {

jQuery("#actionButton").hide();

jQuery("#addButton").show();

}

function SaveDetails() {

var assessmentId = assessment;

var appId = applicationId;

var findingIds = vulns;

var ga = new GlideAjax('sn_vul.Vulnerability_scripts');

ga.addParam('sysparm_name', 'moveFindings');

ga.addParam('assessmentId', assessmentId);

ga.addParam('applicationId', appId);

ga.addParam('findingIds', findingIds);

ga.getXMLAnswer(function(answer) {

if (answer == "true")

alert("finding moved successfully.");

});

onCancel();

}

gel('solution_central_asset').addEventListener('change', onSolutionCentralAssetChange);

function onCancel() {

GlideDialogWindow.get().destroy();

return false;

} hereis my client script

Ankur Bawiskar · ‎01-31-2025

@keshav77

check this where I have shown how to have dependency on reference fields and enhance it for 3 fields

Change ui reference query

also check this link which says how to make it readonly and editable

making ui reference fields readonly or disabled

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

keshav77 · ‎01-31-2025

I think you not get my requirement I want user need to select caller first in caller filed in ui page then those 2 fields should be editable other wise remain read only