microsoft / microsoft/AdaptiveCards

[Feature Request] List Element for more robust content organization

Open
#8,724 0 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Request
Dominant language
C#
Stars
2k
Forks
595
Avg merge
1d 19h
Merged PRs (30d)
1

Description

Problem Statement

The only way to implement any kind of list display with Schema 1.5 is through TextBlocks and Markdown lists, meaning you can only have basic text and images under a particular list item, with the minimal control available to Markdown. If you want to build a list that has interactive elements embedded as part of a list item, such as an instruction list with Action Sets at different steps in the process, text with a selectAction besides launching a URL, or even a table or Fact Set as part of a single item in an ordered or unordered list, you're pretty much out of luck.

Proposed solution

A new "List" container that exposes a signature much like a "Container", but with properties to identify ordered vs unordered and the item marker style (ordered: alpha, numeric, Roman | unordered: disc, circle, square) and each item in items is treated as an individual item in the list. Alternatively, separating "OrderedList" and "UnorderedList" might be more easy to organize properties and behaviors.

A single item in the array should be able to be any type of Element. This would allow for nesting a Container in an item to create a complex block of content or nesting lists, as needed.

Sample

{
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.0",
  "body": [
    {
      "type": "List",
      "ordered": true, //false
      "marker": "numeric", //ordered - upAlpha, roman, upRoman, numeric, unordered - disc, circle, square
      "items": [
        {
          "type": "TextBlock",
          "text": "This is a simple first item"
        },
        {
          "type": "Container",
          "items": [
            {
              "type": "RichTextBlock",
              "inlines": [
                {
                  "type": "TextRun",
                  "italic": true,
                  "text": "This"
                },
                " is a more complicated item ",
                {
                  "type": "TextRun",
                  "italic": true,
                  "text": "with an action",
                  "selectAction": 
                  {
                     "type": "Action.Execute",
                     "verb": "DoSomethingSpecial"
                  }
                },       
              ]
            },
            {
              "type": "Image",
              "url": "https://adaptivecards.io/content/cats/1.png",
              "altText": "Cat"
            }
          ]
        },
       {
          "type": "TextBlock",
          "text": "This is a simple third item"
        },
      ]
    }
  ]
}

would render as an ordered list with three items, marked by numbers, looking something similar to

  1. This is a simple first item
  2. This is a more complicated item with an action
    Cat
  3. This is a simple third item
Alternatives or Workarounds

We tried manually breaking up lists with Markdown in TextBlocks on-demand, but indenting starts becoming an issue because only the text inside the TextBlock gets aligned based on the list level, but any other content that would be part of that presentation but cannot be in a TextBlock (actions, tables, etc) becomes fully left/right aligned and doesn't look very good.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reviewing how Container and other Element types are represented in the Adaptive Cards schema and repository. Determine how a List element could support ordered and unordered markers, arbitrary nested elements, and nested lists. Done means the proposed behavior is defined clearly enough to validate across the relevant card renderers.

Written by the indexing model from the issue text.

Assessment

Tech stack
csharp
Domain
content, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.