Open a page that relates to list details page

Ask the community
1

On a list details page how do I link out to another related page without using an action button.

EG: I have
List Page: Properties
List Details Page: THE Property
Then I want to link to pages like

→ “meet your team”
→ "Process guidelines " etc

Which all show specific details depending on THE property.

I can do ALL this with 'Action buttons" but the UI is not very nice and I’m going to have a lot of buttons which all look essentially the same.

Ideally I want something like a ‘grid’ block - but the grid block only allows linking to pages not page details and I don’t know how to ‘parse’ the record ID here

eg- in action buttons the record ID is in the url - so how can I parse the recordID in the url through the feature grid option which only allows external url or open page.

any guidance would be greatly appreciated

2

Are Linked Lists the solution?
… as a route to a List Details page, perhaps opening in a modal?

3

No unfortunately, thanks though. It’s content and blocks created on softr which I want to either show or not show depending on specifics of the record.

4

@calista.green please create those individual details page and then you could create URLs in your datasource as a formula fields like concat('myapp.com/related-detail-page?recordId=', relatedRecordId) and then use that link to open those pages

5

Thank you, maybe I am misunderstanding. I understand how to create the url in the datasource fields. But a grid block doesn’t allow ‘open link’ from datasource field - see photo? It only allows open page and I do not know how to force the previous page recordID into the new page url

Screen Shot 2024-09-08 at 1.05.13 PM
Screen Shot 2024-09-08 at 1.05.13 PM2596×1250 374 KB

6

My proposal was about using the first Detail block and link from there… Currently linking from static block will require a bit of code injection.

7

Thanks yes I am reaching out to consultants. Even the following would fix my problem if I could get the code to work correctly for a grid instead of buttons - then all info would stay on the same page and just show or hide.

https://community.softr.io/t/new-unofficial-feature-tabs-hide-show-multiple-blocks-horizontally

thanks anyway

8

In that case, with this specific block here is what you would need:

<script>
    window.addEventListener('DOMContentLoaded', (event) => {
        document.getElementById("table1").style.display = "block";
        document.getElementById("form1").style.display = "none";
        document.getElementById("chart1").style.display = "none";
        document.getElementById("form2").style.display = "none"
    });


    window.addEventListener('block-loaded-feature-grid1', () => {
        console.log('Grid Block loaded');

        const buttonClickHandler = (e) => {
            if (e.target.closest('#feature-grid1 .css-1pdy5ci:nth-child(1)')) {
                console.log('Click Button 1');
                document.getElementById("table1").style.display = "block";
                document.getElementById("form1").style.display = "none";
                document.getElementById("chart1").style.display = "none";
                document.getElementById("form2").style.display = "none";
            }
            if (e.target.closest('#feature-grid1 .css-1pdy5ci:nth-child(2)')) {
                console.log('Click Button 2');
                document.getElementById("form1").style.display = "block";
                document.getElementById("table1").style.display = "none";
                document.getElementById("chart1").style.display = "none";
                document.getElementById("form2").style.display = "none";
            }
            if (e.target.closest('#feature-grid1 .css-1pdy5ci:nth-child(3)')) {
                console.log('Click Button 3');
                document.getElementById("chart1").style.display = "block";
                document.getElementById("form1").style.display = "none";
                document.getElementById("table1").style.display = "none";
                document.getElementById("form2").style.display = "none";
            }
            if (e.target.closest('#feature-grid1 .css-1pdy5ci:nth-child(4)')) {
                console.log('Click Button 4');
                document.getElementById("form2").style.display = "block";
                document.getElementById("form1").style.display = "none";
                document.getElementById("table1").style.display = "none";
                document.getElementById("chart1").style.display = "none";
            }
        };
        
        document.body.addEventListener('click', buttonClickHandler);
    });

</script>

Replace feature-grid1 each time you see it by your feature-grid block Id (and table1, form1, chart1, form2 by the block Ids you want to display).

Remove all “Add action” for the links (leave it empty).

These blocks are more difficult to play with so the design is not that customizable as with CTA buttons with custom code, finding the right selectors is not that easy.

9

thank you so much, this is incredibly useful, I had definitely hit a wall.