JS API 4.x ES modules: how to import watchUtils and Button?

164
1
Jump to solution
02-10-2021 01:09 AM
Arpa_PiemonteGeoportal_Team
Occasional Contributor II

Hi,
when I used esri-loader, to import watchUtils and Button I wrote:

loadModules([
"dijit/form/Button",
"esri/core/watchUtils",
], options)
.then(([
Button,
watchUtils,
]) => {})

How can I do with ES modules?
I tried:

import Button from '@arcgis/dijit/form/Button';
import watchUtils from "@arcgis/core/watchUtils";

But it doesn't work.

Thanks for help.

0 Kudos
1 Solution

Accepted Solutions
Arpa_PiemonteGeoportal_Team
Occasional Contributor II

Ok, I think I solved both problems.
For watchUtils:

 

import * as watchUtils from '@arcgis/core/core/watchUtils.js';

 

 

For button the best solution is (this example put as icon the esri-icon-collection):

 

var element = document.createElement('div');
element.className = "esri-icon-collection esri-widget--button esri-widget esri-interactive";
element.addEventListener('click', function(evt){
  console.log("clicked"); 
})
view.ui.add(element, "top-right");

 

If you are using ionic, you can put a ionic icon removing 'esri-icon-collection ' and adding a innerHTML, like;

 

var element = document.createElement('div');
element.className = "esri-widget--button esri-widget esri-interactive";
element.innerHTML = '<ion-icon name="expand"></ion-icon>'
element.addEventListener('click', function(evt){
  console.log("clicked"); 
})
view.ui.add(element, "top-right");

 

View solution in original post

0 Kudos
1 Reply
Arpa_PiemonteGeoportal_Team
Occasional Contributor II

Ok, I think I solved both problems.
For watchUtils:

 

import * as watchUtils from '@arcgis/core/core/watchUtils.js';

 

 

For button the best solution is (this example put as icon the esri-icon-collection):

 

var element = document.createElement('div');
element.className = "esri-icon-collection esri-widget--button esri-widget esri-interactive";
element.addEventListener('click', function(evt){
  console.log("clicked"); 
})
view.ui.add(element, "top-right");

 

If you are using ionic, you can put a ionic icon removing 'esri-icon-collection ' and adding a innerHTML, like;

 

var element = document.createElement('div');
element.className = "esri-widget--button esri-widget esri-interactive";
element.innerHTML = '<ion-icon name="expand"></ion-icon>'
element.addEventListener('click', function(evt){
  console.log("clicked"); 
})
view.ui.add(element, "top-right");

 

View solution in original post

0 Kudos