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

  • 0
  • 1
  • Question
  • Updated 3 months ago
  • Answered
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?
Photo of Jordan

Jordan

  • 1,574 Points 1k badge 2x thumb

Posted 1 year ago

  • 0
  • 1
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,352 Points 20k badge 2x thumb
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 QuickBaseand expect to be loaded as an AMD module. If this is your scenario ask another question if you encounter this problem.
Photo of Jordan

Jordan

  • 1,574 Points 1k badge 2x thumb
Okay, currently I am running with:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Snowstorm/20131208/snowstorm-min.js"></script>;
<script>
snowStorm.snowColor = '#99ccff';
snowStorm.autoStart = true;
snowStorm.followMouse = true;
</script> 
It is not currently working, how do I check to see if the issue is that is was loaded using requirejs before I ask in another post?
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,352 Points 20k badge 2x thumb
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>
(Edited)
Photo of Jordan

Jordan

  • 1,574 Points 1k badge 2x thumb
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?
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,352 Points 20k badge 2x thumb
It is loaded through a global named snowStorm

console.dir(snowStorm)
Photo of Jordan

Jordan

  • 1,574 Points 1k badge 2x thumb
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

Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,352 Points 20k badge 2x thumb
That will not work at all. The IOL technique loads a JavaScript file but you have HTML in your snow.js code page.
Photo of Jordan

Jordan

  • 1,574 Points 1k badge 2x thumb
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?
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,352 Points 20k badge 2x thumb
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;
    });
})();
Photo of Gaurav Sharma

Gaurav Sharma

  • 5,756 Points 5k badge 2x thumb
Hi Dan,

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

Thanks,
Gaurav
Photo of Jordan

Jordan

  • 1,574 Points 1k badge 2x thumb
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!
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,352 Points 20k badge 2x thumb
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.
(Edited)
Photo of Jordan

Jordan

  • 1,574 Points 1k badge 2x thumb
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!
(Edited)
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,272 Points 20k badge 2x thumb
I never saw your comment before but you have a typo (semicolon) in your code. Should be:

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