diff --git a/playlists-prod/outlook.yaml b/playlists-prod/outlook.yaml index d675b90a6..cdb4674f5 100644 --- a/playlists-prod/outlook.yaml +++ b/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 diff --git a/playlists/outlook.yaml b/playlists/outlook.yaml index ca772433b..66855bc23 100644 --- a/playlists/outlook.yaml +++ b/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 diff --git a/samples/outlook/80-events/drag-drop-item.yaml b/samples/outlook/80-events/drag-drop-item.yaml new file mode 100644 index 000000000..7fb596045 --- /dev/null +++ b/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: |- +
+

Drag and drop messages and file attachments into the add-in task pane.

+

To learn more about the drag-and-drop feature, see Drag and drop messages and + attachments into the task pane of an Outlook add-in.

+

Required mode: Compose or Read

+

Supported Outlook clients: Outlook on the web and the new Outlook on Windows

+
+
+

Try it out

+
    +
  1. 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.
    2. +
  2. Drop the message or file attachment into the task pane. The properties + of the dropped item are displayed in the console.
    3. +
+
+ 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 \ No newline at end of file diff --git a/snippet-extractor-metadata/outlook.xlsx b/snippet-extractor-metadata/outlook.xlsx index d3bcea07d..ef99fbe26 100644 Binary files a/snippet-extractor-metadata/outlook.xlsx and b/snippet-extractor-metadata/outlook.xlsx differ diff --git a/snippet-extractor-output/snippets.yaml b/snippet-extractor-output/snippets.yaml index ee07a923e..e4de5bfb1 100644 --- a/snippet-extractor-output/snippets.yaml +++ b/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: diff --git a/view-prod/outlook.json b/view-prod/outlook.json index d9564fc71..9b861d008 100644 --- a/view-prod/outlook.json +++ b/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", diff --git a/view/outlook.json b/view/outlook.json index bdd41f2b7..7d57d08cb 100644 --- a/view/outlook.json +++ b/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",