I am trying to create a demo app to understand how to minimize my code by creating more files. I am using the base starter app sample on one js file and trying to add a widget on another. The code works on the same file but after the divide its breaking. I added a dojo config, a dojo-ready function and a new define in the widgets.js file. I am using "define" and not "require" on the widget.js because it's dependent on the main but not sure if it's ok because it will only be called once. This is how my app looks: modules(folder) -widgets.js index.html main.js index.html ArcGIS API for JavaScript Tutorials: Create a Starter App html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } dojoConfig = { async: true, packages: [ { name: "widgets", location: "modules/widgets" // or wherever you keep your custom code } ] }; main.js require([ "esri/Map", "esri/views/MapView", "dojo/ready", "widgets/searchWidget" ], function(Map, MapView,ready) { ready(function () { var map = new Map({ basemap: "topo-vector" }); var view = new MapView({ container: "viewDiv", map: map, center: [-118.80500, 34.02700], // longitude, latitude zoom: 13 }); var widget = new searchWidget(view) }); }); widget.js define(["esri/widgets/Search"], function(Search) { var search return{ searchWidget: function(view){ search = new Search({ view: view }); view.ui.add(search, 'top-right'); } } });

You need to set an absolute path for your package. Something like this. var locationPath = location.pathname.replace(/\/[^\/]+$/, ""); window.dojoConfig = { packages: [ { name: "widgets", location: locationPath + "/module/widgets" } ] }; That little regex will get you the absolute URL of the page your app is running and let the AMD loader know exactly where to find the package. Without it, it assumes it should look at the location the AMD loader is running, which will be on the CDN.

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Loading a custom module from different file with API4 and Dojo

litch

I am trying to create a demo app to understand how to minimize my code by creating more files.

I am using the base starter app sample on one js file and trying to add a widget on another. The code works on the same file but after the divide its breaking.

I added a dojo config, a dojo-ready function and a new define in the widgets.js file.

I am using "define" and not "require" on the widget.js because it's dependent on the main but not sure if it's ok because it will only be called once.

This is how my app looks:

modules(folder)
-widgets.js
index.html
main.js

index.html

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>ArcGIS API for JavaScript Tutorials: Create a Starter App</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <script type="text/javascript">
    dojoConfig = {
      async: true,
      packages: [
        {
          name: "widgets",
          location: "modules/widgets" // or wherever you keep your custom code
        }
      ]
    };
  </script>
  <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.18/"></script>
  <script type="text/javascript" src="main.js"></script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

main.js

require([
  "esri/Map",
  "esri/views/MapView",
  "dojo/ready",
  "widgets/searchWidget"
], function(Map, MapView,ready) {
    ready(function () {


    var map = new Map({
        basemap: "topo-vector"
    });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-118.80500, 34.02700], // longitude, latitude
      zoom: 13
      });
      
    var widget = new searchWidget(view)
     });


});

widget.js

define(["esri/widgets/Search"], function(Search) { 
var search


return{
      
    searchWidget: function(view){

        search = new Search({
            view: view
          });

        view.ui.add(search, 'top-right');
    }
}


 });

Trouver plus de publications taguées avec

Accepted answers

litch

It worked! I also had to change the code to a constructor and add declare.
In the accessor page it states dojo/_base/declare was removed.
Is this the right way to import functions in the api?

main.js

var loc = location.pathname.replace(/\/[^/]+$/, '');
require({
  packages: [
    { name: "modules", location: loc + "/modules"}
  ]
},[
  "esri/Map",
  "esri/views/MapView",
  "modules/widgets/MySearchWidget",
  "dojo/ready"
], function(
  Map,
  MapView,
  MySearchWidget,
) {
  var map = new Map({
    basemap: "topo-vector"
  });

  var view = new MapView({
    container: "viewDiv",
    map: map,
    center: [-118.80500, 34.02700], // longitude, latitude
    zoom: 13
  });
  
  var SearchWidget = MySearchWidget(view);
});

mySearchWidget,js

define([
  "dojo/_base/declare",
  "esri/widgets/Search"
], function(
  declare,
  Search
) {
  return declare( null, {
    constructor: function( view ) {
      var search = new Search({
        view: view
      });
      view.ui.add( search, "top-right" );
    }
  });
});

RRubalcava

You need to set an absolute path for your package.

Something like this.

<script>
var locationPath = location.pathname.replace(/\/[^\/]+$/, "");
window.dojoConfig = {
  packages: [
    {
      name: "widgets",
      location: locationPath + "/module/widgets"
    }
  ]
};
</script>

That little regex will get you the absolute URL of the page your app is running and let the AMD loader know exactly where to find the package. Without it, it assumes it should look at the location the AMD loader is running, which will be on the CDN.

All comments

litch

It worked! I also had to change the code to a constructor and add declare.
In the accessor page it states dojo/_base/declare was removed.
Is this the right way to import functions in the api?

main.js

var loc = location.pathname.replace(/\/[^/]+$/, '');
require({
  packages: [
    { name: "modules", location: loc + "/modules"}
  ]
},[
  "esri/Map",
  "esri/views/MapView",
  "modules/widgets/MySearchWidget",
  "dojo/ready"
], function(
  Map,
  MapView,
  MySearchWidget,
) {
  var map = new Map({
    basemap: "topo-vector"
  });

  var view = new MapView({
    container: "viewDiv",
    map: map,
    center: [-118.80500, 34.02700], // longitude, latitude
    zoom: 13
  });
  
  var SearchWidget = MySearchWidget(view);
});

mySearchWidget,js

define([
  "dojo/_base/declare",
  "esri/widgets/Search"
], function(
  declare,
  Search
) {
  return declare( null, {
    constructor: function( view ) {
      var search = new Search({
        view: view
      });
      view.ui.add( search, "top-right" );
    }
  });
});

RRubalcava

You need to set an absolute path for your package.

Something like this.

<script>
var locationPath = location.pathname.replace(/\/[^\/]+$/, "");
window.dojoConfig = {
  packages: [
    {
      name: "widgets",
      location: locationPath + "/module/widgets"
    }
  ]
};
</script>

litch

Sorry for not making myself clear.

I don't want to use Dojo at all if possible.

Here's a working app:
All I want to do is to call the search widget from another file:

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>ArcGIS API for JavaScript Tutorials: Create a Starter App</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  
    <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.18/"></script>
  
  <script>  
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/widgets/Search"
      
      
    ], function(Map, MapView,Search) {

      var map = new Map({
        basemap: "topo-vector"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-118.80500, 34.02700], // longitude, latitude
      zoom: 13
      });
      
      
        var searchWidget = new Search({
          view: view
        });

        // Add the search widget to the top right corner of the view
        view.ui.add(searchWidget, {
          position: "top-right"
        });


    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

Is that possible without Dojo and Node? if so can you show me how?

ShayL

I'm really confused about what you're trying to achieve. If I understand this right, you're working with version 4 of the API, but don't want to create a widget, just call the existing ones OOB + combine dojo to separate them into modules? if that's all correct, you're just trying to learn how to use dojo modules? Yet in your code, you refer to a widget.js file, which points to a widget code structure.

If you're trying to learn modules in Dojo, I suggest you start with that alone, before you start mixing the API and initialize widgets inside modules.

To understand better on creating modules with Dojo it's best you refer to their documentation.
There's also this good thread - http://dojo-toolkit.33424.n3.nabble.com/define-declare-vs-module-class-td3993005.html

litch

If I am getting this right, the link you sent is for developing widgets from scratch, which is not my intention.
I want to use existing "from the box" widgets in my code but after a while the js file bloats.

In my example the widget is just a simple search widget that consists of a few lines of code,
it worked on the sample with one js file.
Do i still need to use typescript just to break the code and reference it?

I tried calling it as a src from the script tag and i tried "export"-ing it as a function and importing it in before i found the Dojo solution, but none of them worked.

All the sample code i found was a single page JS, and the "getting started with the API" course mentions how fast the files can grow but doesn't provide an example of multiple files.

do you have any other source or sample that is more inline with my problem or is it not possible at all to avoid using node?

ShayL

Hi,

When you say API4 I assume you mean the new version of the Javascript API, which today is 4.18 and has nothing to do with the WebApp Builder. In that case, you are required to follow a more modern Javascript style, which includes nodeJS, npm for packages installation and Dojo is not really part of the API. You should follow ESRI's documentation and samples to try and understand the workflow but without prior knowledge and good understanding it can be quite overwhelming -- https://developers.arcgis.com/javascript/latest/sample-code/widgets-custom-widget/index.html

To write widgets in the style you suggested, you need to stick to version 3 of the API, which is still what's required if your purpose is to integrate the widget within the WebApp Builder

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.