Hi Community.
I am wondering if a value pulled into the Data Feature (field) of List Detail block be made available to the javascript that I put into the custom code block on the same page?
If so, can someone suggest a code snipped that would demonstrate how that value can be referenced in by section?
Thank you
Boris
Quick answer: look in window.records
Let me know if you need more
Thank you @dcoletta.
Really struggling here, not being a javascript developer. 
Do you mind providing a small code snippet example?
Thank you!
Boris
Sure. Suppose you have a page with a List Details block on it, and suppose that the record that the List Details block is displaying has a field called Name whose value is David.
You can write the following in JavaScript to fetch that value out:
<script>
console.log(window.records[keys(window.records)[0]].record.fields.Name);
</script>
Will result in David being printed to the console.
Does that make sense?
Yes. Wonderful! Thank you so much.
I’ll try it and report back on this thread.
Boris
Thanks @dcoletta I have tried this myself but without success, and I wonder why?
I have a List Block with a text field displaying FirstName, followed by a code block with:
<script>
console.log(window.records[keys(window.records)[0]].record.fields.FirstName);
</script>
Nothing appears in the code block. Your help would be appreciated, with much thanks.
That code would never have worked. Some rando must have written it and slipped it into my studio when I wasn’t looking.
Try pasting this code into a custom code block on a page with a List Details block:
<div id="firstName"/>
<script>
const wait = setInterval(function () {
if (window.records !== undefined) {
clearInterval(wait);
document.getElementById("firstName").innerText = window.records[Object.keys(window.records)[0]].record.fields.firstName;
}
},100)
</script>
I get those randos visiting too, making a real mess of my things …
So, thanks David, I’ve done the above … I have the List Details block showing FirstName as expected, but in the Code Block it displays undefined.
Unless there is a quick fix you can see, please don’t spend much time on this.
Hello all, I’m having some trouble accessing the window.records object for a list detail page through script. The syntax I’m using is the following:
window.records[recordId].record.fields.field_name
In Chrome dev tools this works, but when used in the custom code block I get the following error message
Uncaught TypeError: Cannot read properties of undefined (reading 'recXLiuGB5XYz2hYC')
at window.onload
Any help with this would be much appreciated, thanks
Are you waiting long enough before calling it? See example above.
Hi @dcoletta, thanks for getting in touch. It was indeed the issue. Once I included the setInterval function it worked - neat trick. I’m still learning the ins and outs of the platform. I originally had the call inside an event listener on the window (‘load’ event) - interesting the load event fires before data/elements are available. Guessing it has something to do with the way the platform loads data? Now I use both the window load event and the setInterval method for all calls made. Thanks
Your guess is correct. The page issues a separate request for the list data after it has finished rendering.
@dcoletta thank you for helping out with the script.
I want to share with the community the script that is (was) working for grabbing the recordID from the URL of a Softr page that has a detail block on it. NOTE: the URL must be in the form [core-url]?recordID=[record-id].
<script>
const queryString = window.location.search;
console.log(queryString);
// ?recordId=<some_record_id>
//Parse the query string's parameters
const urlParams = new URLSearchParams(queryString);
//Return the value associated with the search parameter recordId
const recordId = urlParams.get("recordId");
console.log(recordId);
//Prepare to call the recordId
let myIframe = document.getElementById("iframe");
let url_string = "[some-url-string]";
let width = "728";
let height = "90";
let geo = "us";
let customURL =
url_string +
"?cid=" +
recordId +
"&geo=" +
geo +
"&size=" +
width +
"x" +
height;
console.log("Encoded URL: ", encodeURI(customURL));
myIframe.src = customURL;
document.getElementById("myIframe").src = encodeURI(customURL);
</script>
This code was solid… until started tuning for SEO and introduced the SEO:Slug field in my Airtable on top of which the detail block sits. That totally changed the URL of the page…
from: [core-url]?recordID=[record-id]
to: [core-url]/[slug]/r/[record-id]
Needless to say, the code above no longer works.
If someone could suggest how to tweak the code to work with the new URL format, that would be great.
Thanks
@bbelo May I ask you to try this version of the code?
<script>
function getUrlParam(name) {
const url = new URL(window.location.href);
let param;
for(var key of url.searchParams.keys()) {
if(key.toLowerCase() === name.toLowerCase()) {
param = url.searchParams.get(name);
break;
}
}
if(!param && name.toLowerCase() === 'recordid') {
param = getRecordIdFromPath();
}
return param;
}
function getRecordIdFromPath() {
let pathName = window.location.pathname;
if (pathName.indexOf('/r/rec') !== -1) {
pathName = pathName.substr(pathName.indexOf('/r/rec') + 3);
if (pathName.indexOf("/") !== -1) {
pathName = pathName(0, pathName.indexOf('/'))
}
return pathName;
}
return undefined;
}
const recordId = getUrlParam('recordId');
console.log(recordId);
//Prepare to call the recordId
let myIframe = document.getElementById("iframe");
let url_string = "[some-url-string]";
let width = "728";
let height = "90";
let geo = "us";
let customURL =
url_string +
"?cid=" +
recordId +
"&geo=" +
geo +
"&size=" +
width +
"x" +
height;
console.log("Encoded URL: ", encodeURI(customURL));
myIframe.src = customURL;
document.getElementById("myIframe").src = encodeURI(customURL);
</script>