Skip to content

Commit c1b00ef

Browse files
authored
Merge pull request #223942 from ktoliver/2021097
edit pass: two Communication Services chat articles (2021097)
2 parents 43b6743 + 6a34917 commit c1b00ef

File tree

4 files changed

+85
-76
lines changed

4 files changed

+85
-76
lines changed
Lines changed: 46 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
---
2-
title: Quickstart - Send chat message in Power Automate with Azure Communication Services
2+
title: Send a chat message in Power Automate
33
titleSuffix: An Azure Communication Services quickstart
44
description: In this quickstart, learn how to send a chat message in Azure Logic Apps workflows by using the Azure Communication Services Chat connector.
5-
author: sanchezjuan
5+
author: jjsanchezms
66
manager: chpalm
77
services: azure-communication-services
88
ms.author: sanchezjuan
@@ -12,108 +12,106 @@ ms.service: azure-communication-services
1212
ms.custom: mode-other
1313
---
1414

15-
# Quickstart: Send chat message in Power Automate with Azure Communication Services
15+
# Quickstart: Send a chat message in Power Automate
1616

17-
You can create automated workflows that can send chat messages using the Azure Communication Services Chat connector. This quickstart will show how to create a chat, add a participant, send a message and list messages into an existing workflow.
17+
You can create automated workflows that send chat messages by using the Azure Communication Services Chat connector. This quickstart shows you how to create a chat, add a participant, send a message, and list messages in an existing workflow.
1818

1919
## Prerequisites
2020

2121
- An Azure account with an active subscription, or [create an Azure account for free](https://azure.microsoft.com/free/?WT.mc_id=A261C142F).
2222

2323
- An active Azure Communication Services resource, or [create a Communication Services resource](../create-communication-resource.md).
2424

25-
- An active Logic Apps resource (logic app), or [create a blank logic app but with the trigger that you want to use](../../../logic-apps/quickstart-create-first-logic-app-workflow.md). Currently, the Azure Communication Services Chat connector provides only actions, so your logic app requires a trigger, at minimum.
26-
25+
- An active Azure Logic Apps resource, or [create a blank logic app with the trigger that you want to use](../../../logic-apps/quickstart-create-first-logic-app-workflow.md). Currently, the Communication Services Chat connector provides only actions, so your logic app requires a trigger, at minimum.
2726

2827
## Create user
2928

30-
Add a new step in your workflow by using the Azure Communication Services Identity connector, follow these steps in Power Automate with your Power Automate flow open in edit mode.
31-
32-
1. On the designer, under the step where you want to add the new action, select New step. Alternatively, to add the new action between steps, move your pointer over the arrow between those steps, select the plus sign (+), and select Add an action.
29+
Complete these steps in Power Automate with your Power Automate flow open in edit mode.
3330

34-
1. In the Choose an operation search box, enter Communication Services Identity. From the actions list, select Create a user.
31+
To add a new step in your workflow by using the Communication Services Identity connector:
3532

36-
:::image type="content" source="./media/logic-app/azure-communications-services-connector-create-user.png" alt-text="Screenshot that shows the Azure Communication Services Identity connector Create user action.":::
33+
1. In the designer, under the step where you want to add the new action, select **New step**. Alternatively, to add the new action between steps, move your pointer over the arrow between those steps, select the plus sign (+), and then select **Add an action**.
3734

38-
1. Provide the Connection String. This can be found in [Microsoft Azure](https://portal.azure.com/), within your Azure Communication Service Resource, on the Keys option from the left menu > Connection String
35+
1. In the **Choose an operation** search box, enter **Communication Services Identity**. In the list of actions list, select **Create a user**.
3936

40-
:::image type="content" source="./media/logic-app/azure-portal-connection-string.png" alt-text="Screenshot that shows the Keys page within an Azure Communication Services Resource." lightbox="./media/logic-app/azure-portal-connection-string.png":::
37+
:::image type="content" source="./media/logic-app/azure-communications-services-connector-create-user.png" alt-text="Screenshot that shows the Azure Communication Services Identity connector Create user action.":::
4138

42-
1. Provide a Connection Name
39+
1. Enter the connection string. To get the connection string URL in the [Azure portal](https://portal.azure.com/), go to the Azure Communication Services resource. In the resource menu, select **Keys**, and then select **Connection string**. Select the copy icon to copy the connection string.
4340

44-
1. Click “Show advanced options” and select the Token Scope the action will also output an access token and its expiration time with the specified scope.
41+
:::image type="content" source="./media/logic-app/azure-portal-connection-string.png" alt-text="Screenshot that shows the Keys pane for an Azure Communication Services resource." lightbox="./media/logic-app/azure-portal-connection-string.png":::
4542

46-
This action will output a User ID, which is a Communication Services user identity.
47-
Additionally, if you click “Show advanced options” and select the Token Scope the action will also output an access token and its expiration time with the specified scope.
43+
1. Enter a name for the connection.
4844

45+
1. Select **Show advanced options**, and then select the token scope. The action generates an access token and its expiration time with the specified scope. This action also generates a user ID that's a Communication Services user identity.
46+
4947
:::image type="content" source="./media/logic-app/azure-communications-services-connector-create-user-action.png" alt-text="Screenshot that shows the Azure Communication Services Identity connector Create user action options.":::
5048

51-
1. Select “chat
49+
1. In **Token Scopes Item**, select **chat**.
5250

5351
:::image type="content" source="./media/logic-app/azure-communications-services-connector-create-user-action-advanced.png" alt-text="Screenshot that shows the Azure Communication Services Chat connector advanced options.":::
5452

55-
1. Click Create. This will output the User ID and an Access Token.
53+
1. Select **Create**. The user ID and an access token are shown.
5654

5755
## Create a chat thread
5856

59-
1. Add a new action
57+
1. Add a new action.
6058

61-
1. In the Choose an operation search box, enter Communication Services Chat. From the actions list, select Create chat thread.
59+
1. In the **Choose an operation** search box, enter **Communication Services Chat**. In the list of actions, select **Create chat thread**.
6260

6361
:::image type="content" source="./media/logic-app/azure-communications-services-connector-create-chat-thread.png" alt-text="Screenshot that shows the Azure Communication Services Chat connector Create a chat thread action.":::
64-
65-
1. Provide the Azure Communication Services endpoint URL. This can be found in [Microsoft Azure](https://portal.azure.com/), within your Azure Communication Service Resource, on the Keys option from the left menu > Endpoint.
6662

67-
1. Provide a Connection Name
63+
1. Enter the Communication Services endpoint URL. To get the endpoint URL in the [Azure portal](https://portal.azure.com/), go to the Azure Communication Services resource. In the resource menu, select **Keys**, and then select **Endpoint**.
64+
65+
1. Enter a name for the connection.
66+
67+
1. Select the access token that was generated in the preceding section, and then add a chat thread topic description. Add the created user and enter a name for the participant.
6868

69-
1. Select the Access Token from the previous step, add a Chat thread topic description. Additionally, add the created user and add a Name for the participant.
69+
:::image type="content" source="./media/logic-app/azure-communications-services-connector-create-chat-thread-input.png" alt-text="Screenshot that shows the Azure Communication Services Chat connector Create chat thread action dialog.":::
7070

71-
:::image type="content" source="./media/logic-app/azure-communications-services-connector-create-chat-thread-input.png" alt-text="Screenshot that shows the Azure Communication Services Chat connector Create chat thread action input fields.":::
72-
7371
## Send a message
7472

75-
1. Add a new action
73+
1. Add a new action.
7674

77-
1. In the Choose an operation search box, enter Communication Services Chat. From the actions list, select Send a Chat message to chat thread.
75+
1. In the **Choose an operation** search box, enter **Communication Services Chat**. In the list of actions, select **Send message to chat thread**.
7876

7977
:::image type="content" source="./media/logic-app/azure-communications-services-connector-send-chat-message.png" alt-text="Screenshot that shows the Azure Communication Services Chat connector Send chat message action.":::
80-
81-
1. Provide the Access Token, Thread ID, Content, and Name information as shown below.
82-
83-
:::image type="content" source="./media/logic-app/azure-communications-services-connector-send-chat-message-input.png" alt-text="Screenshot that shows the Azure Communication Services Chat connector Send chat message action input fields.":::
78+
79+
1. Enter the access token, thread ID, content, and name.
80+
81+
:::image type="content" source="./media/logic-app/azure-communications-services-connector-send-chat-message-input.png" alt-text="Screenshot that shows the Azure Communication Services Chat connector Send chat message action dialog.":::
8482

8583
## List chat thread messages
8684

87-
To verify you have correctly sent a message, we will add one more action to list the chat thread messages.
88-
1. Add a new action
85+
To verify that you sent a message correctly:
86+
87+
1. Add a new action.
8988

90-
1. In the Choose an operation search box, enter Communication Services Chat. From the actions list, select List chat thread messages.
89+
1. In the **Choose an operation** search box, enter **Communication Services Chat**. In the list of actions, select **List chat thread messages**.
9190

9291
:::image type="content" source="./media/logic-app/azure-communications-services-connector-list-chat-messages.png" alt-text="Screenshot that shows the Azure Communication Services Chat connector List chat messages action.":::
93-
94-
1. Provide the Access token and Thread ID as follows
95-
96-
:::image type="content" source="./media/logic-app/azure-communications-services-connector-list-chat-messages-input.png" alt-text="Screenshot that shows the Azure Communication Services Chat connector Send chat message action input.":::
92+
93+
1. Enter the access token and thread ID.
94+
95+
:::image type="content" source="./media/logic-app/azure-communications-services-connector-list-chat-messages-input.png" alt-text="Screenshot that shows the Azure Communication Services Chat connector List chat messages action dialog.":::
9796

9897
## Test your logic app
9998

100-
To manually start your workflow, on the designer toolbar, select **Run**. The workflow should create a user, issue an access token for that user, then remove it and delete the user. For more information, review [how to run your workflow](../../../logic-apps/quickstart-create-first-logic-app-workflow.md#run-workflow).
99+
To manually start your workflow, on the designer toolbar, select **Run**. The workflow creates a user, issues an access token for that user, and then removes the token and deletes the user. For more information, review [How to run your workflow](../../../logic-apps/quickstart-create-first-logic-app-workflow.md#run-workflow).
101100

102-
Now click on the List chat thread messages and check the output, the message sent will be in the action outputs.
101+
Now, select **List chat thread messages**. In the action outputs, check for the message that was sent.
103102

104-
:::image type="content" source="./media/logic-app/azure-communications-services-connector-list-chat-messages-output.png" alt-text="Screenshot that shows the Azure Communication Services Chat connector Send chat message action output.":::
103+
:::image type="content" source="./media/logic-app/azure-communications-services-connector-list-chat-messages-output.png" alt-text="Screenshot that shows the Azure Communication Services Chat connector Send chat message action results.":::
105104

106105
## Clean up resources
107106

108-
To remove a Communication Services subscription, delete the Communication Services resource or resource group. Deleting the resource group also deletes any other resources in that group. For more information, review [how to clean up Communication Services resources](../create-communication-resource.md#clean-up-resources).
107+
To remove a Communication Services subscription, delete the Communication Services resource or resource group. Deleting the resource group also deletes any other resources in that group. For more information, review [How to clean up Communication Services resources](../create-communication-resource.md#clean-up-resources).
109108

110109
To clean up your logic app workflow and related resources, review [how to clean up Logic Apps resources](../../../logic-apps/quickstart-create-first-logic-app-workflow.md#clean-up-resources).
111110

112111
## Next steps
113112

114-
In this quickstart, you learned how to create a user, create a chat thread and send a message using the Azure Communication Services Identity and Azure Communication Services Chat connectors. To learn more check the [Azure Communication Services Chat Connector](/connectors/acschat/) documentation.
115-
116-
To learn more about access tokens check [Create and Manage Azure Communication Services users and access tokens](../chat/logic-app.md).
113+
In this quickstart, you learned how to create a user, create a chat thread, and send a message by using the Communication Services Identity and Communication Services Chat connectors. To learn more, review [Communication Services Chat connector](/connectors/acschat/).
117114

118-
To learn more about how to send an email check [Send email message in Power Automate with Azure Communication Services](../email/logic-app.md).
115+
Learn how to [create and manage Communication Services users and access tokens](../chat/logic-app.md).
119116

117+
Learn how to [send an email message in Power Automate by using Communication Services](../email/logic-app.md).
-1.96 KB
Loading
Lines changed: 37 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,52 @@
11
---
2-
title: Using Chat SDK with React Native
2+
title: Use the Chat SDK with React Native
33
titleSuffix: An Azure Communication Services quickstart
4-
description: In this quickstart, you'll learn how to use the Azure Communication Chat SDK with React Native
5-
author: askaur
4+
description: Learn how to use the Azure Communication Services Chat SDK with React Native.
5+
author: ashwinder
66
ms.author: askaur
77
ms.date: 11/30/2021
88
ms.topic: quickstart
99
ms.service: azure-communication-services
1010
ms.custom: mode-other
1111
---
1212

13-
# Quickstart: Using Chat SDK with React Native
13+
# Quickstart: Use the Chat SDK with React Native
1414

15-
In this quickstart, we'll set up the Chat JavaScript SDK with React Native. This is supported for Azure Communication JavaScript Chat SDK v1.1.1 and later.
15+
In this quickstart, you set up the packages in the Azure Communication Services Chat JavaScript SDK to support chat in your React Native app. The steps described in the quickstart are supported for Azure Communication Services JavaScript Chat SDK 1.1.1 and later.
1616

17-
## Setting up with React Native
17+
## Set up the chat packages to work with React Native
1818

19-
The following steps will be required to run Azure Communication JavaScript Chat SDK with React Native after [initializing your React Native project](https://reactnative.dev/docs/environment-setup#installing-dependencies).
19+
Currently, Communication Services chat packages are available as Node packages. Because not all Node modules are compatible with React Native, the modules require a React Native port to work.
2020

21-
ACS chat packages currently available are Node packages. Since not all Node modules are compatible with React Native, they require a React Native port in order to work. To make @azure/communication-chat work with React Native, you will need to install the below mentioned packages that contain React Native ports of the Node core required in @azure/communication-chat.
21+
After you [initialize your React Native project](https://reactnative.dev/docs/environment-setup#installing-dependencies), complete the following steps to make `@azure/communication-chat` work with React Native. The steps install the packages that contain React Native ports of the Node Core modules that are required in `@azure/communication-chat`.
2222

23-
1. Install `node-libs-react-native`
24-
``` console
23+
1. Install `node-libs-react-native`:
24+
25+
```console
2526
npm install node-libs-react-native --save-dev
2627
```
27-
2. Install `stream-browserify`
28-
``` console
28+
29+
1. Install `stream-browserify`:
30+
31+
```console
2932
npm install stream-browserify --save-dev
3033
```
31-
3. Install `react-native-get-random-values`
32-
``` console
34+
35+
1. Install `react-native-get-random-values`:
36+
37+
```console
3338
npm install react-native-get-random-values --save-dev
3439
```
35-
4. Install `react-native-url-polyfill`
36-
``` console
40+
41+
1. Install `react-native-url-polyfill`:
42+
43+
```console
3744
npm install react-native-url-polyfill --save-dev
3845
```
39-
5. Update _metro.config.js_ to use React Native compatible Node Core modules
40-
```JavaScript
46+
47+
1. Update _metro.config.js_ to use React Native-compatible Node Core modules:
48+
49+
```javascript
4150
module.exports = {
4251
// ...
4352
resolver: {
@@ -48,14 +57,19 @@ ACS chat packages currently available are Node packages. Since not all Node modu
4857
tls: require.resolve('node-libs-react-native/mock/tls')
4958
}
5059
};
60+
}
5161
```
52-
6. Add following _import_ on top of your entry point file
53-
```JavaScript
62+
63+
1. Add the following `import` commands at the top of your entry point file:
64+
65+
```javascript
5466
import 'node-libs-react-native/globals';
5567
import 'react-native-get-random-values';
5668
import 'react-native-url-polyfill/auto';
5769
```
58-
7. Install Communication Service packages
70+
71+
1. Install Communication Services packages:
72+
5973
```console
6074
npm install @azure/[email protected] --save
6175

@@ -65,10 +79,7 @@ ACS chat packages currently available are Node packages. Since not all Node modu
6579
```
6680

6781
## Next steps
68-
In this quickstart you learned:
69-
> [!div class="checklist"]
70-
> * Communication Services packages required to add chat to your app
71-
> * How to set up Chat SDK for use in React Native environment
7282

73-
For a step by step guide on how to use Chat SDK to start a chat, refer to the [quickstart](./get-started.md?pivots=programming-language-javascript).
83+
In this quickstart, you learned how to set up the required Communication Services packages to add chat to your app in a React Native environment.
7484

85+
Learn how to [use the Chat SDK to start a chat](./get-started.md?pivots=programming-language-javascript).

articles/communication-services/toc.yml

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,9 @@ items:
2929
items:
3030
- name: Add chat to your app
3131
href: quickstarts/chat/get-started.md
32-
- name: Using Chat SDK with React Native
32+
- name: Use the Chat SDK with React Native
3333
href: quickstarts/chat/react-native.md
34-
- name: Send Chat messages in Azure Logic Apps
34+
- name: Send chat messages by using Power Automate
3535
href: quickstarts/chat/logic-app.md
3636
- name: Add a bot to your chat app
3737
href: quickstarts/chat/quickstart-botframework-integration.md

0 commit comments

Comments
 (0)