Merge pull request #1353 from OfficeDev/v-hrajandira/MeetingsSidepanel

meetings-sidepanel sample issues fixed
OfficeDev · Aug 5, 2024 · ed44552 · ed44552
2 parents a6a0cc8 + 9794458
commit ed44552
Show file tree

Hide file tree

Showing 4 changed files with 10,333 additions and 13,187 deletions.
diff --git a/samples/meetings-sidepanel/csharp/README.md b/samples/meetings-sidepanel/csharp/README.md
@@ -31,7 +31,7 @@ This sample illustrates how to implement [Side Panel](https://docs.microsoft.com
 
 ## Interaction with app theme
 
-![Preview Image](Images/app-theme-sidepanel.gif)
+![Preview Image](SidePanel/Images/app-theme-sidepanel.gif)
 
 ## Prerequisites
 
@@ -40,7 +40,7 @@ This sample illustrates how to implement [Side Panel](https://docs.microsoft.com
   # determine dotnet version
   dotnet --version
   ```
-
+- [Node.js 18.x](https://nodejs.org/download/release/v18.18.2/)
 - [Teams](https://teams.microsoft.com) Microsoft Teams is installed and you have an account
 - [dev tunnel](https://learn.microsoft.com/en-us/azure/developer/dev-tunnels/get-started?tabs=windows) or [Ngrok](https://ngrok.com/download) (For local environment testing) latest version (any other tunneling software can also be used)
 - [Teams Toolkit for Visual Studio](https://learn.microsoft.com/en-us/microsoftteams/platform/toolkit/toolkit-v4/install-teams-toolkit-vs?pivots=visual-studio-v17-7)
@@ -58,18 +58,18 @@ The simplest way to run this sample in Teams is to use Teams Toolkit for Visual
 1. In the browser that launches, select the **Add** button to install the app to Teams.
 > If you do not have permission to upload custom apps (sideloading), Teams Toolkit will recommend creating and using a Microsoft 365 Developer Program account - a free program to get your own dev environment sandbox that includes Teams.
 
-## Setup.
+## Manually Setup and use the sample locally.
 
-1) Run ngrok - point to port 3978
+1) Run ngrok - point to port 5130
 
    ```bash
-   ngrok http 3978 --host-header="localhost:3978"
+   ngrok http 5130 --host-header="localhost:5130"
    ```  
 
    Alternatively, you can also use the `dev tunnels`. Please follow [Create and host a dev tunnel](https://learn.microsoft.com/en-us/azure/developer/dev-tunnels/get-started?tabs=windows) and host the tunnel with anonymous user access command as shown below:
 
    ```bash
-   devtunnel host -p 3978 --allow-anonymous
+   devtunnel host -p 5130 --allow-anonymous
    ```
 
 2. Create Microsoft Entra ID 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).
@@ -88,11 +88,13 @@ The simplest way to run this sample in Teams is to use Teams Toolkit for Visual
 - Navigate to ```samples\meetings-sidepanel\csharp``` folder
 - Select ```SidePanel.sln``` file and open the solution
 
+**Note** : In the debug dropdown menu of Visual Studio, select default startup project > **SidePanel**
+
 5. Setup and run the bot from Visual Studio: 
    Modify the `appsettings.json` and fill in the following details:
-   - `<<Microsoft-App-ID>>` - Generated from Step 2 (Application (client) ID) is the application app id
-   - `<<Microsoft-App-Secret>>` - Generated from Step 2, also referred to as Client secret
-   - `<<Your_Domain_URL>>` - Your application's base url. E.g. https://12345.ngrok-free.app if you are using ngrok and if you are using dev tunnels, your URL will be like: https://12345.devtunnels.ms.
+   - `<<MicrosoftAppId>>` - Generated from Step 2 (Application (client) ID) is the application app id
+   - `<<MicrosoftAppPassword>>` - Generated from Step 2, also referred to as Client secret
+   - `<<BaseUrl>>` - Your application's base url. E.g. https://12345.ngrok-free.app if you are using ngrok and if you are using dev tunnels, your URL will be like: https://12345.devtunnels.ms.
 
 6. Modify the `manifest.json` in the `/appPackage` folder and replace the following details:
    - <<Manifest-id>> with any random GUID or your MicrosoftAppId from Microsoft Entra ID app registration.
@@ -105,10 +107,9 @@ The simplest way to run this sample in Teams is to use Teams Toolkit for Visual
 8. Navigate to ```samples\meetings-sidepanel\csharp\ClientApp``` folder and execute the below command.
 
     ```bash
-    # npx @fluidframework/azure-local-service@latest
+    npm install
+    npm start
     ```
-**Note**: Please Check the `nodemodules` in ClientApp folder, Navigate to ```samples\meetings-sidepanel\csharp\ClientApp``` if not exists, please install nodemodules using this command `npm install`.
-
 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
@@ -123,11 +124,11 @@ User interactions(Meeting Organizer)
 - **Publish Agenda** - Sends the agenda list to the meeting chat.
 
 ## Installation and setup meetings sidepanel.
-![Install](Images/1.Install.png)
+![Install](SidePanel/Images/1.Install.png)
 
-![Install](Images/2.AddToMeeting.png)
+![Install](SidePanel/Images/2.AddToMeeting.png)
 
-![Install](Images/3.ConfigureTab.png)
+![Install](SidePanel/Images/3.ConfigureTab.png)
 
 1. Welcome image to added side panel.
 ![Customform](SidePanel/Images/4.Sidepanel.png)