Merge pull request #843 from OfficeDev/v-mfurquan/bot-adaptivecard-ac…

…tions-readmefixes Updated Readme, Manifest Icons And Code Fixes For Bot Adaptive Card Actions
OfficeDev · Jun 30, 2023 · 35d3f25 · 35d3f25
2 parents c9caad4 + db5b9c0
commit 35d3f25
Show file tree

Hide file tree

Showing 7 changed files with 93 additions and 93 deletions.
diff --git a/samples/bot-adaptive-card-actions/nodejs/Readme.md b/samples/bot-adaptive-card-actions/nodejs/Readme.md
@@ -34,20 +34,18 @@ Please find below demo manifest which is deployed on Microsoft Azure and you can
 -  Microsoft Teams is installed and you have an account (not a guest account)
 -  To test locally, [NodeJS](https://nodejs.org/en/download/) must be installed on your development machine (version 18.12.1)
 -  [ngrok](https://ngrok.com/) or equivalent tunneling solution
--  [M365 developer account](https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/build-and-test/prepare-your-o365-tenant) or access to a Teams account with the 
+-  [M365 developer account](https://docs.microsoft.com/microsoftteams/platform/concepts/build-and-test/prepare-your-o365-tenant) or access to a Teams account with the 
    appropriate permissions to install an app.
 
 ## Setup
 
-> Note these instructions are for running the sample on your local machine, the tunnelling solution is required because
-> the Teams service needs to call into the bot.
+1. Register a new application in the [Azure Active Directory – App Registrations](https://go.microsoft.com/fwlink/?linkid=2083908) portal.
+      > NOTE: When you create your app registration, you will create an App ID and App password - make sure you keep these for later.
 
-2. Setup For Bot
-- In Azure portal, create a [Azure Bot resource](https://docs.microsoft.com/en-us/azure/bot-service/bot-builder-authentication?view=azure-bot-service-4.0&tabs=csharp%2Caadv2).
-- Ensure that you've [enabled the Teams Channel](https://docs.microsoft.com/en-us/azure/bot-service/channel-connect-teams?view=azure-bot-service-4.0)
-- While registering the bot, use `https://<your_ngrok_url>/api/messages` as the messaging endpoint.
-
-	**NOTE:** When you create your bot you will create an App ID and App password - make sure you keep these for later.
+2. Setup for Bot:
+  - Register a bot with Azure Bot Service, following the instructions [here](https://docs.microsoft.com/azure/bot-service/abs-quickstart?view=azure-bot-service-4.0&tabs=userassigned).
+  - Ensure that you've [enabled the Teams Channel](https://docs.microsoft.com/azure/bot-service/channel-connect-teams?view=azure-bot-service-4.0)
+  - While registering the bot, use `https://<your_ngrok_url>/api/messages` as the messaging endpoint.
 
 3. Setup NGROK  
 Run ngrok - point to port 3978
@@ -63,10 +61,10 @@ Run ngrok - point to port 3978
     git clone https://github.com/OfficeDev/Microsoft-Teams-Samples.git
     ```
 
-  - In a terminal, navigate to `samples/bot-adaptive-card-actions/nodejs`
-
-  - Update the `.env` configuration for the bot to use the `MicrosoftAppId` and `MicrosoftAppPassword`. (Note the MicrosoftAppId is the AppId created in step 1 (Setup AAD app registration in your Azure portal), the MicrosoftAppPassword is referred to as the "client secret" in step 1 (Setup for Bot) and you can always create a new client secret anytime.)
+  - Update the `.env` configuration for the bot to use the `MicrosoftAppId` and `MicrosoftAppPassword`. 
+(**Note:** The MicrosoftAppId is the AppId created in step 1 (Setup AAD app registration in your Azure portal), the MicrosoftAppPassword is referred to as the "client secret" in step 1 (Setup for Bot) and you can always create a new client secret anytime.)
 
+  - In a terminal, navigate to `samples/bot-adaptive-card-actions/nodejs`
 
   - Install modules
 
@@ -82,14 +80,14 @@ Run ngrok - point to port 3978
 
 5. Setup Manifest for Teams
 - __*This step is specific to Teams.*__
-    - **Edit** the `manifest.json` contained in the ./AppPackage folder to replace your Microsoft App Id (that was created when you registered your app registration earlier) *everywhere* you see the place holder string `{{Microsoft-App-Id}}` (depending on the scenario the Microsoft App Id may occur multiple times in the `manifest.json`)
-    - **Edit** the `manifest.json` for `validDomains` and replace `{{Domain-Name}}` with base Url of your domain. E.g. if you are using ngrok it would be `https://1234.ngrok-free.app` then your domain-name will be `1234.ngrok-free.app`.
-    - **Zip** up the contents of the `AppPackage` folder to create a `manifest.zip` (Make sure that zip file does not contains any subfolder otherwise you will get error while uploading your .zip package)
+    - **Edit** the `manifest.json` contained in the ./appPackage folder to replace your Microsoft App Id (that was created when you registered your app registration earlier) *everywhere* you see the place holder string `<<Microsoft-AppId>>` (depending on the scenario the Microsoft App Id may occur multiple times in the `manifest.json`)
+    - **Edit** the `manifest.json` for `validDomains` and replace `<<Domain-Name>>` with base Url of your domain. E.g. if you are using ngrok it would be `https://1234.ngrok-free.app` then your domain-name will be `1234.ngrok-free.app`.
+    - **Zip** up the contents of the `appPackage` folder to create a `manifest.zip` (Make sure that zip file does not contains any subfolder otherwise you will get error while uploading your .zip package)
 
 - Upload the manifest.zip to Teams (in the Apps view click "Upload a custom app")
    - Go to Microsoft Teams. From the lower left corner, select Apps
    - From the lower left corner, choose Upload a custom App
-   - Go to your project directory, the ./AppPackage folder, select the zip folder, and choose Open.
+   - Go to your project directory, the ./appPackage folder, select the zip folder, and choose Open.
    - Select Add in the pop-up dialog box. Your app is uploaded to Teams.
 
 **Note**: If you are facing any issue in your app, please uncomment [this](https://github.com/OfficeDev/Microsoft-Teams-Samples/blob/main/samples/bot-adaptive-card-actions/nodejs/index.js#L44) line and put your debugger for local debug.
@@ -135,4 +133,4 @@ To learn more about deploying a bot to Azure, see [Deploy your bot to Azure](htt
 - [Send suggested actions](https://learn.microsoft.com/microsoftteams/platform/bots/how-to/conversations/conversation-messages?tabs=dotnet#send-suggested-actions)
 
 
-<img src="https://pnptelemetry.azurewebsites.net/microsoft-teams-samples/samples/bot-adaptive-card-actions-nodejs" />
+  <img src="https://pnptelemetry.azurewebsites.net/microsoft-teams-samples/samples/bot-adaptive-card-actions-nodejs" />
diff --git a/samples/bot-adaptive-card-actions/nodejs/appPackage/color.png b/samples/bot-adaptive-card-actions/nodejs/appPackage/color.png
diff --git a/samples/bot-adaptive-card-actions/nodejs/appPackage/outline.png b/samples/bot-adaptive-card-actions/nodejs/appPackage/outline.png
diff --git a/samples/bot-adaptive-card-actions/nodejs/assets/sample.json b/samples/bot-adaptive-card-actions/nodejs/assets/sample.json
@@ -9,7 +9,7 @@
       "Sample which demonstrates different Adaptive Card action types using bot."
     ],
     "creationDateTime": "2022-12-27",
-    "updateDateTime": "2022-12-27",
+    "updateDateTime": "2023-06-28",
     "products": [
       "Teams"
     ],

diff --git a/samples/bot-adaptive-card-actions/nodejs/bots/adaptivecardActionsBot.js b/samples/bot-adaptive-card-actions/nodejs/bots/adaptivecardActionsBot.js
@@ -4,7 +4,7 @@
 const { ActivityHandler, MessageFactory, CardFactory } = require('botbuilder');
 const { ActionTypes } = require('botframework-schema');
 
-class SuggestedActionsBot extends ActivityHandler {
+class AdaptiveCardActionsBot extends ActivityHandler {
     constructor() {
         super();
 
@@ -219,4 +219,4 @@ class SuggestedActionsBot extends ActivityHandler {
     })
 }
 
-module.exports.SuggestedActionsBot = SuggestedActionsBot;
+module.exports.AdaptiveCardActionsBot = AdaptiveCardActionsBot;
diff --git a/samples/bot-adaptive-card-actions/nodejs/index.js b/samples/bot-adaptive-card-actions/nodejs/index.js
@@ -46,7 +46,7 @@ adapter.onTurnError = async (context, error) => {
 };
 
 // Create the bot that will handle incoming messages.
-const bot = new SuggestedActionsBot();
+const bot = new AdaptiveCardActionsBot();
 
 server.listen(PORT, () => {
     console.log(`Server listening on http://localhost:${PORT}`);

diff --git a/samples/tab-device-permissions/nodejs/src/components/Tab.tsx b/samples/tab-device-permissions/nodejs/src/components/Tab.tsx
@@ -35,86 +35,88 @@ const Tab = () => {
       });
     });
   })
-  
+
   const rowq = {
     rowd: {
-      width:'100%',
-      display: 'table', 
+      width: '100%',
+      display: 'table',
     },
   } as const;
-  
+
   return (
-   
+
     <div style={rowq.rowd} >
-    {!isWeb &&
-      <>
-      <div className="Grid"> 
-        <Segment
-          /* Component to capture image(s) */
-          children={<CaptureImage />} writeKey={''}
-        />
-        {
-        // Commenting out this code as these API's are currently having bug.
+      {!isWeb &&
+        <>
+          <div className="Grid">
+            <Segment
+              /* Component to capture image(s) */
+              children={<CaptureImage />} writeKey={''}
+            />
+            {
+              // Commenting out this code as these API's are currently having bug.
 
-        // <Segment
-        //   /* Component to Get/Show geo-Location */
-        //   children={<GetGeoLocation />} writeKey={''}
-        // />
-        //  <Segment 
-        //   /* Component to capture audio */
-        //   children={<CaptureAudio />} writeKey={''}
-        // />
-        }
-      </div>
-      <div>
-         <Segment
-          /* Component to scan barcode */
-          children={<ScanBarCode />} writeKey={''}
-        />
-         <Segment
-          /* Component to capture video */
-          children={<CaptureVideo />} writeKey={''}
-        />
-         <Segment
-          /* Component to show selected people */
-          children={<PeoplePicker />} writeKey={''}
-        />
-      </div>
-      </>
-    }
-    {isWeb &&
-    <>
-    <div className='Grid'>
-    <Segment 
-        /* Component to capture image in browser */
-        children={<CaptureImageWeb />} writeKey={''}
-      />
-      <Segment
-        /* Component to Get/Show geo-Location in browser */
-        children={<GetLocationWeb />} writeKey={''}
-      />
-
+              // <Segment
+              //   /* Component to Get/Show geo-Location */
+              //   children={<GetGeoLocation />} writeKey={''}
+              // />
+              //  <Segment 
+              //   /* Component to capture audio */
+              //   children={<CaptureAudio />} writeKey={''}
+              // />
+            }
+          </div>
+          <div>
+            {
+              // Component to scan barcode
+              // <Segment
+              //children = {< ScanBarCode />} writeKey={''}
+              ///>
+              //<Segment
+              /* Component to capture video */
+              //children={<CaptureVideo />} writeKey={''}
+              ///>
+            }
+            <Segment
+              /* Component to show selected people */
+              children={<PeoplePicker />} writeKey={''}
+            />
+          </div>
+        </>
+      }
+      {isWeb &&
+        <>
+          <div className='Grid'>
+            <Segment
+              /* Component to capture image in browser */
+              children={<CaptureImageWeb />} writeKey={''}
+            />
+            <Segment
+              /* Component to Get/Show geo-Location in browser */
+              children={<GetLocationWeb />} writeKey={''}
+            />
+
+          </div>
+          <div className='Grid'>
+            <Segment
+              /* Component to capture audio in browser */
+              children={<CaptureAudioWeb />} writeKey={''}
+            />
+            <Segment
+              /* Component to Get notification in browser */
+              children={<GetNotificationWeb />} writeKey={''}
+            />
+          </div>
+          <div className='Grid'>
+            <Segment
+              /* Component to capture video in browser */
+              children={<CaptureVideoWeb />} writeKey={''}
+
+            />
+          </div>
+        </>
+      }
     </div>
-      <div className='Grid'>
-      <Segment 
-        /* Component to capture audio in browser */
-        children={<CaptureAudioWeb />} writeKey={''}
-      />
-      <Segment 
-        /* Component to Get notification in browser */
-        children={<GetNotificationWeb />} writeKey={''}
-      />
-      </div>
-      <div className='Grid'>
-      <Segment 
-        /* Component to capture video in browser */
-        children={<CaptureVideoDesktop />} writeKey={''}
-
-      />
-      </div>
-      </>
-    }
-  </div>
   );
 }