UI Page not rendering when passing parameters from UI action

ray evans · ‎06-30-2023

Hi

I have a UI action (client with Onclick) on Incident, in which I am trying to pass the SysId and CI to a UI page. However, the dialog window does not render unless I remove the "dialog.addParam" lines

function updateAsset(){

var sys_id = g_form.getUniqueValue();

var dialog = new GlideDialogWindow('update_asset');

dialog.setTitle("Update Asset");

dialog.setHeight(800);

dialog.setWidth(600);

dialog.addParam('sys_id', sys_id);

dialog.addParam('ci', cmdb_ci);

dialog.render();

}

Can someone please point me in the right direction as to what I'm doing wrong? And also how to populate fields on the UI page with these values?

Thanks

Ray

ray evans · ‎07-03-2023

@Ankur Bawiskar

My apologies - here is the code that works other than populating the incident field

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">

<style>
  .float-container {
    color: #4a4d4b;
    width: 600px;
    border-radius: 0px;
  }
  
  .float-child {
    padding:30px;
    width: 300px;
    float: left;
  }
  
  label.required::before {
    content: '*';
    margin-right: 4px;
    color: red;
  }
  
  label.notrequired::before {
    content: '*';
    margin-right: 4px;
    color: grey;
  }
  
  .submit {
   background :#245ba3; 
   color: #ffffff 
   }
</style>

<body>

<!-- Build Form and Fields -->
<g:ui_form action="/update_asset.php">
  <div class="float-container">
    <h3>Update Asset</h3>
    
    <div class="float-child">
      <label id="incident_label" for="incident">Incident:</label>
      <g:ui_reference class="form-control" name="incident" id="incident" table="incident" onload="onLoad()"    />
      
      <label id="old_asset_label" for="old_asset">Old Asset:</label>
      <g:ui_reference class="form-control" name="old_asset" id="old_asset" table="alm_asset" onchange="onChange_asset()" required="required" />

      <label id="new_asset_label" for="new_asset">New Asset:</label>
      <g:ui_reference class="form-control" name="new_asset" id="new_asset" table="alm_asset" onchange="onChange_asset()" />

      <label id="new_asset_tag_label" for="new_asset_tag">New Asset Tag:</label>
      <input class="form-control" type="text" id="new_asset_tag" name="new_asset_tag" onchange="onChange_asset()"></input>

      <br></br>

      <g:dialog_buttons_ok_cancel ok_id="submitData"
                                 ok_type="button"
                                 ok_text="${gs.getMessage('Submit')}"
                                 ok_style_class="btn btn-primary"
                                 cancel_type="button"
                                 cancel_id="cancelData"
                                 cancel_style_class="btn btn-default"/>
    </div>
   
    <div class="float-child">
      <label id="assigned_to_label" for="assigned_to">Assigned to:</label>
      <g:ui_reference class="form-control" type="reference" id="assigned_to" name="assigned_to" table="sys_user"/>
      <label id="location_label" for="location">Location:</label>
      <g:ui_reference class="form-control" type="reference" id="location" name="location" table="cmn_location" />
      <label id="department_label" name="department">Department:</label>
      <g:ui_reference class="form-control" type="reference" id="department" name="department"/>
      <label id="comments_label" name="comments">Comments:</label>
      <textarea class="form-control" id="comments" name="comments"></textarea>
    </div>
  </div>
  </g:ui_form>
  


<script>
function onLoad() {
  console.log("onLoad event fired");

  // Retrieve the sys_id from URL parameters
  var urlParams = new URLSearchParams(window.location.search);
  var sysId = urlParams.get('sys_id');

  console.log("sysId:", sysId);

  // Create a new instance of GlideRecord
  var gr = new GlideRecord('incident');
  gr.addQuery('sys_id', sysId);
  gr.query();

  if (gr.next()) {
    var fieldValue = gr.getValue('number');
    console.log("Matching Record Found:", fieldValue);

    // Set the value of the 'incident' field directly
    document.getElementById('incident').value = fieldValue;
    console.log("Field value set:", document.getElementById('incident').value);

    // Set the value of the 'incident' field using a callback function
    g_form.addInfoMessage('Setting field value...');
    g_form.setValue('incident', fieldValue);
    console.log("Field value set:", g_form.getValue('incident'));
  } else {
    console.error("Incident record not found with sys_id:", sysId);
  }
}

// The onLoad() function will be automatically invoked when the page loads
onLoad();
</script>


</body>
</j:jelly>

Client Script:

onLoad();

//document.getElementById('incident').setAttribute("value", "required");
document.getElementById('old_asset_label').setAttribute("class", "required");
document.getElementById('new_asset_label').setAttribute("class", "required");
document.getElementById('new_asset_tag_label').setAttribute("class", "notrequired");//Sets the class on the label to provide the asterisks for required value
document.getElementById('assigned_to_label').setAttribute("class", "required");
document.getElementById('location_label').setAttribute("class", "required");
document.getElementById('department_label').setAttribute("class", "required");
document.getElementById('comments_label').setAttribute("class", "required");




	

//Function to set "New Asset Tag" field to mandatory if the asset tag doesn't start with "NHSG".
function onChange_asset(){
	
    var oldAsset = document.getElementById('old_asset').value;
	if (oldAsset != ""){
		//alert(oldAsset);
		document.getElementById('old_asset_label').setAttribute("class", "notrequired");
	}
	
	if (oldAsset == ""){
		// alert("oldAsset");
		document.getElementById('old_asset_label').setAttribute("class", "required");
		document.getElementById('old_asset').setAttribute("mandatory", "true");
	}	
	
	var assetTag = document.getElementById("new_asset").value;//Get the SysId of the asset in the "New Asset" field
	
	//check if the asset field is not empty for the onChange script to run
	if (assetTag != ""){
		document.getElementById('new_asset_label').setAttribute("class", "notrequired");
		var gr = new GlideRecord("alm_asset");//Lookup the asset using the SysId
		gr.addQuery("sys_id", assetTag);
		gr.query();
		while (gr.next()) {
			//alert(gr.asset_tag);
			var assetTag2 = gr.asset_tag.substring(0,4);//Get the first 4 characters from the "Asset Tag" field on the record
		
			if (assetTag2 != "NHSG") {
				//set "New Asset Tag mandatory to true"
				document.getElementById('new_asset_tag_label').setAttribute("class", "required");
				document.getElementById('new_asset_tag').setAttribute("required", "true");
			}
			var newAssetTag = document.getElementById('new_asset_tag').value;
		
			if (assetTag2 == "NHSG" ||newAssetTag != "") {
				//set "New Asset Tag mandatory to false"
				document.getElementById('new_asset_tag_label').setAttribute("class", "notrequired");
				document.getElementById('new_asset_tag').removeAttribute("required");
			}
		}
	}

		var user = document.getElementById('assigned_to').value;
		if (user != ""){
			//alert(user);
			document.getElementById('assigned_to_label').setAttribute("class", "notrequired");
				
		}
		if (user == ""){
			// alert(user);
			document.getElementById('assigned_to_label').setAttribute("class", "required");
		}	

		var location = document.getElementById('location').value;
		if (location != ""){
			//alert(location);
			document.getElementById('location_label').setAttribute("class", "notrequired");
			document.getElementById('assigned_to_label').setAttribute("class", "notrequired");
		}
		if (location == ""){
			// alert(location);
			document.getElementById('location_label').setAttribute("class", "required");
		}

		var dept = document.getElementById('department').value;	
		if (dept != ""){
			// alert(dept);
			document.getElementById('department_label').setAttribute("class", "notrequired");
		}
		if (dept == ""){
			//alert(dept);
			document.getElementById('department_label').setAttribute("class", "required");
			}

		var comments = document.getElementById('comments').value;
		if (comments != ""){
			//alert(comments);
			document.getElementById('comments_label').setAttribute("class", "notrequired");
		}
		if (comments == ""){
			// alert(comments);
			document.getElementById('comments_label').setAttribute("class", "required");
		}
}
     
function continueOK(){
	var oldAsset = document.getElementById('old_asset').value;
	var assetTag = document.getElementById("new_asset").value;
	var newAssetTag = document.getElementById('new_asset_tag').value;
	var user = document.getElementById('assigned_to').value;
	var location = document.getElementById('location').value;
	var dept = document.getElementById('department').value;	
	var comments = document.getElementById('comments').value;
	// var newAssetTag = document.getElementById('new_asset_tag').value;
	
	if (oldAsset == ""||assetTag == ""||location == ""|| dept == ""||comments == ""){
		//alert(oldAsset);
		// document.getElementById('old_asset_label').setAttribute("class", "notrequired");
	//	alert('Please complete mandatory fields.');
		return false;
	}
	
	
	if(newAssetTag != ""){
		
		var gr2=new GlideRecord("alm_asset");
		gr2.addQuery("sys_id",oldAsset);
		gr2.query();
	
		while(gr2.next()){ 
			var gr=new GlideRecord("alm_asset");
			gr.addQuery("sys_id",assetTag);
			gr.query();
	
			while(gr.next()){
			var old=gr2.asset_tag;
		
			gr.asset_tag=newAssetTag;
			alert(gr.asset_tag);
			gr.location=location;
			gr.department=dept;
		//	gr.update;
			gr.assigned_to=user;
			gr.substatus= "--none--";
			gr.install_status= "1";
		//	gr.update;
			gr.comments = "Replaced " + old + " - " + comments;
			gr.company = "71f448c71b720510349f40c4e34bcbd3";
			
			gr.update();
			}
		}
	}
	if(newAssetTag == ""){
		//alert("test");
		var gr4=new GlideRecord("alm_asset");
			gr4.addQuery("sys_id",oldAsset);
			gr4.query();
	
		while(gr4.next()){ 
			var gr3=new GlideRecord("alm_asset");
			gr3.addQuery("sys_id",assetTag);
			gr3.query();
		
			while(gr3.next()){
				var old2 = gr4.asset_tag;
				gr3.location=location;
				gr3.department=dept;
			//	gr3.update;
				gr3.assigned_to=user;
				gr3.substatus= "--none--";
				gr3.install_status= "1";
			//	gr3.update;
				gr3.comments = "Replaced " + old2 + " - " + comments;
				gr3.company = "71f448c71b720510349f40c4e34bcbd3";
				
				gr3.update();
			}
		}
	
	}

	if(oldAsset != ""){
		//alert("test");
		var gr6=new GlideRecord("alm_asset");
			gr6.addQuery("sys_id",assetTag);
			gr6.query();
	
		while(gr6.next()){ 
			var gr5=new GlideRecord("alm_asset");
			gr5.addQuery("sys_id",oldAsset);
			gr5.query();
		
			while(gr5.next()){
				var replacement = gr6.asset_tag;
				gr5.location=location;
				gr5.department=dept;
				//gr5.update;
				gr5.substatus= "pending_disposal";
				gr5.install_status= "7";
				gr5.disposal_reason = comments;
			//	gr5.update;
				gr5.comments = "Replaced by " + replacement + " - " + comments;
				gr5.company = "71f448c71b720510349f40c4e34bcbd3";
				
				gr5.update();
			}
		}
	
	}
	
//	alert("Assets updated");
	GlideDialogWindow.get().destroy(); //Close the dialog window
//alert("Assets updated");: " + "/n " + old + " /n" + "State: Retired " + "/n"+  "Substate: Pending Disposal" + "/n" + "Disposal Reason: " + commments + "/n + New Asset: " + replacement);
}

		//alert(gr.asset_tag);
//alert('Please enter a comment');
	//alert("Please complete mandatory fields");
//}
function continueCancel(){
	GlideDialogWindow.get().destroy(); //Close the dialog window
}


  
  
  
  
  
  
 

 
//If comments are empty stop submission
//alert("New asset tag is required.");///use this on submit

//If comments are not empty do this...
//GlideDialogWindow.get().destroy(); //Close the dialog window
//g_form.setValue("comments", comments); //Set the 'Comments' field with comments in the dialog

Ankur Bawiskar · ‎07-03-2023

@ray evans

try this

gr.incident = fieldValue;
gr.update();

ray evans · ‎07-03-2023

@Ankur Bawiskar where should I place this line? I'm not looking to update the incident record?