Skip to content

Commit 8b817d3

Browse files
garchiro7garchiro7
committed
Initial startup for the button bar customization
1 parent 250bc0f commit 8b817d3

File tree

7 files changed

+169
-26
lines changed

7 files changed

+169
-26
lines changed

‎articles/communication-services/concepts/ui-library/includes/media/ui-library-add-action-button.png

29.2 KB
Loading

‎articles/communication-services/concepts/ui-library/includes/media/ui-library-remove-button.png

18.3 KB
Loading

‎articles/communication-services/concepts/ui-library/includes/mobile-ui-use-cases.md

Lines changed: 56 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -12,33 +12,34 @@ Use the `CallComposite` and the `ChatComposite` in the Azure Communication Servi
1212

1313
You can use the call composite in Communication Services to create these use cases:
1414

15-
| Area | Use cases |
16-
| ----------------------------------------------------------------------------------------------- | ------------------------------------------------------ |
17-
| Call types | Join a Microsoft Teams meeting |
18-
| | Join a Microsoft Teams meeting using Meeting ID and Passcode |
19-
| | Join a call by using a group ID |
20-
| | Join a call by using a room ID |
21-
| | Make and Receive 1:1 Calls |
15+
| Area | Use cases |
16+
| -------------------------------------------------------------------- | --------------------------------------------------------------- |
17+
| Call types | Join a Microsoft Teams meeting |
18+
| | Join a Microsoft Teams meeting using Meeting ID and Passcode |
19+
| | Join a call by using a group ID |
20+
| | Join a call by using a room ID |
21+
| | Make and Receive 1:1 Calls |
2222
| [Teams interoperability](../../teams-interop.md) | Join the call lobby |
23-
| | Display a transcription and recording alert banner |
24-
| | Admit/Reject lobby participants |
25-
| Participant gallery | Show remote participants on a grid |
26-
| | Make video preview available throughout a call for a local user |
27-
| | Make default avatars available when video is off |
28-
| | Show shared screen content in the participant gallery |
29-
| | Enable participant avatar customization |
30-
| | Show a participant roster |
31-
| Call configuration | Manage the microphone device |
32-
| | Manage the camera device |
33-
| | Manage the speaker device (wired or Bluetooth) |
34-
| | Make local preview available for a user to check video |
35-
| | Enable end call confirmation dialogue |
36-
| | Skip setup screen |
37-
| Call controls | Mute and unmute a call |
38-
| | Turn video on or off during a call |
39-
| | End a call |
40-
| | Hold and resume a call after audio interruption |
41-
| | CallKit and TelecomManager Support |
23+
| | Display a transcription and recording alert banner |
24+
| | Admit/Reject lobby participants |
25+
| Participant gallery | Show remote participants on a grid |
26+
| | Make video preview available throughout a call for a local user |
27+
| | Make default avatars available when video is off |
28+
| | Show shared screen content in the participant gallery |
29+
| | Enable participant avatar customization |
30+
| | Show a participant roster |
31+
| Call configuration | Manage the microphone device |
32+
| | Manage the camera device |
33+
| | Manage the speaker device (wired or Bluetooth) |
34+
| | Make local preview available for a user to check video |
35+
| | Enable end call confirmation dialogue |
36+
| | Skip setup screen |
37+
| Call controls | Mute and unmute a call |
38+
| | Turn video on or off during a call |
39+
| | End a call |
40+
| | Hold and resume a call after audio interruption |
41+
| | CallKit and TelecomManager Support |
42+
| Customize the experience | Button bar customization |
4243

4344
### Teams interoperability
4445

@@ -81,6 +82,35 @@ You can use the UI Library call composite for iOS and Android to create a custom
8182
| -------------------------------------------------------- | --------------------------------------------------------------- |
8283
| :::image type="content" source="../../media/mobile-ui/android-color.png" alt-text="Screenshot that shows Android theming for a caller experience."::: | :::image type="content" source="../../media/mobile-ui/ios-dark.png" alt-text="Screenshot that shows iOS theming for a caller experience."::: |
8384

85+
### Button bar customization
86+
87+
The functionality allows developers to add new actions into the contextual menu or remove current buttons in the button bar, providing the flexibility to introduce custom actions and tailor the user interface according to specific application needs.
88+
89+
- Add Custom Buttons: Developers can introduce new buttons into the contextual button bar to trigger custom actions.
90+
- Remove Existing Buttons: Unnecessary default buttons can be removed to streamline the interface: camera, microphone o audio selection.
91+
92+
Consider the following constraints during the implementation of this feature:
93+
94+
- Icons and Labels: Icons are added only for new actions. The button bar icons keep the predefined icon, labels should be concise to fit the menu dimension.
95+
- Accessibility Considerations: Developers should ensure that all custom buttons are accessible, including appropriate labeling for screen readers.
96+
97+
|Remove buttons | Add custom actions|
98+
|------------- | ------------------|
99+
| :::image type="content" source="media/ui-library-remove-button.png" alt-text="Screenshot that demonstrates the remove button on the bottom bar."::: | :::image type="content" source="media/ui-library-add-action-button.png" alt-text="Screenshot that demonstrates add custom action into the contextual menu."::: |
100+
101+
#### Use Cases
102+
103+
- Custom In-Call Actions: A business application can add a custom "Report Issue" button, allowing users to directly report technical issues during a call.
104+
- Branding and User Experience: An enterprise app can remove buttons that are irrelevant to its use case and add branded buttons that enhance the user experience.
105+
106+
#### Best Practices
107+
108+
- Minimalism: Avoid overcrowding the contextual menu bar. Only add buttons that are essential for the user experience.
109+
- User Testing: Conduct user testing to ensure the customizations meets user needs and don't confuse or overwhelm them.
110+
- Add a Feedback Mechanism: If adding buttons for actions like "Report Issue," ensure there's a robust backend system to handle the feedback collected, you can re use the [mechanism that UI Library provide by default](../../../tutorials/collecting-user-feedback/collecting-user-feedback.md).
111+
112+
For more information, see [How to customize the button bar](../../../how-tos/ui-library-sdk/button-injection.md).
113+
84114
### Screen size
85115

86116
You can adapt the Azure Communication Services call composite to adapt to screen sizes from 5 inches to tablet size. Use split mode and tablet mode in the call composite to get the dynamic participants' roster layout, provide clarity on the view, and focus on the conversation.

‎articles/communication-services/how-tos/ui-library-sdk/button-injection.md

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
---
2+
title:Customize the actions from the button bar in the UI Library
3+
titleSuffix: An Azure Communication Services how-to guide
4+
description: Customize the actions from the button bar in the Azure Communication Services UI Library.
5+
author: garchiro7
6+
ms.author: jorgegarc
7+
ms.service: azure-communication-services
8+
ms.subservice: calling
9+
ms.topic: how-to
10+
ms.date: 08/01/2024
11+
ms.custom: template-how-to
12+
zone_pivot_groups: acs-plat-ios-android
13+
14+
#Customer intent: As a developer, I want to customize the button bar actions in the UI Library.
15+
---
16+
17+
# Customize the button bar
18+
19+
To implement custom actions or modify the current button layout, you can interact with the Native UI Library's API. This API involves defining custom button configurations, specifying actions, and managing the button bar's current actions. The API provides methods for adding custom actions, and removing existing buttons, all of which are accessible via straightforward function calls.
20+
21+
This functionality provides a high degree of customization, and ensures that the user interface remains cohesive and consistent with the application's overall design.
22+
23+
## Prerequisites
24+
25+
- An Azure account with an active subscription. [Create an account for free](https://azure.microsoft.com/free/?WT.mc_id=A261C142F).
26+
- A deployed Communication Services resource. [Create a Communication Services resource](../../quickstarts/create-communication-resource.md).
27+
- A user access token to enable the call client. [Get a user access token](../../quickstarts/access-tokens.md).
28+
- Optional: Completion of the [quickstart for getting started with the UI Library composites](../../quickstarts/ui-library/get-started-composites.md).
29+
30+
## Set up the feature
31+
32+
::: zone pivot="platform-android"
33+
[!INCLUDE [Customize the actions from the button bar in the Android UI Library](./includes/button-injection/android.md)]
34+
::: zone-end
35+
36+
::: zone pivot="platform-ios"
37+
[!INCLUDE [DCustomize the actions from the button bar in the iOS UI Library](./includes/button-injection/ios.md)]
38+
::: zone-end
39+
40+
## Next steps
41+
42+
- [Learn more about the UI Library](../../concepts/ui-library/ui-library-overview.md)

‎articles/communication-services/how-tos/ui-library-sdk/includes/button-injection/android.md

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
---
2+
description: Learn how to customize the actions from the button bar in the Android UI Library
3+
author: garchiro7
4+
5+
ms.author: jorgegarc
6+
ms.date: 08/01/2024
7+
ms.topic: include
8+
ms.service: azure-communication-services
9+
---
10+
11+
## Remove buttons
12+
13+
Add description
14+
15+
#### [Kotlin](#tab/kotlin)
16+
17+
```kotlin
18+
TODO: Add code
19+
```
20+
21+
#### [Java](#tab/java)
22+
```java
23+
TODO: Add code
24+
```
25+
26+
-----
27+
28+
## Add custom actions
29+
30+
Add description
31+
32+
#### [Kotlin](#tab/kotlin)
33+
34+
```kotlin
35+
TODO: Add code
36+
```
37+
38+
#### [Java](#tab/java)
39+
```java
40+
TODO: Add code
41+
```
42+
43+
-----

‎articles/communication-services/how-tos/ui-library-sdk/includes/button-injection/ios.md

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
---
2+
description: Learn how to customize the actions from the button bar in the iOS UI Library
3+
author: garchiro7
4+
5+
ms.author: jorgegarc
6+
ms.date: 08/01/2024
7+
ms.topic: include
8+
ms.service: azure-communication-services
9+
---
10+
11+
12+
## Remove buttons
13+
14+
Add description
15+
16+
```swift
17+
TODO: Add code
18+
```
19+
20+
## Add custom actions
21+
22+
Add description
23+
24+
```swift
25+
TODO: Add code
26+
```

‎articles/communication-services/toc.yml

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -426,6 +426,8 @@ items:
426426
href: how-tos/ui-library-sdk/orientation.md
427427
- name: Configure theming
428428
href: how-tos/ui-library-sdk/theming.md
429+
- name: Customize the button bar
430+
href: how-tos/ui-library-sdk/button-injection.md
429431
- name: Disable end call confirmation
430432
href: how-tos/ui-library-sdk/leave-call-confirmation.md
431433
- name: Enable audio only mode

0 commit comments

Comments
 (0)