Hi everyone, I hope you are doing great!
I have a requirement to create a button on the backend that shows a pop-up with a dropdown variable and a list of values. Those values should be fetched from a system property, but I am not able to show any values on the dropdown.
The property I want is called ChildParentServices and the value is :
8b383debc3dcd2d047e2554bb00131ee,8838712fc3dcd2d047e2554bb001310e
Which are sys_ids of HR Services in the system.
The code I have is the following (PS: I know it's radio button and not a dropdown, it's just this is the most approximate way I got to create a new case etc, but I want a dropdown showing values from a property and not a radio button)
UI page name: Open
HTML code:
<?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 id="create_case_dialog">
<!-- Include necessary JS and CSS files -->
<script src="scripts/heisenberg/heisenberg_all.js" />
<g:requires name="styles/heisenberg/heisenberg_all.css" includes="true" />
<!-- Title Section -->
<div class="col-md-12" style="text-align:center; margin-bottom:20px; font-size:x-large; font-weight:bold; color:#5A5A5A;">
${gs.getMessage("Create a New Case")}
</div>
<!-- Info Message -->
<div class="col-md-12" style="margin-bottom:30px; padding:15px; border:1px solid #e6e6e6; background-color:#f8f9fa; border-radius:6px;">
<span style="font-size:1.2rem; color:#ff4d4d;">${gs.getMessage("Important")}:</span>
<p style="font-size:1rem;">${gs.getMessage("The current case and its child tasks will be closed upon submission.")}</p>
</div>
<!-- Gender Selection Section -->
<div class="form-group row">
<label for="gender_select" class="col-md-3 col-form-label text-md-right" style="font-size:1.2rem;">
${gs.getMessage("Select Gender:")}
</label>
<div class="col-md-9" style="padding-left:20px;">
<div class="custom-control custom-radio custom-control-inline" style="margin-right:20px;">
<input type="radio" id="male" name="gender" value="male" class="custom-control-input" />
<label class="custom-control-label" for="male">${gs.getMessage("Male")}</label>
</div>
</div>
<!-- Hidden fields for sys_id and table_name -->
<input type="hidden" id="task_sys_id" name="task_sys_id" value="${sysparm_sys_id}" aria-hidden="true" />
<input type="hidden" id="task_table_name" name="task_table_name" value="${sysparm_table_name}" aria-hidden="true" />
<!-- Modal Footer Buttons -->
<footer id="okCancel" class="modal-footer" style="text-align:center; padding-top:30px;">
<button id="cancel" class="btn btn-secondary" onclick="return submitCancel();" style="width:150px; font-size:1.1rem;">
${gs.getMessage('Cancel')}
</button>
<button id="ok" class="btn btn-primary" onclick="return myFunction();" style="width:150px; font-size:1.1rem; margin-left:20px;">
${gs.getMessage('Create Case')}
</button>
</footer>
</g:ui_form>
</j:jelly>
Client script code:
function myFunction() {
alert("Starting case creation");
// Get the selected gender value
var gender = document.querySelector('input[name="gender"]:checked');
if (!gender) {
alert("Please select a gender.");
return false; // Prevent submission if no gender is selected
}
var selectedGender = gender.value;
alert("Selected Gender: " + selectedGender);
// Get the sys_id of the current case (parent case)
var currentCaseSysId = document.getElementById('task_sys_id').value;
alert("Current case sys_id: " + currentCaseSysId);
// Use GlideRecord to create a new case in the 'sn_hr_core_case' table
var gr = new GlideRecord('sn_hr_core_case');
alert("Initializing new case creation...");
// Initialize and set values for the new case
gr.initialize();
gr.short_description = "Gender: " + selectedGender; // Set gender in short description
gr.parent = currentCaseSysId; // Link the current case as parent
// Insert the new case and get its sys_id
var newCaseSysId = gr.insert();
alert("New case created with sys_id: " + newCaseSysId);
// Open the newly created case in a new tab
var url = '/sn_hr_core_case.do?sys_id=' + newCaseSysId;
window.open(url, '_blank');
return false; // Prevent default form submission behavior
}
And my UI action to show the button is the following:
It would mean a lot if anyone could help.
Kind regards,
Sérgio
@rafas_2703 Not sure if this will be helpful but we have one tag in jelly called "<g:ui-reference" which will behave like a reference field, where you can provide your table name(here it should be sys_properties) and add filter(you can your 2 properties related conditions). This will be single pick field
