Drop Down list filtering with custom code

[lvinciguerra]

Hi,
Is there a way to filter a Drop Down List in synch with airtable with custome code?

[lvinciguerra]

I think i found a solution but I miss a small piece.
Can someone help me ? @artur

The problems is that i have to filter a dropdown list based on some criteria defined by the logged in user, feature missed in softr.

One way to do that is to embed fillout.com, but it adds costs and it’s quite slow to load.

Another way that i tried is having 3 blocks:

1. filtered table in the same view with the filtered value you wanna put in the dropwodn list
2. a custom code block
3. a form with dropodown list.

Basically with the custom code i read the data from the table, put it into a variable and then populate the dropown list with those.

To pass them to the Airtable i made a TEMP field in the user database.
So i used an hidden field of the form to connect the window[‘logged_in_user’][‘TEMP’] with the desired field in the database where my dropwodn list data should go.

When i tried to update the window[‘logged_in_user’][‘TEMP’] with a normal assignment everything worked, so i thought the idea could work.

When i tried to put window[‘logged_in_user’][‘TEMP’] into the select.addEventListener(“change”, function() somehow the field is not updated anymore in the database.

Weirdly, the variable is indeed modified, but in airtable i don’t see anything

Here is the code. I don’t have any explanation of this phenomena.
I really need this feature and i feel so close to achieve it

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<!-- Bootstrap JS and Popper.js (required for some Bootstrap components) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">


<div class="form-group">
    <label for="bootstrapDropdown" style="font-family: 'Roboto', sans-serif; color: #9e9e9e; font-size: 0.75rem; font-weight: 600; letter-spacing: 0rem; padding: 0.5rem 0rem 0rem; color: rgb(97, 97, 97);">Select the Instructor:</label>
    <select class="form-control" id="bootstrapDropdown">
    </select>
</div>


<script>
console.log("Hey");
const table1 = document.getElementById('table1');
console.log(table1);
const elem = table1.getElementsByClassName('sw-pre-text-container align-center sw-m');
console.log(elem)

function waitForElements() {
    const table1 = document.getElementById('table1');
    const elem = table1 ? table1.getElementsByClassName('sw-pre-text-container align-center sw-m') : null;
    const resultArray = [];
    if (elem && elem.length > 0) 
    {
        var select = document.getElementById("bootstrapDropdown");
        console.log("Elements found:", elem.length);
        for (let i = 0; i < elem.length; i += 2) 
        {
            const name = elem[i].innerText;
            const gym = elem[i + 1].innerText;
            var option = document.createElement("option");
            option.value = name;
            option.text = name;
            select.appendChild(option);
            // Add the name and number as a sub-array to resultArray
            resultArray.push([name, gym]);
        }
        for (let i = 0; i < elem.length; i++) 
        {
            console.log(elem[i].innerText);
            found = true;
        }
        table1.style.display = 'none';
        window['logged_in_user']['TEMP'] = select.value;
        console.log(window['logged_in_user']['TEMP']);
        console.log(window['logged_in_user']);
        
        select.addEventListener("change", function()
        {
            window['logged_in_user']['TEMP'] = select.value;
            console.log(window['logged_in_user']['TEMP']);
            console.log(window['logged_in_user']);
        });  
    }
    else 
    {
        console.log("Elements not found yet, retrying...");
        setTimeout(waitForElements, 50); // Wait for 500ms then try again
    }
    
}

// Start polling
waitForElements();

console.log("finished");
console.log(window['logged_in_user'])
</script>

[lvinciguerra]

For everyone that will read this: i solved the problem of filtering a dropdown list now!

The setup is similar to the one described before beside that i don’t use anymore the TEMP field in the User table.

I understood that right now in softr the value of the hidden field are set as soon as the page is rendered, that it was causing the issue!
I solved the problem embedding a Softr window in an iframe, passing the value with URL parameters in custom code and refreshing the iframe.

That’s it.
If someone needs clarification just ask!

[pete_at_featurepower]

yes please @lvinciguerra can you provide more clarification

I think our requirement is similar to yours. We need to limit the options in our drop down (Softr “Inline Filters”) to only those ones relevant to our logged in user. In our case, the options belong to the same client that the user belongs to.

So I’m guessing your custom code would go to Airtable to find this filtered list of options, correct? Can you describe more how this all fits together – what triggers the custom code, a code sample (or is it your code from this post?), what do you mean by embedding “a” Softr window in an iframe, or are you talking about “the” softr window for the page that needs the filter, how do you pass the list in URL parameters?

Grateful for any help.