Hello
Simple use-case, but already spent to much time trying to solve what for sure should be easy.
Once the page is loaded, I’d like to assign the record-id of the record shown in list-details type bloc to a variable, to be passed then in the URL.
Using custom code in header, footer or a block, I tried :
- looking for the value of “data-recordid” (present in the DIV html code of all list-details bloc)
<script>
document.addEventListener("DOMContentLoaded", function() {
var element = document.getElementById("list-details1");
if (element) {
var recordId = element.getAttribute("data-recordid");
if (recordId) {
console.log("Value of data-recordid:", recordId);
} else {
console.log("data-recordid attribute has no value.");
}
} else {
console.log("Element with id 'list-details1' not found.");
}
});
</script>
- looking for the value displayed in blank color in a single field table
<script>
document.addEventListener("DOMContentLoaded", function() {
// Find the div with id="bloc-record-id"
var blocRecordDiv = document.getElementById("bloc-record-id");
if (blocRecordDiv) {
// Find the H1 element within the div
var h1Element = blocRecordDiv.querySelector('h1');
if (h1Element) {
var recordId = h1Element.innerText;
// Log the value of the recordId variable
console.log(recordId);
} else {
console.log("The <h1> element was not found within the div with id 'bloc-record-id'.");
}
} else {
console.log("The div with id 'bloc-record-id' was not found in the document.");
}
});
</script>
Everytime it logs, propety null, can not be found… like if it could not read the code.
Anyone of you guys could help to solve this “basic” case ?
To @softrdev team → this ability to use airtable-record-id used in blocs on a page, should definitely be proposed by default like the {LOGGED_IN_USER:NAME} (example) properties.
Thanks in advance
Do this in Airtable side. Create a column with formula in Airtable which will form a HTML code of button with the record ID. Then on Softr side use “Embed” instead of button in field type. And then link the formula column to “Embed” and it will work.
Airtable :
Softr :
I hope this will be helpful.
Hello @Harikrushna, thanks for your solution.
I was not able to implement the airtable side:
- how do write the formula, especially when you need to have this caracter " in the result, whereas it is used to input text pieces : like “<button onclick=”&{RecordId}&“…”
- the url you use, should it be the homepage or the target user will open ?
If this is the second option, this will not work as the piece of code I’d like to finalize is the first part of a longer one that rewrite all urls found in menus to add this recordid at the end.
Use case is :
- user manages several project
- user connects on homepage with info from the latest project (use a flag in airtable to manage “latest” info)
- then user leaves the homepage using the menu to consult details on tasks, documents, steps of the process… each of these items is managed in a separate page:
—> i want to make sure that when leaving the homepage, using the menu (not a button on the page) the page accessed will display the info for the same project that the one of the homepage → therefore I need to pass the recordid in the url after having found it in the html code
—> using project selector list, user can change at anytime of projects and menu will show the detailed pages according its choice - this is already implemented using this piece of code - note that the projectID is retrieved from the url not the html :
<script>
document.addEventListener("DOMContentLoaded", function() {
var currentUrlParams = new URLSearchParams(window.location.search);
var recordId = currentUrlParams.get('recordId');
if (recordId) {
var updateLinks = function() {
var allLinks = document.querySelectorAll('a[href]');
allLinks.forEach(function(link) {
var linkUrl = new URL(link.getAttribute('href'), window.location.origin);
var linkUrlParams = linkUrl.searchParams;
linkUrlParams.set('recordId', recordId);
link.setAttribute('href', linkUrl.toString());
});
};
updateLinks();
var observer = new MutationObserver(updateLinks);
observer.observe(document.body, {
childList: true,
subtree: true
});
}
});
</script>
Does it help to understand what i’m trying to do ?
Thanks
Here is my understanding.
- User can modify the project which he wants to access and then via menu he/she is switching to other pages, like, tasks, documents, steps and processes.
If this is the case, then put the selected projectId field in user table in Airtable and then retrieve it from each of the page. Even you can define filter using that field in each of the page, and you don’t need to put custom code.
But, if you want to put in custom code then, you can retrieve it like this ( no need to pass it with URL).
<script>
document.addEventListener("DOMContentLoaded", function () {
if(window.logged_in_user) {
const projectId = window.logged_in_user.projectId;
}
});
</script>
Let me know if my understanding is correct. Please feel free to let me know if yet it is not clear.
@Harikrushna thanks for this new option, we had also explore using a field in the user table, but we had to switch to something else as updating this field was a bit complex, especially reseting it once user log off, to make sure he’ll come back on the most recent project info.
My colleague finally came up with a script that works, I’m sharing it for the rest of the community.
What it does : simply retrieve a projectid once the page is loaded and add it as parameter to all url-links found on the page.
We put in the “header-custom script” of page settings.
<script>
document.addEventListener("DOMContentLoaded", function() {
var checkInterval;
var attempts = 0;
var updateLinks = function(recordId) {
var allLinks = document.querySelectorAll('a[href]');
allLinks.forEach(function(link) {
var linkUrl = new URL(link.getAttribute('href'), window.location.origin);
var linkUrlParams = linkUrl.searchParams;
linkUrlParams.set('recordId', recordId);
link.setAttribute('href', linkUrl.toString());
});
};
var checkForRecordId = function() {
var recordElement = document.querySelector('.sw-js-single-item-elements[data-recordid]');
if (recordElement) {
clearInterval(checkInterval);
var recordId = recordElement.getAttribute('data-recordid');
if (recordId) {
updateLinks(recordId);
var observer = new MutationObserver(function() {
updateLinks(recordId);
});
observer.observe(document.body, {
childList: true,
subtree: true
});
}
} else {
attempts++;
if (attempts > 20) {
clearInterval(checkInterval);
}
}
};
checkInterval = setInterval(checkForRecordId, 500);
});
</script>
@Harikrushna thanks again for the time you spent on our case. much appreciated.
