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; } } }

How to Create separated Modules

HushamHassan

any body point me in the right direction for the best way to combine 2 sample widget for example identify and find, Using 2 separated js files. Just need to call them in the main.js

Find more posts tagged with

Accepted answers

RickeyFight

It is AMD Here is the link to Esri overview site Park Locator | ArcGIS for State Government

All comments

HushamHassan

Rickey,

Thank you for the Link.

Its a good start to understand the AMD, Its using API 3.13, is there any big differences between 3.13 and 3.16

Thanks

RickeyFight

It is AMD Here is the link to Esri overview site Park Locator | ArcGIS for State Government

HushamHassan

Thank you, will go through the example and get back to you..

Regards

RRubalcava

Thanks! Appreciate it.

I don't have a sample using the widget samples, but I do have this simple sample on my github account.

GitHub - odoe/esrijs-modular: Sample modular app

HushamHassan

Hi Rene,

Thank you, Will try your link again, Actually I read your book "ArcGIS Web Development" but still things are confused.. if you can include a very simple example of how to join 2 of the sample Code provided in the sample code page.. it would be more helpful for beginners like me.

Regards

HushamHassan

Thank you Rickey, this example is very complicated , is it a legacy version or AMD version,, If you know any simple example using AMD that combining 2 or more widget.. with separated js file for each widget please let me know

RRubalcava

Yeah, I don't know the parks guide app, but that is some custom loading of non-module code.

You can start here.

Embrace your AMD modules

Get familiar with how to write AMD modules and you'll be good to go.

RickeyFight

This is how esri does it in parks guide

<script type="text/javascript">
  loadJS('//js.arcgis.com/3.11/init.js', true);
  loadJS('app/maptour-config.js');

  function getUrlVar(name)
  {
     var vars = [], hash;
    if( window.location.href.indexOf('?') == -1 ) return null;

     var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
     for(var i = 0; i < hashes.length; i++){
         hash = hashes.split('=');
  hash[0] = hash[0].split('#')[0];
         vars.push(hash[0]);
         vars[hash[0]] = (hash[1] == undefined) ? "true" : hash[1];
     }
     return vars[name];
  }

  if( isProduction ) {
  if( getUrlVar('edit') || getUrlVar('fromScratch') || getUrlVar('fromscratch') || getUrlVar('fromGallery') )
  loadJS('app/maptour-builder-min.js');
  else
  loadJS('app/maptour-viewer-min.js');
  }
  else {
  loadJS('lib/_jquery.1.9.1.min.js');
  loadJS('lib/bootstrap/js/bootstrap.min.js');
  loadJS('lib/spin.min.js');
  loadJS('lib/history.min.js');
  loadJS('lib/cubiq.iscroll.js');
  loadJS('lib/cubiq.swipeview.js');
  loadJS('lib/jquery-ui-1.10.0.custom.min.js');
  loadJS('lib/jquery.ui.touch-punch.min.js');
  loadJS('lib/jquery.exif.js');
  loadJS('lib/jquery.fastClick.js');
  loadJS('lib/jquery.hammer.min.js');
  loadJS('lib/megapix-image.js');
  loadJS('lib/spectrum/spectrum.js');
  loadJS('lib/bootstrap.file-input.js');
  loadJS('lib/colorbox/jquery.colorbox-min.js');
  }
  </script>

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

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