topic Re: Scroll a list when clicking a graphic in Web AppBuilder Custom Widgets Questions

Scroll a list when clicking a graphic

SebastianRoberts — Fri, 30 Oct 2015 23:54:25 GMT

I'm using Robert's eSearch Widget. If the widget is maximized, I'd like the user to be able to click (or touch) a graphic and have the result list in the widget scroll to the record (or list item) that corresponds to the graphic. Has anyone done anything similar with scrolling a list in the WAB that might get me started?

Re: Scroll a list when clicking a graphic

RobertScheitlin__GISP — Sun, 12 Dec 2021 10:33:26 GMT

Sebastian,

Great Idea. I will add this in the next release.Here are the needed changes:

Widget,js (lines 6-10)

      _searchResultListByOID: function (OID) {
        for (var i = 0; i < this.list.items.length; i++) {
          var item = this.list.items;
          var point = item.centerpoint;
          if (item.OID === OID) {
            var itemDom = dojo.byId("uniqname_0_1" + item.id);
            if(itemDom){
              itemDom.scrollIntoView(false);
            }
            this.list.setSelectedItem("uniqname_0_1" + item.id);
            if (this.map.infoWindow && this.config.enablePopupsOnResultClick) {
              this.map.infoWindow.setFeatures([item.graphic]);
              if (this.map.infoWindow.reposition) {
                this.map.infoWindow.reposition();
              }
              this.map.infoWindow.show(point);
            }
          }
        }
      },

List.js (add this new function)

      setSelectedItem: function(id) {
        var item = this._getItemById(id);
        if (!item) {
          return;
        }
        domClass.replace(id, this._itemSelectedCSS, ((item.alt) ? this._itemAltCSS:this._itemCSS));
        if (this._selectedNode) {
          domClass.replace(this._selectedNode, ((item.alt)? this._itemAltCSS:this._itemCSS), this._itemSelectedCSS);
        }
        this._selectedNode = id;
      }

Re: Scroll a list when clicking a graphic

SebastianRoberts — Mon, 02 Nov 2015 18:42:48 GMT

Robert,

Works splendidly. Once again you've saved me a good number of hours!

Re: Scroll a list when clicking a graphic

SebastianRoberts — Mon, 02 Nov 2015 20:08:15 GMT

One minor change. In Robert's sample code, replace the two instances of:

"uniqname_0_1"

with:

this.list.id.toLowerCase()

I found that if you have more than one widget that uses a list, then depending on which widget is created first, the unique name may be "uniqname_0_1" or "uniqname_0_2" for the list.