Need to hide or show field based on option select in UI Page

Sarah Bouil · ‎03-15-2023

Hi,

I have a UI Page as below. I have a requirement when I select 'incident' in Incident Template(reference to incident table) field, the Users field and Download data button should be visible and the Users field and Download data button should hide if there is no incident selected in Incident Template. Kindly help me with code to achieve this.

Allen Andreas · ‎03-15-2023

Hi,

If you have an onChange associated to that field, that will tell it what to execute in client script, such as:

onChange="runFunction(this)"

Then, in the client script, you can specify the script to be ran such as a line like this in your client script to hide those fields/button:

function runFunction(object) {
if (object.value == '') {
gel('field_name').style.display = 'none';
gel('field_name').style.display = 'none';
 } else {
gel('field_name').style.display = '';
gel('field_name').style.display = '';
 }
}

Please consider marking my reply as Helpful and/or Accept Solution, if applicable. Thanks!

Sarah Bouil · ‎03-16-2023

Hi Allen,

Thank you for your reply. Below is the HTML in UI Page.

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

<div style="color:#333333;">
<div class="panel panel-default">

<div class="panel-heading">
<span class="heading">Export Incident</span>
</div>

<div class="row">
<div class="col-sm-8 form-group">

<label class="control-label col-sm-4" for="template">
Incident Template
</label>

<g:ui_reference label="Incident Template" name="incidenttemplate" table="incident" query="active=true" field="name" />
</div>
</div>

<div class="col-sm-8 form-group">
<div>
<label class="control-label col-sm-4" for="offering">
Users
</label>

<g:macro_invoke macro="lightweight_glide_list2" id="users" reference="sys_user" can_write="true" control_name="QUERY:active=true"/>
</div>
</div>

<div class="row" style="margin: 10px;margin-left: 25px;">
<div class="col-sm-8">
<button class="btn btn-primary" onclick="update_ticket()">Download data</button>
</div>
</div>
</form>
</div>
</div>
</div>
</j:jelly>

Could you please help me with how to associate onChange to the Incident Template field?

And Download data is a button, how to get the field name of button to update below.

gel('field_name').style.display = '';

Allen Andreas · ‎03-16-2023

Hello,

For your reference field you'd simply use something like:
onchange="doMyOnChange()"

For the button, you'd want to give it an id such as <button id="dataButton" etc.

Then in the client script to hide the button you can use something like:

document.getElementById("dataButton").style.display = 'none';

Please consider marking my reply as Helpful and/or Accept Solution, if applicable. Thanks!

Sarah Bouil · ‎03-16-2023

Hi Allen,

I tried with below code but no luck.

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

<div style="color:#333333;">
<div class="panel panel-default">

<div class="panel-heading">
<span class="heading">Export Incident</span>
</div>

<div class="row">
<div class="col-sm-8 form-group">

<label class="control-label col-sm-4" for="template">
Incident Template
</label>

<g:ui_reference name="incident_template" id="incident_template" table="incident" query="active=true" onchange="doMyOnChange(this)" field="name" />
</div>
</div>

<div class="col-sm-8 form-group">
<div>
<label class="control-label col-sm-4" for="offering">
Users
</label>

<g:macro_invoke macro="lightweight_glide_list2" id="inc_users" name="inc_users" reference="sys_user" can_write="true" control_name="QUERY:active=true"/>

</div>
</div>

<div class="row" style="margin: 10px;margin-left: 25px;">
<div class="col-sm-8">
<button id="dataButton" class="btn btn-primary" onclick="update_ticket()">Download data</button>
</div>
</div>
</form>
</div>
</div>
</div>
</j:jelly>

Client Script:

Could you please let me know if changes required on above code.