[Templating]

Description

Suppose authors want to have one template that support both cards below. The template contains a layout for Carousel and another layout that has only non-Carousel AdaptiveCards elements.

{
    "type": "AdaptiveCard", 
    "body": {
            "type": "Carousel",
            "pages": [
                {
                    "type": "CarouselPage",
... 
}
 ]                  
{
    "type": "AdaptiveCard", 
    "body": [
        {
            "type": "Container",
            "items": [
                {
                    "type": "TextBlock",
                    "text" : "Hello World!",

{
    "type": "AdaptiveCard", 
    "body": [
        {
            "type": "Container",
            "items": [
              {
                "$when": "${useCarousel}",
                "type": "Carousel",
                "pages": [
                    {
                        "type": "CarouselPage",
... 
            {
               "$when": "${!useCarousel}",
               "type": "Container",
               "items": [
                  {
                      "type": "TextBlock",
                      "text" : "Hello World!",

This seemingly simple template is not possible in our current library.

First attempt is using $when. $when is not useful here because $when add or remove a json object. This is not enough for the user's scenario.

"body" normally accepts an array of objects. Carousel is a special type of AdaptiveCards that only accepts single object as value for "body". If authors want to support both types of layouts, there has to be way of conditionally enclosing [, ] outside of an AdaptiveCards object.

$when can only add or remove an object. Templating or AEL can not be used in this scenario. Templating can only substitute for either key or value because otherwise it won't be a valid json. There is also a problem of encoding square brackets in data context. We could make it work using AEL's deserialize method but user experience will suffer.

Proposed Solutions

1. Educate cards authors this issue and have them to handle it with separate cards.
2. Change syntax and keep semantic meaning. In other word, Change back to square bracket for Carousel, but maintain the singleton object behavior semantically.
3. Change both syntax and semantic meaning. Allows other objects within body. This has a benefit of being able to handle headers.
4. Make changes to template. Has down side of templating needing to know Carousel type.
5. Use a top level construct see below for example,

[
 {
      "type": "AdaptiveCard",
      "$when": "${useCarousel}",
       "body": {}
 },
 {
     "type": "AdaptiveCard",
     "$when": "!${useCarousel}",
      "body": [] 
 }
]