HTML Template

Overview #

The HTML Template Visualization is an advanced visualization geared towards software engineers. On the surface, this visualization allows HTML and CSS to be combined to create custom visualizations. However, the HTML Template Visualization does not have to be static. Like all visualizations, an HTML Template Visualization has a data set. Beneath the covers, the HTML Template Visualization supports JavaScript and Angular. This combination of Angular, JavaScript, HTML, and CSS provides a powerful set of tools to build up truly custom visualizations.

Renderer: HTML Tab #

The HTML tab allows administrators to type HTML. It supports Angular statements which can be used for data binding. The “ng-style” tag shown below swaps out a background image based on the value of an edgeCore Page Variable.

LESS/CSS #

The LESS/CSS tab allows administrators to create custom LESS/CSS classes, which can then be referenced on the HTML tab.

The HTML Template’s configuration will detect certain syntax errors within the source code and prevent malformed LESS/CSS from getting to the client and causing problems.

JavaScript #

The JavaScript tab allows an administrator to write JavaScript, which can then be referenced on the HTML tab.

Detailed Developer Help is offered in the footer, with examples on how to work with variables, events, and resource loading.

Downloading and Restoring #

This feature is available in edgeSuite v3.5.3 or higher.

Clicking Download on the Renderer Wizard Step will produce a backup file of the Custom HTML Template for easy reuse. Restoring it provides a dialog that allows you to Drag-and-drop or choose a backup file.

Partial Backup #

To ensure all dependencies are included in partial backups, either place referenced static resources in [INSTALL_HOME]/static-web/visualizations/{visualizationName} (note the camel-casing of the visualization’s name), or choose your own location and specify it in the Resources Location property in the Configure step of the HTML Template Wizard. Any location specified should be under the [INSTALL_HOME]/static-web directory, which maps to /custom for URLs in the HTML Template.

Example #

The HTML, Angular, and CSS shown in the examples above combine to create the examples below. It is a fairly simplistic visualization, but thanks to Angular, it is interactive and will react to Page Variables. The visualization will show a background image and text values based on the value of a Page Variable, which in this case is the name of a National Park.

Sample Data #

Click here to download the National Parks data referenced on this page: National Parks Data Files

Using a JavaScript library that is provided by edgeSuite: #

You can access it with the following example – in this case you wish to access Highcharts library that is part of edgeSuite:

const highcharts = Require('highcharts');

Some of the common libraries are available off the window object and it can be used directly without using the Require syntax above. Here is a list of these libraries:

  • moment
  • $ or jQuery
  • go (gojs)
  • L (leaflet)
  • d3
  • _ (underscore)

Using a JavaScript library that is conflicting with the version provided by edgeSuite: #

If you wish to use a JavaScript library that is already in edgeSuite but at a newer or older version, you can accomplish this by using an iframe to compose your content and import your css and JavaScript library files. We have created an example of this with the following edgeSuite v3.6 partial archive: HTMLTemplate.esb.

3rd Party JS/CSS Libraries Loaded in edgeSuite #

Component/Lib
Version
License
URL To 3rd Party Library Information
1 angular 1.7.8 MIT https://github.com/angular/angular.js
2 angular-animate 1.7.8 MIT https://github.com/angular/angular.js
3 angular-block-ui 0.2.2 MIT https://github.com/McNull/angular-block-ui
4 angular-bootstrap-colorpicker 3.0.32 MIT https://github.com/buberdds/angular-bootstrap-colorpicker
5 angular-cron-gen 0.0.26 MIT https://github.com/vincentjames501/angular-cron-gen
6 angular-file-upload 2.5.0 MIT https://github.com/nervgh/angular-file-upload
7 angular-gettext 2.4.1 MIT https://github.com/rubenv/angular-gettext
8 angular-hotkeys 1.7.0 MIT https://github.com/chieffancypants/angular-hotkeys
9 angular-messages 1.7.8 MIT https://github.com/angular/angular.js
10 angular-pageslide-directive 2.1.1 MIT https://github.com/danielepiccone/ng-pageslide
11 angular-sanitize 1.7.8 MIT https://github.com/angular/angular.js
12 angular-simple-logger 0.1.7 MIT https://github.com/nmccready/angular-simple-logger
13 angular-sortable-view 0.0.17 MIT https://github.com/kamilkp/angular-sortable-view
14 angular-spinner 1.0.1 MIT https://github.com/urish/angular-spinner
15 angular-ts-decorators 3.7.9 MIT https://github.com/coolblades/angular-ts-decorators

Fork of https://github.com/vsternbach/angular-ts-decorators

16 @uirouter/angularjs 1.0.22 MIT https://github.com/angular-ui/ui-router
17 angular-ui-tree 2.22.6 MIT https://github.com/angular-ui-tree/angular-ui-tree
18 angular-vs-repeat 1.1.7 MIT https://github.com/kamilkp/angular-vs-repeat
19 angularjs-slider 7.0.0 MIT https://github.com/angular-slider/angularjs-slider
20 bootstrap3-dialog 1.1.0, 1.35.4 MIT https://github.com/coolblades/bootstrap3-dialog.git

Fork of https://nakupanda.github.io/bootstrap3-dialog/ for supporting bootstrap 4

21 bootstrap-switch 3.3.4 Apache 2.0 https://github.com/thomaspark/bootswatch
22 bootstrap 4.3.1 MIT https://github.com/twbs/bootstrap
23 bootswatch 4.3.1 MIT https://github.com/thomaspark/bootswatch
24 cbuffer 2.0.0 MIT https://github.com/trevnorris/cbuffer
25 codemirror 5.44.0 MIT https://github.com/codemirror/CodeMirror
26 crypto-js 3.1.9 MIT https://github.com/brix/crypto-js
27 css-loader 2.1.1 MIT https://github.com/webpack-contrib/css-loader
28 css-selector-generator 1.2.0 Unlicensed https://github.com/fczbkk/css-selector-generator
29 d3, d3cie 3.5.17 BSD-3-Clause https://github.com/mbostock/d3
30 d3-sankey 0.4.2 BSD-3-Clause https://github.com/d3/d3-sankey
31 daterangepicker 3.0.3 MIT https://github.com/dangrossman/bootstrap-daterangepicker
32 es6-object-assign 1.1.0 MIT https://github.com/rubennorte/es6-object-assign
33 @fortawesome/fontawesome-free 5.11.0 CC-BY-4.0 AND OFL-1.1 AND MIT https://github.com/FortAwesome/Font-Awesome
34 gojs 2.0.4 GoJS / Northwoods Software https://github.com/NorthwoodsSoftware/GoJS
35 google-code-prettify 1.0.5 Apache 2.0 https://github.com/google/code-prettify
36 heatmap.js 2.0.5 MIT https://github.com/pa7/heatmap.js
37 highcharts 7.2.0 Highcharts license https://github.com/highcharts/highcharts-dist

www.highcharts.com/license

38 jquery 3.4.1 MIT https://github.com/jquery/jquery
39 jquery.mobile 1.5.0-alpha.1 MIT https://github.com/jquery/jquery-mobile
40 jshint 2.10.2 MIT https://github.com/jshint/jshint
41 json5 2.1.0 MIT https://github.com/json5/json5
42 json-formatter 0.7.0 Apache 2.0 https://github.com/mohsen1/json-formatter-js
43 keylines 4.7.1-12103 professional poc Cambridge Intelligence license http://cambridge-intelligence.com/keylines

Licensed to Edge Technologies INC for Yellowstone expires on Sat Jun 27 2020

44 ladda 2.0.1 MIT https://github.com/hakimel/Ladda
45 leaflet 1.4.0 BSD-2-Clause https://github.com/Leaflet/Leaflet
46 leaflet-geosearch 2.7.0 MIT https://github.com/smeijer/leaflet-geosearch
48 leaflet-toolbar 0.4.0-alpha.1 MIT https://github.com/Leaflet/Leaflet.toolbar
49 leaflet.locatecontrol 0.66.2 MIT https://github.com/domoritz/leaflet-locatecontrol
50 leaflet.markercluster 1.4.1 MIT https://github.com/Leaflet/Leaflet.markercluster
51 mn-touch 1.3.2 MIT https://github.com/ilmente/mnTouch
52 moment 2.24.0 MIT https://github.com/moment/moment
53 moment-timezone 0.5.23 MIT https://github.com/moment/moment-timezone
54 net 1.0.2 MIT https://sleeplessinc@github.com/sleeplessinc/net
55 ng-idle 1.3.2 MIT https://github.com/HackedByChinese/ng-idle
56 ng-toast 2.0.0 MIT https://github.com/tameraydin/ngToast
57 ngclipboard 2.0.0 MIT https://github.com/sachinchoolur/ngclipboard
58 ngstorage 0.3.11 MIT https://github.com/gsklee/ngStorage
59 numbro 2.1.2 MIT https://github.com/BenjaminVanRyseghem/numbro
60 oclazyload 1.1.0 MIT https://github.com/ocombe/ocLazyLoad
61 opencv.js 4.0.1 BSD https://docs.opencv.org/master/index.html
62 optimal-select 4.0.1 MIT https://github.com/Autarc/optimal-select
63 platform 1.3.5 MIT https://github.com/bestiejs/platform
64 popper.js 1.15.0 MIT https://github.com/FezVrasta/popper.js
65 polylabel 1.0.2 ISC https://www.npmjs.com/package/polylabel
66 sjcl 1.0.8 BSD-2-Clause https://github.com/bitwiseshiftleft/sjcl
67 sockjs-client 1.4.0 MIT https://github.com/sockjs/sockjs-client
68 spin.js 4.0.0 MIT https://github.com/fgnass/spin.js
69 stompjs 2.3.3 Apache 2.0 https://github.com/jmesnil/stomp-websocket
70 svg4everybody 2.1.9 CC0 1.0 https://github.com/jonathantneal/svg4everybody
71 tesseract.js 2.0.0-alpha.10 Apache 2.0 https://github.com/naptha/tesseract.js#tesseractjs
72 ui-bootstrap4 3.0.6 MIT https://github.com/morgul/ui-bootstrap4
73 ui-grid 4.0.7 MIT https://github.com/angular-ui/ui-grid
74 ui-leaflet 1.0.3 MIT https://github.com/angular-ui/ui-leaflet
75 ui-select 0.19.8 MIT https://github.com/angular-ui/ui-select
76 underscore 1.9.1 MIT https://github.com/jashkenas/underscore
77 underscore.string 3.3.5 MIT https://github.com/epeli/underscore.string
78 vis 4.18.1 Apache 2.0 + MIT https://github.com/almende/vis
79 webpack 4.40.1 MIT https://github.com/webpack/webpack
80 webpack-runtime-require 0.3.1 MIT https://github.com/Venryx/webpack-runtime-require