Using Code Pages to Refresh with a Delay
Using Code Pages to Refresh with a Delay
End User Workflow
Often, builders want to click a button to trigger a Pipeline, and then wait a few seconds giving the workflow time to complete prior to refreshing the page. This is especially common when Pipelines are interacting with a 3rd-party webservice (for example, creating a record in another system and bringing back confirmation data). This can enhance the user experience vs the user having to refresh the page manually after clicking button initially. This can be accomplished with a code page.
Example
First, create a Formula URL field and construct an API URL, such as “?a=API_AddRecord” or “?a=API_EditRecord” (stringing multiple together if necessary) and declare it as a variable. Then pass this variable to the code page to handle the rest.
// API URL to Add/Edit/etc.
var text urlToExecute = URLRoot() & "db/" & Dbid() & "?a=API_EditRecord&apptoken=" & [App Token]
& "&rid=" & [Record ID#] & "&_fid_20=true"; // Mark field 20 as True
URLRoot() & "db/" & AppID() & "?a=dbpage&pageid=6" // Open code page 6
& "&url=" & URLEncode($urlToExecute) // Pass in the URL to execute
Technical Instructions
The code page, having this key piece of JavaScript, is then able to run the API passed to it, wait 2.5 seconds and refresh the page.
let urlParams = new URLSearchParams(window.location.search);
let url = urlParams.get('url');
fetch(url, {
method: 'post',
mode: 'no-cors',
headers: { 'Content-type': 'text/plain' }
}).then((response) => {
setTimeout(function () {
window.location.href = document.referrer}
, 2500); // # of milliseconds to pause for, 2500 = 2.5 seconds
})
Using the above approach reduces the amount of JavaScript needed and allows for more control to exist in the formula. Depending on how long the URLs become, builders may want to switch to a more advanced method of querying the record and constructing the HTTP calls directly in JavaScript.
This is a snippet from the new code pages application which showcases sample pages which solve common uses cases by extending the Quickbase platform using JavaScript and APIs.
