[Outlook] (drag and drop) Create code snippet and map it to drag-and-drop APIs

playlists-prod/outlook.yaml

@@ -455,6 +455,17 @@
   group: Regex Matches
   api_set:
     Mailbox: '1.6'
+- id: outlook-events-drag-drop-item
+  name: Drag and drop an item into the task pane
+  fileName: drag-drop-item.yaml
+  description: >-
+    Handles the drag-and-drop event when a user drags and drops messages and
+    file attachments into the add-in task pane.
+  rawUrl: >-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/80-events/drag-drop-item.yaml
+  group: Events
+  api_set:
+    Mailbox: '1.5'
 - id: outlook-tokens-and-service-calls-ids-and-urls
   name: Endpoint URLs and item IDs
   fileName: ids-and-urls.yaml

playlists/outlook.yaml

@@ -455,6 +455,17 @@
   group: Regex Matches
   api_set:
     Mailbox: '1.6'
+- id: outlook-events-drag-drop-item
+  name: Drag and drop an item into the task pane
+  fileName: drag-drop-item.yaml
+  description: >-
+    Handles the drag-and-drop event when a user drags and drops messages and
+    file attachments into the add-in task pane.
+  rawUrl: >-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/outlook/80-events/drag-drop-item.yaml
+  group: Events
+  api_set:
+    Mailbox: '1.5'
 - id: outlook-tokens-and-service-calls-ids-and-urls
   name: Endpoint URLs and item IDs
   fileName: ids-and-urls.yaml

samples/outlook/80-events/drag-drop-item.yaml

@@ -0,0 +1,72 @@
+id: outlook-events-drag-drop-item
+name: Drag and drop an item into the task pane
+description: Handles the drag-and-drop event when a user drags and drops messages and file attachments into the add-in task pane.
+host: OUTLOOK
+api_set:
+    Mailbox: '1.5'
+script:
+    content: |
+        Office.onReady(() => {
+            dragAndDropEventHandler(event);
+        });
+
+        function dragAndDropEventHandler(event) {
+            Office.context.mailbox.addHandlerAsync(Office.EventType.DragAndDropEvent, (event) => {
+            console.log(`Event type: ${event.type}`);
+
+            const eventData = event.dragAndDropEventData;
+            console.log(`x-coordinate: ${eventData.pageX}, y-coordinate: ${eventData.pageY}`);
+
+            if (eventData.type == "drop") {
+              console.log("Items dropped into task pane.");
+              const files = eventData.dataTransfer.files;
+              files.forEach((file) => {
+                const content = file.fileContent;
+                const name = file.name;
+                const fileType = file.type;
+                console.log(`File name: ${name}`);
+                console.log(`File type: ${fileType}`);
+                console.log(`Contents: ${content.text().then((text) => { console.log(text); })}`);
+              });
+            }
+          });
+        }
+    language: typescript
+template:
+    content: |-
+        <section class="ms-Fabric ms-font-m">
+            <p class="ms-font-m">Drag and drop messages and file attachments into the add-in task pane.</p>
+            <p>To learn more about the drag-and-drop feature, see <a
+                    href="https://learn.microsoft.com/office/dev/add-ins/outlook/drag-drop-items">Drag and drop messages and
+                    attachments into the task pane of an Outlook add-in</a>.</p>
+            <p><b>Required mode</b>: Compose or Read</p>
+          <p><b>Supported Outlook clients</b>: Outlook on the web and the new Outlook on Windows</p>
+        </section>
+        <section class="ms-Fabric samples ms-font-m">
+            <h3>Try it out</h3>
+            <ol>
+                <li>Drag a message or file attachment from your mailbox to the task pane. As you drag the item across the task pane, the event name and the coordinates of your mouse pointer are displayed in the console.</li> 
+                <li>Drop the message or file attachment into the task pane. The properties
+                of the dropped item are displayed in the console.</li>
+            </ol>
+        </section>
+    language: html
+style:
+    content: |-
+        section.samples {
+            margin-top: 20px;
+        }
+
+        section.samples .ms-Button, section.setup .ms-Button {
+            display: block;
+            margin-bottom: 5px;
+            margin-left: 20px;
+            min-width: 80px;
+        }
+    language: css
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts
+
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css

snippet-extractor-output/snippets.yaml

@@ -11153,6 +11153,141 @@ Office.DisplayedSubject#setAsync:member(2):
 
       console.log("Temporarily set the content displayed in the subject field.");
     });
+Office.DragAndDropEventArgs:interface:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/80-events/drag-drop-item.yaml
+
+
+    function dragAndDropEventHandler(event) {
+        Office.context.mailbox.addHandlerAsync(Office.EventType.DragAndDropEvent, (event) => {
+        console.log(`Event type: ${event.type}`);
+
+        const eventData = event.dragAndDropEventData;
+        console.log(`x-coordinate: ${eventData.pageX}, y-coordinate: ${eventData.pageY}`);
+
+        if (eventData.type == "drop") {
+          console.log("Items dropped into task pane.");
+          const files = eventData.dataTransfer.files;
+          files.forEach((file) => {
+            const content = file.fileContent;
+            const name = file.name;
+            const fileType = file.type;
+            console.log(`File name: ${name}`);
+            console.log(`File type: ${fileType}`);
+            console.log(`Contents: ${content.text().then((text) => { console.log(text); })}`);
+          });
+        }
+      });
+    }
+Office.DragoverEventData:interface:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/80-events/drag-drop-item.yaml
+
+
+    function dragAndDropEventHandler(event) {
+        Office.context.mailbox.addHandlerAsync(Office.EventType.DragAndDropEvent, (event) => {
+        console.log(`Event type: ${event.type}`);
+
+        const eventData = event.dragAndDropEventData;
+        console.log(`x-coordinate: ${eventData.pageX}, y-coordinate: ${eventData.pageY}`);
+
+        if (eventData.type == "drop") {
+          console.log("Items dropped into task pane.");
+          const files = eventData.dataTransfer.files;
+          files.forEach((file) => {
+            const content = file.fileContent;
+            const name = file.name;
+            const fileType = file.type;
+            console.log(`File name: ${name}`);
+            console.log(`File type: ${fileType}`);
+            console.log(`Contents: ${content.text().then((text) => { console.log(text); })}`);
+          });
+        }
+      });
+    }
+Office.DropEventData:interface:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/80-events/drag-drop-item.yaml
+
+
+    function dragAndDropEventHandler(event) {
+        Office.context.mailbox.addHandlerAsync(Office.EventType.DragAndDropEvent, (event) => {
+        console.log(`Event type: ${event.type}`);
+
+        const eventData = event.dragAndDropEventData;
+        console.log(`x-coordinate: ${eventData.pageX}, y-coordinate: ${eventData.pageY}`);
+
+        if (eventData.type == "drop") {
+          console.log("Items dropped into task pane.");
+          const files = eventData.dataTransfer.files;
+          files.forEach((file) => {
+            const content = file.fileContent;
+            const name = file.name;
+            const fileType = file.type;
+            console.log(`File name: ${name}`);
+            console.log(`File type: ${fileType}`);
+            console.log(`Contents: ${content.text().then((text) => { console.log(text); })}`);
+          });
+        }
+      });
+    }
+Office.DroppedItems:interface:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/80-events/drag-drop-item.yaml
+
+
+    function dragAndDropEventHandler(event) {
+        Office.context.mailbox.addHandlerAsync(Office.EventType.DragAndDropEvent, (event) => {
+        console.log(`Event type: ${event.type}`);
+
+        const eventData = event.dragAndDropEventData;
+        console.log(`x-coordinate: ${eventData.pageX}, y-coordinate: ${eventData.pageY}`);
+
+        if (eventData.type == "drop") {
+          console.log("Items dropped into task pane.");
+          const files = eventData.dataTransfer.files;
+          files.forEach((file) => {
+            const content = file.fileContent;
+            const name = file.name;
+            const fileType = file.type;
+            console.log(`File name: ${name}`);
+            console.log(`File type: ${fileType}`);
+            console.log(`Contents: ${content.text().then((text) => { console.log(text); })}`);
+          });
+        }
+      });
+    }
+Office.DroppedItemDetails:interface:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/80-events/drag-drop-item.yaml
+
+
+    function dragAndDropEventHandler(event) {
+        Office.context.mailbox.addHandlerAsync(Office.EventType.DragAndDropEvent, (event) => {
+        console.log(`Event type: ${event.type}`);
+
+        const eventData = event.dragAndDropEventData;
+        console.log(`x-coordinate: ${eventData.pageX}, y-coordinate: ${eventData.pageY}`);
+
+        if (eventData.type == "drop") {
+          console.log("Items dropped into task pane.");
+          const files = eventData.dataTransfer.files;
+          files.forEach((file) => {
+            const content = file.fileContent;
+            const name = file.name;
+            const fileType = file.type;
+            console.log(`File name: ${name}`);
+            console.log(`File type: ${fileType}`);
+            console.log(`Contents: ${content.text().then((text) => { console.log(text); })}`);
+          });
+        }
+      });
+    }
 Office.EnhancedLocation#addAsync:member(1):
   - >-
     // Link to full sample:

view-prod/outlook.json

@@ -47,6 +47,7 @@
   "outlook-mime-headers-get-internet-headers-message-read": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/70-mime-headers/get-internet-headers-message-read.yaml",
   "outlook-mime-headers-manage-custom-internet-headers-message-compose": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/70-mime-headers/manage-custom-internet-headers-message-compose.yaml",
   "outlook-regex-matches-contextual": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/75-regex-matches/contextual.yaml",
+  "outlook-events-drag-drop-item": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/80-events/drag-drop-item.yaml",
   "outlook-tokens-and-service-calls-ids-and-urls": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/85-tokens-and-service-calls/ids-and-urls.yaml",
   "outlook-tokens-and-service-calls-user-identity-token": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/85-tokens-and-service-calls/user-identity-token.yaml",
   "outlook-tokens-and-service-calls-user-callback-token": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/85-tokens-and-service-calls/user-callback-token.yaml",

view/outlook.json

@@ -47,6 +47,7 @@
   "outlook-mime-headers-get-internet-headers-message-read": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/outlook/70-mime-headers/get-internet-headers-message-read.yaml",
   "outlook-mime-headers-manage-custom-internet-headers-message-compose": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/outlook/70-mime-headers/manage-custom-internet-headers-message-compose.yaml",
   "outlook-regex-matches-contextual": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/outlook/75-regex-matches/contextual.yaml",
+  "outlook-events-drag-drop-item": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/outlook/80-events/drag-drop-item.yaml",
   "outlook-tokens-and-service-calls-ids-and-urls": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/outlook/85-tokens-and-service-calls/ids-and-urls.yaml",
   "outlook-tokens-and-service-calls-user-identity-token": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/outlook/85-tokens-and-service-calls/user-identity-token.yaml",
   "outlook-tokens-and-service-calls-user-callback-token": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/outlook/85-tokens-and-service-calls/user-callback-token.yaml",