Adaptive Card HTML Rendering not setting checkbox as checked

Question

I'm using the C# library to render an appaptive card.

• I have a simple card template which is bound to a data template.
• I expand the data template into the basic card below, and can see that the values for the checkbox values are correct.
• I then render the Adaptive Card using the C# library.

Unfortuantely the HTML content rendered for the inputs does not have the "checked" property for any items which should be checked.

Anyone any ideas about this, am I doing something wrong, or misunderstanding what the library should actually be doing.

I'm including the sample Card, JSON and CS Program below.

Kind Regards

Program

using AdaptiveCards;
using AdaptiveCards.Rendering.Html;
using System;
using System.IO;

namespace CardLoader
{
    class Program
    {
        static void Main(string[] args)
        {
            var basePath = System.IO.Path.GetDirectoryName(System.Reflection.Assembly.GetExecutingAssembly().Location);
            var cardJson = File.ReadAllText($"{basePath}/BasicCheckList.json");
            var sampleData = Newtonsoft.Json.JsonConvert.DeserializeObject(File.ReadAllText($"{basePath}/SampleJsonData.json"));
            var template = new AdaptiveCards.Templating.AdaptiveCardTemplate(cardJson);
            var cardPayload = template.Expand(sampleData);
            var card = AdaptiveCard.FromJson(cardPayload);
            AdaptiveCardRenderer renderer = new AdaptiveCardRenderer();
            RenderedAdaptiveCard renderedCard = renderer.RenderCard(card.Card);
            HtmlTag html = renderedCard.Html;
        }
    }
}

Sample Data

{
  "status": {
    "code": "Pending",
    "label": "Pending",
    "url": "https://adaptivecards.io/content/pending.png"
  },
  "approveItems": [
    {
      "id": "pay-docs",
      "title": "Received Proof of Payment",
      "value": "true",
      "separator": false
    }
  ]
}

Sample Card

{
  "type": "AdaptiveCard",
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "version": "1.2",
  "body": [
    {
      "type": "Container",
      "items": [
        {
          "type": "ColumnSet",
          "columns": [
            {
              "type": "Column",
              "width": "stretch",
              "items": [
                {
                  "type": "TextBlock",
                  "text": "**CLAIMS APPROVAL**",
                  "wrap": true,
                  "size": "Large",
                  "weight": "Bolder"
                }
              ]
            },
            {
              "type": "Column",
              "width": "auto",
              "items": [
                {
                  "type": "Image",
                  "url": "${status.url}",
                  "altText": "${status.label}",
                  "height": "30px"
                }
              ]
            }
          ]
        }
      ],
      "style": "emphasis",
      "bleed": true
    },
    {
      "type": "Container",
      "items": [
        {
          "type": "ColumnSet",
          "columns": [
            {
              "type": "Column",
              "width": "stretch",
              "items": [
                {
                  "$data": "${approveItems}",
                  "type": "Input.Toggle",
                  "title": "${title}",
                  "value": "${value}",
                  "separator": "${separator}",
                  "id": "${id}"
                }
              ]
            }
          ]
        }
      ],
      "style": "warning"
    }
  ]
}

Answer 1

If the data is like you've shown in your sample data, the value property is wrong here. You want to have a boolean value (for the checkbox) but you're sending a bool wrapped in a string.

Wrong:

"approveItems": [{
    "id": "pay-docs",
    "title": "Received Proof of Payment",
    "value": "true", <-- this is a string
    "separator": false
}]

Correct:

"approveItems": [{
    "id": "pay-docs",
    "title": "Received Proof of Payment",
    "value": true, <-- This has to be a bool
    "separator": false
}]