Discussions

 View Only
  • 1.  Importing ES6 Modules

    Posted 12-12-2018 20:08
    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 Home
    https://haversineconsulting.quickbase.com/db/bn8tkcguc?a=td

    Dynamic Module Import ~ Add New Record
    https://haversineconsulting.quickbase.com/db/bn8tkcguc?a=nwr

    Just 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 Database
    https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=708