ACE Card does not register button clicks on Teams Viva Connection Dashboard

[imran7799]

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Developer environment

Windows

What browser(s) / client(s) have you tested

• 💥 Internet Explorer
• 💥 Microsoft Edge
• 💥 Google Chrome
• 💥 FireFox
• 💥 Safari
• mobile (iOS/iPadOS)
• mobile (Android)
• not applicable
• other (enter in the "Additional environment details" area below)

Additional environment details

SPFx version: 1.13
Node version: v14.15.0

Describe the bug / error

I created a ACE card that calls a Third Party API to perform a search. The ACE card is working fine in a Browser, Teams Browser App and Teams Desktop App. However, seems like the button click on my Quick view are not performing any action when I test the App on Teams Mobile App (I have tested it on iOS).

In below image, I have Search button and Test button. Search button calls external API and Test button simply updates a label on a view to "Test worked".

Second image below is shows mobile view, where "test worked" label is not visible.

Here is the code for onAction

public onAction(action: IActionArguments): void {
if (action.type === 'Submit') {
const { id, data } = action;
if (id === 'search_results') {
this.searchResults(data.searchInput);
} else if (id === 'see_results') {
this.setState({ view: "list" });
} else if (id.search('see_details') !== -1) {
this.getDetails(data);
}
else if (id === 'back_to_search') {
this.setState({ view: "search" });
}
else if (id === 'back_to_results') {
this.setState({ view: "list" });
}
else if (id === 'test') {
this.setState({ testProp1: "Test worked." });
}
else{
alert(id);
}
}
}

Here is a full JSON of my quickview.

{
"type": "AdaptiveCard",
"body": [{
"type": "TextBlock",
"size": "Medium",
"weight": "Bolder",
"text": "${title}",
"color": "Accent"
},
{
"type": "TextBlock",
"text": "${description}",
"wrap": true
},
{
"type": "ColumnSet",
"columns": [{
"type": "Column",
"width": "stretch",
"items": [{
"type": "Input.Text",
"id": "searchInput",
"value": "${searchInput}"
}]
},
{
"type": "Column",
"width": "stretch",
"items": [{
"type": "ActionSet",
"actions": [
{
"id": "search_results",
"type": "Action.Submit",
"iconUrl": "https://img.icons8.com/windows/32/ffffff/search--v1.png",
"style": "positive"
},
{
"id": "test",
"type": "Action.Submit",
"title": "Test",
"style": "positive"
}
]
}]
}
]
},
{
"type": "TextBlock",
"wrap": true,
"text": "${if(results > 0, if(results > 1, results + ' results found for search "' + searchInput + '"', results + ' result found for search "' + searchInput + '"'), 'No results found.')}",
"color": "${if(results > 0, "Attention", "Default")}",
"isSubtle": "${results < 1}",
"size": "Small"
},
{
"type": "TextBlock",
"wrap": true,
"text": "${testProp}",
"size": "Small"
}
],
"actions": [{
"$when": "${results > 0}",
"id": "see_results",
"type": "Action.Submit",
"title": "${buttonTitle}",
"style": "positive"
}],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.3"
}

Steps to reproduce

1. Create a ACE card and Test it on Teams Mobile App

Expected behavior

Clicking the test button should update the label to "Test Worked"

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[dennisjsyi]

Hi @imran7799 there is an error in the schema right before the actions block. "${testProp}" should be "${testProp1}". I have verified the issue does not reproduce on Viva Connections Desktop with this change.

[imran7799]

testProp1

Hi @dennisjsyi , Thanks for the response.

testProp1 is the property in my State, however the data object I am passing to schema has the property name testProp. So I I believe my schema is correct and it is working fine in SharePoint Page and Teams Desktop app with the same schema. The only place it is not working is Teams Mobile App. So, issue is more device specific. I also have one other button that calls external API, that behaves the same as well.

When, I make the change you suggested, the label does not update on all the devices.

[estruyf]

This might be a bug in the mobile experience of the ACE cards. Verified this on my end, and see a similar experience that mobile buttons don't get triggered.

I went ahead to understand why it wouldn't see the button getting triggered by creating a simple card with a button and label that shows the stringified JSON action object.

The sample card looks as follows:

{
  "type": "AdaptiveCard",
  "body": [{
    "type": "TextBlock",
    "text": "${btnText}",
    "wrap": true
  },
  {
    "type": "ActionSet",
    "actions": [{
      "type": "Action.Submit",
      "title": "Action.Submit",
      "id": "testButton",
      "style": "positive",
      "data": {
          "test": "Value"
      }
    }]
  }],
  "actions": [],
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "version": "1.3"
}

In the QuickView its onAction method, the only thing it does is:

public onAction(action: IActionArguments): void {

    this.setState({
      btnText: `${JSON.stringify(action as any)}`
    });
}

In the browser, desktop, SharePoint, it works as follows:

Now on mobile it returns this:

Important: Notice the missing button id, this is why you think the button doesn't get triggered. It actually does get triggered, but on mobile as the ID is not passed, your onAction logic probably fails because you cannot verify its id.

In the samples, the id seems to be set via the data property, although in the Adaptive Cards designer, id is a valid property.

@imran7799 to work around this issue, for now, you can use the data property and assign the id to it. In your onAction you want to update the logic to check on action.data.id instead of action.id.

[imran7799]

Hi @estruyf ,

Your work around worked and button is now functioning in Mobile as well.

Thank you so much for quick response. Really appreciate you taking time to help.

Regards,
Imran

[dennisjsyi]

We've identified an issue with the Viva Connections mobile app and a fix is being worked on.

[frags51]

This was fixed last year.

[ghost]

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues