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?
APIs and custom code
  • _anomDiebolt_'s avatar
    _anomDiebolt_
    Qrew Elite
    8 years ago
    Github is a repository for source code not a CDN (Content Delivery Network) so you shouldn't reference source code from Github.

    Instead, load the library from a CDN:

    https://cdnjs.cloudflare.com/ajax/libs/Snowstorm/20131208/snowstorm-min.js

    or place the library in a code page and reference it as follows:

    https://SUBDOMAIN.quickbase.com/db/APPDBID?a=pageedit&pagename=MYSCRIPT.JS

    Note that many libraries loaded from a CDN have been constructed so that they can load as AMD, CommonJS, UMD, ES6, modules or as Globals. If you are injected the library into a QUickBase authored page the is a good chance the library will detect the presence of requirejs (the loader used by QuickBase) and expect to be loaded as an AMD module. If this is your scenario ask another question if you encounter this problem.
  • _anomDiebolt_'s avatar
    _anomDiebolt_
    Qrew Elite
    8 years ago
    Their simple demo works for me with that particular CDN reference to the library:

    http://www.schillmania.com/projects/snowstorm/basic-example.html

    <html>
    <head>
    <title>DHTML SnowStorm: Basic Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Snowstorm/20131208/snowstorm-min.js"></script>
    </head>
    <body style="background:#6699cc;font:100 1.75em helvetica neue, helvetica,arial,verdana,sans-serif;color:#fff">
    <h1 style="font-size:2em;margin:0px;font-weight:100">Example SnowStorm page</h1>
    <p>
     A single Javascript reference in the &lt;head&gt; tag is required for SnowStorm to work.
    </p>
    <p>
     View the source of this page for reference.
    </p>
    </body>
    </html>
  • JordanBeatty1's avatar
    JordanBeatty1
    Qrew Captain
    8 years ago
    If the reference is working then it may be how it loaded, how do I check to see how it loaded before I post the question asking how to modify how its loaded to be sure that is the issue?
  • JordanBeatty1's avatar
    JordanBeatty1
    Qrew Captain
    8 years ago
    Just to make sure I set this up right I have attached some screenshots:






    Since when I opened the console in the browser and put in the command I received an error

  • _anomDiebolt_'s avatar
    _anomDiebolt_
    Qrew Elite
    8 years ago
    That will not work at all. The IOL technique loads a JavaScript file but you have HTML in your snow.js code page.
  • JordanBeatty1's avatar
    JordanBeatty1
    Qrew Captain
    8 years ago
    Ahhh I see. I've never called a CDN before and always downloaded libraries and referenced their location. So how should I be formatting this, given I can't use HTML?
  • _anomDiebolt_'s avatar
    _anomDiebolt_
    Qrew Elite
    8 years ago
    This is my formula in the Pastie Databse that loads snowstorm.js:

    [iol] & "modulePasties.js" & [/iol]

    This is the relevant code in modulePasties.js:
    (function(){
        $.getScript("https://cdnjs.cloudflare.com/ajax/libs/Snowstorm/20131208/snowstorm.js";, function() {
          //snowStorm.snowColor = '#99ccff';   // blue-ish snow!?
          snowStorm.snowColor = "blue";
          snowStorm.followMouse = true;
          snowStorm.flakesMaxActive = 96;    // show more snow on screen at once
          snowStorm.useTwinkleEffect = true; // let the snow flicker in and out of view
          snowStorm.usePositionFixed = false;
        });
    })();
    • GauravSharma3's avatar
      GauravSharma3
      Qrew Commander
      8 years ago
      Hi Dan,

      I have tried to implement same but could not succeed. Can you please help me out in this?

      Thanks,
      Gaurav
  • JordanBeatty1's avatar
    JordanBeatty1
    Qrew Captain
    8 years ago
    This was very helpful! So whenever I want to reference a particular JS library I should find it on a CDN and use the jQuery $.getScript to grab it, then use a function to pass any of the libraries arguments to it. Thank you so much for helping me with this Dan!