page_type | description | products | languages | extensions | contentType | createdDate | ||||
---|---|---|---|---|---|---|---|---|---|---|
sample |
Demonstrating the feature of people picker on Adaptive Cards. |
|
|
samples |
25-01-2022 23:30:17 |
This sample shows the feature of people picker on Adaptive Cards.
Use the bot command peoplepickercard
to get the card with people picker control
- 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.
In Azure portal, create a Azure Bot resource.
- Ensure that you've enabled the Teams Channel
-
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
-
Run ngrok - point to port 3978
ngrok http -host-header=rewrite 3978
-
Open the
.env
configuration file in your project folder (or in Visual Studio Code) and update theMicrosoftAppId
andMicrosoftAppPassword
with your app's base url. (Note the ClientId is the AppId created in step 1 (Setup for Bot), the ClientSecret is referred to as the "client secret" in step 1 (Setup for Bot) and you can always create a new client secret anytime.) -
Run your app
npm start
-
Manually update the manifest.json
- 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