How do I use list.js?

[LiamWelter-Reed]

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.

[RobertScheitlin__GISP]

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);

?

[LiamWelter-Reed]

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();
        })
        )
      }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[RobertScheitlin__GISP]

Liam,

   Hmm. Any console errors?

[LiamWelter-Reed]

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

[LiamWelter-Reed]

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.

[RobertScheitlin__GISP]

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