How do I use list.js?

73
6
03-17-2020 08:40 AM
Highlighted
New Contributor III

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.

Tags (2)
Reply
0 Kudos
6 Replies
Highlighted
MVP Esteemed Contributor

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

this.list = new List({}, this.listDiv);

?

Reply
0 Kudos
Highlighted
New Contributor III

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();
})
)
}
Reply
0 Kudos
Highlighted
MVP Esteemed Contributor

Liam,

   Hmm. Any console errors?

Reply
0 Kudos
Highlighted
New Contributor III

The only console error that I get is when I run .addComplete(). 

Reply
0 Kudos
Highlighted
New Contributor III

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.

Reply
0 Kudos
Highlighted
MVP Esteemed Contributor

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".

Reply
0 Kudos