Forum Discussion

JordanBeatty1's avatar
JordanBeatty1
Qrew Captain
8 years ago

How do you reference a js library in a code page?

I've been using the IOL technique to help makes changes to forms that I can't do in native Quickbase. Though I was wondering, can I reference a js library in a code page? For example:

https://github.com/scottschiller/snowstorm/

(I swear I've seen Dan do this somewhere before)

Say I wanted to include this on a page so it looked like it was snowing. How do I setup a code page to reference a js library?

14 Replies

  • NO. Most libraries you find on a CDN will have built in code that will detect how they should be loaded. Since QuickBase used requirejs to load AMD modules most libraries from a CDN will assume they should load as AMD modules not as globals. Snowstorm is an oldschool library and loads through a global but loading through a global is becoming more unpopular over time.

    For example d3 version 4 from a CDN would be loaded into a QuickBase page using requirejs:
    require.config({
      paths: {
        "d3": "https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3";
      }
    });
    require(['d3'], function(d3) {
      console.dir(d3);
    });
    In contrast d3 version 3 loads through a global.

    At times I have been giving advise to modify libraries and remove loading logic at the head of the file because most users of QuickBase don't have the experience to wade through the proper was to load AMD modules.

    It can be very confusing. Most of this nonsense will go away once JavaScript modules are widely supported:

    http://caniuse.com/#feat=es6-module

    Here is a little trick you can use to detect what libraries have been configured to load as AMD modules in QuickBase:

    console.dir(requirejs.s.contexts._.config );




    Note in the above console screenshot d3 was manually required so it shows up in requirejs's internal context in addition to all the other modules QuickBase has configured to load.
  • So a library can  load as AMD, CommonJS, UMD, ES6, modules or globals, and may need to be configured to work in Quickbase. Which is why even though I now have

    (function(){  $.getScript("https://cdnjs.cloudflare.com/ajax/libs/Snowstorm/20131208/snowstorm.js";,   function() {  snowStorm.snowColor = '#99ccff';  snowStorm.followMouse = true;     }); })();

    when I run

    console.dir(snowStorm) 
    I get the same error since it was not loaded properly and need to configure its path so it loads properly into Quickbase. Sorry, if I still don't understand!