microsoft / AdaptiveCards

A new way for developers to exchange card content in a common and consistent way.
https://adaptivecards.io
MIT License
1.77k stars 553 forks source link

[Designer] unable to add vertical and horizontal spacing in factset #8727

Open balaji-sivasakthi opened 1 year ago

balaji-sivasakthi commented 1 year ago

Problem Description

I would like to request an enhancement in Adaptive Cards that allows for greater control over the vertical and horizontal spacing between FactSet items. Currently, there seems to be a limitation in customizing the spacing, and this feature would greatly benefit developers and designers looking to achieve specific visual layouts and designs.

Card JSON

{
    "type": "AdaptiveCard",
    "body": [
        {
            "type": "TextBlock",
            "size": "Medium",
            "weight": "Bolder",
            "text": "${title}"
        },
        {
            "type": "ColumnSet",
            "columns": [
                {
                    "type": "Column",
                    "items": [
                        {
                            "type": "Image",
                            "style": "Person",
                            "url": "${creator.profileImage}",
                            "size": "Small"
                        }
                    ],
                    "width": "auto"
                },
                {
                    "type": "Column",
                    "items": [
                        {
                            "type": "TextBlock",
                            "weight": "Bolder",
                            "text": "${creator.name}",
                            "wrap": true
                        },
                        {
                            "type": "TextBlock",
                            "spacing": "None",
                            "text": "Created {{DATE(${createdUtc},SHORT)}}",
                            "isSubtle": true,
                            "wrap": true
                        }
                    ],
                    "width": "stretch"
                }
            ]
        },
        {
            "type": "TextBlock",
            "text": "${description}",
            "wrap": true
        },
        {
            "type": "FactSet",
            "facts": [
                {
                    "$data": "${properties}",
                    "title": "${key}:",
                    "value": "${value}"
                }
            ],
            "spacing": "None"
        }
    ],
    "actions": [
        {
            "type": "Action.ShowCard",
            "title": "Set due date",
            "card": {
                "type": "AdaptiveCard",
                "body": [
                    {
                        "type": "Input.Date",
                        "id": "dueDate"
                    },
                    {
                        "type": "Input.Text",
                        "id": "comment",
                        "placeholder": "Add a comment",
                        "isMultiline": true
                    }
                ],
                "actions": [
                    {
                        "type": "Action.Submit",
                        "title": "OK"
                    }
                ],
                "$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
            }
        },
        {
            "type": "Action.OpenUrl",
            "title": "View",
            "url": "${viewUrl}"
        }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.6"
}

Screenshot

image

### Tasks
Matthew0x commented 10 months ago

I came across a similar problem that forced me to redo my payload structure entirely. When writing any type of text storing visual objects, most of the time you would like to be able to control the padding and alignment.

This issue is similar to the one from 2017: https://github.com/Microsoft/AdaptiveCards/issues/408

However, quote: "I think it's a nice enhancement but is not a showstopper. Feel free to lower the priority." (Welcome to 2024 :+1:)

https://adaptivecards.io/explorer/FactSet.html The official (why the Schema reference is hosted on an .io is a mystery) documentation doesn't mention any kind of "padding", "alignment" or "margin" property for this specific object (the spacing seems to work on the whole object rather than individual records, unless I observed it wrong).

The possible workaround is to use e.g. tables, but tables have syntax that is at least a couple times more complex and longer than the FactsSet (which respresents a dictionary). Instead of adjusting a simple object, the developers are forced to produce a couple hundred lines of unnecessary code (tables, rows, cells).

Additionally, Teams limits the available accepted JSON payload, hence too long requests will result in 413. But hey, it's not breaking :smiley: https://github.com/microsoft/BotFramework-Services/issues/228

balaji-sivasakthi commented 10 months ago

@Matthew0x Welcome to 2024, Thanks for sharing.