Kendo AMD not loading, trying to convert to global

  • 0
  • 1
  • Question
  • Updated 11 months ago
  • Answered
I am trying to load Kendo into Quick Base. I understand that Kendo is loaded as an AMD module. Unfortunately, it is not working with my custom application that I'm trying to load through the Rich Text Field. Are there any suggestions for how to convert Kendo to a global module? Is that even necessary? Thank you!
Photo of Spencer Hilvitz

Spencer Hilvitz

  • 170 Points 100 badge 2x thumb

Posted 11 months ago

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

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,264 Points 20k badge 2x thumb
I understand what you are trying to do but without a CDN URL to the Kendo library I can only guess what version or components you are using.

You basically have two options:

(1) Try to load Kendo as an AMD library using QuickBase's requirejs implementation:

Here is the requirejs code to load D3 used in an old forum answer:

require.config({
  paths: {
    "d3": "https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3";
  }
});
require(['d3'], function(d3) {
  console.dir(d3);
});

https://community.quickbase.com/quickbase/topics/how-do-you-reference-a-js-library-in-a-code-page#re...

(2) Modify the Kendo library to prohibit it from loading as an AMD module. At the bottom of the Kendo library there will be code similar to this:

  ...
  }(jQuery), window.kendo
}, "function" == typeof define && define.amd ? define : function(e, t) {
  t()
});


You need to knock out the logic that tests for define.amd. This is a tricky task to edit it correctly as the original code is minified, nested and uses constructs that are difficult for humans to read. I think this it the correct modification but I did not test it:

  ...
  }(jQuery), window.kendo
}, function(e, t) {
  t()
});

(Edited)
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,264 Points 20k badge 2x thumb
I just noticed there was a small typo in the requirejs code (errant semicolon) I posted. Here is a version of that code that clears the typo and loads d3 and kendo-ui-core using requirejs and then logs the d3 and kendo objects along with all the requirejs loaded modules:

require.config({
  paths: {
    "d3": "https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3",
    "kendo": "https://cdnjs.cloudflare.com/ajax/libs/kendo-ui-core/2014.1.416/js/kendo.core.min"
  }
});
require(['d3', 'kendo'], function(d3, kendo) {
  console.dir(d3);
  console.dir(kendo);
  console.dir(requirejs.s.contexts._.config );
});
Photo of Spencer Hilvitz

Spencer Hilvitz

  • 170 Points 100 badge 2x thumb
Thank you so much for getting back to me so quickly! I had been trying to get this to work and I'm still having issues with the requirejs implementation. I have the following code and I am getting back undefined for the console.dir(). Sorry about all of the extra quotations, I am having to do the iol technique and use the rich text field syntax.
Photo of Spencer Hilvitz

Spencer Hilvitz

  • 170 Points 100 badge 2x thumb
"<img src='" & [SB_LOADER_IMAGE] & "' "&
"onload='JavaScript:"&

"console.log(&apos;triggered&apos;);" &
"require.config({" &
    "paths: {" &
        "&quot;kendo&quot;: &quot;https://kendo.cdn.telerik.com/2017.3.913/js/kendo.all.min&quot;"; &
    "}" &
"});" &

"require([&apos;kendo&apos;], function(kendo) {" &
    "console.dir(kendo);" &
    "console.dir(requirejs.s.contexts._config);" &
"});" &

"'/>"
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,264 Points 20k badge 2x thumb
Don't even attempt to place your operative JavaScript into the onload attribute. Doing so will only cause you endless problems with all the escaping needed.

Convince yourself the script I provided works by pasting it directly into the console. Do your development from the console. Once you get that working implement the IOL technique and place your working code into the module.js file. This is the fastest and more reliable way to develop script for QuickBase.
(Edited)
Photo of Spencer Hilvitz

Spencer Hilvitz

  • 170 Points 100 badge 2x thumb
Escaping is definitely a pain. I tried to put the code in the console and this is what I got: 
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,264 Points 20k badge 2x thumb
This is what I get and it indicates d3 and kendo are properly configured through requirejs

Photo of Spencer Hilvitz

Spencer Hilvitz

  • 170 Points 100 badge 2x thumb
That looks like it is working on yours. What possible reason could there be that I would be getting undefined for the kendo object? I have even tried changing the cdn url for kendo to "http://kendo.cdn.telerik.com/2018.2.620/js/kendo.all.min".

Photo of Spencer Hilvitz

Spencer Hilvitz

  • 170 Points 100 badge 2x thumb
require.config({ paths: { "d3": "https://cdnjs.cloudflare.com/ajax/lib...", "kendo": "http://kendo.cdn.telerik.com/2018.2.6..." } }); require(['d3', 'kendo'], function(d3, kendo) { console.dir(d3); console.dir(kendo); console.dir(requirejs.s.contexts._.config ); });
(Edited)
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,264 Points 20k badge 2x thumb
I think it is working for you as well. The "Invalid require call" string you see in the console is just a literal string within the body of the function which is returned by the last statement:

ƒ d(e,c,g){var i,j;f.enableBuildCallback&&(c&&J(c))&&(c.__requireJsBuild=!0);if("string"===typeof e){if(J(c))return w(B("requireargs",
"Invalid require call"),g);if(a&&t(P,e))return P[e](q[a.id]);if(h....
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,264 Points 20k badge 2x thumb
I think you are just fooling yourself that d3 and kendo are not loading. Try this instead:

require.config({
  paths: {
    "d3": "https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3";,
    "kendo": "https://cdnjs.cloudflare.com/ajax/libs/kendo-ui-core/2014.1.416/js/kendo.core.min";
  }
});
require(['d3', 'kendo'], function(d3, kendo) {
  console.log(d3.version);
  console.log(kendo.version);
});
output:
4.9.1
2014.1.416
Photo of Spencer Hilvitz

Spencer Hilvitz

  • 170 Points 100 badge 2x thumb
You're right, those are working. In the picture I uploaded, that second object for Kendo was coming back undefined but now it seems to be working. I must have just been doing something incorrectly. Thank you so so much for your help! I really appreciate you taking the time to help me!
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,264 Points 20k badge 2x thumb
Okay I see that undefined now - it is probably some remnant due the the history of the command you put in the console without refreshing the page.

But this is a good thread as I suspect many people have given up using AMD libraries with QuickBase because of precisely what you have experienced.

In future versions of QuickBase we will have native ES6 modules, and Sam is going to have an epiphany and go full on with the monadic pipeline of workflows and all these problems will evaporate.
Photo of Spencer Hilvitz

Spencer Hilvitz

  • 170 Points 100 badge 2x thumb
That will be great to have the ES6 modules. I was finally able to get everything working. Just for the sake of anyone looking for a final solution, here is the code that got Kendo working in Quickbase. Thank you for starting me on the right path Dan, I really appreciate your help.
(Edited)
Photo of Spencer Hilvitz

Spencer Hilvitz

  • 170 Points 100 badge 2x thumb
$.getScript("https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js";, function () { });

require.config({
paths: {
"jquery": "https://code.jquery.com/jquery-1.9.1.min";,
"jszip": "https://kendo.cdn.telerik.com/2018.1.221/js/jszip.min";,
"kendo.all.min": "https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min";,
}
});

require(["jquery", "jszip", "kendo.all.min"], function ($, JSZip, kendo) {
window.JSZip = JSZip;
$(document).ready(function () {
Grid = new GridTest({ ProcessOrderID: '103308881', FieldList: '1.2.3.4' });
Grid.createGrid();
Grid.initiate();
Grid.showColumns();
})

});
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,264 Points 20k badge 2x thumb
I don't know why you are loading requirejs through $.getScript() as it is already loaded by QuickBase.
Photo of Spencer Hilvitz

Spencer Hilvitz

  • 170 Points 100 badge 2x thumb
You're totally right, that is unnecessary in QuickBase. I was just copying it from my local. My apologies.