topic Re: Invalid template in the Gauge sample in ArcGIS JavaScript Maps SDK Questions

Invalid template in the Gauge sample

IanKramer3 — Mon, 05 Aug 2013 18:55:07 GMT

Hi, I am working on building a custom widget in JavaScript. I thought the best place to start was downloading the Gauge sample widget and implementing that in a test application. I renamed everything to Gauge2, so that it didn't conflict with the one in the Esri library. I am getting an "Invalid Template" error when I try to initialize the Gauge object. The code is below. I did put an alert box at the end of the constructor and it displays that fine. I am using both the sample Gauge library and the HTML page from the sample site. Has anybody seen this before?

Thanks!

Ian

try
            {
            gauge = new esri.dijit.Gauge2(gaugeParams, "gaugeDiv");
            }
            catch (err)
            {
             txt="There was an error on this page.\n\n";
      txt+="Error description: " + err.message + "\n\n";
      txt+="Click OK to continue.\n\n";
      alert(txt);
            }

Re: Invalid template in the Gauge sample

IanKramer3 — Mon, 05 Aug 2013 20:16:25 GMT

Here's the top portion of the code for Gauge2.js. I also renamed the template to Gauge2.html. I didn't alter anything else.

The code sits in a folder under root, called "chart". That contains a css and templates folder.

dojo.provide("esri.dijit.Gauge2");

dojo.require("dojo.cache");
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
dojo.require("dojox.widget.AnalogGauge");
dojo.require("dojox.widget.gauge.AnalogArcIndicator");

dojo.declare("esri.dijit.Gauge2", [dijit._Widget, dijit._Templated], {
templateString: dojo.cache("esri.dijit", "templates/Gauge2.html"),
widgetsInTemplate: false,
constructor: function(options, srcRefNode) {
....

Re: Invalid template in the Gauge sample

derekswingley1 — Mon, 05 Aug 2013 20:20:43 GMT

Are you using the API from the CDN or are you hosting it locally?

If you're using the CDN, Dojo is looking for your template on the esri server. You should be able to see a request and a 404 when your page looks for Gauge2.html

I would define your own namespace rather than putting your code in esri.dijit. Refer to the clustering sample as a way to set up your own namespace (in that sample it's called "extras").

Re: Invalid template in the Gauge sample

IanKramer3 — Mon, 05 Aug 2013 20:29:54 GMT

Hi Derek,
I am using the CDN. I did try renaming namespace to just chart.Gauge2. I've uploaded my code if you want to take a look at it.

I am wondering if I have a bad path for the templateString: dojo.cache("chart", "templates/Gauge2.html"), property. The Chart.js file is located in the ROOT/chart folder. The template is located in ROOT/chart/templates. Is my path correct? Also should I be using templateString or templatePath?

Thank you!

Ian

dojo.provide("chart.Gauge2");

dojo.require("dojo.cache");
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
dojo.require("dojox.widget.AnalogGauge");
dojo.require("dojox.widget.gauge.AnalogArcIndicator");

dojo.declare("chart.Gauge2", [dijit._Widget, dijit._Templated], {
templateString: dojo.cache("chart", "templates/Gauge2.html"),
widgetsInTemplate: false,
constructor: function(options, srcRefNode) {

Re: Invalid template in the Gauge sample

IanKramer3 — Mon, 05 Aug 2013 21:40:40 GMT

Derek, thanks for your help! Following your example for the Clustering, I believe I figured out how to get the templated Dojo widget to work. Since my goal was to build my own custom widget, I decided to stop trying to get the Gauge widget to work. I ended up using the example located here: http://dojotoolkit.org/documentation/tutorials/1.8/recipes/custom_widget/. This example uses the same syntax as the ClusterLayer example, but is slightly different from the Gauge sample code (i.e. dojo.require statements). I have included a copy of the widget's code below. I am currently loading it from the ClusterLayer demo index HTML page and it is working.

-----------------------------------------------------
define(["dojo/_base/declare","dijit/_WidgetBase", "dijit/_TemplatedMixin", "dojo/text!./templates/Gauge2.html", "dojo/dom-style", "dojo/_base/fx", "dojo/_base/lang"],
    function(declare, _WidgetBase, _TemplatedMixin, template, domStyle, baseFx, lang){
        return declare([_WidgetBase, _TemplatedMixin], {
            // Some default values for our author
            // These typically map to whatever you're passing to the constructor
            name: "No Name",
            // Using require.toUrl, we can get a path to our AuthorWidget's space
            // and we want to have a default avatar, just in case
            avatar: require.toUrl("./images/defaultAvatar.png"),
            bio: "",

            // Our template - important!
            templateString: template,

            // A class to be applied to the root node in our template
            baseClass: "authorWidget",

            // A reference to our background animation
            mouseAnim: null,

            // Colors for our background animation
            baseBackgroundColor: "#fff",
            mouseBackgroundColor: "#def"
        });
});