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

microsoft / AdaptiveCards

A new way for developers to exchange card content in a common and consistent way.

MIT License

1.76k stars 550 forks source link

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

### Tasks

I came across a similar problem that forced me to redo my payload entirely. When writing any type of visual objects, most of the time you would like to be able to control the padding and alignment (that's why UI design exists to begin with) and you are forbidden to.

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 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, it's simply denied by the backend :smiley: https://github.com/microsoft/BotFramework-Services/issues/228

microsoft / AdaptiveCards