Creating JSFiddle for Oracle JET snippets
The original JSFiddle that I used as a started point is from John Brock … ehm, Peppertech: https://jsfiddle.net/peppertech/a593LL2r/
As an external resource the fiddle loads requireJS: https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.2/require.min.js
- store the files on GitHub
- create a CDN-style URL to each file, for example using RawGit (a site that serves GitHub project files through MaxCDN)
- add the URL as external resource to the fiddle
Any file added in this fashion is loaded by JSFiddle when the fiddle is executed.
In my case, I want to load a custom module — through require.js . In that case, I do not have to add the file that contains the module definition to the JSFiddle as external resource. I can have require.js load the resource directly from the CDN URL (note: loading the file from the raw GitHub URL does not work: “Refused to execute script from ‘https://raw.githubusercontent.com/lucasjellema/supporting-sources/master/basic-jet-snippet/my-module.js’ because its MIME type (‘text/plain’) is not executable, and strict MIME type checking is enabled.”.
My custom module is on GitHub:
I copy the URL to the clipboard. Then on https://rawgit.com/ I paste the URL:
I then copy the CDN style URL to the clipboard. In JSFiddle I can add this URL path to the code — in function _getCDNPath(paths) . Note: I remove the actual name of the file, so the path itself refers to the directory. In this directory, there could be multiple modules.
Finally the module is required into fiddle through:
Here I refer to custom-modules/my-module which resolves to the module defined in file my-module.js in the [GitHub] directory referred to by the CDN Url added to newPaths.
The full fiddle looks like this — hardly anything specific, just a tiny little bit of data binding to the ViewModel:
This fiddle now becomes my starting point for any future fiddle for Oracle JET 3.2. As is shown below.
Create New Fiddle from Template
To create any Oracle JET fiddle, I can now (and you can do that as well) go to my template fiddle (https://jsfiddle.net/lucasjellema/h7n41tkp/) and click on Fork.
A new fiddle is created as a clone of the template. I should update the meta data of the fiddle (as to not get confused myself) and can then create the example I want. Here I show a very basic popup example:
The resulting fiddle: https://jsfiddle.net/lucasjellema/5abpdgt9/ — created as a clone of the template fiddle, extended with a few lines of code to create the intended effect.
The two fiddles show up on my public JSFiddle Dashboard (https://jsfiddle.net/user/lucasjellema/fiddles/):
Fiddles can be embedded in articles and other publications. Open the embed option in the top menu and copy the embed-code or link:
Then use that code in the source of whatever you want to embed the fiddle into.
More elaborate JSFiddle — Nested Datagrid
Another example of an interesting Oracle JET based JSFiddle, created from the base template is this nested data grid: https://jsfiddle.net/lucasjellema/L335cfwd/. Note: I have not yet replace local image references with URLs to a Content Delivery Network or some other public location.
Note: some fiddles will only run (for me at least) in Google Chrome Browser — not in Firefox.
Jim Marion’s blog article http://jsjim.blogspot.nl/2016/03/fiddling-around-with-oracle-jet.html
Source in GitHub: https://github.com/lucasjellema/supporting-sources/
The starting point fiddle by PepperTech: https://jsfiddle.net/peppertech/a593LL2r/
The final resulting fiddle with the JET Tooltip example: https://jsfiddle.net/lucasjellema/5abpdgt9/
My public JSFiddle Dashboard (https://jsfiddle.net/user/lucasjellema/fiddles/):
Originally published at technology.amis.nl on August 29, 2017.