Load portal items via drag & drop

This sample demonstrates how to load a PortalItem from a Portal for ArcGIS item into your application.

1. Define a template to display items

You'll want to define a template to use for each PortalItem to display in the application.

1
2
3
4
5
6
7
8
9
10
11
12
const template =
  '<div data-itemid="{id}" class="card block" draggable="true">' +
    '<figure class="card-image-wrap"><img class="card-image" src="{thumbnailUrl}" alt="Card Thumbnail">' +
      '<figcaption class="card-image-caption">{title}</figcaption>' +
    "</figure>" +
    '<div class="card-content">' +
      "<ul>" +
        "<li>Published Date:</li>" + "{created}" +
        "<li>Owner:</li>" + "{owner}" +
      "</ul>" +
    "</div>" +
  "</div>";

2. Load the Portal Items

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.

1
2
3
4
5
const portalItems = layerItems.map((itemid) => {
  return new PortalItem({
    id: itemid
  }).load();
});

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((items) => {
  const docFrag = document.createDocumentFragment();
  items.map((result) => {
    const item = result.value;
    const card = intl.substitute(template, item);
    const elem = document.createElement("div");
    elem.innerHTML = card;
    // This is a technique to turn a DOM string to a DOM element.
    const target = elem.firstChild;
    docFrag.appendChild(target);
    target.addEventListener("dragstart", (event) => {
      const 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((items) => {
  ...
  view.container.addEventListener("dragover", (event) => {
    event.preventDefault();
    event.dataTransfer.dropEffect = "copy";
  })
  view.container.addEventListener("drop", (event) => {
    const id = event.dataTransfer.getData("text");
    // Get the first item that matches
    const resultItem = items.find((x) => { return x.id === id; });
    const item = result.value;
    if (item && item.isLayer) {
      Layer.fromPortalItem({
        portalItem: item
      }).then((layer) => {
        webmap.add(layer);
        view.extent = item.extent;
      });
    }
  })
});

Please refer to the ArcGIS Organization portals for information on how the makes use of working with portal items.

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

The developer dashboard has moved

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close