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
- Using new formula functionality to replace JS Insertion
- Dashboard Customization
- Querying Data
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.
Resources
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 before. They also offer an alternative to previous JS Insertion methods including, for example, ways 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
Redirects can be built into buttons and API calls in Quickbase to help direct users along a workflow and simplify their navigation. Before 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.
Resources
iFrames
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 *.quickbase.com URLs that are supported are for code pages. All other *.quickbase.com URLs will not function when embedded on a Quickbase form.
Resources
Popups
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>"
Resources
- April 2021 Release Notes
- May 2021 Release Notes
- Example code can be found in the Code Page Sample App
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.
Resources
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>"
Resources
- May 2021 Release Notes
- Example can be found in the Code Page Sample App
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.
Resources
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.
Resources
- April 2021 Release Notes (Aggregation Options in Summary Reports)
- Supercharging Summary Reports with New Aggregation Options
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.
Resources
- June 2021 Release Notes (Beta for Formula Queries)
