Sai Bhargav

How to add multi-select buttons dynamically in Power Virtual Agent(PVA) using BotFramework Composer(BFC)?

Sai Bhargav's photo
Sai Bhargav
·

3 min read

Using Botframework Composer, we can dynamically add multi choose buttons to the PVA.

We'll utilise HeroCard for this because Adaptive Card buttons aren't working (click function) in PVA utilising BFC right now; only Action Buttons work with adaptive cards.

Step1: We need to make the variables global (*these are the only variables we'll use in BFC).

Step2: Open Botframework composer (If already downloaded, else Download it here )

image.png

Step3: To do static buttons you can follow the same here

You can add dynamically by following these steps:

After Opening the bot in BFC

  • Click on add a dialog

image.png

  • Give a name

image.png

  • Click on begin dialog

image.png

  • Click on show code

image.png

  • paste the below code snippet inside actions and click on hide code for the outline.
{
  "$kind": "Microsoft.SetProperties",
  "$designer": {
    "id": "oletBZ"
  },
  "assignments": [
    {
      "property": "conversation.customVarName",
      "value": "=split(virtualagent.pvaVarName,' ')"
    },
    {
      "property": "conversation.customConditionVarName",
      "value": "=virtualagent.pvaErrorVarNamefromPA"
    }
  ]
},
{
  "$kind": "Microsoft.IfCondition",
  "$designer": {
    "id": "2RjySU"
  },
  "actions": [
    {
      "$kind": "Microsoft.ChoiceInput",
      "$designer": {
        "id": "BTtj9b"
      },
      "defaultLocale": "en-us",
      "disabled": false,
      "maxTurnCount": 3,
      "alwaysPrompt": true,
      "allowInterruptions": false,
      "unrecognizedPrompt": "",
      "invalidPrompt": "",
      "choiceOptions": {
        "includeNumbers": true,
        "inlineOrMore": ", or ",
        "inlineOr": " or ",
        "inlineSeparator": ", "
      },
      "property": "conversation.customVarChoice",
      "style": "heroCard",
      "choices": "=conversation.customVarName",
      "recognizerOptions": {
        "recognizeOrdinals": true,
        "recognizeNumbers": true
      },
      "prompt": "${ChoiceInput_Prompt_BTtj9b()}"
    },
    {
      "$kind": "Microsoft.SetProperty",
      "$designer": {
        "id": "FhWWLV"
      },
      "property": "virtualagent.pvaVarNmae",
      "value": "=conversation.customVarChoice"
    }
  ],
  "elseActions": [
    {
      "$kind": "Microsoft.SetProperty",
      "$designer": {
        "id": "Nl9x6c"
      },
      "property": "virtualagent.pvaVarName",
      "value": "=virtualagent.pvaVarName"
    }
  ],
  "condition": "(conversation.customConditionVarName)"
}

or

  • You can recreate the below image because in most of the cases the pasting the code doesn't work

image.png

  • Here we are going to use

virtualagent.varName

The virtualagent. represents when we are taking the variable from the PVA and using it in BFC

conversation.varName

The Conversation. represents when we are using this it sends the data to PVA

in this case we are sending the multi-prompt choice to the user to select

After configuring all the variable name etc Click on the userinput and then select Other --> Prompt Configuration --> Always Prompt --> set it to TRUE (by default it will be false)

image.png

image.png

If it didn't set it to true then if the user input is already present it won't ask again for the user input again as we are setting it as global variable in PVA.

In Power Automate you have to create a flow for temporary variable creation just to pass to PVA

MicrosoftTeams-image (5).png

In PVA you have to create a flow as shown below

image.png

Above mentioned steps are verified and working with multiple buttons and able to click and get the response from the same.

Thank you.

botcomposerchatbot