Separator not showing in Adaptive Cards

1
votes

I've been trying to get the "separator" property of Adaptive cards to work, but it does not seem to be rendering in the BotFramework Emulator.

Here are images to the Emulator and the Visualizer for the same code: Emulator Visualizer

The code in both places is the same, and is as follows:

{
    "contentType": "application/vnd.microsoft.card.adaptive",
    "content": {
        '$schema': 'http://adaptivecards.io/schemas/adaptive-card.json',
        'version': '1.0',
        'type': 'AdaptiveCard',
        'body': [
        {
            'type': 'TextBlock',
            'text': 'Meeting Title',
            'weight': 'bolder'
        },
        {
            'type': 'TextBlock',
            'text': 'Location',
            'separator': true,
            'isSubtle': true,
            'size': 'small'
        },
        {
            'type': 'TextBlock',
            'text': 'Location',
            'spacing': 'none'
        },
        {
            'type': 'TextBlock',
            'text': 'Organizer',
            'separator': true,
            'isSubtle': true,
            'size': 'small'
        },
        {
            'type': 'TextBlock',
            'text': 'Organizer Name',
            'spacing': 'none'
        },
        {
            'type': 'TextBlock',
            'text': 'Start Time',
            'separator': true,
            'isSubtle': true,
            'size': 'small'
        },
        {
            'type': 'ColumnSet',
            'spacing': 'none',
            'columns': [
            {
                'type': 'Column',
                'width': 'auto',
                'items': [
                {
                    'type': 'TextBlock',
                    'text': '05:00 PM',
                    'isSubtle': false,
                    'weight': 'bolder'
                }
                ]
            },
            {
                'type': 'Column',
                'width': 'auto',
                'items': [
                {
                    'type': 'TextBlock',
                    'text': 'May 21'
                }
                ]
            },
            {
                'type': 'Column',
                'width': 'auto',
                'items': [
                {
                    'type': 'TextBlock',
                    'text': '2017',
                    'isSubtle': true,
                    'weight': 'bolder'
                }
                ]
            }
            ]
        },
        {
            'type': 'TextBlock',
            'text': 'End Time',
            'separator': true,
            'isSubtle': true,
            'size': 'small'
        },
        {
            'type': 'ColumnSet',
            'spacing': 'none',
            'columns': [
            {
                'type': 'Column',
                'width': 'auto',
                'items': [
                {
                    'type': 'TextBlock',
                    'text': '05:30 PM',
                    'isSubtle': false,
                    'weight': 'bolder'
                }
                ]
            },
            {
                'type': 'Column',
                'width': 'auto',
                'items': [
                {
                    'type': 'TextBlock',
                    'text': 'May 21'
                }
                ]
            },
            {
                'type': 'Column',
                'width': 'auto',
                'items': [
                {
                    'type': 'TextBlock',
                    'text': '2017',
                    'isSubtle': true,
                    'weight': 'bolder'
                }
                ]
            }

            ]
        }
        ],
        'actions': [
        {
            'type': 'Action.Submit',
            'title': 'Accept',
            'data':{
                'accept': true
            }
        },
        {
            'type': 'Action.Submit',
            'title': 'Decline',
            'data':{
                'accept': false
            }
        }
        ]
  }
}

As seen, The separators appear only in the visualizer, for the same code. Am I missing something?

2
botframeworkadaptive-cards
Duplicate of stackoverflow.com/questions/50270145/… – Nicolas R
By the way: do not fully trust Adaptive Card's visualizer for Bot projects, it is often not exactly rendering the same content as in the real channels. You have to double check – Nicolas R
I checked the other post, where the answer said we can create custom emulators. I want to be able to change the cards themselves. Not the emulator. Like is it possible to inject a HTML div inside it. Or modify the parser which converts the card JSON to HTML in some way, to be able to add extra HTML divs. For instance, since the separator does not seem to be working, an alternative to this would be to insert your own div, and add a separator manually. – Saurav Sircar
"Or modify the parser which converts the card JSON to HTML in some way, to be able to add extra HTML divs" << this is channel customization, so emulator customization in your case – Nicolas R
How would I proceed to achieve that? – Saurav Sircar

2 Answers

1
votes

Instead of separator you can use Separation = SeparationStyle.Strong this is working for me

0
votes

it might be a little bit tricky because the separator documentation is a little bit vague (at least for me).

Take a look here - the syntax purposed to separator doesn't seem to work anywhere.

What I did find:

  • The spacing property works just fine (at least with these values "none" | "small" | "default" | "medium" | "large" | "extraLarge" | "padding")
  • It will only works when using in containers (Container, ColumnSet, Column, etc.)
  • It is also apply (as the name implies) on the outer area of the container (similar to CSS margin property)
  • Will not work for the first container

You may go to the adaptive cards classic editor and put spacing (let's say "spacing": "large") on the second Container section (there are only 2 of them) and observe the spacing impact by yourself