search

microsoftgraph / msgraph-sdk-javascript

Microsoft Graph client library for JavaScript
https://graph.microsoft.com
MIT License
729 stars 220 forks source link

person-card: buttons not working when using person-details #1709

Closed Rafaelki closed 2 weeks ago

Rafaelki commented 2 weeks ago

Bug Report

Prerequisites

For more information, see the CONTRIBUTING guide.

Description

When the person component is defined using person-details, the buttons in the person-card for chat, video and call are visible but not working on click.

image

Steps to Reproduce

  1. Go to the Microsoft Graph Toolkit Playground
  2. Add this component in the html tab, replacing ccdev1@fresh.onmicrosoft.com with a valid email of a user in your organization: <mgt-person person-details='{"displayName":"Frank Herbert1","jobTitle":"jobTitle","department":"department","id":"ccdev1@fresh.onmicrosoft.com"}' view="threelines" person-card="click" />
  3. Note that the person component renders the name, department and job title indecated in the person-details object. In the screenshot above the name is Frank Herbert1.
  4. Click the person component to open the person-card
  5. Note that the person name, department and job title inside the card have been resolved with the actual values of the user indicated in the "id" attribute. In the screenshot above the actual name is "Ruth Bader Ginsburg".
  6. Click the buttons chat, video and call and note that nothing happens.

Expected behavior:

  1. chat, video and call buttons should work, opening the corresponding application
  2. buttons that are not going to work should not be visible

Actual behavior: chat, video and call buttons are not working

Workaround

I found a workaround by adding the properties userPrincipalName and businessPhones in the person-details object, but this should not be necessary as they can be obtained when the actual name is resolved. I think this was the case in previous versions of MGT.

<mgt-person person-details='{"displayName":"Frank Herbert2","jobTitle":"jobTitle","department":"department","id":"ccdev1@fresh.onmicrosoft.com","userPrincipalName":"ccdev1@fresh.onmicrosoft.com","businessPhones":["1234"]}' view="threelines" person-card="click" />