Using Code Pages to Refresh with a Delay

By Ryan Pflederer posted 03-01-2021 10:58

  
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. 

Permalink

Comments

06-22-2021 10:08

@Mike Tamoush it's probably failing because %%rid%% is within URLEncode()​. This fails because the system is looking specifically for %%rid%% but when it's encoded it actually becomes %25%25rid%25%25.
The solve for this would be to wrap everything but %%rid%% in URLEncode(), like this:

//This is a redirect link, and therefore needs to be URLEncoded
URLEncode(URLRoot() & "db/" & dbid() & "?a=er&rid=") & "%%rid%%" & URLEncode("&_fid_7=" & [Status])

06-03-2021 10:53

Do you know if I would have to fundamentally change the code for it to work with class SaveBeforeNavigating? If so, I'll abandon my efforts lol.

When I try to use it right now, it works if I do a popup, but freezes on the intermediate ' API Calls are happening..' page if used with SaveBeforeNavigating.

06-03-2021 10:47

Thanks! That makes a lot more sense. Trying to incorporate it with SaveBEfore NAvigating data-replaceRid=true so that I can use it during an add record call. I'll see if I can get it  but now it makes more sense!

06-03-2021 09:23

Hey @Mike Tamoush​! The above code is only a snippet of the full codepage. If you take a look at the code pages sample app you can view the full context.

06-02-2021 18:45

DOesn't work for me, simply lands me on the code page. Any idea what I am doing wrong?