Dynamically Adding Content to a Widget

[WilliamMiller4]

Hello,

I'm trying to use a format like the one used in Robert Scheitlin's Enhanced Search Widget where the main widget (widget.js) calls a function from a secondary file (List.js) to add content to the widget. Below are abbreviated versions of what my widget.js, List.js and widget.html look like.

Widget.js

define([
  //...
  './List',
  //...
  ],function(
  //...
  List, 
  //...
  ) {
  return declare([BaseWidget, _WidgetsInTemplateMixin], {
    //...
    list: null,
    //...
    
    startup: function() {
      this.inherited(arguments);
      //console.log('RatioQuery::startup');
      this.list.parentWidget = this;
    },
    
    //...
    
    _onSuccessfulQueryCompletion: function(results) {
      console.log('RatioQuery::_onSuccessfulQueryCompletion');
      //...
      this.list.add = ({
        accountNbr: accountNbr,
        addressLine1: addressLine1,
        grantor: grantor,
        grantee: grantee,
        saleDate: saleDate,
        salePrice: salePrice
      });
      //...
    },
    //...
    });
  }); ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

List.js

define([
  'dojo/_base/declare',
  'dijit/_WidgetBase',
  'dojo/_base/lang',
  'dojox/gfx',
  'dojo/on',
  'dojo/dom-construct',
  'dojo/dom-attr',
  'dojo/_base/array',
  'dojo/dom',
  'dojo/query',
  'dojo/dom-class',
  'dojo/dom-style',
  'dojo/Evented',
  'esri/symbols/jsonUtils'
  ],
  function(
    declare,
    _WidgetBase,
    lang,
    gfx,
    on,
    domConstruct,
    domAttr,
    array,
    dom,
    query,
    domClass,
    domStyle,
    Evented,
    jsonUtils
    ) {
    return declare([_WidgetBase, Evented], {

      'class': 'widgets-ratio-query-list',
      parentWidget: null,

      startup: function() {
        console.log("RatioQuery::List::startup");
        this.items = [];
        this._listContainer = domConstruct.create("div");
        domConstruct.place(this._listContainer, this.domNode);
      },

      add: function(item) {
        console.log("RatioQuery::List::add");
        
        if (arguments.length === 0) {
          return;
        }
        
        this.items.push(item);
        //console.info(this.items);
        
        var div = domConstruct.create("div");
        
        var parcelRecord = domConstruct.create("p");
        
        parcelRecord.textContent = parcelRecord.innerText = "Account No: " + item.accountNbr + "Address: " + item.addressLine1 + "Grantor: " + item.grantor + "Grantee: " + item.grantee + "Sale Date: " + item.saleDate + "Sale Price: " + item.salePrice;
        
        domConstruct.place(parcelRecord, div);
        
        domConstruct.place(div, this._listContainer);
        this.clearSelection();
      }
    });
  });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Widget.html

  <div data-dojo-type="widgets/ratioQuery/List" data-dojo-attach-point="list" style="width:100%;clear:both;">
  </div>‍‍

I don't know why it's not working. Any help is greatly appreciated. Thank you.

William

[RobertScheitlin__GISP]

William,

   What errors (if any) are displayed in your browsers web console? What exactly is not working?

[WilliamMiller4]

Hi Robert,

There are no errors, but the div where the content is supposed to go just has another empty div inside, as shown below.

<div data-dojo-type="widgets/RatioQuery/List" data-dojo-attach-point="list" style="width: 100%; clear: both;" id="uniqName_0_0" class="widgets-ratio-query-results" widgetid="uniqName_0_0">
      <div></div>
</div>‍‍‍

William

[RobertScheitlin__GISP]

William,

   If you uncomment line 9 below do you get that console line printed?

      add: function(item) {
        console.log("RatioQuery::List::add");
        
        if (arguments.length === 0) {
          return;
        }
        
        this.items.push(item);
        //console.info(this.items);
....‍‍‍‍‍‍‍‍‍‍

[WilliamMiller4 · Accepted solution]

Hi Robert,

I shouldn't have had this.list.add = ({...});

I changed it to this.list.add({...}); and it works.

How do I get the vertical scroll bar? The content goes off the page and there is no way to view it.

William

[RobertScheitlin__GISP]

William,

   That is something you control in the css using an overflow css rule.

[WilliamMiller4]

Thank you Robert!