Save new record, pause, refresh
I love the Quickbase Code Page Samples App, with all it's pausing and refreshing. However, there's no sample codes for adding a new record, pausing and going to the saved record.
Anyone out there k...
Forum Discussion
Hi, something like this should work as a code page. Largely the work of ChatGPT :)
<html>
<head>
<title>Demo code</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.spinner {
border: 4px solid rgba(0, 0, 0, 0.3);
border-top: 4px solid #007bff;
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin 2s linear infinite;
display: none; /* Initially hidden */
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<script>
// Function to show the spinner
function showSpinner() {
const spinner = document.getElementById("spinner");
spinner.style.display = "block"; // or "inline-block" or "flex", depending on the context
}
// Function to hide the spinner
function hideSpinner() {
const spinner = document.getElementById("spinner");
spinner.style.display = "none";
}
$(document).ready( function() {
// Show the spinner
showSpinner();
// Incorporate a 2 second delay
setTimeout(() => {
// Some code
}, 2000);
});
</script>
<body>
<div id="spinner" class="spinner"></div>
</body>
</html>
------------------------------
Jeremy Anson
------------------------------
Here's a version of Jeremy's code that worked for me.
<html>
<head>
<title>Please wait</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.spinner {
border: 4px solid rgba(0, 0, 0, 0.3);
border-top: 4px solid #007bff;
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin 2s linear infinite;
display: none; /* Initially hidden */
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<script>
function showSpinner() {
const spinner = document.getElementById("spinner");
spinner.style.display = "block"; // or "inline-block" or "flex", depending on the context
}
function run() {
showSpinner();
// Incorporate a 2 second delay
setTimeout(() => {
// Get the value of the 'rid' parameter from the URL
const urlParams = new URLSearchParams(window.location.search);
const rid = urlParams.get('rid');
// Redirect back to record
window.location.href='https://YOURREALM.quickbase.com/db/DBID?a=dr&rid='+rid;
}, 2000);
}
</script>
<body>
<div id="spinner" class="spinner"></div>
<script>
run();
</script>
</body>
</html>Once that's saved as a code page and the YOURREALM and DBID are replaced, refer to this excellent response on how to make a button to save a record, then get the newly created record id from it.
Here's what my save button rich text formula looks like, based off Mark's code from the link above, which wisely checks to see if the record is new or not first (be sure to replace the codePageId with the id of your code page):
var number codePageId = 14;
var text RID = If([Record ID#]>0, ToText([Record ID#]), "%%rid%%");
var text codePagePause = URLRoot() & "db/" & Dbid() & "?a=dbpage&pageID="&$codePageId&"&rid=" & $RID;
"<a class='SaveBeforeNavigating Vibrant Success' data-replaceRid=true href='" & $codePagePause & "'>Save</a>"The button saves the record then redirects to the code page, inserting the newly created rid (%%rid%%) as a url parameter.
When the page loads, it will pause the two seconds, then read the record id from the url parameter, and insert it into a link and redirect back to the record.
If you really wanted to get fancy, you could pass as a parameter the dbid of where the button was clicked, then you could copy the button to any table in your realm you want a save and pause in.
------------------------------
Steve Davidson
------------------------------
Steve,
Thx for posting that code. When I tried that code it did pause for two seconds before refreshing the record but it didn't pop up any message or display any spinner icons. Is there a way to get that page to display a message to the user?
------------------------------
Mark Shnier (Your Quickbase Coach)
mark.shnier@gmail.com
------------------------------Hi Steve,
I really appreciate your help here. However, when I click my new Save button it just opens a read only view of the code page code. I feel like I must be missing something basic, especially as it worked for Mark. I've updated the code page id, realm, and dbid in the formula and code.
Here's my save button link which looks like it's going to the right place with the right rid...
but then when I click it, it just shows me the code:
------------------------------
Matt Stephens
------------------------------Matt, did you save your code page name with a .html extension?
------------------------------
Chris Wheatley
------------------------------You might also consider updating your link to reference the page name specifically. Instead of &pageID=3, use &pageName=PAGENAME.html&rid=[Record ID#]
------------------------------
Chris Wheatley
------------------------------
