Edit UI Page consume_a_consumable to include a simple boolean field: True or False

Jimmy45
Giga Guru

Good early morning Developers!

 

I have a task given by my customer.  Essentially, they want a Boolean Field added to the consume_a_consumable ui page that pops up when you consume a consumable.  Below is the default OOB consume_a_consumable ui page that pops up when you click Consume on a Consumable.

What they are looking for:

 

If I mark the boolean value as true, they want the consumed record that is created to have that same value in it in the u_eoc_consumed boolean value marked as True as well.

 

I understand that the ui page for consume_a_consumable is jelly scripting.  Here is the HTML:

<g:ui_form>
<input type="hidden" id="cancelled" name="cancelled" value="false"/>
<input type="hidden" id="consumable" name="consumable" value="${sysparm_sys_id}"/>
<input type="hidden" id="total_qty" name="total_qty" value="${sysparm_total_qty}"/>
<input type="hidden" id="from_workspace" name="from_workspace" value="false"/>

<table width="100%" style="border-spacing:10px; height:100px;">
<tr>
<td rowspan="5" nowrap="true" width="110px" style="vertical-align:top;">
<img src="images/plugin_activate.gifx" alt="${gs.getMessage('Activate/Upgrade')}" style="vertical-align:top;" />
</td>
</tr>
<tr>
<td style="width:150px; text-align:right;"><label>${gs.getMessage('From stockroom:')}$[SP]</label></td>
<td><label style="margin:9px;">${sysparm_stockroom}</label></td>
</tr>
<tr >
<td style="text-align:right;"><label>${gs.getMessage('Quantity:')}$[SP]</label></td>
<td><input class="form-control" id="qty" name="qty" value="1" label="" type="text" style="margin:9px; width:inherit;"/></td>
</tr>
<tr>
<td style="text-align:right;"><label for="${jvar_asset_query}" onclick="" dir="">${gs.getMessage('Asset:')}$[SP]</label></td>
<td><g:ui_reference name="alm_hardware" table="alm_hardware"/></td>
</tr>
<tr>
<td style="text-align:right;"><label for="${jvar_user_query}" onclick="" dir="">${gs.getMessage('User:')}$[SP]</label></td>
<td><g:ui_reference name="sys_user" table="sys_user"/></td>
</tr>

<tr id="dialogbuttons">
<td colspan="3" align="right" style="padding-right:10px;">
<g:dialog_buttons_ok_cancel ok="return actionOK();" cancel="cancel();"/>
</td>
</tr>
</table>
</g:ui_form>

Here is the Client Script

function cancel() {
var c = gel('cancelled');
c.value = "true";

// Only destroy the window when user is on platform view
if (!isActionFromWorkspace())
GlideDialogWindow.get().destroy();
}

function actionOK() {
var total_quantity = gel('total_qty').value;
var quantity = gel('qty').value;
var asset_id = gel('alm_hardware').value;
var user_id = gel('sys_user').value;

total_quantity = parseInt(total_quantity, 10);
quantity = parseInt(quantity, 10);

isActionFromWorkspace();

if (quantity > total_quantity) {
alert(getMessage("Please enter a number less than or equal to the number in stock"));
return false;
} else if (quantity < 1) {
alert(getMessage("Please enter a number for the quantity"));
return false;
} /*else if (asset_id == '' && user_id == '') {
alert(getMessage("Please select an asset or a user to attach the consumed items to"));
return false;
}*/ else {
var form = document.forms['form.' + '${sys_id}'];
addInput(form, "HIDDEN", "asset", asset_id);
addInput(form, "HIDDEN", "user", user_id);
return true;
}
}

/**
* Determine if the action performed was from platform or on workspace
*/
function isActionFromWorkspace() {
var fromWorkspace = getParmVal('from_workspace') === "true";

// Set the hidden input field that determined whether or not the
// submission was from platform or workspace
var c = gel('from_workspace');

if (fromWorkspace)
c.value = "true";
else
c.value = "false";

return fromWorkspace;
}

/**
* Helper function to get the parameter values from the URL
*
* @param {string} name of the url parameter to fetch
*/
function getParmVal(name) {
var url = document.URL.parseQuery();
if (url[name]) {
return decodeURI(url[name]);
}
return;
}

And the Processing Script

if (cancelled == "false" /*&& (asset != "" || user != "")*/) {
var new_sys_id = new Consumables().splitForeground(consumable, qty, '10', '', asset, '', '', user);
}

if (from_workspace !== "true")
response.sendRedirect("alm_consumable.do?sys_id=" + consumable);

 

Any ideas on how I can not only add that Field to the the the ui page (no worries, I will create a new ui page and insert/stay) and then pass the value on to the consumed record that is created?  I am new to the development world, so all the help or guidance you can provide will strengthen my knowledge even further.  Thank you!

 

1 ACCEPTED SOLUTION

Ankur Bawiskar
Tera Patron
Tera Patron

Hi,

update UI page HTML as below; highlighted in bold is updated code

<g:ui_form>
<input type="hidden" id="cancelled" name="cancelled" value="false"/>
<input type="hidden" id="consumable" name="consumable" value="${sysparm_sys_id}"/>
<input type="hidden" id="total_qty" name="total_qty" value="${sysparm_total_qty}"/>
<input type="hidden" id="from_workspace" name="from_workspace" value="false"/>

<table width="100%" style="border-spacing:10px; height:100px;">
<tr>
<td rowspan="6" nowrap="true" width="110px" style="vertical-align:top;">
<img src="images/plugin_activate.gifx" alt="${gs.getMessage('Activate/Upgrade')}" style="vertical-align:top;" />
</td>
</tr>
<tr>
<td style="width:150px; text-align:right;"><label>${gs.getMessage('From stockroom:')}$[SP]</label></td>
<td><label style="margin:9px;">${sysparm_stockroom}</label></td>
</tr>
<tr >
<td style="text-align:right;"><label>${gs.getMessage('Quantity:')}$[SP]</label></td>
<td><input class="form-control" id="qty" name="qty" value="1" label="" type="text" style="margin:9px; width:inherit;"/></td>
</tr>
<tr>
<td style="text-align:right;"><label for="${jvar_asset_query}" onclick="" dir="">${gs.getMessage('Asset:')}$[SP]</label></td>
<td><g:ui_reference name="alm_hardware" table="alm_hardware"/></td>
</tr>
<tr>
<td style="text-align:right;"><label for="${jvar_user_query}" onclick="" dir="">${gs.getMessage('User:')}$[SP]</label></td>
<td><g:ui_reference name="sys_user" table="sys_user"/></td>
</tr>

<tr>
<td style="text-align:right;"><label onclick="" dir="">EOC Consumed:</label></td>
<td><g:ui_checkbox name="consumed_checkbox"/></td>
</tr>

<tr id="dialogbuttons">
<td colspan="3" align="right" style="padding-right:10px;">
<g:dialog_buttons_ok_cancel ok="return actionOK();" cancel="cancel();"/>
</td>
</tr>
</table>
</g:ui_form>

it looks like this;

find_real_file.png

Mark Correct if this solves your issue and also mark 👍 Helpful if you find my response worthy based on the impact.
Thanks
Ankur

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

View solution in original post

2 REPLIES 2

Ankur Bawiskar
Tera Patron
Tera Patron

Hi,

update UI page HTML as below; highlighted in bold is updated code

<g:ui_form>
<input type="hidden" id="cancelled" name="cancelled" value="false"/>
<input type="hidden" id="consumable" name="consumable" value="${sysparm_sys_id}"/>
<input type="hidden" id="total_qty" name="total_qty" value="${sysparm_total_qty}"/>
<input type="hidden" id="from_workspace" name="from_workspace" value="false"/>

<table width="100%" style="border-spacing:10px; height:100px;">
<tr>
<td rowspan="6" nowrap="true" width="110px" style="vertical-align:top;">
<img src="images/plugin_activate.gifx" alt="${gs.getMessage('Activate/Upgrade')}" style="vertical-align:top;" />
</td>
</tr>
<tr>
<td style="width:150px; text-align:right;"><label>${gs.getMessage('From stockroom:')}$[SP]</label></td>
<td><label style="margin:9px;">${sysparm_stockroom}</label></td>
</tr>
<tr >
<td style="text-align:right;"><label>${gs.getMessage('Quantity:')}$[SP]</label></td>
<td><input class="form-control" id="qty" name="qty" value="1" label="" type="text" style="margin:9px; width:inherit;"/></td>
</tr>
<tr>
<td style="text-align:right;"><label for="${jvar_asset_query}" onclick="" dir="">${gs.getMessage('Asset:')}$[SP]</label></td>
<td><g:ui_reference name="alm_hardware" table="alm_hardware"/></td>
</tr>
<tr>
<td style="text-align:right;"><label for="${jvar_user_query}" onclick="" dir="">${gs.getMessage('User:')}$[SP]</label></td>
<td><g:ui_reference name="sys_user" table="sys_user"/></td>
</tr>

<tr>
<td style="text-align:right;"><label onclick="" dir="">EOC Consumed:</label></td>
<td><g:ui_checkbox name="consumed_checkbox"/></td>
</tr>

<tr id="dialogbuttons">
<td colspan="3" align="right" style="padding-right:10px;">
<g:dialog_buttons_ok_cancel ok="return actionOK();" cancel="cancel();"/>
</td>
</tr>
</table>
</g:ui_form>

it looks like this;

find_real_file.png

Mark Correct if this solves your issue and also mark 👍 Helpful if you find my response worthy based on the impact.
Thanks
Ankur

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

Thx Ankur.

That really helped.

I am wondering if you can help me with adding the value of the Location field added on the pop up to the consumable record's location field

 

Raj