Create an array of all the Portal items to use in this application.We want to load the Portal items when they are created, because we want to use the information such as id, owner, etc. to display in the application.
3. Create DOM elements to display item details on page
Use the eachAlways method of esri/core/promiseUtils to wait for the Portal items to finish loading.You can then use the esri/intl.substitute() method to create DOM elements using the details of each Portal item to display on the page.Also, you will need to listen for DOM element's dragStart event and assign some data to be transferred to wherever that element is dropped.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
promiseUtils.eachAlways(portalItems).then(function(items) {
var docFrag = document.createDocumentFragment();
items.map(function(result) {
var item = result.value;
var card = intl.substitute(template, item);
var elem = document.createElement("div");
elem.innerHTML = card;
// This is a technique to turn a DOM string to a DOM element.var target = elem.firstChild;
docFrag.appendChild(target);
target.addEventListener("dragstart", function(event) {
var id = event.currentTarget.getAttribute("data-itemid");
event.dataTransfer.setData("text", id);
});
});
document.querySelector(".cards-list").appendChild(docFrag);
...
});
4. Manage drag events
Listen for the drop and dragover events to properly drop the Portal item on the MapView. You can then get the id of the PortalItem and add the layer to the WebMap using Layer.fromPortalItem.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
promiseUtils.eachAlways(portalItems).then(function(items) {
...
view.container.addEventListener("dragover", function(event) {
event.preventDefault();
event.dataTransfer.dropEffect = "copy";
})
view.container.addEventListener("drop", function(event) {
var id = event.dataTransfer.getData("text");
// Get the first item that matchesvar resultItem = items.find(function(x) { return x.id === id; });
var item = result.value;
if (item && item.isLayer) {
Layer.fromPortalItem({
portalItem: item
}).then(function(layer) {
webmap.add(layer);
view.extent = item.extent;
});
}
})
});
Please refer to the ArcGIS Organization portals for information on how the ArcGIS API for JavaScript makes use of working with portal items.