- Notifications
You must be signed in to change notification settings - Fork31
A test tab for Microsoft Teams used to exercise the platform and SDK
License
ydogandjiev/microsoft-teams-test-tab
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
This documents outlines the steps required to add your changes to Microsoft Teams Test App and run the app in your local environment.
microsoft-teams-test-tab on github
It is recommended to fork the repo into your github account. This will be handy when you are contributing back to the repo.
Clone the repo from your fork
$ git clone git@github.com:<username>/microsoft-teams-test-tab.git
You can now create a branch in your forked version and start writing code for adding the missing SDK event.
The only file you need to change is undersrc > app.js
Just add a code block identical to the one shown below
addModule({name:"navigateToTab",initializedRequired:true,hasOutput:true,inputs:[{type:"object",name:"tabInstance",}],action:(tabInstance:microsoftTeams.TabInstance,output)=>{microsoftTeams.navigateToTab(tabInstance,(status:boolean,reason?:string)=>{if(reason){output(reason);return;}output(status);});}});
- Respect the TeamsJS functions' arguments' types and interfaces.
- For example,
externalAppCardActionsForDA.processActionOpenUrlDialog, the function definition looks like below in TeamsJS:
exportdeclarefunctionprocessActionOpenUrlDialog(appId:AppId,actionOpenUrlDialogInfo:IActionOpenUrlDialogInfo,traceId:UUID):Promise<void>;
- Then your test module calling the function above must have the expected types and interfaces for the arguments.
microsoftTeams.externalAppCardActionsForDA.processActionOpenUrlDialog(newmicrosoftTeams.AppId(appId),encapActionOpenUrlDialogInfo(actionOpenUrlDialogInfo),newmicrosoftTeams.UUID(traceId))
- For example,
- Printing TeamsJS errors
- You can print the error sent by TeamsJS when you call the TeamsJS function like below.
microsoftTeams.externalAppCardActionsForDA.processActionOpenUrlDialog(newmicrosoftTeams.AppId(appId),encapActionOpenUrlDialogInfo(actionOpenUrlDialogInfo),newmicrosoftTeams.UUID(traceId)).then((result)=>{output(result);}).catch((error)=>{console.log('microsoft-teams-test-tab:externalAppCardActionsForDA.processActionOpenUrlDialog:',error)output(error);});
- This way you can see the error message printed in dev tools of Teams client
To be able to finally build, deploy and side load the app in Teams you need to
- Install dependencies
- Run the code in local
- Create a tunnel to the localhost using ngrok
- Update the manifest file to point to newly started ngrok server.
- Bundle the manifest with icons
- Sideload the bundle to Teams.
Microsoft Teams is installed and you have an account
ngrok or equivalent tunnelling solution
# Install homebrew/bin/bash -c"$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"# Install ngrokbrew install ngrok/ngrok/ngrok# Signup on ngrok website to get an auth token# Then Setup ngrok in your machinengrok config add-authtoken<token>
NOTE: Add-g in case you want these installation to happen across your system and not just in this project scope.
# Install nvm$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh| bash# Install Node$ nvm install node# Install npm$ nvm install-latest-npm#Install Express$ npm install express# Install webpack$ npm install --save-dev webpack
$cd microsoft-teams-test-tab $ yarn link# Start server$ npm run startDebugger attached.> microsoft-teams-test-tab@1.0.0 start> node server.jsDebugger attached.Listening on http://localhost:3000
- Open a new terminal window and
- Start ngrok and preserve the url
$ ngrok http --host-header=rewrite 3000 Session Status online Account •••••••••• (Plan: Free) Update update available (version 3.3.0, Ctrl-U to update) Version 3.1.0 Region India (in) Latency 35ms Web Interface http://127.0.0.1:4040 Forwarding https://baab-2442-202-2002-ecce-4c65-1e1d-6539-de1f.ngrok-free.app -> http://localhost:3000 Connections ttl opn rt1 rt5 p50 p90 0 0 0.00 0.00 0.00 0.00Under Package. manifest.jsonTemporarily Replace urlhttps://teams-test-tab.azurewebsites.net with ngrok url (https://{uuid}.ngrok-free.app )
- Select manifest.json, color.png, outline.png
- create a zip file
- Sideload this zip file into Teams.
- From App tray select "Teams Test Tab"
You can now push the changes and eventually create a PR for main project.
- Ensure that you remove the temporary changes made to
manifest.jsonbefore pushing your module. - Ensure that only
app.tsis modified at the time of push. You will need to add the html files and the *.js and *.js.map files that are rteferenced from the html files
Sample PR:https://github.com/ydogandjiev/microsoft-teams-test-tab/pull/86/files
- use yarn link to your microsoft-teams-library-js and do changes in app.ts
- run 'yarn build-' inorder to put outputfiles inside public/ folder
- check-in changes inside public/ only to master branch
- In test app usehttps://teams-test-tab.azurewebsites.net/ as content Url inorder to point to your changes