Getting Data from Hidden Softr List in Custom Code Block

Problem:

  • We have a list (list1) that uses a REST API as its data source
  • The list is hidden but we need to access its data in a custom code block
  • We want to format/display this data in ways that normal Softr blocks can’t do
  • Direct API calls aren’t possible in custom code blocks, so we need to get the data from the list

Current Working Code Attempt when data is not hidden:


<!-- Output container -->
<div id="output" style="padding: 20px; background: #f0f0f0; margin: 20px;">
    Waiting for list1 data...
</div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const outputDiv = document.getElementById('output');
        let attempts = 0;
        const maxAttempts = 20;
        
        function checkList() {
            attempts++;
            outputDiv.innerHTML = `Checking for list1 data (attempt ${attempts})...`;
            
            // Try to find list data
            const listContainer = document.getElementById('list1');
            
            if (listContainer) {
                console.log('List container found, checking for content...');
                outputDiv.innerHTML += '<br>Found list container, waiting for data...';
                
                // Check if data has loaded
                if (window.records || window.softr?.records) {
                    const records = window.records || window.softr?.records;
                    console.log('Found records:', records);
                    outputDiv.innerHTML = `
                        <h3>Found List Data:</h3>
                        <pre>${JSON.stringify(records, null, 2)}</pre>
                    `;
                    return true;
                }
            }
            
            if (attempts >= maxAttempts) {
                outputDiv.innerHTML = 'Could not find list1 data after ${maxAttempts} attempts.';
                return true;
            }
            
            return false;
        }
        
        // Check every second
        const checkInterval = setInterval(() => {
            if (checkList()) {
                clearInterval(checkInterval);
                console.log('Finished checking for list1');
            }
        }, 1000);
        
        // Stop checking after 20 seconds
        setTimeout(() => {
            clearInterval(checkInterval);
        }, 20000);
    });
</script>

Questions:

  1. Is it possible to access data from a hidden list in Softr?
  2. What’s the best way to access list data when using a REST API as the source?
  3. Are there alternative approaches to formatting/displaying REST API data in custom ways?

Current Issues:

  • Need reliable way to access list data even when list is hidden

Goal:
We want to format/display the REST API data in custom ways that normal Softr blocks don’t support, but need to access the data through a hidden list since direct API calls aren’t possible in custom code blocks.

Can anyone help out here @Andranik?

Hey @Lev !
What about Instead of using Softr’s native hide option on studio, render the list block visibly and then hide it with custom CSS (for example, using display: none or positioning it off-screen). This way, the list and its data remain in the DOM and are accessible to your custom code:

<style>
#list1 {
    display: none;
}
</style>