Readme fixes

samples/meetings-sidepanel/csharp/README.md

@@ -21,64 +21,60 @@ This sample illustrates how to implement [Side Panel](https://docs.microsoft.com
 
 ![Customform](SidePanel/Images/SidePanelModule.gif)
 
-
 ### User interactions(Meeting Organizer)
 - **Add New Agenda Item** - Gives provision to add new Agenda point.
 - **Add** - Adds the agenda from Textinput to the SidePanel agenda list.
 - **Publish Agenda** - Sends the agenda list to the meeting chat.
 
-
-
 ## Prerequisites
 
-### Tools
-
 - [.NET Core SDK](https://dotnet.microsoft.com/download) version 3.1
   ```bash
   # determine dotnet version
   dotnet --version
   ```
-## Setup.
-
-  - [Ngrok](https://ngrok.com/download) (For local environment testing) Latest (any other tunneling software can also be used)
-  ```bash
-  # run ngrok locally
-  ngrok http -host-header=localhost 3001
-  ```
 
 - [Teams](https://teams.microsoft.com) Microsoft Teams is installed and you have an account
+- [Ngrok](https://ngrok.com/download) (For local environment testing) Latest (any other tunneling software can also be used)
 
-- Register a bot with Azure Bot Service, following the instructions [here](https://docs.microsoft.com/en-us/azure/bot-service/bot-service-quickstart-registration?view=azure-bot-service-3.0).
-- 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.
+## Setup.
+
+1. Run ngrok - point to port 3978
+   ```ngrok http -host-header=rewrite 3978```
 
-1. Clone the repository
+2. Create AAD app registration in Azure portal and also register a bot with Azure Bot Service, following the instructions [here](https://docs.microsoft.com/en-us/azure/bot-service/bot-service-quickstart-registration?view=azure-bot-service-3.0).
+    - 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.
+
+3. Clone the repository
    ```bash
    git clone https://github.com/OfficeDev/Microsoft-Teams-Samples.git
    ```
-2. If you are using Visual Studio
+
+4. If you are using Visual Studio
 - Launch Visual Studio
 - File -> Open -> Project/Solution
 - Navigate to ```samples\meetings-sidepanel\csharp``` folder
 - Select ```SidePanel.sln``` file
-3. Run ngrok - point to port 3001
-   ```ngrok http -host-header=rewrite 3978```
-4. Create a new Bot by following steps mentioned in [Build a bot](https://docs.microsoft.com/en-us/microsoftteams/platform/bots/what-are-bots?view=msteams-client-js-latest#build--a-bot-for-teams-with-the-microsoft-bot-framework) documentation.
+
 5. Go to appsettings.json and add ```MicrosoftAppId```, ```MicrosoftAppPassword``` and ```BaseUrl``` information.
+
 6. Update the manifest.json file with ```Microsoft-App-ID``` and ```BaseUrl``` value.
+
 7. Run your app, either from Visual Studio with ```F5``` or using ```dotnet run``` in the appropriate folder.
+
 8. Navigate to ```samples\meetings-sidepanel\csharp\ClientApp``` folder and execute the below command.
 
     ```bash
     # npx @fluidframework/azure-local-service@latest
     ```
+
 9. 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.
 
-
 ## Running the sample
 
 1. Welcome image to added side panel.

samples/meetings-sidepanel/nodejs/README.md

@@ -32,21 +32,29 @@ This sample illustrates how to implement [Side Panel](https://docs.microsoft.com
 
 - [Teams](https://teams.microsoft.com) Microsoft Teams is installed and you have an account
 
-## To try this sample
-
-- Register a bot with Azure Bot Service, following the instructions [here](https://docs.microsoft.com/en-us/azure/bot-service/bot-service-quickstart-registration?view=azure-bot-service-3.0).
+## Setup
+- Register an AAD app in Azure portal and also register a bot with Azure Bot Service, following the instructions [here](https://docs.microsoft.com/en-us/azure/bot-service/bot-service-quickstart-registration?view=azure-bot-service-3.0).
 
 - 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.
 
-1. Clone the repository
+1. Run ngrok - point to port 3001 (pointing to ClientApp)
+
+    ```bash
+    # ngrok http -host-header=rewrite 3001
+    ```
+
+2. Clone the repository
       ```bash
       git clone https://github.com/OfficeDev/Microsoft-Teams-Samples.git
       ```
 
-2. Install node modules
+3. Go to .env file  and add ```MicrosoftAppId```,  ```MicrosoftAppPassword``` and ```BaseURL``` information with values generated while doing App Registration.
+- ```BaseURL``` will be your application domain URL like ngrok URL: https://xxxx.ngrok.io
+
+4. Install node modules
 
    Inside node js folder,  navigate to `samples/meetings-sidepanel/nodejs/server` open your local terminal and run the below command to install node modules. You can do the same in Visual Studio code terminal by opening the project in Visual Studio code.
 
@@ -55,43 +63,69 @@ This sample illustrates how to implement [Side Panel](https://docs.microsoft.com
     ```bash
     npm install
     ```
-3. We have two different solutions to run so follow below steps:
+
+5. We have two different solutions to run, so follow below steps:
  
-   A) In a terminal, navigate to `samples/meetings-sidepanel/nodejs/server`
+- In a terminal, navigate to `samples/meetings-sidepanel/nodejs/server` folder, Open your local terminal and run the below command to install node modules. You can do the same in Visual studio code terminal by opening the project in Visual studio code
+```bash
+npm install
+```
 
-   B) In a different terminal, navigate to `samples/meetings-sidepanel/nodejs/ClientApp`
+```bash
+npm start
+```
 
-4. Run ngrok - point to port 3001 (pointing to ClientApp)
+If you face any dependency error while installing node modules, try using below command
 
-    ```bash
-    # ngrok http -host-header=rewrite 3001
-    ```
-5. Create a new Bot by following steps mentioned in [Build a bot](https://docs.microsoft.com/en-us/microsoftteams/platform/bots/what-are-bots?view=msteams-client-js-latest#build--a-bot-for-teams-with-the-microsoft-bot-framework) documentation.
+```bash
+npm install --legacy-peer-deps
+```
+
+- In a different terminal, navigate to `samples/meetings-sidepanel/nodejs/ClientApp` folder, Open your local terminal and run the below command to install node modules. You can do the same in Visual studio code terminal by opening the project in Visual studio code 
+```bash
+cd client
+npm install
+```
 
-6. Go to .env file  and add ```MicrosoftAppId``` and  ```MicrosoftAppPassword``` information.
+```bash
+npm start
+```
 
-7. Run your app, either from Visual Studio code  with ``` npm start``` or using ``` Run``` in the Terminal.
+If you face any dependency error while installing node modules, try using below command
 
-8. Update the manifest.json file with ```Microsoft-App-ID``` and ```BaseUrl``` value.
+```bash
+npm install --legacy-peer-deps
+```
 
-9. [Install the App in Teams Meeting](https://docs.microsoft.com/en-us/microsoftteams/platform/apps-in-teams-meetings/teams-apps-in-meetings?view=msteams-client-js-latest#meeting-lifecycle-scenarios)
+6. Run your app, either from Visual Studio code  with ``` npm start``` or using ``` Run``` in the Terminal.
 
-## Interacting with the app in Teams Meeting
+## Setup Manifest for Teams
+1) __*This step is specific to Teams.*__
+    - **Edit** the `manifest.json` contained in the `teamsAppManifest` folder and replace your Microsoft App Id (that was created when you registered your app earlier) *everywhere* you see the place holder string `<<YOUR-MICROSOFT-APP-ID>>` (depending on the scenario the Microsoft App Id may occur multiple times in the `manifest.json`)
+    - **Edit** the `manifest.json` for `configurationUrl` inside `configurableTabs` . Replace `{{BASE-URL}}` with base Url domain. E.g. if you are using ngrok it would be `https://1234.ngrok.io` then your domain-name will be `1234.ngrok.io`.
+    - **Update** the `manifest.json` for `validDomains` with base Url domain. E.g. if you are using ngrok it would be `https://1234.ngrok.io` then your domain-name will be `1234.ngrok.io`.
+    - **Update** the `manifest.json` for `<<Manifest-id>>` with any GUID or with your MicrosoftAppId, generated during App registration in Azure portal.
+
+    - **Zip** up the contents of the `teamsAppManifest` 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 Teams Apps/Manage your apps click "Upload an app". Browse to and Open the .zip file. At the next dialog, click the Add button.)
+
+##Running the sample
+
+### Interacting with the app in Teams Meeting
 Interact with SidePanel by clicking on the App icon present on the top menu beside the "more actions" during a meeting.
 1. Once the app is clicked, sidepanel appears with the default agenda list. Only organizer gets the feasibility to add new agenda points to the list using "Add New Agenda Item" button.
 
-![](Images/Dashboard.png)
+![Dashboard](Images/Dashboard.png)
 
 2. On click of "Add" button, agenda point will be added to the agenda list by organizer.
 
-![](Images/AddNewAgendaItem.png)
+![AddNewAgendaItem](Images/AddNewAgendaItem.png)
 
-![](Images/AddedNew.png)
+![AddedNew](Images/AddedNew.png)
 
 3. On click of "Publish Agenda", the agenda list will be sent to the meeting chat.
 
-![](Images/Notification.png)
-
+![Notification](Images/Notification.png)
 
 ### User interactions(Meeting Organizer)
 - **Add New Agenda Item** - Gives provision to add new Agenda point.
@@ -104,4 +138,5 @@ Interact with SidePanel by clicking on the App icon present on the top menu besi
 
 ## Further Reading.
 
--[Meeting Side Panel](https://learn.microsoft.com/en-us/microsoftteams/platform/sbs-meetings-sidepanel?tabs=vs)
+- [Meeting Side Panel](https://learn.microsoft.com/en-us/microsoftteams/platform/sbs-meetings-sidepanel?tabs=vs)
+- [Install the App in Teams Meeting](https://docs.microsoft.com/en-us/microsoftteams/platform/apps-in-teams-meetings/teams-apps-in-meetings?view=msteams-client-js-latest#meeting-lifecycle-scenarios)

samples/meetings-sidepanel/nodejs/teamsAppManifest/manifest.json

@@ -35,7 +35,7 @@
   ],
   "configurableTabs": [
     {
-      "configurationUrl": "https://{{Domain Name}}/config",
+      "configurationUrl": "{{BASE-URL}}/config",
       "canUpdateConfiguration": true,
       "scopes": [
         "team",

samples/tab-channel-context/nodejs/README.md

@@ -27,12 +27,13 @@ This sample shows the contents of tab context object in a private and shared cha
 
 ![Preview Image](Images/Preview.gif)
 
-## To try this sample
+## Setup
 
 1) Clone the repository
    ```bash
    git clone https://github.com/OfficeDev/Microsoft-Teams-Samples.git
    ```
+
 2) Install node modules
 
    Inside node js folder,  navigate to `samples/tab-channel-context/nodejs/ClientApp` open your local terminal and run the below command to install node modules. You can do the same in Visual Studio code terminal by opening the project in Visual Studio code.
@@ -45,12 +46,13 @@ This sample shows the contents of tab context object in a private and shared cha
     ```
     npm start
     ```
+
 4) Modify the `manifest.json` in the `/AppPackage` folder and replace the following details
    - `{{Manifest-id}}` with some unique GUID.
    - `{{Domain Name}}` with your application's base url, e.g. https://1234.ngrok.io
 
 5) Zip the contents of `AppPackage` folder into a `manifest.zip`, and use the `manifest.zip` to deploy in app store or add to Teams.
-    
+
 6) 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 Apps -> Manage your apps -> Upload an app.

samples/tab-request-approval/csharp/README.md

@@ -31,14 +31,15 @@ This sample shows a feature where:
   ```bash
   dotnet --version
   ```
+
 - [Ngrok](https://ngrok.com/download) (For local environment testing) Latest (any other tunneling software can also be used)
 
   run ngrok locally
   ```bash
   ngrok http -host-header=localhost 3978
   ```
-- [Teams](https://teams.microsoft.com) Microsoft Teams is installed and you have an account
 
+- [Teams](https://teams.microsoft.com) Microsoft Teams is installed and you have an account
 
 ## Setup
 
@@ -62,12 +63,15 @@ This sample shows a feature where:
     * **User consent title**: Teams can access the user profile and make requests on the user's behalf.
     * **User consent description:** Enable Teams to call this app’s APIs with the same rights as the user.
 9. Ensure that **State** is set to **Enabled**
+
 10. Select **Add scope**
     * The domain part of the **Scope name** displayed just below the text field should automatically match the **Application ID** URI set in the previous step, with `/access_as_user` appended to the end:
         * `api://[ngrokDomain].ngrok.io/00000000-0000-0000-0000-000000000000/access_as_user.
+
 11. In the **Authorized client applications** section, identify the applications that you want to authorize for your app’s web application. Each of the following IDs needs to be entered:
     * `1fec8e78-bce4-4aaf-ab1b-5451cc387264` (Teams mobile/desktop application)
     * `5e3ce6c0-2b1f-4285-8d4b-75ee78787346` (Teams web application)
+
 12. Navigate to **API Permissions**, and make sure to add the follow permissions:
 -   Select Add a permission
 -   Select Microsoft Graph -\> Delegated permissions.
@@ -92,41 +96,47 @@ This sample shows a feature where:
 	* Select **Single page application**.
 	* Enter the **redirect URI** for the app in the following format: `https://{Base_Url}/TabAuth`
     Enable implicit grant by checking the following boxes:  
-    ✔ ID Token  
-    ✔ Access Token  
+    ✔ ID Token
+    ✔ Access Token
 14.  Navigate to the **Certificates & secrets**. In the Client secrets section, click on "+ New client secret". Add a description(Name of the secret) for the secret and select “Never” for Expires. Click "Add". Once the client secret is created, copy its value, it need to be placed in the appsettings.json.
 
-15. Clone the repository
+15. Register a bot with Azure Bot Service, following the instructions [here](https://docs.microsoft.com/en-us/azure/bot-service/bot-service-quickstart-registration?view=azure-bot-service-3.0).
+    - 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.
+
+16. Clone the repository
    ```bash
    git clone https://github.com/OfficeDev/Microsoft-Teams-Samples.git
    ```
 
-16. Open the code in Visual Studio
+17. Open the code in Visual Studio
    - File -> Open -> Project/Solution
    - Navigate to folder where repository is cloned then `samples/tab-request-approval/csharp/TabRequestApproval.sln`
 
-17. Run ngrok - point to port 3978
+18. Run ngrok - point to port 3978
 
     ```bash
     # ngrok http -host-header=rewrite 3978
     ```
 
-18. Setup and run the bot from Visual Studio: 
+19. Setup and run the bot from Visual Studio: 
    Modify the `appsettings.json` and fill in the following details:
    - `MicrosoftAppId` - Generated from Step 3 (Application (client) ID)is the application app id
    - `TenantId` - Generated from Step 3(Directory (tenant) ID) is the tenant id
    - `MicrosoftAppPassword` - Generated from Step 14, also referred to as Client secret
    - `{Base_URL}` - Your application's base url. E.g. https://12345.ngrok.io if you are using ngrok.
    - Press `F5` to run the project
 	 
-19. Modify the `manifest.json` in the `/AppPackage` folder and replace the following details:
+20. Modify the `manifest.json` in the `/AppPackage` folder and replace the following details:
    - `{{Microsoft-App-Id}}` with Application id generated from Step 3
    - `{Base_URL}` - Your application's base url. E.g. https://12345.ngrok.io if you are using ngrok.
    - `{{domain-name}}` with base Url domain. E.g. if you are using ngrok it would be `https://1234.ngrok.io` then your domain-name will be `1234.ngrok.io`.
 
-20. Zip the contents of `AppPackage` folder into a `manifest.zip`, and use the `manifest.zip` to deploy in app store or add to Teams using step 19.
+21. Zip the contents of `AppPackage` folder into a `manifest.zip`, and use the `manifest.zip` to deploy in app store or add to Teams using step 19.
 
-21. Upload the manifest.zip to Teams (in the Apps view click "Upload a custom app")
+22. Upload the manifest.zip to Teams (in the Apps view click "Upload a custom app")
    - Go to Microsoft Teams and then go to side panel, select Apps
    - Choose Upload a custom App
    - Go to your project directory, the ./AppPackage folder, select the zip folder, and choose Open.
@@ -140,21 +150,21 @@ User Persona:
 
 - Send request to the manger for task approval.
 
-  ![Request from user](TabRequestApproval/Images/TaskRequest.png)
+![Request from user](TabRequestApproval/Images/TaskRequest.png)
 
 - Request status
 
-  ![Request status](TabRequestApproval/Images/RequestStatus.png)
+![Request status](TabRequestApproval/Images/RequestStatus.png)
 
 Manager Persona:
 
 - Activity feed notification of approval request.
 
-  ![Notification](TabRequestApproval/Images/RequestNotification.png)
+![Notification](TabRequestApproval/Images/RequestNotification.png)
 
 - Pending task approval request.
 
-  ![Pending request list](TabRequestApproval/Images/RequestDetails.png)
+![Pending request list](TabRequestApproval/Images/RequestDetails.png)
 
 
 ## Further reading