How to hide a field based on Checkbox conditions on UI Page using Jelly Script ?
Options
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
05-05-2022 08:48 PM
Hi Community,
My requirement is currently I've two checkbox on UI Page. When one of the checkbox is checked, show several fields, when its not checked hide another fields. How to achieve this using Jelly script in UI Page ?
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 action="ui_page_process.do" id="create_baseline" class="form-horizontal">
<j2:set var="jvar_task_id" value="${sysparm_task_id}" />
<j2:set var="jvar_has_parent" value="${sysparm_has_parent}" />
<j2:set var="jvar_message" value="${sysparm_message}" />
<input type="hidden" name="name" value="create_baseline"/>
<input type="hidden" name="enable_task_baseline" id="enable_task_baseline"/>
<input type="hidden" name="enable_financial_baseline" id="enable_financial_baseline"/>
<input type="hidden" id="task_id" name="task_id" value="$[jvar_task_id]" />
<input type="hidden" id="has_parent" name="has_parent" value="$[jvar_has_parent]" />
<input type="hidden" id="message" name="message" value="$[jvar_message]" />
<p>
${gs.getMessage("Enter a baseline name, then click on Save to create a baseline for tasks and financials.")}</p>
<p class="padding-b-sm">${gs.getMessage("A schedule baseline is a snapshot of each task's current planned start and end dates. A financial baseline is a snapshot of the project's current financial plans, which includes cost and benefit plans, but not actuals.")}</p>
<div class="form-group padding-b-sm form-group-height">
<label class="col-sm-4 control-label text-center" for="baseline_name">
${gs.getMessage('Name')}</label>
<div class="col-sm-7">
<input name="baseline_name" id="baseline_name" value="${gs.now()}" class="form-control" required="true" readonly="true" />
</div>
</div>
<div class="form-group padding-b-sm form-group-height">
<label class="col-sm-4 control-label text-center" for="u_endorse_by">
${gs.getMessage('Endorse By')}</label>
<div class="col-sm-7">
<g:ui_choicelist class="form-control" name="u_endorse_by" table="planned_task_baseline" field="u_endorse_by" />
</div></div>
<div class="form-group padding-b-sm form-group-height">
<label class="col-sm-4 control-label text-center" for="u_endorsement_date">
${gs.getMessage('Endorsement Date')}</label>
<div class="col-sm-7">
<g:ui_date class = "form-control" id = "u_endorsement_date" name="u_endorsement_date" value="${u_endorsement_date}"/>
</div>
</div>
<!-- <div class="form-group padding-b-sm form-group-height">
<label class="col-sm-4 control-label text-center" for="description">
${gs.getMessage('Description')}</label>
<div class="col-sm-7">
<input name="description" id="description" class="form-control" />
</div>
</div>-->
<div class="form-group padding-b-sm2 form-group-height2">
<label class="col-sm-4 control-label text-left" for="task_baseline">
${gs.getMessage('Create Schedule Baseline')}</label>
<div class="col-sm-7">
<span class="input-group-checkbox">
<input id="task_baseline" class="checkbox" onclick="scheduled()" type="checkbox" name="task_baseline"/>
<label for="task_baseline" class="checkbox-label" style="padding-top: 5px!important; margin-left: 0px!important;"></label>
</span>
</div>
</div>
<!--STRY35482(i) start-->
<div class="form-group padding-b-sm label-box-info1">
<label class="col-sm-10" style="margin: 0px!important;">${gs.getMessage('Please complete the following prior to perform schedule baseline')}</label>
<label class="col-sm-12" style="margin: 0px!important;">${gs.getMessage('- Obtain endorsement from PSC or equivalent for project schedule baseline')}</label>
<label class="col-sm-10" style="margin: 0px!important;">${gs.getMessage('- Update the Project Tasks')}</label>
<label class="col-sm-12" style="padding-bottom: 5px!important; margin: 0px!important;">${gs.getMessage('Note: Please refer to Group IT Project Management Procedure for details on project schedule baseline')}</label>
</div>
<div class="form-group padding-b-sm2 form-group-height2">
<label type="hidden" class="col-sm-4 control-label text-center" for="u_reason_for_schedule_baseline">
${gs.getMessage('Reason for Schedule Baseline')}</label>
<div class="col-sm-7">
<g:ui_choicelist class="form-control" name="u_reason_for_schedule_baseline" table="planned_task_baseline" field="u_reason_for_schedule_baseline" />
</div>
</div>
<div class="form-group padding-b-sm form-group-height">
<label class="col-sm-4 control-label text-center" for="u_schedule_remarks_justifications">
${gs.getMessage('Remarks/Justifications')}</label>
<div class="col-sm-7">
<input name="u_schedule_remarks_justifications" id="u_schedule_remarks_justifications" class="form-control" />
</div>
</div>
<!--STRY35482(i) end-->
<div class="form-group padding-b-sm2 form-group-height2">
<label class="col-sm-4 control-label text-left" for="financial_baseline">
${gs.getMessage('Create Financial Baseline')}</label>
<div class="col-sm-7 ">
<span class="input-group-checkbox">
<input id="financial_baseline" class="checkbox" type="checkbox" onclick="scheduled()" name="financial_baseline"/>
<label for="financial_baseline" class="checkbox-label" style="padding-top: 5px!important; margin-left: 0px!important;"></label>
</span>
</div>
</div>
<!--STRY35482(ii) start-->
<div class="form-group padding-b-sm label-box-info2">
<label class="col-sm-12" style="margin: 0px!important;">${gs.getMessage('Please complete the following prior to perform project budget baseline')}</label>
<label class="col-sm-12" style="margin: 0px!important;">${gs.getMessage('- Obtain endorsement from PSC or equivalent for project budget baseline')}</label>
<label class="col-sm-12" style="margin: 0px!important;">${gs.getMessage('- For additional budget (if applicable), please obtain approval from relevant DA approval party')}</label>
<label class="col-sm-10" style="margin: 0px!important;">${gs.getMessage('- Update the Cost Plans')}</label>
<label class="col-sm-12" style="padding-bottom: 5px!important; margin: 0px!important;">${gs.getMessage('Note: Please refer to Group IT Project Management Procedure for details on project budget baseline')}</label>
</div>
<div class="form-group padding-b-sm2 form-group-height2">
<label class="col-sm-4 control-label text-center" for="u_reason_for_financial_budget_baseline">
${gs.getMessage('Reason for Financial/Budget Baseline')}</label>
<div class="col-sm-7">
<g:ui_choicelist class="form-control" name="u_reason_for_financial_budget_baseline" table="planned_task_baseline" field="u_reason_for_financial_budget_baseline" />
</div>
</div>
<div class="form-group padding-b-sm form-group-height">
<label class="col-sm-4 control-label text-center" for="u_financial_remarks_justification">
${gs.getMessage('Remarks/Justifications')}</label>
<div class="col-sm-7">
<input name="u_financial_remarks_justification" id="u_financial_remarks_justification" class="form-control" />
</div>
</div>
<!--STRY35482(ii) end-->
<br/>
<div class="form-group pull-right" style="padding-right: 20px;">
<g:dialog_buttons_ok_cancel ok="return actionOK()" cancel="return onCancel()" ok_text="${gs.getMessage('Save')}" ok_id="ok_button" cancel_type="button" />
</div>
</g:ui_form>
<div class="load_mask_container" style="display: none;">
<span class="icon icon-loading"></span>
</div>
<style>
.load_mask_container {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
height: 100%;
width: 100%;
background-color: #ffffff;
position: absolute;
top: 0;
left: 0;
opacity: 0.80;
z-index: 1000;
align-items: center;
-ms-flex-align: center;
justify-content: center;
-ms-flex-pack: center;
}
#create_baseline .form-group {
overflow: hidden;
margin-bottom: 5px;
}
.padding-b-sm {
padding-bottom: 5px;
}
.padding-b-sm2 {
padding-top: 10px;
padding-bottom: 5px;
}
.text-center {
display: flex;
margin: 0;
height: 32px;
align-items: center;
}
.form-group-height {
height: 32px;
margin-bottom: 8px !important;
}
.form-group-height2 {
height: 45px;
margin-bottom: 8px !important;
}
.label-box-info1 {
height: 100px;
margin-bottom: 5px !important;
font-style: italic;
font-size: 12px;
}
.label-box-info2 {
height: 115px;
font-style: italic;
font-size: 12px;
}
</style>
<script>
$j(function() {
var e = gel("baseline_name");
if (e)
e.focus();
});
</script>
</j:jelly>Client Script:
function onCancel() {
if(gel('has_parent').value !== 'true') {
GlideDialogWindow.get().destroy();
}
sendEvent('modal:close');
return false;
}
var enable_task_baseline = false, enable_financial_baseline= false;
function actionOK() {
var e;
var name = trim(gel('baseline_name').value);
if ('' == name) {
alert(getMessage("Enter the baseline name"));
e = gel("baseline_name");
if (e)
e.focus();
return false;
}
//gel('enable_financial_baseline').value = gel('financial_baseline').checked;
//gel('enable_task_baseline').value = gel('task_baseline').checked;
//both can't be false
if(!gel('financial_baseline').checked && !gel('task_baseline').checked){
alert(getMessage("Please select at least one baseline option when choosing this action."));
return false;
}
showLoadMask();
return true;
}
function showLoadMask() {
var loadMask = document.getElementsByClassName('load_mask_container')[0];
loadMask.style.display = 'flex';
}
function sendEvent(event) {
parent.postMessage(event, "*");
}
var msg = gel('message').value;
if(msg) {
sendEvent(msg);
sendEvent('modal:close');
}
function scheduled(){
}Please help
Labels:
- Labels:
-
Service Portfolio Management
2 REPLIES 2
Options
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
05-05-2022 09:25 PM
Hi,
Refer below thread might be helpful to you
Options
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
05-05-2022 09:31 PM
Hi Mahesh,
Can help with the code for checkbox ? Cause I'm new in Jelly scripting.
Please help. Thanks
