Update the Confirm Success Topic
Introduction
In the previous article we saw how we can create an adaptive card using Bot Framework and display it within Power Virtual Agents.
In this article, we will see how we can extent the implementation to accept user input using a simple input form to accept the shipping address of the selected product.
Implementation
Lets head over to the sample that we created earlier in the bot framework composer and lets add a new trigger.
Lets name the trigger as ShippingAddress and add the trigger phrases that will invoke the conversation. Click on Create.
Now let’s head over to the Bot Responses tab of the Rewards and Recognition Dialog and select show code view.Add the below Adaptive Card JSON to it . Here we are having mainly 2 function calls. ProductURL takes in the Product name variable which the user has selected in Power Virtual Agent and we will be passing this variable value for use which we will see down the line. Within ProductURL function, we are defining a Switch statement so that based on the Product name, we will send back the corresponding image url which will be used in the Form that we are developing using adaptive card.
Within the Shipping Address Function, we are defining the adaptive card structure which has 5 main structures :
- Image : The image url is obtained by calling the ProductURL function and used to show the product image
- Text Block asking user to input the preference and shipping address
- Input text asking for the product color preference
- Input Text asking for shipping address
- Submit action that submits the data.
| # ProductURL(Product) – SWITCH: ${Product} – CASE: ${“Echo”} – https://adaptivecardsbot.blob.core.windows.net/imagestore/Amazon Echo.PNG – CASE: ${“Kindle”} – https://adaptivecardsbot.blob.core.windows.net/imagestore/Kindle.PNG – DEFAULT: – https://adaptivecardsbot.blob.core.windows.net/imagestore/Fitbit.PNG # ShippingAddress(Product) – “` { “type”: “AdaptiveCard”, “$schema”: “http://adaptivecards.io/schemas/adaptive-card.json”, “version”: “1.3”, “body”: [ { “type”: “Image”, “url”: “${ProductURL(Product)}” }, { “type”: “TextBlock”, “text”: “Please Input Your Preference & Shipping Address”, “size”: “Large”, “weight”: “Bolder”, “wrap”:”True” }, { “type”: “Input.Text”, “placeholder”: “Enter any Product Colour Preferences”, “id”: “ColourPreference” }, { “type”: “Input.Text”, “placeholder”: “Enter your Shipping Address”, “id”: “ShippingAddress”, “isMultiline”: true }, { “type”: “ActionSet”, “actions”: [ { “type”: “Action.Submit”, “title”: “Ship it to Me !”, “style”: “Positive” } ] } ] } “` |
Now below that, we will also add the main entry point activity which will be called from the trigger when the user invokes it. We will pass the product name to the GetUserInput which in turn will call shippingaddress function that will create the adaptive card structure and we will convert it into a json which will be shown back to the user as the adaptive card.
| # GetUserInput(Product) [Activity Attachments = ${json(ShippingAddress(Product))} ] |
Build the Trigger Flow
Now let’s head back to the trigger that we created recently and add the Ask a question action and select the type Text
Select the Prompt for text node and in the Bot Responses tab, select Show code and add the below code to it
| – ${GetUserInput(virtualagent.VarUserSelection)} |
This will call the GetUserInput activity which we had defined earlier in Bot Responses action of the Dialog.
We are also passing the variable value of the product that the user has input in the Power Virtual agent which we saw in the previous article. This variable is globally accessible between topics as well as between Power Virtual Agents and Bot Framework Composer. So in case, we want to send back the data to Power Virtual Agent, we can take leverage of this variable.
Now let’s add a User Input node and select the User Input tab in the right side. Set the Property to user.colourPreference and value as =turn.activity.value.ColourPreference. This will extract and save the value of the Color Preference which the user has input in the text box of the adaptive card.
Since the adaptive card is accepting the shipping address as well, we will use the set properties action to extract the data from the text box by setting the Property to user.shippingAddress and value to =turn.activity.value.ShippingAddress
We will also add a send response action to give the confirmation that the product will be shipped to the specified address based on the color preference available
Finally, we want to send back the Color Preference and Shipping address from the current dialog to a variable which is globally available so that we can save it to a backend like SharePoint.
So for time being we will use the same VarUserSelection variable which holds the product that the user has selected and rewrite its value to Color Prefence;ShippingAddress format using the Set a Property action. The variable is accessible using the syntax : virtualagent.<variable name> which we will add to the property and in the value we will add the below expression to concatenate both color preference and shipping address
| =user.colourPreference&”;” &user.shippingAddress |
Finally, we will add a redirection to the Confirmed Success Topic so that we can save the user input and end the conversation with the predefined survey
Thus, the entire flow inside the trigger looks like below
This completes the development inside the bot framework composer and let’s publish it.
Update the Confirm Success Topic
In case we want to store the data to the back end, we can head back to Power Virtual Agents and update the Confirm Success topic to extract the Color Preference and Shipping address that the user has selected in the Dialog that we created using Bot Framework and save it to SharePoint back end.
Test the Bot
We can trigger the bot and make the product selection and trigger the Shipping address dialog using a trigger word like “Shipping Address”. It will accept the user input and share the confirmation back to us
Summary
Thus we saw how we can use Adaptive Cards to create a Form using Bot Framework composer that can accept user input for further processing
