This post introduces some extremely useful information on how developers can easily integrate JavaScrpt libraries using
ES6 Modules. First some background.
Most QuickBase users are familiar with introducing script into a web page using the familiar
<script> tag. The problem with this approach is that as an applications grows in complexity lots of new libraries will be added through new
<script> tags and problems develop with both the order in which the libraries are loaded and how libraries depend on each other. QuickBase has solved this problem using a script loader technology named
requirejs which loads so call
AMD Modules. You can see usage of
requirejs in the source of QuickBase pages by looking for this abbreviated code block:
var require = {
baseUrl: "...res/5bfa218-6227/js",
paths: {
"highcharts": "...res/5bfa218-6227/js/highcharts",
"canvg": "...res/5bfa218-6227/js/canvg",
...
}
};
Some developers have encountered problems loading their own libraries such as
Kendo,
D3,
Moment or accessing
HighChart on a page that does not have a native chart already. The issue is that script libraries are distributed in a variety of different module formats including
Globals,
CommonJS,
AMD,
UMD and
ES6. The trend forward is to use
ES6 Modules as it is now part of the
ECMAScript standard and supported by all modern browsers.
ES6 Modules make adding new libraries a breeze and I will show you how simple they are to use with QuickBase today.
Here is a fragment of code that loads the popular
lodash library as an
ES6 Module (
lodash is similar to the
underscore library currently used by QuickBase):
(async () => {
const _ = await import('https://unpkg.com/lodash-es?module');
let numbers = this.dataset.numbers.split(',');
let result = _.map(numbers, x => x*x);
this.outerHTML = result;
})();
The highlighted line of code is all that it takes to load the
ES6 Lodash Module from the
unpkg repository! You can use this code to load
ES6 Modules anywhere you use script with QuickBase. As an example let's use it with the new
3Q&S technique and load the
lodash ES6 Module.
Here is a demo:
Dynamic Module Import ~ Records Homehttps://haversineconsulting.quickbase.com/db/bn8tkcguc?a=tdDynamic Module Import ~ Add New Recordhttps://haversineconsulting.quickbase.com/db/bn8tkcguc?a=nwrJust type in the field
[Numbers] a comma separated list of numbers and save the form and the squares of those numbers will display in the cell for the
[Squares] field.
Before Save:After Save:Let's look at the full
Rich Text Formula Field for
[Squares] written using the
3Q&S technique:
"<img " &
"data-numbers='" & [Numbers] & "' " &
"src onerror='
(async () => {
const _ = await import('https://unpkg.com/lodash-es?module');
let numbers = this.dataset.numbers.split(',');
let result = _.map(numbers, x => x*x);
this.outerHTML = result;
})();
'>"
If you followed the prior examples of using the
3Q&S technique you should easily recognize what we have here: A self-contained
Rich Text Formula Field that passes a comma separated list of numbers from the field
[Numbers] to the script which asynchronous loads the
lodash library to gain access to the map method and applies a square function to each number and stuffs the result into the cell associated with the field. Ridiculously simple.
Next Up: How To Perform DNA Gene Editing In Single Rich Text Formula Field!
Pastie Databasehttps://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=708