Fetch data into ui page dynamically

Shiva Kumar8 · ‎02-08-2022

Hi Community,

I'm creating a Ui page(see the attached) for consumables the issue is when I select the stock room the model field should show only the models available in that stockroom, can someone please help me how to write the code for the above condition.

Thanks in advance.

Ankur Bawiskar · ‎02-08-2022

Hi,

update as this

HTML:
<td>Stockroom: </td>
<td> <g:ui_reference name="stockroom" id="stockroom" table="alm_stockroom" completer="AJAXTableCompleter" onchange="fetchModels()"/></td>
</tr>
<tr>
<td>Model: </td>
<td>
<g:ui_reference name="model" id="model" table="alm_consumable"/></td>
</tr>

Client Script:

function fetchModels(){
var stockroomValue = gel('stockroom').value;
var models = gel('lookup.model');
var modelArray = [];
var gr = new GlideRecord("alm_consumable");
gr.addQuery("stockroom", stockroomValue);
gr.query();
while (gr.next()) {
modelArray.push(gr.sys_id.toString());
}
models.setAttribute('onclick',"mousePositionSave(event); reflistOpen( 'model', 'not', 'alm_consumable', '', 'false','QUERY:active=true', 'sys_idIN" + modelArray+ "', '')");
}

Regards
Ankur

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

View solution in original post

Shiva Kumar8 · ‎02-08-2022

Hi Ankur,

I also have another question can you please help.

we have a custom dropdown field called catalog category in "alm_consumable" table can you please help how to fetch that field and its values in the UI page, please find the attached snip.

Thank you very much.

Shiva Kumar8 · ‎02-08-2022

Hi Ankur,

I also have another question can you please help.

we have a custom dropdown field called catalog category in "alm_consumable" table can you please help how to fetch that field and its values in the UI page, please find the attached snip.

Thank you very much.

Ankur Bawiskar · ‎02-08-2022

this link has the solution

https://community.servicenow.com/community?id=community_question&sys_id=1e4e25a9dbb4d3000e3dfb651f96...

Something like this

<g:evaluate jelly="true" object="true">
	var rec = new GlideRecord('sys_choice');
	rec.addQuery('table', 'alm_consumable');
	rec.addQuery('element', 'u_catalog_category');
	rec.query();
	rec;
</g:evaluate>

<select name="tables" id="selected1">
	<j:while test="${rec.next()}">
		<option value="${rec.value}">${rec.label}</option>
	</j:while>
</select>

Regards
Ankur

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

Shiva Kumar8 · ‎02-08-2022

Hi Ankur,

Thanks for the help, I have one small thing pending How to write the processing script so that a consumable can be assigned to the user and the count(quantity) gets decreased in the respective stockroom. I'm sharing my HTML and client script below please find the attached document for reference.

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>
		<html>
			<body>
				<input type="hidden" name="hold_or_submit" id="hold_or_submit" value="" />
				<input type="hidden" name="start_error" id="start_error" value="false" />
				<input type="hidden" name="end_error" id="end_error" value="false" />		

				<!-- Get values from dialog preferences passed in -->
				<j:set var="jvar_name" value="${RP.getWindowProperties().get('name')}" />
				<table style="border-spacing:0 5px">
					<tr> 
						<td>User name: </td>
						<td> <g:ui_reference name="username" id="username" value="${jvar_name}"/></td>
					</tr>
					<tr>
						<td>Stockroom: </td>
						<td> <g:ui_reference name="stockroom" id="stockroom" table="alm_stockroom" completer="AJAXTableCompleter" onchange="fetchModels()"/></td>
					</tr>
					<tr>
						<td>Model: </td>
						<td>
							<g:ui_reference name="model" id="model" table="alm_consumable"/></td>
					</tr>
					<tr>
						<td>Model category: </td>
						<td> <g:ui_reference name="cmdb_model_category" id="modelCategory" table="cmdb_model_category" query="sys_created_by!=system^name=consumable"/></td>
					</tr>
					<tr>
						<g:evaluate jelly="true" object="true">
						var rec = new GlideRecord('sys_choice');
						rec.addQuery('table', 'alm_consumable');
						rec.addQuery('element', 'u_catalog_category');
						rec.query();
						rec;
						</g:evaluate>
						<td>Catalog category: </td>
							<td> <select name="tables" id="catalogCategory">
							<option value="">-- Select --</option>
								<j:while test="${rec.next()}">
							<option value="${rec.value}">${rec.label}</option>
							</j:while>
								</select></td>
					</tr>
					<tr>
						<td>Installed date: </td>
						<td> <g:ui_date_time name="installDate" id="installDate" table='alm_comsumable' field='install_date'/></td>
					</tr>
					<tr>
						<td>Quantity: </td>
						<td> <input type="number" id="quantity" name="quantity" min="1" max="10"
									table="alm_consumable" /></td>
						<!--<g:ui_date_time name="Quantity" id="Quantity" table='alm_comsumable' displayValue="$[quantity]"/>-->
					</tr>
								</table>

				<br/>
				<div id="dvTable" style="display:none">
					<iframe id="alm_asset" name="alm_asset" src="" style="overflow: hidden; height: 100%;
																		  width: 100%; position: absolute;" height="100%" width="100%"></iframe>
				</div>

				<g:dialog_button id="cancel" title="${gs.getMessage('Cancel')}" type="${jvar_cancel_type}"
										 style_class="btn btn-default" onclick="return cancelConvert();" style="min-width: 5em;">${gs.getMessage('Cancel')}</g:dialog_button>

						<g:dialog_button id="submit_for_review" title="${gs.getMessage('submitting')}"
										 type="${jvar_cancel_type}" style_class="btn btn-primary" onclick="return cancelSubmit();"
										 style="min-width: 5em;">${gs.getMessage('Submit')}</g:dialog_button>
			</body>
		</html>
	</g:ui_form>
</j:jelly>

Client script

function fetchModels(){
  var stockroomValue = gel('stockroom').value;
  var models = gel('lookup.model');
  var modelArray = [];
  var gr = new GlideRecord("alm_consumable");
  gr.addQuery("stockroom", stockroomValue);
  gr.query();
  while (gr.next()) {
  modelArray.push(gr.sys_id.toString());
  }
  models.setAttribute('onclick',"mousePositionSave(event); reflistOpen( 'model', 'not', 'alm_consumable', '', 'false','QUERY:active=true','sys_idIN" + modelArray+ "', '')");
}

function cancelSubmit(){
var c = gel('hold_or_submit');
	c.value = "submit";

	var startError = gel('start_error');
	var endError = gel('end_error');

	if(startError.value == "false" && endError.value == "false")
	{			 
		var submit_for_review = document.getElementById("submit_for_review");
		submit_for_review.style.display = "none";		   
		return true;
	}
	else return false;	
}

function cancelConvert() {
	var c = gel('hold_or_submit');
	c.value = "cancel";
	return true;
}

Ankur Bawiskar · ‎02-08-2022

@Shiva Kumar

Glad to know that my script worked.

Please mark response helpful as well.

Regards
Ankur

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