topic Re: Problem loading custom dijit in ArcGIS JavaScript Maps SDK Questions

Problem loading custom dijit

DavidChrest — Sat, 11 Dec 2021 21:16:07 GMT

Hello, I am having a serious problem trying to figure out how to load (dojoConfig) a custom dijit. There seems to be very little straightforward documentation on this. I am using Nicolas Haney's wonderful Select by Attributes Dijit found here: developer-support/web-js/select-by-attribute-widget at master · Esri/developer-support · GitHub

I copied code to my PC and all works well.

He loads the widget from a Dropbox URL like this:

var package_path = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/'));
  var dojoConfig = {
  packages: [{
  name: "application",
  location: "https://dl.dropboxusercontent.com/u/79881075/SelectByAtt/"
            }]

In the README.md, he says, "Configure the dojo loader to pull from the widget's location:"

var package_path = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/'));
  var dojoConfig = {
  packages: [{
  name: "application",
  location: "<path to the widget>"

I have AttributeSelection.js in my /js file. I have tried many things but cannot get it to load the widget from my own directory instead of his dropbox URL.

This also does not work:

dojoConfig = {
    packages: [
    {
                 name: 'application',
                 location: location.pathname.replace(/\/[^\/]*$/, '') + '/js'
             }
    ]
    };

Can somebody please help me with this tricky syntax to load the widget from my own folder.

Thank you so much for any help,

David

Re: Problem loading custom dijit

RobertScheitlin__GISP — Wed, 03 Feb 2016 17:57:15 GMT

David,

What does your require look like for this new component? It should look like:

require(['application/AttributeSelection'

Re: Problem loading custom dijit

DavidChrest — Sat, 11 Dec 2021 21:16:10 GMT

OK, I did change my require to require(['application/AttributeSelection' but both these scenarios below resulted in error. Very tricky syntax that just will not work for me. Am I missing something?

My set up is this:

SelectByAttributeWidget_test: main folder with index.html.

SelectByAttributeWidget_test\css: contains AttributeSelection.css

SelectByAttributeWidget_test\html: contains AttributeSelection.html

SelectByAttributeWidget_test\js: AttributeSelection.js

This does not work:

var package_path = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/'));
  var dojoConfig = {
  packages: [{
  name: "application",
  location: "js"
            }]
  };

And this does not work:

 var dojoConfig = {
  packages: [{
  name: "application",
  //location: location.pathname.replace(/\/[^\/]*$/, '') + '/js'
  location: "js"
            }]
  };

Re: Problem loading custom dijit

RobertScheitlin__GISP — Sat, 11 Dec 2021 21:16:13 GMT

David,

Let me give you an example of one that I have working for you to compare:

<script>
        var dojoConfig = {
            parseOnLoad: false,
            async: true,
            tlmSiblingOfDojo: false,
            packages: [{
                name: "ncam",
                location: location.pathname.replace(/\/[^/]+$/, '') + "ncam"
            }]
        };
    </script>

Here is the directory structure:

and this is the require:

"ncam/FlareClusterLayer",

NOTICE no slash in front of "ncam".

Re: Problem loading custom dijit

DavidChrest — Wed, 03 Feb 2016 19:48:10 GMT

OK, I am using your exact code. Here is my file structure.

AttributeSelection.js is located in ncam.

My require: "ncam/AttributeSelection"

The error I get:

What is it that is possibly going wrong?

Re: Problem loading custom dijit

RobertScheitlin__GISP — Wed, 03 Feb 2016 20:09:03 GMT

David,

I would need to see your whole index.html.

Re: Problem loading custom dijit

DavidChrest — Sat, 11 Dec 2021 21:16:15 GMT

<!DOCTYPE HTML>
<html>


<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">


  <title>Sel by Attribute Dijit</title>


  <link rel="stylesheet" href="http://js.arcgis.com/3.15/esri/css/esri.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.15/dijit/themes/claro/claro.css">
  <link rel="stylesheet" type="text/css" href="css/AttributeSelection.css">
  <style type="text/css">
  html,
  body,
  #map {
  height: 100%;
  width: 100%;
  }

  #attributeSelection {
  width: 350px;
  visibility: hidden;
  top: 50px;
  left: 200px;
  position: absolute;
  z-index: 100;
  background-color: #00E6E6;
  }

  #toggleSelect {
  top: 100px;
  left: 100px;
  position: absolute;
  z-index: 10;
  }

  .container {
  position: relative;
  padding: 10px;
  border: 1px solid #eee;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  height: 100%;
  }
  </style>
</head>


<body class="claro">
  <div class="container">
  <div id="map" class="map"></div>
  <div id="attributeSelection"></div>
  <button id="toggleSelect">Show Widget</button>
  </div>
  <script type="text/javascript">
  //var package_path = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/'));
  /*var dojoConfig = {
  packages: [{
  name: "application",
  location: "https://dl.dropboxusercontent.com/u/79881075/SelectByAtt/"
            }]
  };*/




  var dojoConfig = {
  parseOnLoad: false,
  async: true,
  tlmSiblingOfDojo: false,
  packages: [{
  name: "ncam",
  location: location.pathname.replace(/\/[^/]+$/, '') + "ncam"
            }]
  };
  </script>
  <script src="https://js.arcgis.com/3.15/" type="text/javascript"></script>


  <script type="text/javascript">
  var map
  require([
  "esri/map",
  "ncam/AttributeSelection",
  "esri/layers/FeatureLayer",
  "esri/symbols/SimpleFillSymbol",
  "esri/symbols/SimpleMarkerSymbol",
  "esri/Color",
  "dojo/on"
  ], function (Map, SelectByAtt, FeatureLayer, SimpleFillSymbol, SimpleMarkerSymbol, Color, on) {
  var myWidget;
  map = new Map("map", {
  center: [-86, 33],
  zoom: 6,
  spatialReference: 102100,
  showAttribution: false,
  logo: false,
  sliderStyle: "small",
  basemap: "topo"
  });


  var layer1 = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3");
  var layer2 = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/2");




  var jailsPoints = new FeatureLayer("http://sushi:6080/arcgis/rest/services/DavidC/JailsLink_Points_Jails/MapServer/0", {
  id: "jailsFL",
  mode: FeatureLayer.MODE_ONDEMAND,
  });




  var selectionSymbol = new SimpleFillSymbol().setColor(new Color([255, 255, 0, 0.5]));


  var symbolSelectedJails = new SimpleMarkerSymbol({
  "type": "esriSMS",
  "style": "esriSMSCircle",
  "color": [255, 115, 0],
  "size": 9,
  "outline": {
  "color": [255, 0, 0, 214],
  "width": 1
  }
  });


  layer1.setSelectionSymbol(selectionSymbol);
  layer2.setSelectionSymbol(selectionSymbol);
  jailsPoints.setSelectionSymbol(symbolSelectedJails);


  map.addLayers([layer1, layer2]);
  map.addLayer(jailsPoints);


  document.getElementById("toggleSelect").addEventListener("click", showSelect);


  //After the layers have been added to the map, create the SelectByAtt widget
  map.on("layers-add-result", function () {
  myWidget = new SelectByAtt({
  map: map,
  layers: [layer1, layer2, jailsPoints]
  }, "attributeSelection");
  myWidget.startup();
  });


  function showSelect() {
  myWidget.show();
  }


  });
  </script>
</body>


</html>

Re: Problem loading custom dijit

RobertScheitlin__GISP — Wed, 03 Feb 2016 21:24:25 GMT

David,

David are you doing a Ctrl F5 refresh of the web page when you test? Using Ctrl F5 forces the browser to ignore any caching of the page and it get the new change.

Re: Problem loading custom dijit

RobertScheitlin__GISP — Wed, 03 Feb 2016 21:42:17 GMT

David,

Here is the your project working on my end.

Re: Problem loading custom dijit

DavidChrest — Wed, 03 Feb 2016 21:48:56 GMT

Yes, but still not working.

My widget is here: C:\Projects\Jails\Linking_Plan\Webedits\SelectByAttributeWidget_test\ncam\AttributeSelection.js.

My index.html is here: C:\Projects\Jails\Linking_Plan\Webedits\SelectByAttributeWidget_test\index.html

So what exactly should this be?

packages: [{

name: "ncam",

location: location.pathname.replace(/\/[^/]+$/, '') + "ncam"

And what exactly should this be:

require: "ncam/AttributeSelection"

Re: Problem loading custom dijit

RobertScheitlin__GISP — Wed, 03 Feb 2016 21:55:27 GMT

David,

Try the attached zip with your project on my last thread. I worked for me on my end.

Re: Problem loading custom dijit

DavidChrest — Thu, 04 Feb 2016 02:23:26 GMT

Yep, that does it! Thanks so very much! You patience and responses are greatly appreciated.

Looks like that AttributeSelection.html file needed to also be in the js folder along with AttributeSelection.js.