Insufficient documentation while trying to set diplayName of authenticated Teams user in multiple Azure Communication apps call; "Unnamed Participant"

[oskar-jablonskiNTT]

I need to provide displayName for my Teams user and since i have two Azure Communication apps joining the same Teams meeting i need to use Teams Identity (as described in a code snippet here: https://azure.github.io/communication-ui-library/?path=/docs/communicationasteamsuser--page.
Are there any examples, apart from this UI Library code snippet that show how to do that?

• Both apps are React-based web applications (created by me based on this article: https://learn.microsoft.com/en-us/microsoft-cloud/dev/tutorials/acs-to-teams-meeting?tabs=csharp%2Cbash),
• Client side app is using External Identity (generated by calling ACS API and then using useAzureCommunicationCallAdapter(), it creates Teams meeting and sends teams meeting URL to a specific WebService
• Agent side app is using Teams Identity (by asking the user to sign in to their Microsoft account (acquireTokenPopup() -> getTokenForTeamsUser() -> useTeamsCallAdapter()), acquires URL teams meeting link from a web server and connects to the meeting created by client.

The result is that both apps connect to the same meeting, but the agent side app's displayName is shown as "UnnamedParticipant".
I am able to change agent's displayName by using OnFetchProfile's return to any string value, but it cannot be hardcoded - am i supposed to request GraphAPI for all participants in the meeting and then provide them names one by one?

Screenshots

Client (ACS generated external identity, displayName set by AzureCommunicationCallAdapter) perspective:

Agent (Identity provided by sign in Microsoft account by acquireTokenPopup() -> TeamsCallAdapter) perspective:

Environment

• Client app:

• • @azure/communication-react npm package version 1.14.0-beta.2,
• • @azure/communication-calling npm package version 1.22.2-beta.1,
• • @azure/communication-common npm package version 2.3.1,
• • @azure/communication-chat npm package version 1.5.0-beta.1,

• Agent app:

• • @azure/communication-react npm package version 1.14.0-beta.2,
• • @azure/communication-calling npm package version 1.22.2-beta.1,
• • @azure/communication-common npm package version 2.3.1,
• • @azure/communication-chat npm package version 1.5.0-beta.1,
• • @azure/communication-identity npm package version 1.3.0,
• • @azure/communication-react npm package version 1.14.0-beta.2,

• OS & Device: Windows 11 on PC

• Browser: Microsoft Edge For Business Version 124.0.2478.97

[edwardlee-msft]

Hi @oskar-jablonskiNTT,

You are spot on! Display names will need to be fetched from GraphAPI. For example, if you have a dedicated backend server you can the userId for the teams user to retrieve their displayname using GraphAPI.

https://learn.microsoft.com/en-us/graph/use-the-api
https://learn.microsoft.com/en-us/graph/traverse-the-graph?tabs=http

Thanks for bringing this gap to our attention! We'll look into further improving our documentation to indicate that GraphAPI is needed for this case.

[MarteenJL]

I too have this issue, I already have the teams;'s users names because the users are logged in to MS 365. In the react samples for Calling ,
App.tsx , setDisplayName , although set to a real value, still shows up as "Unnamed participant" ( from the joiner of the call), and "(you)" ( in the originator of the call ).

I was able to find a hack workaround, in Calling/CallScreen.tsx for caller only -- not the remote participant.
in the afterCreate for the teams call adapter but its ugly. called multiple times and likely the wrong thing to do.

const afterTeamsCallAdapterCreate = useCallback(`

 adapter.onStateChange((state: CallAdapterState) => {
      if (state?.call?.id && state.displayName == undefined) {
        state.displayName = props.displayName;

[edwardlee-msft]

Hi @MarteenJL,

Great follow up question. Here is a link to our storybook page that details how to set a displayName for remoteParticipants.
https://azure.github.io/communication-ui-library/?path=/docs/communicationasteamsuser--page

Essentially, you will need to modify the adapter and provide an onFetchProfile options when creating the adapter. Then you will pass this adapter to the CallComposite.
Here is the snippet seen in the storybook page, I am pasting down below for your convenience.

  // For multiple Azure Communication apps joining the same Teams meeting,
  // you will need to provide a displayName for other participants joining using Teams Identity,
  // otherwise "Unnamed Participant" would be shown as their default names.
  const onFetchProfile = useCallback(async (userId: string, defaultProfile?: Profile): Promise<Profile> => {
    if (defaultProfile?.displayName) {
      return defaultProfile;
    }
    // You can fetch the display name from GraphAPI or your backend service using userId
    return { displayName: 'Unnamed Teams User' };
  }, []);

  const options = useMemo(
    () => ({
      onFetchProfile
    }),
    [onFetchProfile]
  );

  const teamsCallAdapterArgs = useMemo(
    () => ({
      userId: props.userId,
      credential,
      locator: props.meetingUrl
        ? {
            meetingLink: props.meetingUrl
          }
        : undefined,
      options
    }),
    [props.userId, credential, props.meetingUrl, options]
  );