Issue on Lightweight_glide_list display list based on another reference field in ui page

HarishVardineni
Tera Contributor

‎09-08-2024 11:43 PM

Can we have dynamic filter on Light Weight GlideList. For example,  we have one reference field Company which is referring to company table And we have one Light Wight GLide List which is referring to User. If we selected company as 'A' for example ,  then it will show only those user having company as 'A' in the 2nd field.

 

 

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
   
    <style>
        .container {
            width: 1177px;
   
            margin: 0 auto;
            padding: 0 30px;
        }

        .title {
            font-family: Inter;
            font-size: 24px;
            font-weight: 700;
            line-height: 28px;
            color: var(--base-black, #000000);
            margin-top: 24px;
        }

        .form-container {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 20px;
        }

        .row {
            flex-basis: 200px;
            margin-right: 16px;
        }

        label {
            font-size: 14px;
            margin-bottom: 5px;
            display: block;
        }

        .dropdown,
        .input-field,
        select {
            padding: 6px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 14px;
            width: 100%;
        }

        .generate-button {
            margin-top: 20px;
            margin-left:10px;
            background-color: #1CDBBC !important;
            border-radius: 24px !important; /* Ensure circular shape */
            color: #000000 !important;
            font-family: Inter !important;
            width: 150px !important;
            cursor: pointer !important;
            font-size: 16px !important;
            text-align: center !important;
        }

         /* Circular Download Button */
        .download-container {
            margin-top: 15px;
            margin-left: 880px;
        }

        .download-button {
            border-radius: 24px !important; /* Circular shape */
            color: #A3A3A3 !important;
            font-family: Inter !important;
            width: 148px !important;
            background: var(--gray-400, #A3A3A3);
            cursor: pointer !important;
            font-size: 16px !important;
            text-align: center !important;
        }

        .hidden {
            display: none;
        }

        .right-align {
            margin-left: auto;
        }
    </style>

    <script>
        function onPageLoad() {
            // Set Access Type value
            document.getElementById("u_access_type").value = "1";
            document.getElementById("u_access_type_hidden").value = "1";
            setCompanies();
        }

   
    </script>

    <body onload="onPageLoad()">
        <div class="container">
            <!-- Header -->
            <div style="display: flex; align-items: center;">
                <h2 class="title">Standardised Workflow Management</h2>
                <!-- Access Type hidden but aligned to the right -->
                <div class="right-align hidden">
                    <label style="font-size: 17px;">Access Type</label>
                    <select name="accessType" id="u_access_type" disabled="disabled" readonly="readonly">
                        <option value="0">-----None-----</option>
                        <option value="1">Assignee</option>
                        <option value="2">Client</option>
                    </select>
                    <input type="hidden" name="accessTypeHidden" id="u_access_type_hidden" value="1" />
                </div>
            </div>

            <!-- Form -->
            <div class="form-container">
                <!-- Company Field -->
                <div class="row">
                    <label>Company</label>
                    <g:ui_reference name="u_company" id="u_company" table="core_company" onchange="setPracticeType()" show_popup="false" />
                </div>

                <!-- Practice Type -->
                <div class="row">
                    <label>Practice Type</label>
                    <g:ui_reference name="u_practice_type" id="u_practice_type" table="u_practice_type" query="active=true" onchange="setEngagement()" show_popup="false" />
                </div>

                <!-- Engagement -->
                <div class="row">
                    <label>Engagement</label>
                    <g:macro_invoke macro= "lightweight_glide_list2" id="u_engagement" name="u_engagement"   reference="u_engagement" can_write="true" />
                    </div>

                <!-- Date Range -->
                <div class="row">
                    <label>Date Range</label>
                    <select id="dateFilter" class="dropdown">
                        <option value="0">Choose an option</option>
                        <option value="1">Last 1 Month</option>
                        <option value="3">Last 3 Months</option>
                        <option value="6">Last 6 Months</option>
                        <option value="12">Last 12 Months</option>
                    </select>
                </div>

                <!-- Generate button-->
                   <div class="generate-container">
                <button id="generateReport" class="generate-button" onclick="showResult()">Generate Report</button>
            </div>

                 <!-- Download Button with 30px gap -->
            <div class="download-container">
                <button class="download-button">
                    <i class="fa fa-download"></i> Download
                </button>
            </div>
           
           
            </div>

        </div>
        <iframe id="my_routing" frameborder="0" height="100%" scrolling="auto" name="my_routing" width="100%" allowtransparency="true" src="blank.do?" border="0" ></iframe>
    </body>
</j:jelly>
 
 
CLIENT SCRIPT--------
 
function showResult() {
    // Get the values of the form fields
    var engagement = document.getElementById("u_engagement").value;
    var accessType = document.getElementById("u_access_type").value;
    var pracType = document.getElementById("u_practice_type").value;
    var dateFilter = document.getElementById("dateFilter").value;

    if (engagement == '') {
        document.getElementById("mndtry4").style.color = "red";
       alert("No engagement selected");
    } else {
       alert("Selected Engagement: " + engagement);
       alert("Selected date: " + dateFilter);
        var url = "/Engagement_Avg_Calculation.do?sysparm_engagement=" + encodeURIComponent(engagement) +
                  "&sysparm_value=" + encodeURIComponent(getParmValue()) +
                  "&sysparm_pracType=" + encodeURIComponent(pracType) +
                  "&sysparm_dateRange=" + encodeURIComponent(dateFilter);
        var iframe = document.getElementById("my_routing");
        iframe.src=url;
        iframe.src=iframe.src;
    }
}



    function setEngagement() {
            // Get selected Company and Practice Type
            var company = document.getElementById('u_company').value;
            var practiceType = document.getElementById('u_practice_type').value;

            // Check if both values are selected
            if (company && practiceType) {
                var engagementCollector = g_form.getControl('u_engagement');
               
                // Construct the filter query to show engagements only for selected company and practice type
                var filterQuery = 'u_company=' + company + '^u_practice_type=' + practiceType + '^active=true';
               
                // Apply the filter to the engagement list collector
                engagementCollector.setFilter(filterQuery);
            }
        }






function setPracticeType(){
    var parmValue=getParmValue();
    var comp = document.getElementById("u_company").value;
    var accessType=document.getElementById("u_access_type").value;
    var company=document.getElementById("u_company").value;
    var obj=new GlideAjax('GMSManageEngagementRoutingUI');
    obj.addParam('sysparm_name','getPracticeTypeList');
    obj.addParam('sysparm_accessType',accessType);
    obj.addParam('sysparm_company',company);
    obj.addParam('sysparm_source', parmValue);
    obj.getXMLAnswer(function(answer) {
        if(answer != ""){
            var pracTypeLookUp = gel('lookup.u_practice_type');
            pracTypeLookUp.setAttribute('onclick',"mousePositionSave(event); reflistOpen( 'u_practice_type', 'not', 'u_practice_type', '', 'false','QUERY:active=true', 'sys_idIN" + answer+ "', '')");
        }
        else{
            pracTypeLookUp = gel('lookup.u_practice_type');
            pracTypeLookUp.setAttribute('onclick',"mousePositionSave(event); reflistOpen( 'u_practice_type', 'not', 'u_practice_type', '', 'false','QUERY:active=true', 'sys_idIN" + answer+ "', '')");
        }
    });
}



   


function setCompanies(){
    var parmValue=getParmValue();
        var accssType = document.getElementById("u_access_type").value;
    var accessType=document.getElementById("u_access_type").value;
    var obj=new GlideAjax('GMSManageEngagementRoutingUI');
    obj.addParam('sysparm_name','getCompanyList');
    obj.addParam('sysparm_accessType',accessType);
    obj.addParam('sysparm_source', parmValue);
    obj.getXMLAnswer(function(answer) {
   
        if(answer != ""){
            var companyLookUp = gel('lookup.u_company');
            companyLookUp.setAttribute('onclick',"mousePositionSave(event); reflistOpen( 'u_company', 'not', 'core_company', '', 'false','QUERY:active=true', 'sys_idIN" + answer+ "', '')");
        }
        else{
            companyLookUp = gel('lookup.u_company');
            companyLookUp.setAttribute('onclick',"mousePositionSave(event); reflistOpen( 'u_company', 'not', 'core_company', '', 'false','QUERY:active=true', 'sys_idIN" + answer+ "', '')");
        }
    });
}
function nullifyElementID(fieldName){
    //if(fieldName=='u_user_number')
    //  document.getElementById(fieldName).value = '0';
     if(fieldName=='my_routing')
        document.getElementById(fieldName).src="/blank.do?";
   
    //else if(fieldName=='bulkUpload' || fieldName=='downloadLink')
    //  document.getElementById(fieldName).style.display="none";
    else
        document.getElementById(fieldName).value = '';
}



function refreshUserNumber(staffCount){
    //document.getElementById('u_user_number').value=staffCount;
}
function getParmValue(){
    var urlString=window.location.href;
    var url = new URL(urlString);
    var sysParmValue = url.searchParams.get("sysparm_value");
    return sysParmValue;
}
function colorRequiredIcon(fields, spanID){
    var fieldValue=document.getElementById(fields).value;
    if(fieldValue=='')
        document.getElementById(spanID).style.color="red";
    else
        document.getElementById(spanID).style.color="black";
    return true;
}





0 Helpfuls
  • 267 Views
0 REPLIES 0