Merge pull request #1224 from OfficeDev/v-hrajandira/Images_Updates_T…

…eams2.1

PR 1 - Update Readme and Images - Classic to T2.1

samples/bot-sso-adaptivecard/csharp/BotSsoAdaptivecard/README.md

@@ -157,12 +157,6 @@ Register your application with Azure AD
 
 ## Running the sample
 
-**Upload App:**
-
-![Upload](Images/Upload.png)
-
-![UploadSucess](Images/UploadSucess.png)
-
 **Install App:**
 
 ![InstallApp](Images/InstallApp.png)

samples/bot-sso-adaptivecard/nodejs/README.md

@@ -169,12 +169,6 @@ Refer to [Bot SSO Setup document](https://github.com/OfficeDev/Microsoft-Teams-S
 
 ## Running the sample
 
-**Upload App:**
-
-![Upload](Images/Upload.png)
-
-![UploadSucess](Images/UploadSucess.png)
-
 **Install App:**
 
 ![InstallApp](Images/InstallApp.png)
@@ -187,7 +181,7 @@ Refer to [Bot SSO Setup document](https://github.com/OfficeDev/Microsoft-Teams-S
 
 ![SignButton](Images/SignButton.png)
 
-**Login Successfully:**
+**Welcome Universal Card:**
 
 ![InstallApp](Images/loginsuccess.png)
 

samples/graph-change-notification/nodejs/README.md

@@ -27,7 +27,7 @@ This sample app demonstrates sending notifications to users when presence status
 
 ## Interaction with app
 
-![PreviewImage](Images/Preview.gif)
+![Preview Image](Images/Preview.gif)
 
 ## Prerequisites
 
@@ -86,6 +86,7 @@ The simplest way to run this sample in Teams is to use Teams Toolkit for Visual
       - `Presence.Read`
       - `Presence.Read.All`
   -   Click on Add permissions. Please make sure to grant the admin consent for the required permissions.
+  ![ApiPermission](Images/ApiPermission.png)
   13. Navigate to **Authentication**
       If an app hasn't been granted IT admin consent, users will have to provide consent the first time they use an app.
   - Set a redirect URI:
@@ -174,19 +175,26 @@ The simplest way to run this sample in Teams is to use Teams Toolkit for Visual
 ## Running with sample
 - After sucessfully installation of app you will get a sign in button. When sign in is complete then you get your current status in adapative card
 
-![image](Images/Login.png)
+![image0](Images/image0.png)
 
-![image](Images/BeRightBack_validate.png)
+![image1](Images/image1.png)
+
+![image2](Images/image2.png)
 
 - After that when the user status chagnes you will get notify about their status: 
 - Change user status from available to busy like
 
-![image](Images/Busy.png)
+![image3](Images/image3.png)
+
+![image4](Images/image4.png)
+
+![image5](Images/image5.png)
 
-- Change user status from busy to busy offline
+![image6](Images/image6.png)
 
-![image](Images/Offline.png)
+![image7](Images/image7.png)
 
+![image8](Images/image8.png)
 
 ## Further reading
 - [Bot Authentication](https://docs.microsoft.com/en-us/azure/bot-service/bot-builder-authentication?view=azure-bot-service-4.0&tabs=aadv2%2Ccsharp)

samples/graph-channel-lifecycle/csharp/README.md

@@ -24,7 +24,7 @@ This sample show the [Channel](https://docs.microsoft.com/en-us/graph/api/resour
 
 ## Interaction with app
 
- ![](ChannelLifecycle/Images/ChannelLifeCycleModule.gif)
+ ![ChannelLifeCycleModule](ChannelLifecycle/Images/ChannelLifeCycleModule.gif)
 
 ## Prerequisites
 - [.NET Core SDK](https://dotnet.microsoft.com/download) version 6.0
@@ -98,11 +98,19 @@ This sample show the [Channel](https://docs.microsoft.com/en-us/graph/api/resour
 
 ## Running the sample.
 
+  ![](ChannelLifecycle/Images/Image0.png)
+
   ![](ChannelLifecycle/Images/Image1.PNG)
 
   ![](ChannelLifecycle/Images/Image2.PNG)
 
   ![](ChannelLifecycle/Images/Image3.PNG)
+
+  ![](ChannelLifecycle/Images/Image4.png)
+
+  ![](ChannelLifecycle/Images/Image5.png)
+
+  ![](ChannelLifecycle/Images/Image6.png)
   
   [Grpah-Channel-lifecycel](https://learn.microsoft.com/en-us/microsoftteams/plan-teams-lifecycle)
   

samples/graph-channel-lifecycle/nodejs/Readme.md

@@ -24,7 +24,7 @@ This sample show the [Channel](https://docs.microsoft.com/en-us/graph/api/resour
 
 ## Interaction with app
 
-  ![](Images/GraphChannelLifeCycleModule.gif)
+  ![GraphChannelLifeCycleModule](Images/GraphChannelLifeCycleModule.gif)
 
 ## Prerequisites
 
@@ -101,6 +101,15 @@ The simplest way to run this sample in Teams is to use Teams Toolkit for Visual
 
    ![](Images/image3.png)
 
+   ![](Images/image4.png)
+
+   ![](Images/image5.png)
+
+   ![](Images/image6.png)
+
+   ![](Images/image7.png)
+
+
 
   [Grpah-Channel-lifecycel](https://learn.microsoft.com/en-us/microsoftteams/plan-teams-lifecycle)
 

samples/meetings-details-tab/nodejs/Readme.md

@@ -24,7 +24,7 @@ This sample app illustrates the implementation of Details Tab in Meeting. User c
 
 ## Interaction with app
 
-![Preview Image](Images/Preview.gif)
+![PreviewImage](Images/Preview.gif)
 
 ## Try it yourself - experience the App in your Microsoft Teams client
 Please find below demo manifest which is deployed on Microsoft Azure and you can try it yourself by uploading the app package (.zip file link below) to your teams and/or as a personal app. (Sideloading must be enabled for your tenant, [see steps here](https://docs.microsoft.com/microsoftteams/platform/concepts/build-and-test/prepare-your-o365-tenant#enable-custom-teams-apps-and-turn-on-custom-app-uploading)).
@@ -132,19 +132,29 @@ The simplest way to run this sample in Teams is to use Teams Toolkit for Visual
 
 Interact with Details Tab in Meeting.
 
-1. Install the Details Tab manifest in meeting chat.
-2. Add the Details Tab in Meeting
-3. Click on Add Agenda
-![Image](Images/SetAgenda.png)
-4. Newly added agenda will be added to Tab.
-![Image](Images/AgendasuccessfullySet.png)
-5. Click on Send button in Agenda from Tab.
-6. An Adaptive Card will be posted in meeting chat for feedback.
-![Image](Images/SelectPleasant.png)
-7. Participants in meeting can submit their response in adaptive card
-8. Response will be recorded and Bot will send an new adaptive card with response.
-![Image](Images/Response.png)
-9. Participants in meeting can view the results from meeting chat or Tab itself.
+**Add Chat:**
+![InstallApp](Images/1.InstallApp.png)
+
+**Select Group:**
+![GroupChat](Images/2.GroupChat.png)
+
+**Newly added agenda will be added to Tab:**
+![DetailsTab](Images/3.DetailsTab.png)
+
+**Click on Add Agenda:**
+![AddAgenta](Images/4.AddAgenta.png)
+
+**Add a Poll:**
+![CreatePoll](Images/5.CreatePoll.png)
+
+**Participants in meeting can submit their response in adaptive card:**
+![HomeAddPoll](Images/6.HomeAddPoll.png)
+
+**Response will be recorded and Bot will send an new adaptive card with response:**
+![SelectHot](Images/7.SelectHot.png)
+
+**Participants in meeting can view the results from meeting chat or Tab itself:**
+![8.Results](Images/8.Results.png)
 
 ## Further reading
 

samples/meetings-transcription/csharp/README.md

@@ -25,7 +25,7 @@ This is a sample application which demonstrates how to get Transcript using Grap
 
 ## Interaction with app
 
-![Meetings TranscriptionGif](MeetingTranscription/Images/MeetingsTranscriptionGif.gif)
+![MeetingsTranscriptionGif](MeetingTranscription/Images/MeetingsTranscriptionGif.gif)
 
 ## Prerequisites
 
@@ -141,6 +141,7 @@ This is a sample application which demonstrates how to get Transcript using Grap
 - Follow this link- [Configure application access policy](https://docs.microsoft.com/en-us/graph/cloud-communication-online-meeting-application-access-policy)
 
 - **Note**: Copy the User Id you used to granting the policy. You need while configuring the appsettings.json file.
+![Policy](MeetingTranscription/Images/Policy.png)
 
 
 6. Setup Manifest for Teams
@@ -157,39 +158,26 @@ This is a sample application which demonstrates how to get Transcript using Grap
 
 **Note**: If you are facing any issue in your app, please uncomment [this](https://github.com/OfficeDev/Microsoft-Teams-Samples/blob/main/samples/meetings-transcription/csharp/MeetingTranscription/AdapterWithErrorHandler.cs#L23) line and put your debugger for local debug.
 
-## Running the sample
+## Running the sample.
 
-**Upload an app to your org's app catalog:**
+1. Schedule the meeting and add Meeting Transcript Bot from `Apps` section in that particular scheduled meeting.
+![Add Bot](MeetingTranscription/Images/1.AddMeetingTranscriptBot.PNG)
 
-![Upload AppOrg](MeetingTranscription/Images/UploadAppOrg.png)
+![AddMeetingGroup](MeetingTranscription/Images/2.AddMeetingGroup.png)
 
-**Schedule the meeting and add Meeting Transcript Bot from Apps section in that particular scheduled meeting:**
+![JoinMeeting](MeetingTranscription/Images/3.JoinMeeting.png)
 
-![Add BotApp](MeetingTranscription/Images/AddMeetingTranscriptBot.PNG)
+2. Once meeting started, start the Transcript for the meeting.
+![Start Transcript](MeetingTranscription/Images/4.StartTranscript.png)
 
-**Created and approved by your organization:**
+3. Once the transcription has started, you can see the live transcription it the meeting UI.
+![Leave Meeting](MeetingTranscription/Images/5.LeaveMeeting.png)
 
-![Install OrgsApps](MeetingTranscription/Images/InstallOrgsApps.png)
+4. Once the Meeting ended, Meeting Transcript Bot will sent a card having a button to open task module.
+![Meeting Transcript Card](MeetingTranscription/Images/6.MeetingTranscriptCard.png)
 
-**Welcome echo UI:**
-
-![Add Bot](MeetingTranscription/Images/WelcomeEcho.png)
-
-**Once meeting started, start the Transcript for the meeting:**
-
-![Start Transcript](MeetingTranscription/Images/StartTranscript.PNG)
-
-**Once the transcription has started, you can see the live transcription it the meeting UI:**
-
-![Add Bot](MeetingTranscription/Images/LeaveMeeting.PNG)
-
-**Once the Meeting ended, Meeting Transcript Bot will sent a card having a button to open task module:**
-
-![Add Bot](MeetingTranscription/Images/MeetingTranscriptCard.PNG)
-
-**After clicking on `View Transcript` button, you will see the recorded Transcript in the opened Task Module:**
-
-![Add Bot](MeetingTranscription/Images/TranscriptTaskModule.PNG)
+5. After clicking on `View Transcript` button, you will see the recorded Transcript in the opened Task Module.
+![Transcript Task Module](MeetingTranscription/Images/7.TranscriptTaskModule.png)
 
 ## Interacting with the bot.
 - After uploading the manifest add the bot into meeting.

samples/meetings-transcription/nodejs/README.md

@@ -142,6 +142,7 @@ Click on Add Permissions to commit your changes.
 5. Allow applications to access online meetings on behalf of a user
    - Follow this link- [Configure application access policy](https://docs.microsoft.com/en-us/graph/cloud-communication-online-meeting-application-access-policy)
   - **Note**: Copy the User Id you used to granting the policy. You need while configuring the .env file.
+  ![Policy](Images/Policy.png)
 
 6. Setup Manifest for Teams
 - __*This step is specific to Teams.*__
@@ -162,15 +163,23 @@ Click on Add Permissions to commit your changes.
 ## Running the sample.
 
 1. Schedule the meeting and add Meeting Transcript Bot from `Apps` section in that particular scheduled meeting.
-![Add Bot](Images/AddMeetingTranscriptBot.PNG)
+![Add Bot](Images/1.AddMeetingTranscriptBot.PNG)
+
+![AddMeetingGroup](Images/2.AddMeetingGroup.png)
+
+![JoinMeeting](Images/3.JoinMeeting.png)
+
 2. Once meeting started, start the Transcript for the meeting.
-![Start Transcript](Images/StartTranscript.PNG)
+![Start Transcript](Images/4.StartTranscript.png)
+
 3. Once the transcription has started, you can see the live transcription it the meeting UI.
-![Leave Meeting](Images/LeaveMeeting.PNG)
+![Leave Meeting](Images/5.LeaveMeeting.png)
+
 4. Once the Meeting ended, Meeting Transcript Bot will sent a card having a button to open task module.
-![Meeting Transcript Card](Images/MeetingTranscriptCard.PNG)
+![Meeting Transcript Card](Images/6.MeetingTranscriptCard.png)
+
 5. After clicking on `View Transcript` button, you will see the recorded Transcript in the opened Task Module.
-![Transcript Task Module](Images/TranscriptTaskModule.PNG)
+![Transcript Task Module](Images/7.TranscriptTaskModule.png)
 
 ## Interacting with the bot.
 - After uploading the manifest add the bot into meeting.

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

@@ -42,7 +42,7 @@ The simplest way to run this sample in Teams is to use Teams Toolkit for Visual
 
 ## Interaction with app
 
-![Preview Image](Images/Preview.gif)
+![PreviewImage](Images/Preview.gif)
 
 ## Setup
 
@@ -95,13 +95,25 @@ The simplest way to run this sample in Teams is to use Teams Toolkit for Visual
  **NOTE:** Only accounts with admin access can create private/shared channels in team.
 
 # Running the sample
-1) Configure in Private channel
+1) Configure in Regular channel
 
-![tab context in private channel](Images/privateChannel.png)
+![image1](Images/image1.png)
 
-2) Configure in Public channel
+![image2](Images/image2.png)
 
-![tab context in private channel](Images/regularChannel.png)
+![image3](Images/image3.png)
+
+![image4](Images/image4.png)
+
+2) Configure in Private channel
+
+![image5](Images/image5.png)
+
+![image6](Images/image6.png)
+
+![image7](Images/image7.png)
+
+![image8](Images/image8.png)
 
 **Features of the sample**