When I click on below ‘Submit’ button (Conditional Form) I want this to update the status of the Record within my parent table ‘Enquiries’ (list details block) with its associated child table records (Enquiry line items).
Currently when I click the Submit button I pass the hidden Update Status but it does this for a new record within the Enquiries table instead of the record within the list details block of the page. How do I change the status of this record?
All i need is a one click update button that stretches out wide.
Hence, the form is purely used for UX as my ‘Submit’ button because the other buttons are too small.
Do you have any ways round this? I can use Make but prefer to have within Softr/Airtable if possible.
It really depends on the UX you’re aiming for, but if your main goal is to have a larger button for triggering the form submission (and you’re not happy with the existing small action buttons), I’d suggest this approach:
You can create a custom HTML button that visually stretches out the way you want. Then, using JavaScript, you can “mask” the action of clicking that button to trigger the click event of the hidden smaller button (the one tied to your record update or form submission action). This way, the larger button will feel like it’s performing the update, but it’s actually triggering the same action as the small button.
Here’s a basic example:
<button id="customUpdateButton" style="width: 100%; padding: 20px; background-color: #007BFF; color: white; border: none;">
Update Record
</button>
<script>
document.getElementById("customUpdateButton").addEventListener("click", function() {
// Trigger the click of the hidden button (the one tied to your action)
document.querySelector(".your-action-button-class").click();
});
</script>
In this example, when you click the large #customUpdateButton, it will programmatically trigger the click event of the smaller action button (with class your-action-button-class). You can customize the styles and layout of the button to match your UX needs.
This way, you don’t need to alter the action button itself, and you still get a larger clickable area
Bear in mind this is just one possible way, it may not fit 100% to your need but it could eventually open the door to more possibilities for customization.
I don’t think there’s a native way to accomplish this in a one-click solution. If you want to do this within Softr/Airtable, I’d recommend setting the button to be part of a list details block and have it trigger a popup to edit the record, with only the field you want to change visible.
I’m not a traditional coder, but you should be able to use custom code to send a POST request to an Airtable webhook, which would allow you to do this with one-click.
A simple CSS code should do the trick for your UX issue,
Just create a list-details block with the correct data source and conditional filters. Then remove everything except the button. Then tell me the Id of this list-details block and I will give you the code.
The width expansion of the block can also be done within your existing list-details block if you prefer.
All of this is true for new list-details block. Though this can be done natively with an old list-details block
Here is the result with css code for a new list-details block
What you see is not a button of a form but the button of a list-details block
Explanation:
The first part of the code is for any device. I set the width of the button to 600px (feel free to adjust it) and give it a center alignment.
The second part of the code ( @media (max-width: 768px ) narrows the conditions set for in the first part to adapt it to mobile devices. I set the width of the button to 250px on mobile (feel free to adjust it). This way it can be responsive.
Tell me if it works, otherwise I will debug/improve it.
Sorry to dig this up now that you have a working solution, but for context, why not use the “one-click update” action button on the list details block?
I updated my post above. The problem is that the selector was not precise enough + not stable. data-softr-action-type is a new stable selector that we can use without any problem now.
Hey again
I couldnt get this latest code to work.
One of my buttons is a one click update and one is an edit record.
Is it possible to have both codes in custom code header or it wont work?
Thanks
Change #list-details1 by your block ID(s) [data-softr-action-type="UPDATE_FIELDS"] is the stable selector for one click update action buttons.
Also this code is true if you use a new item details block (not the old ones).
