Adaptive card container create empty div blocks

Question

Hello,

I'm user adaptive card via React framework. I have an array of complex objects (customer.attributes). I want to filter the array's items and diplay the items that respect a condition ("isVisible": "${attributeCode == ##CC3##}"). This works fine, the adaptive card display only the items I want.

However, all the items that don't respect the condition create a empty div. These divs create blank spaces. How can I get rid of them ?

For information, I also tried to use the $when attribut with the same result

I tried to hard code "isVisible": false in the template. The empty divs are still here but have a "display: none" properties in their css. Therefore, they're not visible, and that's perfect. Why isn't it working with the condition ?

Template :

{ "type": "AdaptiveCard","body": [{"type": "TextBlock","text": "${customer.firstName} ${customer.lastName}","size": "Large"},{"type": "Container","$data": "${customer.attributes}","spacing": "medium","items": [{"type": "TextBlock","isSubtle": "true","text": "${attributeLabel}","isVisible": "${attributeCode == ##CC3##}"},{"type": "TextBlock","isVisible": "${attributeCode == ##CC3##}","text": "${attributeValue.textValue}","weight": "Bolder"}]}],"$schema": "http://adaptivecards.io/schemas/adaptive-card.json","version": "1.0"}

Data:

{ "customer": {"customerId": "id","firstName": "David","attributes": [{"attributeCode": "CC1","attributeType": "TEXT","attributeLabel": "Texte libre 1","attributeValue": "test1"},{"attributeCode": "CC3","attributeType": "TEXT","attributeLabel": "Texte libre 3","attributeValue": "test3"}],"loyaltyEligible": true,"loyaltyAccounts": []}}

Result div :

Answer 1

Dear Guyome,

Thank you for posting back and clarifying you are not using SharePoint.

We suggest you try to post question in GitHub Community. You can search for the community by using browser.

GitHub Community mainly focuses on coding related queries, members and experts will assist you further.

Thanks for your cooperation and understanding!

Sincerely,

Tina | Microsoft Community Moderator

Answer 2

Hello, thank you for your quick answer. I realise I did not post this question in the good channel at all. I don't use share point.

I display the adaptive card in an html page using React JS and two packages : adaptivecards and adaptivecards-templating.

However I can't find the adequate channel where to post my question. May you help me ?

Thank you,

Guyome

Answer 3

Dear Guyome,

Good day! Thank you for posting in Microsoft Community. We are happy to help you.

As per your description, it seems like you are customizing SharePoint with HTML code, items that don't respect the condition create a empty div.

Considering we mainly focus on general and build-in queries in SharePoint Online, we may have limited resource about customization with code.

At the same time, considering we have a dedicated channel Microsoft Q&A Community - SharePoint, for you to be assisted properly, we sincerely recommend you go to that community and post a new thread, members and engineers over there are proficient in the knowledge of SharePoint customization and development queries. They will focus on the specific situation on your side and share specific suggestions. We are sure that our experts from that team can address your query effectively and accurately.

Thanks for your understanding and cooperation! I Hope you keep safe and healthy always.

Sincerely,

Tina | Microsoft Community Moderator