I've seen Robert Scheitlin, GISP add nice looking lists to some of his widgets. I'm trying to use the list.js library included in them to add a list to my own widget.
Would anyone please be able to explain how to use it in my own widget?
I assign the list to a variable and a div, use the startup method, then try to add features with the .add method but nothing shows up.
Any direction would be much appreciated.
Liam,
There are so many unknows in this question. Did you add the list.js to your define array in the widget.js?
Do you create the new list variable like this
?
Sorry,
So, I started in my postcreate function with this:
this._resultList = new List({}, this.resultsdiv);
this._resultList.startup();
then I tried to add an item in a later function like this:
showResult: function(content) {
this._resultContent = content;
this._resultLayer.applyEdits(content).then(lang.hitch(this, function (edit) {
for (var idx = 0; idx < edit.length; ++idx) {
var timestamp = new Date(this._resultContent[idx].attributes.SearchDate).toLocaleString();
var content = "<font color='#000000'><em>Route ID</em></font>: <font color='#000000'>" + this._resultContent[idx].attributes.RouteID + "</font><br>" +
"<font color='#000000'><em>Milepoint</em></font>: <font color='#000000'>" + this._resultContent[idx].attributes.Milepoint + "</font><br>" +
"<font color='#000000'><em>Begin Milepoint</em></font>: <font color='#000000'>" + this._resultContent[idx].attributes.BMP + "</font><br>" +
"<font color='#000000'><em>End Milepoint</em></font>: <font color='#000000'>" + this._resultContent[idx].attributes.EMP + "</font><br>" +
"<font color='#000000'><em>Total Length</em></font>: <font color='#000000'>" + this._resultContent[idx].attributes.Length + "</font><br>" +
"<font color='#000000'><em>Latitude</em></font>: <font color='#000000'>" + this._resultContent[idx].attributes.Latitude + "</font><br>" +
"<font color='#000000'><em>Longitude</em></font>: <font color='#000000'>" + this._resultContent[idx].attributes.Longitude + "</font><br>" +
"<font color='#000000'><em>Search Date</em></font>: <font color='#000000'>" + timestamp + "</font>";
var rsltcontent = "<font color='#000000'><em>Route ID</em></font>::<font color='#000000'>" + this._resultContent[idx].attributes.RouteID + "</font><br>" +
"<font color='#000000'><em>Milepoint</em></font>::<font color='#000000'>" + this._resultContent[idx].attributes.Milepoint + "</font><br>" +
"<font color='#000000'><em>Begin Milepoint</em></font>::<font color='#000000'>" + this._resultContent[idx].attributes.BMP + "</font><br>" +
"<font color='#000000'><em>End Milepoint</em></font>::<font color='#000000'>" + this._resultContent[idx].attributes.EMP + "</font><br>" +
"<font color='#000000'><em>Total Length</em></font>::<font color='#000000'>" + this._resultContent[idx].attributes.Length + "</font><br>" +
"<font color='#000000'><em>Latitude</em></font>::<font color='#000000'>" + this._resultContent[idx].attributes.Latitude + "</font><br>" +
"<font color='#000000'><em>Longitude</em></font>::<font color='#000000'>" + this._resultContent[idx].attributes.Longitude + "</font><br>" +
"<font color='#000000'><em>Search Date</em></font>::<font color='#000000'>" + timestamp + "</font>";
var links = null;
var contentObj = {
id: "id_" + idx + this._resultList.items.length,
OID: edit[idx].objectId,
title: this._resultContent[idx].attributes.NetworkLayer,
content: content,
rsltcontent: rsltcontent,
alt: (idx % 2 === 0),
sym: this._resultContent[idx].symbol,
links: links,
removeResultMsg: "Remove Result",
showRelate: null,
relalias: null
};
this._resultList.add(contentObj);
}
this.map.addLayer(this._resultLayer);
this._resultList.addComplete();
})
)
}
Liam,
Hmm. Any console errors?
The only console error that I get is when I run .addComplete().
Actually, I just found out what was wrong. When I setup the div for the list, I assigned an id to it. Removing the id allowed list.js to properly set its own id.
Anyway, thanks for the quick responses. I really appreciate it.
Liam,
When building Widgets you need to forget about html element ids and switch to using "data-dojo-attach-point"s. Then in your widget.js you can use that element with "this.theAttachPointName".