Load portal items via drag & drop

This sample demonstrates how to load a PortalItem from an ArcGIS for Portal 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.

var template =
  '<li data-itemid="{id}" draggable="true">' +
    '<article class="card"><img src="{thumbnailUrl}" alt="Card Thumbnail">' +
      '<hr>' +
      '<h6>{title}</h6>' +
      '<ul class="card-info">' +
        '<li>{created}</li>' +
        '<li>{owner}</li>' +
      '</ul>' +
    '</article>' +
  '</li>';

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" and so on to display in the application.

var portalItems = layerItems.map(function(itemid) {
  return (new PortalItem({
    id: itemid
  })).load();
});

3. Create DOM elements to display item details on page

Use dojo/promise/all to wait for the Portal items to finish loading. You can then use esri/core/lang to create DOM elements using the details of each Portal item to display on the page. You will also want to listen for the "dragstart" event of the DOM element and assign some data to be transferred to whereever that element is dropped.

all(portalItems).then(function(items) {
  var docFrag = document.createDocumentFragment();
  items.map(function(item) {
    var card = esriLang.substitute(item, template);
    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);
    on(target, "dragstart", function(e) {
      var id = e.currentTarget.getAttribute("data-itemid");
      e.dataTransfer.setData("text", id);
    });
  });
  document.querySelector(".cards-list").appendChild(docFrag);
  ...
});

4. Manage drag events

You need to 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.

all(portalItems).then(function(items) {
  ...
  on(view.container, "drop, dragover", function(e) {
    if (e.type === "dragover") {
      e.preventDefault();
      e.dataTransfer.dropEffect = 'copy';
    } else {
      var id = e.dataTransfer.getData("text");
      // Get the first item that matches
      var item = items.filter(function(x) { return x.id === id; })[0];
      if (item && item.isLayer) {
        Layer.fromPortalItem({
          portalItem: item
        }).then(function(lyr) {
          webmap.add(lyr);
          view.extent = item.extent;
        });
      }
    }
  });
});