Referencing TargetElements when when authoring Adaptive Cards

Question

I am authoring an Adaptive Card in C# and need to add an Image with a ToggleVisibilityAction. The JSON equivalent is:

{
  "type": "Image",
  "selectAction": {
    "type": "Action.ToggleVisibility",
    "title": "expand",
    "targetElements": [ "REFERENCE_1", "REFERENCE_2",]
  },
  "url": "MY_IMAGE_URL",
  "altText": "visible"
}

In the above REFERENCE_1 and REFERENCE_2 are the Id fields of the elements I want to target.

When authoring it in C#, I have

new AdaptiveImage()
{
  SelectAction = new AdaptiveToggleVisibilityAction()
  {
    Title = "collapse",
    TargetElements = REFERENCE_COLLECTION_HERE, 
  },
}

My challenge is that the JSON version accepts a string reference with an Id of the TargetElement but the C# version expects a List<AdaptiveTargetElement> where REFERENCE_COLLECTION_HERE is. How do I manage to reference the TargetElement while being able to add it where I want it in my card layout.

Answer 1

Please try out below in C#:

private Attachment GenerateCard(NewsInfo newsResult){
int indexCount = 0;
var card = new AdaptiveCard("1.3");
var list = new List<AdaptiveElement>();

newsResult.articles = newsResult.articles.Take(5).ToArray();

foreach (var item in newsResult.articles)
{
    list.Add(new AdaptiveContainer
    {
        Items = new List<AdaptiveElement>
            {
                new AdaptiveContainer
                {
                    Items = new List<AdaptiveElement>
                    {
                        new AdaptiveColumnSet
                        {
                            Columns = new List<AdaptiveColumn>
                            {
                                new AdaptiveColumn
                                {
                                    Width = AdaptiveColumnWidth.Auto,
                                    Items = new List<AdaptiveElement>
                                    {
                                        new AdaptiveTextBlock
                                        {
                                            Text = $"{item.title}",
                                            Wrap = true,
                                        }
                                    }
                                },

                                new AdaptiveColumn
                                {
                                    Width = "30px",
                                    Spacing = AdaptiveSpacing.Small,
                                    SelectAction = new AdaptiveToggleVisibilityAction
                                    {
                                        Title = "Toggle",
                                        TargetElements = new List<AdaptiveTargetElement>
                                        {
                                            new AdaptiveTargetElement
                                            {
                                                ElementId = $"CardContent_{indexCount}",
                                            },
                                            new AdaptiveTargetElement
                                            {
                                                ElementId = $"chevronDown{indexCount}",
                                            },
                                            new AdaptiveTargetElement
                                            {
                                                ElementId = $"chevronUp{indexCount}",
                                            },
                                        }
                                    },
                                    VerticalContentAlignment = AdaptiveVerticalContentAlignment.Center,
                                    Items = new List<AdaptiveElement>
                                    {
                                        new AdaptiveImage
                                        {
                                            Id = $"chevronDown{indexCount}",
                                            Url = new Uri("https://adaptivecards.io/content/down.png"),
                                        },
                                        new AdaptiveImage
                                        {
                                            Id = $"chevronUp{indexCount}",
                                            Url = new Uri("https://adaptivecards.io/content/up.png"),
                                            IsVisible = false
                                        }
                                    }
                                }
                            }
                        },
                        new AdaptiveContainer
                        {
                            Id = $"CardContent_{indexCount}",
                            IsVisible = false,
                            Items = new List<AdaptiveElement>
                            {
                                new AdaptiveContainer
                                {
                                    Items = new List<AdaptiveElement>
                                    {
                                        new AdaptiveImage
                                        {
                                            Url = new Uri($"{item.image}"),
                                            PixelWidth = 20,
                                            IsVisible = false
                                        },

                                        new AdaptiveTextBlock
                                        {
                                            Text = $"*{item.description}*",
                                            IsSubtle = true,
                                            Wrap = true
                                        },

                                        new AdaptiveTextBlock
                                        {
                                            Text = $"{item.content}",
                                            IsSubtle = true,
                                            Wrap = true
                                        },

                                        new AdaptiveTextBlock
                                        {
                                            Text = $"*{item.publishedAt}*",
                                            IsSubtle = true,
                                            Wrap = true
                                        }
                                    }
                                },

                                new AdaptiveColumnSet
                                {
                                    Columns = new List<AdaptiveColumn>
                                    {
                                       new AdaptiveColumn
                                        {
                                            Width = AdaptiveColumnWidth.Stretch,
                                            Items = new List<AdaptiveElement>
                                            {
                                                new AdaptiveActionSet
                                                {
                                                    Actions =
                                                    {
                                                        new AdaptiveOpenUrlAction()
                                                        {
                                                            Url = new Uri($"{item.source.url}"),
                                                            Title = $"{item.source.name}",
                                                            Style = "positive",
                                                        }
                                                    }
                                                }
                                            }
                                        },

                                    }
                                }
                            }
                        }
                    },
                }
            }
    });

    indexCount++;
}

card.Body = list;

return new Attachment()
{
    ContentType = AdaptiveCard.ContentType,
    Content = card
};}

Answer 2

You can just use AdaptiveTargetElement objects instead of strings:

new AdaptiveImage()
{
    SelectAction = new AdaptiveToggleVisibilityAction()
    {
        Title = "collapse",
        TargetElements = new List<AdaptiveTargetElement>
        {
            new AdaptiveTargetElement("REFERENCE_1"),
            new AdaptiveTargetElement("REFERENCE_2"),
        },
    },
}

You can see the documentation for them here: https://adaptivecards.io/explorer/TargetElement.html