microsoft-teamspower-automateadaptive-cardsrpa

Only show an element when another input element is set - Adaptive Cards


I am currently learning about Adaptive cards for using it in Power Automate to send them to Microsoft teams.

As an exercise I needed to build this card: Candidate FeedBack form

I built the card in the Microsoft Adaptive card designer and I got this card payload:

{
"type": "AdaptiveCard",
"body": [
    {
        "type": "TextBlock",
        "size": "Medium",
        "weight": "Bolder",
        "text": "CANDIDATE FEEDBACK FORM"
    },
    {
        "type": "ColumnSet",
        "columns": [
            {
                "type": "Column",
                "width": "auto",
                "items": [
                    {
                        "type": "Image",
                        "url": "{CandidateUrl}",
                        "altText": "ProfilePicture",
                        "horizontalAlignment": "Left",
                        "style": "Person"
                    }
                ],
                "horizontalAlignment": "Center",
                "verticalContentAlignment": "Center"
            },
            {
                "type": "Column",
                "width": "auto",
                "horizontalAlignment": "Center",
                "verticalContentAlignment": "Center",
                "style": "emphasis",
                "items": [
                    {
                        "type": "TextBlock",
                        "text": "{Candidate Name}",
                        "wrap": true,
                        "color": "Dark"
                    }
                ]
            }
        ]
    },
    {
        "type": "Container",
        "backgroundImage": {
            "url": "https://www.solidbackgrounds.com/images/950x350/950x350-light-gray-solid-color-background.jpg"
        },
        "items": [
            {
                "type": "Input.Text",
                "placeholder": "Input candidate comments",
                "id": "CandidateComments",
                "isMultiline": true,
                "isRequired": true,
                "label": "Comments",
                "errorMessage": "You must set the candidate comments"
            },
            {
                "type": "Input.ChoiceSet",
                "choices": [
                    {
                        "title": "Hire",
                        "value": "Hire"
                    },
                    {
                        "title": "No Hire",
                        "value": "No Hire"
                    }
                ],
                "placeholder": "Placeholder text",
                "isRequired": true,
                "style": "expanded",
                "id": "Decision",
                "label": "Decision",
                "errorMessage": "You must select the decision"
            },
            {
                "type": "Input.ChoiceSet",
                "choices": [
                    {
                        "title": "Past experience in the topic area",
                        "value": "Experience"
                    },
                    {
                        "title": "Inclusive behaviors and work ethics",
                        "value": "Inclusivity"
                    },
                    {
                        "title": "Ability to work without supervision",
                        "value": "Independent"
                    }
                ],
                "placeholder": "Placeholder text",
                "isMultiSelect": true,
                "style": "expanded",
                "label": "Suggest follow-up discussion regarding:",
                "id": "Suggestion"
            }
        ]
    }
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.0",
"actions": [
    {
        "type": "Action.Submit",
        "title": "Submit"
    }
]
}

The card is working ok but I got an idea and I have not been able to do it. The thing is that I would like that the Suggestion Choice element only appears if the user selects the "Hire" decision, because it does not have much sense to have a follow-up discussion with someone that you decided not to hire.

I noticed that the ChoiceSet has a property called "Only show when" but I only have been able to make it work using the sample data editor. For example when I add this data to the sample data editor:

{
    "Test":"Testing"
}

And this expression in "Only show when": ${$root.Test == "Testing"}, It works but I don't need it to do it with sample data but when the id "Decision" is equal to "Hire". So that is the question, how can I achieve that the ChoiceSet is only shown when the id "Decision" is equal to "Hire".

PS: Other thing that I saw is that I can unmark the ChoiceSet as "Initially Visible" and there is an action "ToggleVisibility" which can make it visible, but I don't know how to trigger that action only when the Hire decision is chosen.

Thank you in advance!


Solution

  • You can't do it directly from the UI itself. You can update the card when user submits it, but right now there is no such action available that can execute some event on checkbox check and uncheck.