How to make the filter show the current value inside a custom portal widget

[JensHappeningIT]

Hi everyone,

I am currently creating a custom widget where I use a filter based on the week and employee. Each time I use the filter it changes back to the first value of the dropdown. How do I make it show the right employee and week based on the records I call?

After I the client controller runs the shown function below I call my gliderecord inside the server script again to reload the query()

Client script: 

c.getSelectedValue = function() {

    // Print the selected value

    if(c.data.hasAdminRole){

        c.data.selectedValue = document.getElementById("dropdownWeek").value;

    c.data.selectedEmployee = document.getElementById("dropdownEmployee").value;

    c.data.action = "SELECT";

    c.server.update();

    }

[Sohithanjan G]

Hi @JensHappeningIT 

It seems like the issue you're facing is related to the selected values in your dropdowns (dropdownWeek and dropdownEmployee) not persisting after the update triggered by c.server.update() in your client script.

To ensure that the selected values remain unchanged after the update, you need to set the selected values back in your client script after the update is complete. Here's how you can achieve this:

c.getSelectedValue = function() {
    var selectedWeek = document.getElementById("dropdownWeek").value;
    var selectedEmployee = document.getElementById("dropdownEmployee").value;

    if (c.data.hasAdminRole) {
        c.data.selectedValue = selectedWeek;
        c.data.selectedEmployee = selectedEmployee;
        c.data.action = "SELECT";
        c.server.update().then(function() {
            document.getElementById("dropdownWeek").value = selectedWeek;
            document.getElementById("dropdownEmployee").value = selectedEmployee;
        });
    }
}

In this script:

• The selected values of the dropdowns are stored before triggering the server update.
• After the server update is complete (inside the then() function), the selected values are set back to the dropdowns, ensuring that they remain unchanged visually.

HIT helpful & Accepted Solution !!

[JensHappeningIT]

Hi @Sohithanjan G ,

Thank you for answering but I still have the same problem. But I think it is because I reload my GlideRecord query when I filter. Could that be the problem? and if yes how do I fix it?

server script:

    var gr = new GlideRecord("tableName");
    gr.addQuery('week_number', data.weekFilter);
    gr.addQuery('state', 'IN', ['Submitted', 'Approved']);
    gr.addQuery('employee', data.employeeFilter);
    gr.orderBy('date');
    
    gr.query();

    data.list = [];

    while (gr.next()) {
        var record = {};
        record.sys_id = gr.getValue('sys_id');
        record.date = gr.getValue('date');
        record.type = gr.getValue('card');
        record.startTime = gr.getValue('start_time');
        record.endTime = gr.getValue('end_time');
        record.hours = gr.getValue('hours');
       
        data.list.push(record);
}

[Sohithanjan G]

Hi @JensHappeningIT 

With this modification, the selected values for the week and employee dropdowns should be retained after reloading the GlideRecord query, thus preventing them from reverting to their default values.

// Store selected values before reloading query
var selectedWeek = data.weekFilter;
var selectedEmployee = data.employeeFilter;

// Reload GlideRecord query with new filter values
var gr = new GlideRecord("tableName");
gr.addQuery('week_number', selectedWeek);
gr.addQuery('state', 'IN', ['Submitted', 'Approved']);
gr.addQuery('employee', selectedEmployee);
gr.orderBy('date');
gr.query();

data.list = [];

// Populate data list
while (gr.next()) {
    var record = {};
    record.sys_id = gr.getValue('sys_id');
    record.date = gr.getValue('date');
    record.type = gr.getValue('card');
    record.startTime = gr.getValue('start_time');
    record.endTime = gr.getValue('end_time');
    record.hours = gr.getValue('hours');
   
    data.list.push(record);
}

// Restore selected values after reloading query
data.weekFilter = selectedWeek;
data.employeeFilter = selectedEmployee;

Mark helful & Accepted Solution !!! 

[JensHappeningIT · Accepted solution]

Thank you for your help, your answers were certainly correct but apparently not the source of my issue. I solved my issue by using ng-select for my dropdowns because I use a list[] for each one. So for each item inside my lists I added a value called selected that was either equal to true or false and adjusted the values each time I use the filter.