Readme.md

page_type	description	products	languages	extensions	urlFragment
sample	This is an tab app which shows the feature of people picker using teams js client sdk.	office-teams office office-365	nodejs	contentType createdDate samples 04/12/2022 01:48:56 PM	officedev-microsoft-teams-samples-tab-people-picker-nodejs

Tab people picker Node.js

This is an tab app which shows the feature of people picker using teams js client sdk.

Included Features

• Tabs
• People Picker in tabs

Interaction with app

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).

Tab people picker: Manifest

Prerequisites

• Office 365 tenant. You can get a free tenant for development use by signing up for the Office 365 Developer Program.

• To test locally, NodeJS must be installed on your development machine (version 16.14.2 or higher).

• ngrok or equivalent tunnelling solution

Setup

1. Setup NGROK Run ngrok - point to port 3978

   ngrok http 3978 --host-header="localhost:3978"
   

2. Setup for code

• Clone the repository

  git clone https://github.com/OfficeDev/Microsoft-Teams-Samples.git

• In a terminal, navigate to samples/tab-people-picker/nodejs

• Install modules

  npm install

• Run your bot at the command line:

  npm start

Setup Manifest for Teams

• This step is specific to Teams.

  • Edit the manifest.json contained in the Manifest folder to replace {{Manifest-id}} with any GUID

  • {{base-url}} with base Url domain. E.g. if you are using ngrok it would be https://1234.ngrok-free.app then your domain-name will be 1234.ngrok-free.app. Replace everywhere you see the place holder string {{base-url}} Note => Update validDomains as per your application domain, if needed.

  • Zip up the contents of the Manifest folder to create a manifest.zip

  • Upload the manifest.zip to Teams (in the Apps view click "Upload a custom app")

Running the sample

Adding tab people picker UI:

Tab UI:

All Memberes Of Organisation Search:

Scope search:

Single Select:

Set Selected Search:

Further reading

• Tab Pepole picker