AnsweredAssumed Answered

Dynamically Adding Content to a Widget

Question asked by william.miller_WarrenCoGIS on Feb 15, 2017
Latest reply on Feb 15, 2017 by william.miller_WarrenCoGIS

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

Outcomes