topic Re: Where should I put javascript code when map loaded in Web AppBuilder Custom Widgets Questions

Where should I put javascript code when map loaded

MaximeDemers — Thu, 01 Aug 2019 18:16:25 GMT

Hi,

I am relatively new in developing into Web App Builder applications. I have a dummy question. I have a small snippet of javascript code to add to an application but this not part of any widget.

In fact, I want to set a refresh interval to a feature layer. What would be the ideal place for putting such snippet that needs to be executed when the map is loaded?

Thank you,

Maxime

Re: Where should I put javascript code when map loaded

RobertScheitlin__GISP — Thu, 01 Aug 2019 18:36:13 GMT

jimu.js\MapManager.js

Re: Where should I put javascript code when map loaded

AndresCastillo — Thu, 01 Aug 2019 18:50:52 GMT

Hi Robert,

What made you choose MapManager.js?

Is there documentation on the core js files that make up wab dev edition?

Once you find the file you want to insert code into, what methodology should one use to determine where in that file is ideal to execute that code?

I wrote a blog with my ideas:

https://community.esri.com/people/andrescastillo08/blog/2019/07/24/how-to-customize-an-app-using-javascript-the-dom-chrome-devtools-and-chromes-debugger

But I'd like to see how you go about doing this.

Thank you.

Re: Where should I put javascript code when map loaded

RobertScheitlin__GISP — Thu, 01 Aug 2019 18:56:56 GMT

Andres,

Sorry there is nothing that will guide you about which file to use, except to follow the code logic and life cycle. The MapManager is the file where the map is created so it is the most logical choice when dealing with map layers. As far as which function you have to follow the code flow and if it is a 2D map then the defered result function of the _show2DWebmap function.

Re: Where should I put javascript code when map loaded

MaximeDemers — Thu, 01 Aug 2019 19:33:28 GMT

Maybe I should create an event dispatcher accessible from the window, that will dispatch a map created event and maybe an app ready event when all widgets are loaded. Adding custom code in a mess like MapManager.js is something I don't want to do and maintain in long term.

Re: Where should I put javascript code when map loaded

MaximeDemers — Sun, 12 Dec 2021 08:40:24 GMT

I finally decided to use the "mapLoaded" event published by window.topic (see dojo/topic — The Dojo Toolkit - Reference Guide ) in the MapManager.js. I put my custom code in libs/custom/custom.js, and add an entry in libs/main.js

I like this solution because, I prefer to modify WAB source code the least possible

custom.js

const REFRESH_INTERVAL = 1; //en minutes (0.5 pour 30 secondes)

define([
  'dojo/_base/declare',

], function(declare) {
  var CustomCode = declare([], {
    name: "Pannes HS éditeur custom code",

    startup: function() {
      window.topic.subscribe("mapLoaded", this._onMapLoaded.bind(this));
    },

    _onMapLoaded: function(map) {
      console.log("_onMapLoaded")
      this.map = map;
      this._setRefreshIntervales();
    },

    _setRefreshIntervales: function() {
      this.map.graphicsLayerIds.forEach(function(layerId) {
        this.map.getLayer(layerId).setRefreshInterval(REFRESH_INTERVAL);
      }.bind(this));
    }
  });

  new CustomCode().startup();

});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍