在Power Platform的Outlook可操作消息（Adaptive Card 1.4）中实现购物车可行吗？

Adaptive Card 1.4配合Outlook可操作消息可以实现你要的购物车功能，但核心要明确：自适应卡片本身是无状态的，所有添加/删除操作都需要通过后端交互（Action.Submit）来更新卡片内容，前端无法直接修改卡片DOM。以下是具体实现步骤：

核心实现逻辑 #

1. 初始卡片包含商品下拉选择器、添加按钮，以及一个用于展示购物车的容器（初始为空）。
2. 用户点击"+"按钮时，提交选中商品的信息到后端，后端将商品加入购物车列表，重新生成包含购物车项的卡片返回给Outlook，替换原有卡片。
3. 用户点击购物车项右侧的"X"按钮时，提交要删除的商品ID到后端，后端移除对应商品后，再次生成更新后的卡片返回。

具体代码示例 #

1. 初始卡片结构（JSON） #

{
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.4",
  "body": [
    {
      "type": "ColumnSet",
      "columns": [
        {
          "type": "Column",
          "width": "stretch",
          "items": [
            {
              "type": "Input.ChoiceSet",
              "id": "selectedProduct",
              "placeholder": "选择商品",
              "choices": [
                { "title": "商品A", "value": "prod_a" },
                { "title": "商品B", "value": "prod_b" },
                { "title": "商品C", "value": "prod_c" }
              ]
            }
          ]
        },
        {
          "type": "Column",
          "width": "auto",
          "items": [
            {
              "type": "ActionSet",
              "actions": [
                {
                  "type": "Action.Submit",
                  "title": "+",
                  "style": "positive",
                  "data": {
                    "action": "addItem",
                    "productId": "{{selectedProduct}}"
                  }
                }
              ]
            }
          ]
        }
      ]
    },
    {
      "type": "Container",
      "id": "cartContainer",
      "items": [],
      "separator": true,
      "spacing": "medium"
    }
  ]
}

2. 后端处理添加操作后返回的更新卡片 #

当后端接收到action: addItem的请求，将商品加入购物车，然后在cartContainer中动态生成购物车项：

{
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.4",
  "body": [
    // 保留原有的下拉选择器和添加按钮...
    {
      "type": "Container",
      "id": "cartContainer",
      "items": [
        {
          "type": "TextBlock",
          "text": "购物车",
          "size": "medium",
          "weight": "bold"
        },
        // 动态生成的购物车项
        {
          "type": "ColumnSet",
          "columns": [
            {
              "type": "Column",
              "width": "stretch",
              "items": [
                {
                  "type": "TextBlock",
                  "text": "商品A"
                }
              ]
            },
            {
              "type": "Column",
              "width": "auto",
              "items": [
                {
                  "type": "ActionSet",
                  "actions": [
                    {
                      "type": "Action.Submit",
                      "title": "X",
                      "style": "destructive",
                      "data": {
                        "action": "removeItem",
                        "productId": "prod_a"
                      }
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          "type": "ColumnSet",
          "columns": [
            {
              "type": "Column",
              "width": "stretch",
              "items": [
                {
                  "type": "TextBlock",
                  "text": "商品B"
                }
              ]
            },
            {
              "type": "Column",
              "width": "auto",
              "items": [
                {
                  "type": "ActionSet",
                  "actions": [
                    {
                      "type": "Action.Submit",
                      "title": "X",
                      "style": "destructive",
                      "data": {
                        "action": "removeItem",
                        "productId": "prod_b"
                      }
                    }
                  ]
                }
              ]
            }
          ]
        }
      ],
      "separator": true,
      "spacing": "medium"
    }
  ]
}

关键注意事项 #

• 状态存储：购物车数据必须保存在后端（如数据库、缓存），关联用户会话或邮件ID，因为卡片本身不保留状态。
• 卡片刷新：后端返回更新后的卡片时，要确保卡片的id（如果设置）与原卡片一致，Outlook会自动替换原有卡片内容，而不是生成新卡片。
• Action.Submit限制：Outlook可操作消息仅支持Action.Submit触发后端交互，不能使用前端本地操作，所有状态变更必须走后端回调。
• 样式适配：可以通过style属性设置按钮样式（如destructive用于删除按钮），提升用户体验。

内容的提问来源于stack exchange，提问作者Ma io