Problem Context:
In Softr Studio, when working with tables or list blocks, there are situations where you need to open a modal window with a custom URL. Softr Studio typically allows URLs to be mapped from Airtable fields or entered manually. However, there are cases where:
- The URL cannot be mapped to an Airtable field because it’s not at the record level.
- You need to dynamically pass parameters, like the current record ID from the parent window, to the modal URL.
Challenges:
- Custom URL Requirement: Sometimes, the URL you want to open via a modal isn’t directly mapped to a specific Airtable field. It might be a fixed URL or dynamically constructed.
- Accessing Parameters: Softr Studio doesn’t directly support passing parameters from a top bar action button to a modal URL. This means you need a workaround to inject parameters dynamically.
- Cross-Domain Issues: If you’re embedding external forms or content, passing parameters directly from the main window URL to the modal window URL can be complex due to security restrictions (cross-domain policies).
Solution Overview:
To address these challenges, the script automates the process of:
- Reading Parameters: It first retrieves a parameter named “recordId” from the main parent window URL.
- Updating Modal URL: Checks if the modal URL already includes the “id” parameter. If not, it adds the “id” parameter with the value obtained from the parent window.
- Opening Modal: Finally, it opens the modal window with the updated URL, ensuring that necessary parameters are passed internally within the same domain.
How It Works:
- Parameter Retrieval: The script looks for a parameter named “recordId” in the URL of the main parent window.
- URL Parameter Check: It then inspects the modal URL that Softr Studio is opening. If the “id” parameter isn’t already included, it appends it with the value from “recordId”.
- Opening Modal: This ensures that when the modal opens, it contains the necessary “id” parameter. This approach simplifies passing parameters internally within the same domain, avoiding complex cross-domain issues.
Customization:
- Parameter Name: You can customize the parameter name from “id” to fit your specific use case.
- Parent Window Parameter: Change “recordId” to match the parameter you’re using in the main parent window URL.
This script provides a robust solution for dynamically managing and passing parameters to modal URLs within Softr Studio, enhancing flexibility and functionality in your applications.
<script>
// Function to update iframe URL based on recordId parameter from parent window
function updateIframeUrl(recordId) {
const iframe = document.querySelector('#sw-modal .sw-modal-iframe');
if (iframe) {
const currentUrl = iframe.src;
// Check if URL already contains 'id' parameter
const urlParams = new URLSearchParams(currentUrl.slice(currentUrl.indexOf('?') + 1));
if (!urlParams.has('id')) {
// Update URL with 'id' parameter from recordId
const newUrl = new URL(currentUrl);
newUrl.searchParams.set('id', recordId); // Add 'id' parameter with recordId value
// Log the URLs and actions
console.log(`Current URL: ${currentUrl}`);
console.log(`New URL: ${newUrl.toString()}`);
// Update iframe source
iframe.src = newUrl.toString();
} else {
console.log(`Current URL already has 'id' parameter: ${currentUrl}`);
}
} else {
console.error('Iframe element not found inside modal.');
}
}
// Function to handle modal opening and update iframe URL
function handleModalOpen() {
const recordId = getParameterByName('recordId', window.location.href);
if (recordId) {
updateIframeUrl(recordId);
} else {
console.error('RecordId not found in parent window URL.');
}
}
// Mutation Observer setup to monitor modal opening
const observer = new MutationObserver((mutationsList, observer) => {
mutationsList.forEach(mutation => {
// Check for class attribute changes in modal element
if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
const modal = document.getElementById('sw-modal');
if (modal && modal.classList.contains('is-open')) {
handleModalOpen(); // Handle URL update when modal opens
}
}
});
});
// Function to get parameter value from URL
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, '\\$&');
const regex = new RegExp(`[?&]${name}(=([^&#]*)|&|#|$)`);
const results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, ' '));
}
// Wait for the DOM content to be fully loaded before setting up the observer
document.addEventListener('DOMContentLoaded', () => {
const modal = document.getElementById('sw-modal');
if (modal) {
observer.observe(modal, { attributes: true });
} else {
console.error('Modal element not found.');
}
});
</script>
