CMV Viewer Custom Widget problem rendering

Question

i'm trying to develop a custom widget into CMV Viewer. I'm using the guide line of CMV Viewer but i have some problem to render the html content set into templete folder. This is my code: Initialize widget:`

define([
"dojo/_base/declare",
"dijit/_WidgetBase",
"dijit/_TemplatedMixin",
"dijit/_WidgetsInTemplateMixin",
"esri/SpatialReference",
"esri/dijit/PopupTemplate",
"WeatherResources/ClusterLayer",
"dojo/_base/array",
"dojo/on",


// templates & widget css
'dojo/text!./Storico/templates/Storico.html',
'dojo/i18n!./Weather/nls/resource',
'xstyle/css!./Storico/css/Storico.css',

'dijit/layout/LayoutContainer',
'dijit/layout/ContentPane',
'dijit/layout/TabContainer',
'dijit/form/Select',
'dijit/form/TextBox',
'dijit/form/NumberTextBox',
'dijit/form/Button',
'dijit/form/CheckBox',

"dojo/query",
"esri/graphic",
"esri/geometry/Extent",

"esri/Color",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/PictureMarkerSymbol",
"esri/renderers/ClassBreaksRenderer",
"esri/renderers/UniqueValueRenderer",
"esri/renderers/SimpleRenderer",
"dojo/_base/connect",

'esri/dijit/InfoWindow',
'esri/InfoTemplate',
"dojo/Deferred",
"dijit/layout/TabContainer",
"dijit/layout/ContentPane",
"dijit/Toolbar",
"dijit/form/Button",

"dojo/dom-style",
"esri/request",
"esri/geometry/Point",
"esri/geometry/webMercatorUtils",
'xstyle/css!./LayerControl/css/LayerControl.css'

], function(declare, _WidgetBase, _TemplatedMixin, template) {

return declare([_WidgetBase, _TemplatedMixin], {
    templateString: template
});
});

and this is my html cotent for structure widget:

<div>
<div data-dojo-type="dijit/layout/TabContainer" data-dojo-props="region:'center'" tabStrip="true" data-dojo-attach-point="tabContainer" class="tabContainer">
    <div data-dojo-attach-point="tabByAttribute" data-dojo-type="dijit/layout/ContentPane" title="${i18n.Labels.tabTitleByAttribute}" class="searchTab" selected="true">
        <div >
            <label>${i18n.Labels.selectTipologia}:</label><br>
            <select style="width:100%;" data-dojo-attach-point="selectLayerByAttribute" data-dojo-type="dijit/form/Select"></select>
            <!--<select style="width:100%;" data-dojo-attach-point="selectLayerByAttribute" data-dojo-type="dijit/form/Select" data-dojo-attach-event="onChange:onAttributeLayerChange">
            </select>-->

        </div>
          <br>
          <div>
              <label>${i18n.Labels.selectLivello}:</label><br>
              <!--<input type="text" style="width:100%;" data-dojo-type="dijit/form/TextBox"/>-->
              <select style="width:100%;" data-dojo-type="dijit/form/Select">
                <option value="Uno">Livello 1</option>
                <option value="Due" selected="selected">Livello 2</option>
                <option value="Tre">Livello 3</option>
              </select>
          </div>
        </div>
        </div>
        </div>

Now i set in the viwer my widget:

storico: {
            include: true,
            id: 'storico',
            type: 'titlePane',
            canFloat: true,
            path: 'gis/dijit/Storico',
            title: 'Storico',
            open: false,
            position: 0
        }

but now when i try to open the widget into viewer doesn't show the html content that i write.

Answer 1

The arguments passed into the function need to include all of the modules/template/etc loaded in the initial declares statement in the proper order they are declared. You have omitted most of them

Your function should be called like this:

], function(
    declare,
    _WidgetBase,
    _TemplatedMixin,
    _WidgetsInTemplateMixin,
    SpatialReference,
    PopupTemplate,
    ClusterLayer,
    array,
    on,

    template,

    i18n,

    css

    /* all additional modules need to be defined as well */

) {

Then to use your template that includes widgets, the return statement needs to look something like this at a minimum:

return declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
    widgetsInTemplate: true,
    templateString: template,

Note the addition of _WidgetsInTemplateMixin MixIn and the widgetsInTemplate: true, property.

This is obviously not a complete example as your widget doesn't do anything currently.

This is a question about how to write dijits using the dojo toolkit and not specific to CMV. As such, any further questions related to this should be directed to stackoverflow: https://stackoverflow.com/questions/tagged/dojo