Parsing Custom Widget

AndyWhitaker1 — Thu, 01 Dec 2016 15:27:53 GMT

I have created a simple widget that basically wraps the esri/Map and adds a left pane with a splitter and ExpandoPane. I want to use the widget in an MVC app. The problem that I am seeing is that I must set parseOnLoad to true in dojoConfig AND I must call the parse() function from dojo/parser. If I do only one of those methods, the BorderContainer, ExpandoPane, and other layout controls do not get displayed. I suppose because they aren't getting parsed. What am I doing wrong here? For reference, the custom widget is called widget.RoutingMap. It's hard to read the code below. I've attached the MVC project in the file "CustomMapWidgetTest.zip". Thanks!

Here's my MVC View:

@{
ViewBag.Title = "Map";
}

@section Styles {
<link rel="stylesheet" href="https://js.arcgis.com/3.18/dijit/themes/claro/claro.css" type="text/css" />
<link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css" type="text/css" />
<link rel="stylesheet" href="https://js.arcgis.com/3.18/dojox/layout/resources/ExpandoPane.css" type="text/css" />
<style type="text/css">
html,
body,
#mainBorderContainer,
#mapCp,
#map {
height: 100%;
padding: 0;
margin: 0;
}

#mainBorderContainer {
margin-top: 52px;
}

body {
background-color: #FFF;
overflow: hidden;
font-family: "Trebuchet MS";
}

#map {
width: 100%;
height: 100%;
border: solid 2px #4682b4;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}

.bodyContainerPadBottom {
height: 100%;
margin: 0;
padding-bottom: 52px;
}

/* Extending Esri styles */
/*************************/
.dojoxExpandoTitle {
margin-top: 1px;
margin-bottom: 1px;
-moz-border-radius: 14px;
-webkit-border-radius: 14px;
border-radius: 14px;
}

/* Remove padding in ContentPane */
.claro .dijitContentPane {
padding: 0px;
/*overflow:auto;overflow:auto causes both horizontal and vertical scrollbars. We never want horizonal but might need vertical*/
}
</style>
}

<div data-dojo-type="widget.RoutingMap"></div>

@section scripts {
<script type="text/javascript">
$("#bodyContainer").removeAttr("class");
$("#bodyContainer").attr("class", "bodyContainerPadBottom");
$("body").attr("class", "claro");
</script>
<script type="text/javascript">
var path = '';
var dojoConfig = {
async: true,
parseOnLoad: true,
tlmSiblingOfDojo: false,
isDebug: true,
packages: [
{
name: "widget",
location: path + "/_Map/js/widget"
},
{
name: "js",
location: path + "/_Map/js"
}
]
};
</script>

</script>
}

Here's my custom widget:

RoutingMap.html

RoutingMap.js

define([
// dojo core libs
"dojo/_base/declare",

// dojo dijits
"dijit/_WidgetBase",
"dijit/_TemplatedMixin",

// Site specific
// Config, enums
"js/config/AppConfig",

// dojo
"dojo/text!./template/RoutingMap.html",

// Esri classes
"esri/map",

"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojox/layout/ExpandoPane",
"dijit/layout/AccordionContainer",
"dijit/TitlePane",
"dojo/domReady!"
], function (declare, _WidgetBase, _TemplatedMixin, appConfig, mapTemplate, Map) {
var RoutingMap = declare(
"widget.RoutingMap",
[_WidgetBase, _TemplatedMixin],
{
templateString: mapTemplate,
baseClass: "routingMapWidget",

postCreate: function () {
console.log("Map postCreate called");
this.inherited(arguments);
this.initMap();
},

startup: function () {
console.log("RoutingMap startup called");
this.inherited(arguments);
},

initMap: function () {
try {
console.log("Creating map");
this.map = new Map("map", {
basemap: "streets",
showLabels: true,
center: [-79, 35],
zoom: 7,
});

} catch (e) {
console.log("***ERROR creating map: " + e.message);
}
}

});

return RoutingMap;
});

topic Parsing Custom Widget in ArcGIS JavaScript Maps SDK Questions

Parsing Custom Widget