[53.teams-messaging-extensions-action-preview]: Sample enhancement for adding user attribution for bot messages JavaScript/NodeJs

samples/csharp_dotnetcore/53.teams-messaging-extensions-action-preview/README.md

@@ -2,7 +2,9 @@
 
 Bot Framework v4 Teams Messaging Extension Action Preview sample.
 
-This Messaging Extension has been created using [Bot Framework](https://dev.botframework.com). It shows how to create a simple card based on parameters entered by the user from a Task Module.
+This Messaging Extension has been created using [Bot Framework](https://dev.botframework.com). 
+ - It shows how to create a simple card based on parameters entered by the user from a Task Module.
+ - It also displays the scenario where a Bot sends messages on behalf of a User. Attributing the message to that user can help with engagement and showcase a more natural interaction flow.
 
 ## Prerequisites
 
@@ -61,4 +63,3 @@ To learn more about deploying a bot to Azure, see [Deploy your bot to Azure](htt
 
 - [How Microsoft Teams bots work](https://docs.microsoft.com/en-us/azure/bot-service/bot-builder-basics-teams?view=azure-bot-service-4.0&tabs=javascript)
 
-

samples/javascript_nodejs/53.teams-messaging-extensions-action-preview/README.md

@@ -2,7 +2,9 @@
 
 Bot Framework v4 Teams Messaging Extension Action Preview sample.
 
-This Messaging Extension has been created using [Bot Framework](https://dev.botframework.com). It shows how to create a simple card based on parameters entered by the user from a Task Module.
+This Messaging Extension has been created using [Bot Framework](https://dev.botframework.com).
+ - It shows how to create a simple card based on parameters entered by the user from a Task Module.
+ - It also displays the scenario where a Bot sends messages on behalf of a User. Attributing the message to that user can help with engagement and showcase a more natural interaction flow.
 
 ## Prerequisites
 

samples/javascript_nodejs/53.teams-messaging-extensions-action-preview/adaptiveCardHelper.js

@@ -9,8 +9,10 @@ class AdaptiveCardHelper {
         const attachmentContent = activityPreview.attachments[0].content;
         const userText = attachmentContent.body[1].text;
         const choiceSet = attachmentContent.body[3];
+        const attributionFlag = attachmentContent.body[4].text.split(':')[1];
         return {
             MultiSelect: choiceSet.isMultiSelect ? 'true' : 'false',
+            UserAttributionSelect: attributionFlag,
             Option1: choiceSet.choices[0].title,
             Option2: choiceSet.choices[1].title,
             Option3: choiceSet.choices[2].title,
@@ -69,6 +71,15 @@ class AdaptiveCardHelper {
                     placeholder: 'Option 3 here',
                     type: 'Input.Text',
                     value: option3
+                },
+                { type: 'TextBlock', text: 'Do you want to send this card on behalf of the User?' },
+                {
+                    choices: [{ title: 'Yes', value: 'true' }, { title: 'No', value: 'false' }],
+                    id: 'UserAttributionSelect',
+                    isMultiSelect: false,
+                    style: 'expanded',
+                    type: 'Input.ChoiceSet',
+                    value: isMultiSelect ? 'true' : 'false'
                 }
             ],
             type: 'AdaptiveCard',
@@ -95,7 +106,8 @@ class AdaptiveCardHelper {
                     isMultiSelect: data.MultiSelect,
                     style: 'expanded',
                     type: 'Input.ChoiceSet'
-                }
+                },
+                { text: `Sending card on behalf of user is set to: ${ data.UserAttributionSelect }`, type: 'TextBlock', id: 'AttributionChoice' }
             ],
             type: 'AdaptiveCard',
             version: '1.0'

samples/javascript_nodejs/53.teams-messaging-extensions-action-preview/bots/teamsMessagingExtensionsActionPreviewBot.js

@@ -53,8 +53,22 @@ class TeamsMessagingExtensionsActionPreviewBot extends TeamsActivityHandler {
 
         // This is a send so we are done and we will create the adaptive card editor.
         const adaptiveCard = AdaptiveCardHelper.createAdaptiveCardAttachment(submitData);
-        const responseActivity = { type: 'message', attachments: [adaptiveCard] };
-
+        var responseActivity = { type: 'message', attachments: [adaptiveCard] };
+        if (submitData.UserAttributionSelect === 'true') {
+             responseActivity = {
+                 type: 'message',
+                 attachments: [adaptiveCard],
+                 channelData: {
+                     onBehalfOf: [
+                        {
+                            itemId: 0,
+                            mentionType: 'person',
+                            mri: context.activity.from.id,
+                            displayName: context.activity.from.name
+                        }
+                    ]
+            }}; 
+        }  
         await context.sendActivity(responseActivity);
     }