Forum Discussion

Qrew Cadet

2 years ago

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...

JeremyAnson

Qrew Cadet

Hi, something like this should work as a code page. Largely the work of ChatGPT :)

<html>

<head>

<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>

// 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>

</body>

</html>

------------------------------
Jeremy Anson
------------------------------

SteveDavidson1

Qrew Trainee

2 years ago

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
------------------------------

MarkShnier__You
Qrew Legend
2 years ago
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
------------------------------
MattStephens
Qrew Cadet
2 years ago
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
------------------------------
- ChristopherWhea
  Qrew Cadet
  2 years ago
  Matt, did you save your code page name with a .html extension?
  
  ------------------------------
  Chris Wheatley
  ------------------------------
  - ChristopherWhea
    Qrew Cadet
    2 years ago
    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
    ------------------------------