page_type | description | products | languages | extensions | urlFragment | ||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
sample |
Demonstrating the feature of people picker on Adaptive Cards. |
|
|
|
officedev-microsoft-teams-samples-bot-people-picker-adaptive-card-nodejs |
This sample shows the feature of people picker on Adaptive Cards.
Use the bot command peoplepickercard
to get the card with people picker control
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).
People picker control in Adaptive Cards: Manifest
-
To test locally, NodeJS must be installed on your development machine (version 16.14.2 or higher)
-
You'll need Ngrok installed on your development machine. Make sure you've downloaded and installed Ngrok on your local machine. ngrok will tunnel requests from the Internet to your local computer and terminate the SSL connection from Teams.
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.
- Setup for Bot
-
In Azure portal, create AAD app registraion and it will generate MicrosoftAppId and MicrosoftAppPassword for you.
-
In Azure portal, create a Azure Bot resource.
-
Ensure that you've enabled the Teams Channel While registering the bot, use
https://<your_ngrok_url>/api/messages
as the messaging endpoint.NOTE: When you create your app registration in Azure portal, you will create an App ID and App password - make sure you keep these for later.
-
Setup NGROK
Run ngrok - point to port 3978ngrok http -host-header=rewrite 3978
-
Setup for code
-
Clone the repository
git clone https://github.com/OfficeDev/Microsoft-Teams-Samples.git
-
In the folder where repository is cloned navigate to
samples/bot-people-picker-adaptive-card/nodejs
-
Install node modules
Inside node js 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.
npm install
-
Open the
.env
configuration file in your project folder (or in Visual Studio Code) and update theMicrosoftAppId
andMicrosoftAppPassword
with the values generated while doing AAD app registration including Secret creation.(ClientSecret is referred to as the "client secret" generated from your AAD app registrationin. -
Run your app
npm start
-
Setup Manifest for Teams
- Edit the
manifest.json
contained in theappPackage/
folder to replace with your MicrosoftAppId (that was created in step 1 and is the same value of MicrosoftAppId in.env
file) everywhere you see the place holder string{{Microsoft-App-Id}}
(depending on the scenario the Microsoft App Id may occur multiple times in themanifest.json
). - Zip up the contents of the
appPackage/
folder to create amanifest.zip
- Upload the
manifest.zip
to Teams (in the left-bottom Apps view, click "Upload a custom app")
- Edit the
Note: If you are facing any issue in your app, please uncomment this line and put your debugger for local debug.
Peoplepickercard command interaction:
Personal scope get all the users of organisation:
Team or groupchat scope get user list to current context:
On Assign button click the bot will return the member id that we have selected:
To learn more about deploying a bot to Azure, see Deploy your bot to Azure for a complete list of deployment instructions.