Forum Discussion

EvanMartinez's avatar
Quickbase Staff
3 years ago

Alternatives to common JavaScript Insertion techniques: information and resources

Alternatives to common JavaScript Insertion techniques: information and resources

Earlier this year, we announced changes to how Quickbase will handle custom code (like JavaScript) when it is placed outside of code pages. We outlined three key areas of the product where we need to close the loophole that allowed custom content like JavaScript to be inserted. Our plan included closing one area at a time, every two months starting in April 2021 and finishing in our August 2021 release. You can learn more about the full plan here.   

This page includes a collection of enhancements and features we have released to extend the options available to builders that can be used as alternatives in place of JavaScript Insertion techniques. We will also link to information on the feature, help pages, and examples where they exist.  

Table of Contents 

Using Code Pages instead of JS Insertion 

Code pages allow builders to create and run custom scripts or UI (User Interface) using code such as HTML, CSS, or JavaScript. Code pages provide a supported alternative to JavaScript insertion and can be used to replace many common use cases. You can add this code to your app or embed it in iframes (see examples in the Extending Quickbase help topic). Your app users run this code via a link you put in a formula URL field, button, or hyperlink on your dashboard. Some common examples include: 

  • Open a Pop-Up 
  • Save & Keep Working 
  • Run and Refresh 
  • Prompt and Refresh 
  • Prompt and Redirect 
  • Run Pause Refresh 
  • Cascading Delete 
  • Run Pause Refresh, New Tab 
  • Get Current Weather 
  • Add Record with RID 
  • Generate iCal 
  • Add Edit Record Form 
  • Get Temp Token 
  • Call End Point Pause Refresh 

        To help builders take advantage of these techniques, we have collected examples into a new app, the Quickbase Code Page Samples app. This app is open to everyone on the internet. Use it as a guide to better understand how to take advantage of code pages, and how they can be used to extend the platform, solving for even more use cases. As we continue to listen and learn from you, we’ll update the app to include additional examples.  


        Using New Formula Functionality to replace JS Insertion 

        Over the last few months our Product team has implemented new functionality in formula fields to allow builders an easier way to enhance their formulas and buttons. These new functions unlock options builders did not have available beforeThey also offer an alternative to previous JS Insertion methods includingfor exampleways to build better redirects in buttons, more safely display iFrames in Quickbase, create Pop-up windows, save records before navigating, capture record IDs before navigating, and save records and keep working in custom buttons. 


        Redirects can be built into buttons and API calls in Quickbase to help direct users along a workflow and simplify their navigationBefore our March 2021 release, builders had to pre-define a location for their formula buttons to redirect to, or first redirect to a custom code page. In March we released a new formula function and URL pattern to redirect an end user back to where they started. For example, a builder could use a formula like the below in a button so that users end up back on the page where they pushed the button: 

        URLRoot() & "db/" & [_DBID_SUB_TASKS] & "?a=API_AddRecord"&"&rdr="&URLEncode( URLRoot()  

        & "db/" & Dbid() & "?a=doredirect&z=" & Rurl()) 

        You can find examples of our current formula functions for redirects in the community article linked below. You can also find the original announcement of this change in our March 2021 release notes.  



        iFrames allow builders to embed a secure, external website so that it displays directly on their forms for users. Builders can now create iFframes on URL and Formula-URL fields by selecting the option to Embed as iframe in forms directly in the field’s settings. This provides builders a way to embed YouTube videos or other file services (Box, Drive, etc.) as a file preview. For security purposes, the only * URLs that are supported are for code pages. All other * URLs will not function when embedded on a Quickbase form. 



        Formula URL and Formula-rich text fields can now both be set up by builders to open a website as a popup window. This allows users to be directed to resources in a popup while remaining in the context where the field is displayed.  

        Formula URL fields can be set to open as a popup in the field settings under Open Target by selecting In popup from the options. 

        Builders can also achieve the same functionality with formula-rich text fields by applying the CSS class OpenAsPopup. As of the May release, builders can also customize the size of a popup using the data-width and data-height parameters in the CSS and refresh the source page when a popup is closed using the data-refresh parameter. A formula using these options might look like this: 

        var text url = URLRoot() & "db/" & Dbid() & "?a=dr&rid=" & [Record ID#]; 


        // This has no 'button' styling, but rather just hyperlinked text 

        "<a class=\"OpenAsPopup\" href= \"" & $url & "\" data-height=\"600 \" data-width=\"400 \">Open record in popup - Rich Text</a>" 



        Save before navigating 

        Builders can now use the CSS class (SaveBeforeNavigating) inside of a formula-rich text field so that Quickbase saves the record before navigating away. To enable this Builders would select the option to Auto save when redirected away from the page in the table’s settings. By having this setting checked in the table's properties, all Formula URL buttons will automatically save any edited fields prior to executing the button. Rich Text buttons require the use of class='SaveBeforeNavigating' to take advantage of the automatic save. 



        Capture New Record ID when using Add Record 

        Builders can now use record ID# as a parameter when a user clicks a custom hyperlink from an add record form. This lets Builders leverage newly created record IDs and expands custom code page workflow options. One example is it allows Builders to add a save and keep working option to their formula rich text field buttons. Builders can do this while creating formulas by calling the function data-replaceRid=true in the formula and then using %%rid%% where you would like the RID to appear in your formula. An example formula might look like: 

        "<a class=\"Vibrant Success SaveBeforeNavigating\" data-replaceRid=\"true\" href=\"/db/abc?a=dr&rid=%%rid%%\">Click here</a>" 

        Note: You can only use this parameter when the hyperlink navigates to the same tab, not when it is set to open in a new tab or popup. 


        Save and keep working 

        With the addition of the ability to capture a New Record ID when using Add Record, app builders are also now able to create buttons that allow them to save a record and redirect to the edit form of the same record. This technique can work both when adding new records or updating existing records. This is a great option for builders that want to help break up long forms or make sure certain parts of their forms are saved before kicking off pipelines or other workflows. An example formula to take advantage of this option might look like the example below: 

        var text rid = If([Record ID#]>0, ToText([Record ID#]), "%%rid%%"); 

        var text url = URLRoot() & "db/" & Dbid() & "?a=er&rid=" & $rid; 

         "<a class=\"Vibrant Primary SaveBeforeNavigating\" data-replaceRid=\"true\" href=\"" & $url & "\">Save & Keep Working - Rich Text</a>"  


        Dashboard Customization

        In the past, app builders have made use of JavaScript Insertion to change the visuals of their app home pages and add in new elements. As of Empower 2021, our new and enhanced Dashboards are GA (General Availability) to all Builders to help you unlock real-time reporting and operational insights across teams, processes, and disparate systems securely. You can test our your very first New Dashboard today by selecting Dashboard when you create a new page. 


        Querying Data 

        Aggregation Options in Summary Reports

        Builders in Quickbase analyze operational data, drill into details, and drive workflows using the insights they gain from their apps. This is done through reports, using formulas, and sharing information to users via dashboards every day. Our recent release of aggregation options for summary reports and charts adds the ability for builders to summarize data in more meaningful and useful ways in their reports. With this change you can now run calculations off of the aggregate values in summary tables allowing new insights with less complications and without JavaScript.  



        Formula Queries

        Knowing builders are always looking for new ways to drive their insight into their data and business we recently opened up sign-ups for Beta access to formula queries. With formula queries builders will be able to gather information from any field or record in a QB app, without a relationship. These queries will unlock all new options for building formulas and taking advantage of their power. Sign-up now for your chance to get a sneak peek at formula queries and help us to build the future of formulas with your feedback.  



              3 Replies

              • One of the most prevalent uses of javascript insertion is automatic re-directs. For example, the user opens an invoice that is overdue and instead of seeing the invoice, they are redirected to a page in the collections department. Another typical application if record types: if the record type is strategic project, open one form; if it is a short term project, open a different form. (Form rules can only take you so far - when the forms are totally different, with different tabs and sections, form rules are not sufficient.)
                I wish there was some way to create this capability without script insertion.
              • Hi Emsegal,

                Due to how flexible JavaScript Insertion can be with what can be written there are going to be some use cases we aren't able to replicate but I have done something similar to your use case with a button using our native formula functions. 

                First thing I did was set my report I used for my general users to not be able to click on the record to edit or view and then I created my own view and edit button fields. Then I used the formula language to display different buttons in each of those fields that opened different forms depending on which status the record was currently in. So if it was a "Short Term Project" for example it would show the button that opened Form 2, and if it was a "Strategic Project" then show the button that opens up Form 5. The advantage here is that it is all in the QB formula language so it is easier to pass on to others and get support from care when changes are needed, etc. If your curious to chat about the method more in depth if you open up a discussion in the forum I'm happy to walk through it more in depth.
              • Hey Evan,

                Any ideas how to close a pop-up after using open as a pop-up, other than closing the window using the browser? Like the OpenAsPopUp can leverage a Form Type that allows a special Close pop-up button? 

                That'd be cool!

                Jim Harrison
                Portland, OR