Steps for creating Code Page

  • 4 minute(s) read
Prev Next

Quickbase drops support for embedded JavaScript in formulas

You might have noticed that Quickbase displays a "WARNING" message whenever you try to open the properties of any button formula-URL field that contains the word "JavaScript," as shown in the following screenshots.

Quickbase has decided to drop support for embedded JavaScript within many areas of its platform, so this change will impact the way our extensions are currently offered.

This does not in any way affect the way our extensions work and operate, but this change will affect the way we use JavaScript to open a popup window in your browser.

Quickbase released a statement with more information about this change:

Read Quickbase's blog post about the JavaScript changes

Here is an example of what you might see when editing the field properties of one of our extension fields. The first line of code causes Quickbase to display the following warning message.

Example formula code that triggers Quickbase's JavaScript warning message

Quickbase warning message about JavaScript in formula fields

Why do these fields use JavaScript?

  • Many of our extensions use JavaScript code to open a pop-up window that shows the user interface (UI) related to the extension's respective functionality. That is the extent of our JavaScript usage.

    • Example: Our Signatures for Quickbase (QB Signatures) opens a pop-up window with a signing pad to capture the signature. We use "javascript:void(window.open" in the button formula to pop up that window.

      Signatures for Quickbase pop-up signing window example

  • As a security measure, Quickbase recommends that JavaScript be removed from the formula code, and that JavaScript be used strictly on Code Pages instead.

  • Our solution: Remove the JavaScript code from the button formula, and provide the same popup experience using Quickbase "Code Pages."

    • Important: We have engineered the solution so that a single Code Page will work for all of our Quickbase Extensions present within your app. The user experience will be the same.

(What is a Code Page? See Quickbase's documentation on creating Code Pages.)

Note

Steps to create a Code Page for your extensions:

Follow these steps to create a Code Page in your Quickbase app. (Quickbase help for Code Pages)

Step 1: Select the "Home" button in the left corner of your Quickbase app.

Home button in the left corner of the Quickbase app

Step 2: Select the "settings" icon.

Settings icon in the Quickbase app

Step 3: Select the "+ New" icon above "Pages."

New icon above the Pages section

Step 4: A pop-up window opens. Select the "Code Page" option, and then select the "Create" button.

Pop-up window with the Code Page option selected

Step 5: Name the page exactly "JuicedAddonPopup.html," as shown in the following screenshot.

Code page named JuicedAddonPopup.html

Important

If you change the name of this code page, everything will break.

Step 6: Copy and paste the following code into the text area of the page, exactly as shown.

Do not change any line of code, or errors will occur.

<!DOCTYPE html>
<html>
<head>

<!--
Author:    JUICED TECHNOLOGIES, INC. <info@juicedtech.com> 631-617-5060
Purpose:   When called this routine will Pop Up a window for use with Juiced Technologies Add-ons for Quickbase
Copyright 2021: Juiced Technologies, Inc.

Please DO NOT rename this page.  It must remain JuicedAddonPopup.html
-->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
// This DB page allows you to execute Juiced add-ons without JavaScript in the formula URL.

$(document).ready(function(){

    var urlParams = new URLSearchParams(window.location.search);

    var PostURLNew="";
    var counter=0;
    var buildRequest=false;

    var PostURL = urlParams.get("url");

    var redirectURL = urlParams.get("rdr");

   if(PostURL.toLowerCase().includes("request="))
   {
     //In this scenario NO need to iterate through the parameters and build the request to post it to the respective server
     PostURLNew = PostURL;
     buildRequest=false;
   }
   else
   {
     buildRequest=true;
   }

   if(buildRequest)
   {
       for(var pair of urlParams.entries())  //for-loop
       {

    //console.log(pair[0]+ ', '+ pair[1]);  //To write it to the console window of the debugger

    if(counter>1)
    {
         PostURLNew += pair[0] + "=" + pair[1] + "&";
        }

       if(pair[0].toLowerCase() == "url")
       {
           PostURLNew=pair[1] + "&";
           counter=1;
       }

        if(counter==1)
    {
           counter+=1;
    }
     }
   }

   var defaultwinProperties ="top=150,left=220,location=no,menubar=no,toolbar=no,"

   var winWidth="";

   var winHeight="";

  winWidth=urlParams.get("jswidth");

  if(winWidth=="" || winWidth==null)

  {
     winWidth=urlParams.get("width");
  }

  winHeight=urlParams.get("jsheight");

  if(winHeight=="" || winHeight==null)
  {
    winHeight=urlParams.get("height");
   }


 if(winWidth=="" || winWidth==null)
 {
   winWidth = 650;
 }

  if(winHeight=="" || winHeight==null)
 {
   winHeight = 550;
 }


   var wnd = window.open(PostURLNew,"",defaultwinProperties+'width='+winWidth+','+'height='+winHeight);

   var id=setInterval(function()
                   {
                      if (wnd.closed)
                       {
                            if (redirectURL=="" || redirectURL==null)
                            {
                                //Falls into this condition if the 'rdr' parameter is not passed
                                history.back();  // to redirect back to the Quickbase record which clicked on the button
                            }
                            else
                            {
                                window.location.href=redirectURL;
                            }
                       }
                    });
                  void(0);

}); //closing the document.ready function
</script>
</head>
<body>
</body>
</html>

Make sure you copied all the way to the end of the code. It should end with </html>.

Your code page should look exactly like this:

Step 7: Once you copy and paste the code correctly, select the "Save" button in the top-right corner.

Save button in the top-right corner of the Code Page editor

Important

If you change the name of this code page, everything will break.

  • Next steps are to modify the button formula URL to remove JavaScript.