topic Re: Need assistance in deploying Web App Builder Data Grid Widget in Web AppBuilder Custom Widgets Questions

Need assistance in deploying Web App Builder Data Grid Widget

IanPeebles — Tue, 02 Feb 2016 15:39:43 GMT

I have a JavaScript application that contains a data grid, where the user can click on an icon to zoom to feature or click on another icon to open up a fact sheet. Here is a preview:

I want to deploy this data grid functionality as a widget, but currently struggling to get it to work properly. I know the steps to add in the custom widget to the Web Application Builder, but cannot get this tool to work properly.

I am attaching the code that contains the tool I want to deploy. The zip file contains: 1. CSS folder with the layout.css file; 2. Graphics folder that contains the two icons; 3. the index.htm file which contains the code.

I have the feature layer I want to use hard coded, which is fine and what I want. I want the data grid to appear in the panel within the widget. So far, I have been unsuccessful in getting this deployed properly.

Does anyone have any ideas or approaches I can use? Would greatly appreciate some assistance.

Ian

Re: Need assistance in deploying Web App Builder Data Grid Widget

RobertScheitlin__GISP — Tue, 02 Feb 2016 19:44:00 GMT

Ian,

Here it is converted to a widget. The most likely issue you were encountering was scope or _WidgetsInTemplateMixin.

Re: Need assistance in deploying Web App Builder Data Grid Widget

IanPeebles — Tue, 02 Feb 2016 21:16:41 GMT

Robert,

Thank you so much! This works really well. This is awesome!

Still trying to get my icons referenced properly and change the height of the grid within the panel.

Ian

Re: Need assistance in deploying Web App Builder Data Grid Widget

RobertScheitlin__GISP — Tue, 02 Feb 2016 21:32:44 GMT

Ian,

For the height of the grid try editing the widget.html:

<div>

</div>

Re: Need assistance in deploying Web App Builder Data Grid Widget

IanPeebles — Tue, 02 Feb 2016 21:49:43 GMT

Robert,

Thank you again for the response. Your assistance is greatly appreciated. I couldn't modify the height of the grid with that line you listed above. I am trying to select elements on the page to see if I can add properties to the .css file. What do you think?

Here is how it currently looks:

Re: Need assistance in deploying Web App Builder Data Grid Widget

RobertScheitlin__GISP — Sun, 12 Dec 2021 09:36:10 GMT

Ian,

Here is what will work for making the dGrid 100% height of widget:

css:

.ArtdGrid.dgrid {
  height: 100% !important;
}

html:

<div style="height:100%;">
  <div data-dojo-attach-point="gridDiv" class="ArtdGrid"></div>
</div>

js:

/*global define, console, window*/
define([
  'dojo/_base/declare',
  'dijit/_WidgetsInTemplateMixin',
  'jimu/BaseWidget',
  'esri/symbols/SimpleLineSymbol',
  'esri/symbols/SimpleMarkerSymbol',
  'esri/Color',
  'esri/tasks/query',
  'esri/tasks/QueryTask',
  'dojo/on',
  'esri/layers/FeatureLayer',
  'esri/request',
  'dgrid/OnDemandGrid',
  'dgrid/Selection',
  'dgrid/extensions/DijitRegistry',
  'dojo/_base/array',
  'dojo/store/Memory',
  'dojo/_base/lang',
  'dijit/form/Button'
],
  function (
    declare,
    _WidgetsInTemplateMixin,
    BaseWidget,
    SimpleLineSymbol,
    SimpleMarkerSymbol,
    Color,
    Query,
    QueryTask,
    on,
    FeatureLayer,
    esriRequest,
    Grid,
    Selection,
    DijitRegistry,
    array,
    Memory,
    lang
  ) {
    //To create a widget, you need to derive from BaseWidget.
    return declare([BaseWidget, _WidgetsInTemplateMixin], {

      baseClass: 'jimu-widget-art',
      name: 'ArtList',
      label: 'Art List',
      columns: null,
      publicartFL: null,

      //methods to communication with app container:

      postCreate: function () {
        this.inherited(arguments);
        console.log('postCreate');
      },

      startup: function () {
        this.inherited(arguments);

        // Map Feature Layer
        this.publicartFL = new FeatureLayer("http://gis.edmondok.com/arcgis/rest/services/Parks/PublicArt/MapServer/0", {
          id: "PublicArtFL",
          opacity: 1,
          outFields: ["*"]
        });
        this.map.addLayer(this.publicartFL);

        // Data Grid
        this.columns = [{
          label: "",
          field: "OBJECTID",
          formatter: this.createZoomButton
        }, {
          label: "",
          field: "OBJECTID",
          formatter: this.createFactSheetButton
        }, {
          label: "Name",
          field: "NAME"
        }];

        // Define a Public Art Highlight Symbol Graphic
        var publicArtHighlightSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 16, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
          new Color([0, 0, 0]), 1), new Color([115, 255, 223, 0.50]));
        this.publicartFL.setSelectionSymbol(publicArtHighlightSymbol);

        this.publicartFL.on("load", lang.hitch(this, function () {
          var time = Math.floor(Math.random() * 1000);
          var requestUrl = "http://gis.edmondok.com/arcgis/rest/services/Parks/PublicArt/MapServer/0/query?where=1%3D1&outFields=*&time=" + time;
          var request = new esriRequest({
            'url': requestUrl,
            'content': {
              'f': "json"
            },
            'callbackParamName': "callback"
          });
          request.then(lang.hitch(this, function (response) {
              console.log("Success: ", response);
              var items = array.map(response.features, function (feature) {
                return feature.attributes;
              });
              var memStore = new Memory({
                data: items,
                idProperty: "OBJECTID"
              });
              var publicArtGrid = declare([Grid, Selection, DijitRegistry]);
              this.grid = new publicArtGrid({
                bufferRows: Infinity,
                minRowsPerPage: 1000, // Ian's Comments: 2016-01-21 - By default the grid will populate only 25 records at a time.
                columns: this.columns
              }, this.gridDiv);
              this.grid.startup();
              this.grid.set("store", memStore);
              this.grid.set("sort", "NAME");
              this.grid.on("click", lang.hitch(this, function (e) {
                if (e.target.getAttribute("myAttri") == "Zoom") {
                  if (e.target.alt) {
                    this.zoomRow(e.target.alt);
                  }
                } else if (e.target.getAttribute("myAttri") == "FactSheet") {
                  if (e.target.alt) {
                    this.openFactSheet(e.target.alt);
                  }
                }
              }));
            }),
            function (error) {
              console.log("Error: ", error.message);
            });
        }));
      },

      // Zoom to Art Piece Button
      createZoomButton: function (id) {
        var zoomButton = "<div data-dojo-type='dijit/form/Button'><img src='widgets/ArtList/images/zoom.png' myAttri='Zoom' alt='" + id + "'";
        zoomButton = zoomButton + " width='18' height='18' title='Zoom to Art Piece'></div>";
        return zoomButton;
      },

      // Zoom to Selected Feature - Art Piece
      zoomRow: function (id) {
        console.info(id);
        // Set Public Art Query
        var queryPublicArt = new Query();
        queryPublicArt.objectIds = [id];
        this.publicartFL.selectFeatures(queryPublicArt, FeatureLayer.SELECTION_NEW, lang.hitch(this, function (features) {
          // Zoom to the Selected Feature
          var publicArtExtent = features[0].geometry;
          this.map.centerAndZoom(publicArtExtent, 17);
        }));
      },

      // Fact Sheet Button
      createFactSheetButton: function (id) {
        var factSheetButton = "<div data-dojo-type='dijit/form/Button'><img src='widgets/ArtList/images/fact_sheet.png' myAttri='FactSheet' alt='" + id + "'";
        factSheetButton = factSheetButton + " width='18' height='18' Title='Go to fact sheet'></div>";
        return factSheetButton;
      },

      // Open Fact Sheet in New HTM Page in New Web Page Tab
      openFactSheet: function (id) {
        var queryFactSheet = new Query();

        queryFactSheet.where = "OBJECTID = " + id;
        queryFactSheet.outFields = ["FACT_SHEET"];
        var queryTask = new QueryTask("http://gis.edmondok.com/arcgis/rest/services/Parks/PublicArt/MapServer/0");

        queryTask.execute(queryFactSheet, function (result) {
          var factSheetURL = result.features[0].attributes.FACT_SHEET;
          window.open(factSheetURL, '_blank');
        });
      }

    });
  });

The images in the dgrid are just making sure that the path is correct:

src='widgets/ArtList/images/zoom.png'

Re: Need assistance in deploying Web App Builder Data Grid Widget

IanPeebles — Wed, 03 Feb 2016 19:41:41 GMT

Thank you very much Robert! I was able to lengthen the data grid by using this code:

.dgrid-grid.ui-widget.gridDiv{

height: 750px;

padding: 0px;

border-style: none;

}

However, what you suggested looks a lot better and that is what I am going with. I added some other css properties to make the data grid list look like this:

I am now working with the css to have the grey lines removed from the columns. Still selecting elements on the page to see what it is I need to set .

Thank you much for your assistance!

Ian

Re: Need assistance in deploying Web App Builder Data Grid Widget

RickeyFight — Tue, 15 May 2018 17:28:33 GMT

Does this work with the current version on WAB?

Re: Need assistance in deploying Web App Builder Data Grid Widget

RobertScheitlin__GISP — Tue, 15 May 2018 17:41:38 GMT

Not sure why it wouldn't.

Re: Need assistance in deploying Web App Builder Data Grid Widget

IanPeebles — Tue, 15 May 2018 17:42:40 GMT

Ricky,

The data grid does work. I just deployed an updated version of a public art app using the Web App Builder Developer Edition (version 2.8) last week and it contains a custom widget that contains a data grid. Here is the example:

http://gis.edmondok.com/artinpublicplaces

Re: Need assistance in deploying Web App Builder Data Grid Widget

RickeyFight — Tue, 15 May 2018 17:49:39 GMT

Am I able to add an image into the dgrid based on an attribute?

I need to be able to view a different image for each feature.

Ian Peebles‌ would you be able to share that widget?

Re: Need assistance in deploying Web App Builder Data Grid Widget

LaurynasGedminas2 — Mon, 14 Dec 2020 15:53:48 GMT

Hey Robert, @RobertScheitlin__GISP

trying to deploy this widget or the ArtList widget, i and get blank gray space for the dgrid.

my html is <div data-dojo-attach-point="grid2" style="height: 100%"></div>

what is the issue here

Re: Need assistance in deploying Web App Builder Data Grid Widget

RobertScheitlin__GISP — Mon, 14 Dec 2020 18:12:42 GMT

It appears you have missed something in your code I would have to see your Widget.js

Re: Need assistance in deploying Web App Builder Data Grid Widget

LaurynasGedminas2 — Mon, 14 Dec 2020 18:17:41 GMT

here is the ArtList widget

Re: Need assistance in deploying Web App Builder Data Grid Widget

RobertScheitlin__GISP — Mon, 14 Dec 2020 19:12:22 GMT

Laurynas,

There are many thing wrong with that widget download you sent me. You should be using the one I fixed on the thread that is marked as the solution to this question.