Cards View

[codeliner]

A list of information is currently shown in a table component using @mui/x-data-grid. Here is an example

The user should be able to display a list of information in a card grid instead.

As shown on the screenshot, tables are configured in the UI Schema section of information cards on prooph board:

We should introduce a new ui schema variant:

{
  "ui:cards": {
    "card": {
      "header": {
        "text": "firstName + ' ' + lastName", // Support Jexl Expressions
        "typography": "h2",  // Default, one of the Material UI Typography options
        "color": "..."  // Optional
        ... // More config options TBD
      },
      "content": [  // Array of lines, each line can have different config
        {  // First content line
           "text": "address.street", // Support Jexl Expressions
           "typography": "body1",  // Default, one of the Material UI Typography options
           "color": "..."  // Optional
           ... // More config options TBD
        },
        {  // Second content line
           "text": "address.city"
        }
      ]
      "actions": [...]  // TBD, action button config, connected to command that should be triggered, ...
    },
    "cardsPerRow": 4,
    ... // more options
  }
}

Tasks

• Create a CardGrid component with props for passing list of information and cardgrid ui schema (see above)
• Cody Engine cody hook should check if table view or cardgrid view should be generated
• Cody Play list view should check if table view or cardgrid view should be used