Merge pull request #300775 from fuyan2024/fuyan/display-name-changed

Edited display name

Author: Stacyrch140

articles/communication-services/how-tos/calling-sdk/display-name-changed.md

@@ -0,0 +1,68 @@
+---
+title: Display name changed
+titleSuffix: An Azure Communication Services how-to guide
+description: Use Azure Communication Services SDK to subscript events that participants' display name change
+author: fuyan
+ms.author: fuyan
+ms.service: azure-communication-services
+ms.subservice: calling
+ms.topic: how-to 
+ms.date: 05/06/2025
+ms.custom: template-how-to
+
+#Customer intent: As a developer, I want to learn how to subscribe events that participants' display name change using SDK.
+---
+
+# Display name changed
+
+This article describes how you can subscribe the Teams participants' display name changed events showing the old, new values, and the reason of the name change.
+
+## Prerequisites
+
+- An Azure account with an active subscription. [Create an account for free](https://azure.microsoft.com/free/?WT.mc_id=A261C142F). 
+- A deployed Communication Services resource. [Create a Communication Services resource](../../quickstarts/create-communication-resource.md).
+- A user access token to enable the calling client. For more information, see [Create and manage access tokens](../../quickstarts/identity/access-tokens.md).
+- Optional: Complete the article [Add voice calling to your app](../../quickstarts/voice-video-calling/getting-started-with-calling.md).
+
+## Support
+
+The following tables define support for display name change during Teams interop call/meeting in Azure Communication Services.
+
+### Identities and call types
+
+The following table shows display name change support for specific call types and identities. 
+
+|Identities                   | Teams meeting | Room | 1:1 call | Group call | 1:1 Teams interop call | Group Teams interop call |
+|-----------------------------|---------------|------|----------|------------|------------------------|--------------------------|
+|Communication Services user  | ✔️	          |      |          |     	     |	                      |	                       |
+|Microsoft 365 user	          | ✔️	          |      |          |  	         |                        |                        |
+
+### Operations
+
+The following table shows support for individual APIs in the Calling SDK related to individual identity types. The display name change feature only supports these operations in Teams meetings.
+
+|Operations                     | Communication Services user | Microsoft 365 user | 
+|-----------------------------|---------------|--------------------------|
+| Check if Teams participant has display name changed                  | ✔️       | ✔️                       |
+| Get notification that Teams participant display name changed    | ✔️           |    ✔️                      |
+
+
+### SDK
+
+The following tables show support for the display name change in individual Azure Communication Services SDK.
+
+| Support status | Web | Web UI | iOS | iOS UI | Android | Android UI | Windows |
+|----------------|-----|--------|--------|--------|----------|--------|---------|
+| Is Supported   | ✔️  |        |        |        |          |        |         |		
+
+
+[!INCLUDE [Display name changed Client-side JavaScript](./includes/display-name-changed/display-name-changed-web.md)]
+
+
+## Next steps
+- [Learn how to manage calls](./manage-calls.md)
+- [Learn how to manage video](./manage-video.md)
+
+## Related articles
+
+To do, add Teams client doc here.

articles/communication-services/how-tos/calling-sdk/includes/display-name-changed/display-name-changed-web.md

@@ -0,0 +1,47 @@
+---
+author: fuyan
+ms.service: azure-communication-services
+ms.topic: include
+ms.date: 05/06/2025
+ms.author: fuyan
+---
+[!INCLUDE [Install SDK](../install-sdk/install-sdk-web.md)]
+
+## Implement display name change
+
+`DisplayNameChanged` is an `event` and `hasDisplayNameChanged` is a property of the class `RemoteParticipant`. You can get remote participants on `Call` object `remoteParticipants` property from the Calling SDK:
+
+```js
+const remoteParticipants = call.remoteParticipants;
+```
+
+### Check if remote participant has display name change
+
+To check if display name changed, use the `hasDisplayNameChanged` property of the class `RemoteParticipant` . 
+
+```js
+// check if remoteParticipant has display name changed
+const hasDisplayNameChanged = remoteParticipant.hasDisplayNameChanged;
+```
+
+### Get notification that displays name changed
+
+Use the `PropertyChangedEventWithArgs` listener to subscribe the display name change event
+
+```js
+// get notification of a remote participant display name changed
+remoteParticipant.on('displayNameChanged', (args: {newValue?: string, oldValue?: string, reason?: DisplayNameChangedReason}) => {
+    console.log(`Display name changed from ${oldValue} to ${newValue} due to ${reason}`);
+});
+```
+
+## SDK compatibility
+
+The following table shows the minimum version of SDK that supports individual APIs.
+
+| Operations | Web | Web UI | iOS | iOS UI | Android | Android UI | Windows | 
+|-------------|-----|--------|-----|--------|---------|------------|---------|
+|hasDisplayNameChanged property |1.34.1|❌|❌|❌|❌|❌|❌|
+|DisplayNameChanged event |1.34.1|❌|❌|❌|❌|❌|❌|
+
+

articles/communication-services/how-tos/calling-sdk/includes/events/events-web.md

@@ -415,6 +415,13 @@ remoteParticipant.on('displayNameChanged', () => {
 });
 ```
 
+```javascript
+remoteParticipant.on('displayNameChanged', (args: {newValue?: string, oldValue?: string, reason?: DisplayNameChangedReason}) => {
+    remoteParticipant.nameLabel.innerText = remoteParticipant.displayName;
+    console.log(`Display name changed from ${oldValue} to ${newValue} due to ${reason}`);
+});
+```
+
 ### Event: `isSpeakingChanged`
 
 The `isSpeakingChanged` when the dominant speaker in a call changes.

articles/communication-services/toc.yml

@@ -1194,6 +1194,8 @@ items:
       href: how-tos/calling-sdk/together-mode.md
     - name: Control media access
       href: how-tos/calling-sdk/media-access.md
+    - name: Display name changed
+      href: how-tos/calling-sdk/display-name-changed.md
 - name: Teams Phone extensibility
   items:
   - name: Overview