Lab 4 ‐ Adaptive Card Extensions and Teams Apps

Adaptive Card Extensions can be used as supplemental pieces to a larger Teams App story. An ACE on the Viva Connections Dashboard can link directly to a Teams Personal Tab or Bot.

1 - Scaffold a SPFx Teams Personal App

Start with the solution from the previous labs.

yo @microsoft/sharepoint --plusbeta

IMPORTANT NOTE: npm install will fail during the package scaffolding for a known issue.

Navigate to package.json.

Remove @microsoft/sp-webpart-workbench from the devDependencies.

Re-start the dependency installation.

npm install

1.1 - Edit the manifest

Navigate to src/webparts/helloWorld/HelloWorldWebPart.manifest.json.

Set supportedHosts to Teams Personal Tab.

"supportedHosts": ["TeamsPersonalApp"]

1.2 - Package and Deploy

gulp bundle --ship

gulp package-solution --ship

Take your solution .sppkg from the sharepoint/solution/ folder and upload it to Tenant App Catalog.

Deploy your solution. Ensure the "Make this solution available to all sites in the organization" box is checked.

Sync the solution to Teams.

Confirm the sync was successful.

1.3 - Add a new Personal Tab

Go to Teams Web and click on the ... icon. Click on "More apps".

You should see your newly uploaded Teams Personal App. Click on it and select "Add".

Open your new Personal Tab and grab this highlighted portion from the URL.

This is the Tab's appID. Save this information for later.

3 - Scaffold a second ACE

yo @microsoft/sharepoint --plusbeta

3.1 - Add a Teams deep link

Teams deep link have the following format:

https://teams.microsoft.com/l/entity/{appID}/{entityID}

Replace {appID} with the appID value we saved earlier and replace {entityID} with 0. More details about deep links can be found here.

Note: If you're linking to a non-SPFx Teams App, the entityID value is the entity ID specified in the Static Tabs section of the Teams manifest.

Navigate to src/adaptiveCardExtensions/teamsHelloWorld/cardView/CardView.ts.

Change onCardSelection to open a deep link.

public get onCardSelection(): IQuickViewCardAction | IExternalLinkCardAction | undefined {
  return {
    type: 'ExternalLink',
    parameters: {
      isTeamsDeepLink: true,
      target: '' // Set this to your Teams deep link URL
    }
  };
}

Repeat Step 1.2 to re-package and re-deploy the solution.

4 - Viva Connections Dashboard

The Viva Connections Dashboard is available on the Home Site of the tenant.

4.1 - Add cards to the Dashboard

Add your HelloWorld and TeamsHelloWorld ACEs to the Dashboard, and publish the Dashboard.

4.2 - Deep link

Click on the TeamsHelloWorld ACE. The Desktop App will automatically open to the Personal App created earlier.

Conclusion

After this lab you should be familar with:

• Packaging and deployment of heterogeneous SPFx solutions
• Manually creating a Teams deep link URL
• Deep linking from an ACE to a Teams Personal Tab