How do I use list.js?

LiamWelter-Reed — Tue, 17 Mar 2020 15:40:00 GMT

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.

Re: How do I use list.js?

RobertScheitlin__GISP — Tue, 17 Mar 2020 15:49:18 GMT

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

Re: How do I use list.js?

LiamWelter-Reed — Sun, 12 Dec 2021 09:09:46 GMT

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

Re: How do I use list.js?

RobertScheitlin__GISP — Tue, 17 Mar 2020 16:32:33 GMT

Liam,

Hmm. Any console errors?

Re: How do I use list.js?

LiamWelter-Reed — Wed, 18 Mar 2020 00:09:39 GMT

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

Re: How do I use list.js?

LiamWelter-Reed — Wed, 18 Mar 2020 00:22:50 GMT

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.

Re: How do I use list.js?

RobertScheitlin__GISP — Wed, 18 Mar 2020 12:28:57 GMT

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

topic Re: How do I use list.js? in Web AppBuilder Custom Widgets Questions

How do I use list.js?

Re: How do I use list.js?

Re: How do I use list.js?

Re: How do I use list.js?

Re: How do I use list.js?

Re: How do I use list.js?

Re: How do I use list.js?