🌟🌟 🕒 1 h
We are following the official Tutorial: Create a weather bot with Composer -- however: instead of connecting to a Weather API, we are going to connect to our Online Store Service and retrieve additional information of a specific order.
The video shall provide hints where lore, poetic code snippets, and narrative cannot.
- The Bot Framework Composer is already installed on your VM. Start the Bot Framework Composer and click on + Create new
- Enter a name for the bot, e.g. fetch_order_infos
Note: You might be asked to do a Tour of the Bot framework. Just skip this for now.
- Select the Greeting trigger in the bot explorer and select the Send a response action
- Select Send a response
- Click on the existing text and replace it with something like Welcome to the SAP Online Shop Bot. Type "orders" to get started
- After that you can test the bot by clicking on Start Bot at the top of the window. When the Bot is running you can click on Open Web Chat to see the Greeting in a new window.
Note: You might get a warning regarding Firewall access. Click on Allow.
- Close the Bot Framework Windows (not the Composer) by clicking on the X
- Select the ... next to the fetch_order_infos bot in the Bot explorer and click on + Add a dialog
- Enter Name get_order and description Get the details of a specific order in the Create a dialog window and click on OK
- In the Bot explorer you can now see the new dialog "get_order" with a trigger BeginDialog. Select this trigger, click on the + and select Send a response
- While the Send a response dialog is selected, click on Add alternative to enter your initial response for the step get_order, e.g. Let's lookup some order information
Note - If you cannot see the properties pane for the "Send a response", the Bot framwork migth still be running. In this case, close the windows of the running bot.
- Select the fetch_order_infos dialog in the bot explorer and click on Change in the properties for Recognizer Type/Dispatch type. Then select the Regular expression type and click on Done
- Now with the trigger changed to Regular expression, click on the ... next to the fetch_order_infos and select + Add new trigger
- In the new windows select Intent recognized under trigger type and user order for the name and input of the regular expression
- Next we need to link this new order trigger to our Dialog. Start by selecting the order trigger in the box explorer, click on the + and select Dialog management -> Begin a new dialog
- Having the Begin a new dialog step still selected, select get_order from the Dialog name dropdown.
- With this we can again test the flow. Click on start bot / restart bot and open the Web Chat:
- If you now trigger our flow (e.g. I need to lookup an order), you will get the response from our get_order dialog.
- In the next step we need to ask the user for an order number. For this select the BeginDialog step under get_order and click on the + sign after the Send a response step. From there Click on Ask a question and Number.
- Select the Prompt for a number step and click on Add alternative to add a question, e.g. What order ID are you looking for?
Note - You might need to Close the Chat window again.
- Next click on User Input and in the property field enter, user.orderID
- Now that we have all the information it is time to call the OData service. Under the User input dialog, click on the + and select Access external resource -> Send an HTTP request
- For the HTTP method, select "GET" and for the URL enter
http://13.81.170.205:50000/sap/opu/odata4/sap/zui_onlineshop_ms1_o4/srvd/sap/zui_onlineshop_ms1/0001/Online_Shop?$filter=OrderID%20eq%20%27${user.orderID}%27
Note - For the order ID we user the property stored in the answer from the user stored in {user.orderID}
- To authenticate with the user S4H_EXT, click on Add new in the Headers section and enter as follows
| Key | Value |
|---|---|
| Authorization | Basic czRoX2V4dDpXZWxjb21lMQ== |
Warning - Sometimes these properties are not stored. Before continuing with the next step, click on Add New to leave the focus of the current Value input field.
- We expect a response in json and we want to store the results in a variable, enter dialog.api_response for the Result property and json for the Response type.
- With the response from the Online Shop we can now check if everything was OK. For that we create a if/else branch by clicking on the +, selecting Create a condition and using the Branch: If/else action
- In the Branch: If/else dialog select Write an expression from the Condition drop down.
- Enter the expression, which checks if the status code is 200.
=dialog.api_response.statusCode == 200
- In the True branch, click on the + and select Manage Properties -> Set properties
- For each of the following properties, click on Add new under Assignment.
| Property | Value |
|---|---|
| dialog.orderID | =dialog.api_response.content.value[0].OrderID |
| dialog.Ordereditem | =dialog.api_response.content.value[0].Ordereditem |
| dialog.Purchasereqn | =dialog.api_response.content.value[0].Purchasereqn |
| dialog.Prstatus | =dialog.api_response.content.value[0].Prstatus |
| dialog.quantity | =dialog.api_response.content.value[0].quantity |
| dialog.DescriptionText | =dialog.api_response.content.value[0].DescriptionText |
- We should have all the information now so we can write a response to the user. Click on + in the True branch and click on Send a response
- Since we want to reply with an Adaptive Card, click on + and select Attachments
- Then click on Add new attachment -> Create from template -> Adaptive Card 📺 Jump to the video
- Copy and paste/replace the content from below in the Attachment field.
Note - To learn more Adaptive Cards format, read the documentation
AdaptiveCard code block
> To learn more Adaptive Cards format, read the documentation at
> https://docs.microsoft.com/en-us/adaptive-cards/getting-started/bots
- ```{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.2",
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"text": "Order Item Information - ${dialog.orderID}",
"wrap": true,
"size": "Large",
"weight": "Bolder",
"color": "Accent"
},
{
"type": "TextBlock",
"text": "Information about Order ID: ${dialog.orderID} - ${dialog.Ordereditem}",
"weight": "Bolder",
"isSubtle": false
},
{
"type": "FactSet",
"facts": [
{
"title": "Order ID",
"value": "${dialog.orderID}"
},
{
"title": "Order Item",
"value": "${dialog.Ordereditem}"
},
{
"title": "Quantity",
"value": "${dialog.quantity}"
},
{
"title": "Description",
"value": "${dialog.DescriptionText}"
},
{
"title": "PR Status",
"value": "${dialog.Prstatus}"
},
{
"title": "Purchase Requisition #",
"value": "${dialog.Purchasereqn}"
}
]
}
]
}```
Warning - Make sure that header "> To learn more Adaptive Cards..." is still there.
- Also add a response for the False branch using:
Something went wrong: ${dialog.api_response.content.message}.
- In order to enable a second run we clean-up the property to enable the user to enter another Order ID. Under the True/Fail branch, under the Send a response, click on the +, select Manage properties and click on Delete a property
- Enter user.orderID in the Properties of the Delete a property field.
Click again on Restart bot -> Open Web Chat to test the integration.
Follow the steps outlined here to publish the Bot to Azure and from there to Teams.