Passing Record ID through URL for List Details Page

I have a list block and when I click on a specific record to be taken to the list details page, I want to pass the record ID through the URL. Does anyone know how I can do this? The SLUG how-to page did not make sense to me.

For more context: I am writing some custom code on the list details and need to have access to the record ID. I tried pulling it from the HTML, but all of my attempts have failed even though my record ID was under a class in the HTML. So if you have tips for getting the record ID on a list details page in the custom code in general, your help would be appreciated!

Thanks.

1 Like

Hi,

Are you talking of the recordId of the list-details page that is inside the url of the list-details page?
like softrappexample.com/urlpath?recordId=xxxxxxxxx

In your custom code block, you can target the record id via url parameter.

As Matthie points out , when listing record details, the record id will always be found in the record url, no matter if you are using url slugs or the basic url format.

Thats exactly what I home hoping to grab! And I figured it out. The record id is in the url, but it is not if I preview the list details page without first navigating there from the list block page, which is what I was doing. Thanks for your help!

Great,

As a reference here is also how you can grab the recordId of the current page with javascript function:

function getRecordIdFromURL() {
    const params = new URLSearchParams(window.location.search);

    const recordId = params.get('recordId');

    return recordId;
}

const recordId = getRecordIdFromURL();
console.log(recordId);
1 Like

@acjnas and @matthieu_chateau ,
Is it possible to capture a recordID from a list-details page, then use it in a hidden field when submitting a form on a different page?

@matthieu_chateau, @acjnas
I was able to use ChatGPT to capture the recordID as providerID in session storage and retrieve when needed. I can see via the console that the value is is available on the form page. The form is setup with hidden field, URL Param, with providerID value. When submitting the form, nothing appears for this value in my Airtable base.

I was able to get this working by appending the URL or the page with the form to include providerID. With this i am now able to use the hidden field URL param successfully. Not being a javascript developer, i am open to better ways to handle this. thanks in advance for any guidance.

Sample code for the 1st page:

    function getRecordIdFromURL() {
        const params = new URLSearchParams(window.location.search);
        const recordId = params.get('recordId');
        return recordId;
    }

    const recordId = getRecordIdFromURL();

    if (recordId) {
        sessionStorage.setItem('providerID', recordId);
    }

    console.log(`providerID: ${recordId}`);

Same code for 2nd page that has the form:

    window.addEventListener('DOMContentLoaded', (event) => {
        const providerID = sessionStorage.getItem('providerID');
        if (providerID) {
            const currentURL = window.location.href;
            const newURL = new URL(currentURL);
            newURL.searchParams.set('providerID', providerID);
            window.history.replaceState(null, '', newURL); // This updates the URL without reloading the page

            console.log(`New URL: ${newURL}`);
        }
    });
2 Likes

Hi - are you putting this in the custom code of the page settings? Or in the custom code block?