我们可以在英雄卡中为长消息添加查看更多选项吗
can we add view more option in hero card for long messages
我正在使用 Microsoft bot 框架,是否可以提供 查看更多 英雄卡片中的长消息选项。
我的卡片正在渲染,我可以看到完整的文本。由于文本很长,聊天气泡不适合 window。我知道我们可以拆分文本并发送两次,但我的客户对查看更多选项非常具体。
感谢任何帮助。
谢谢
桑吉夫
取决于您连接的频道。对于 示例,在 Facebook Messenger 上,这是不可行的,因为那里允许的 UI 组件没有此选项。
但对于支持 Adaptive Cards like these Partners 的其他渠道,您可能会找到其他解决方案,例如为卡片设置 动态高度 以支持大文本和许多其他内容。
更新
我希望这对您有所帮助,因为自适应卡片中还没有 "view more" 选项,但是有一个如下所示的切换选项
转到 Adaptive cards designer 并将以下内容(替换原来的 json)粘贴到左下角的 Card Payload Editor
之后点击右上角的Preview Mode,然后点击预览卡,你会有一个TOGGLE Action
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "Container",
"selectAction": {
"type": "Action.ToggleVisibility",
"targetElements": [
"leg1Details"
]
},
"items": [
{
"type": "ColumnSet",
"columns": [
{
"width": "24px",
"items": [
{
"type": "Image",
"style": "Person",
"backgroundColor": "#0078D7",
"url": "http://messagecardplayground.azurewebsites.net/assets/smallairplane_white.png"
}
],
"type": "Column"
},
{
"width": "stretch",
"spacing": "Small",
"verticalContentAlignment": "Center",
"items": [
{
"type": "TextBlock",
"text": "**Depart:** Delta Air Lines flight 8471 to Paris"
}
],
"type": "Column"
}
]
},
{
"type": "ColumnSet",
"spacing": "None",
"columns": [
{
"width": "24px",
"items": [
{
"type": "Image",
"horizontalAlignment": "Center",
"width": "1px",
"url": "http://messagecardplayground.azurewebsites.net/assets/palebluedot1x1.png",
"height": "20px"
}
],
"type": "Column"
},
{
"width": "stretch",
"spacing": "Small",
"items": [
{
"type": "TextBlock",
"text": "Bengaluru, Sun 11/12/2017 1:55 AM, 10 hours 41 minutes",
"isSubtle": true
}
],
"type": "Column"
}
]
}
]
},
{
"type": "ColumnSet",
"id": "leg1Details",
"isVisible": false,
"spacing": "None",
"columns": [
{
"width": "24px",
"padding": "none",
"backgroundImage": {
"url": "http://messagecardplayground.azurewebsites.net/assets/palebluedot1x1.png",
"mode": "repeatVertically",
"horizontalAlignment": "Center"
},
"type": "Column"
},
{
"width": "stretch",
"spacing": "Small",
"items": [
{
"type": "Container",
"padding": {
"top": "default"
},
"items": [
{
"type": "ColumnSet",
"columns": [
{
"width": 45,
"items": [
{
"type": "Container",
"padding": "none",
"backgroundImage": "http://messagecardplayground.azurewebsites.net/assets/TxP_Background.png",
"items": [
{
"type": "Image",
"horizontalAlignment": "Center",
"url": "http://messagecardplayground.azurewebsites.net/assets/TxP_Flight.png"
}
]
},
{
"type": "Container",
"style": "emphasis",
"spacing": "None",
"items": [
{
"type": "TextBlock",
"text": "Flight to Paris",
"wrap": true,
"size": "ExtraLarge",
"weight": "Lighter",
"color": "Accent"
},
{
"type": "TextBlock",
"text": "Delta Air Lines flight 8471",
"wrap": true,
"size": "Medium",
"spacing": "Small"
},
{
"type": "TextBlock",
"wrap": true,
"text": "Confirmation code: ABCDEF",
"size": "Medium",
"spacing": "None"
},
{
"type": "TextBlock",
"wrap": true,
"text": "10 hours 45 minutes",
"size": "Medium",
"spacing": "None"
}
]
}
],
"type": "Column"
},
{
"width": 55,
"spacing": "None",
"padding": "default",
"items": [
{
"type": "Container",
"height": "stretch",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"width": "auto",
"items": [
{
"type": "TextBlock",
"text": "BLR",
"weight": "Lighter",
"size": "ExtraLarge"
}
],
"type": "Column"
},
{
"width": "stretch",
"verticalContentAlignment": "Center",
"items": [
{
"type": "Image",
"width": "10000px",
"url": "http://messagecardplayground.azurewebsites.net/assets/graydot2x2.png",
"height": "2px"
}
],
"type": "Column"
},
{
"width": "auto",
"spacing": "Small",
"verticalContentAlignment": "Center",
"items": [
{
"type": "Image",
"url": "http://messagecardplayground.azurewebsites.net/assets/smallairplane.png",
"height": "16px"
}
],
"type": "Column"
},
{
"width": "auto",
"items": [
{
"type": "TextBlock",
"text": "CDG",
"weight": "Lighter",
"horizontalAlignment": "Right",
"size": "ExtraLarge"
}
],
"type": "Column"
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"width": 1,
"items": [
{
"type": "TextBlock",
"text": "1:55 AM",
"size": "Medium"
}
],
"type": "Column"
},
{
"width": 1,
"items": [
{
"type": "TextBlock",
"text": "8:10 AM",
"horizontalAlignment": "Right",
"size": "Medium"
}
],
"type": "Column"
}
]
},
{
"type": "ColumnSet",
"spacing": "None",
"columns": [
{
"width": 1,
"items": [
{
"type": "TextBlock",
"isSubtle": true,
"wrap": true,
"text": "November 12, 2017"
}
],
"type": "Column"
},
{
"width": 1,
"items": [
{
"type": "TextBlock",
"isSubtle": true,
"wrap": true,
"text": "November 12, 2017",
"horizontalAlignment": "Right"
}
],
"type": "Column"
}
]
},
{
"type": "ColumnSet",
"spacing": "None",
"columns": [
{
"width": 1,
"items": [
{
"type": "TextBlock",
"isSubtle": true,
"text": "Bengaluru"
}
],
"type": "Column"
},
{
"width": 1,
"items": [
{
"type": "TextBlock",
"isSubtle": true,
"text": "Paris",
"horizontalAlignment": "Right"
}
],
"type": "Column"
}
]
}
]
},
{
"type": "ColumnSet",
"horizontalAlignment": "Right",
"separator": true,
"spacing": "Large",
"columns": [
{
"width": "auto",
"selectAction": {
"type": "Action.OpenUrl",
"url": "http://www.microsoft.com"
},
"items": [
{
"type": "ColumnSet",
"columns": [
{
"width": "auto",
"verticalContentyAlignment": "center",
"items": [
{
"type": "Image",
"url": "http://messagecardplayground.azurewebsites.net/assets/smallairplane.png",
"height": "16px"
}
],
"type": "Column"
},
{
"width": "auto",
"spacing": "Small",
"items": [
{
"type": "TextBlock",
"text": "Check in"
}
],
"type": "Column"
}
]
}
],
"type": "Column"
},
{
"width": "auto",
"spacing": "Large",
"selectAction": {
"type": "Action.OpenUrl",
"url": "http://www.microsoft.com"
},
"items": [
{
"type": "ColumnSet",
"columns": [
{
"width": "auto",
"verticalContentyAlignment": "center",
"items": [
{
"type": "Image",
"url": "http://messagecardplayground.azurewebsites.net/assets/calendaricon.png",
"height": "16px"
}
],
"type": "Column"
},
{
"width": "auto",
"spacing": "Small",
"items": [
{
"type": "TextBlock",
"text": "View in Calendar"
}
],
"type": "Column"
}
]
}
],
"type": "Column"
}
]
}
],
"type": "Column"
}
]
}
]
}
],
"type": "Column"
}
]
}
]}
我正在使用 Microsoft bot 框架,是否可以提供 查看更多 英雄卡片中的长消息选项。
我的卡片正在渲染,我可以看到完整的文本。由于文本很长,聊天气泡不适合 window。我知道我们可以拆分文本并发送两次,但我的客户对查看更多选项非常具体。
感谢任何帮助。
谢谢 桑吉夫
取决于您连接的频道。对于 示例,在 Facebook Messenger 上,这是不可行的,因为那里允许的 UI 组件没有此选项。
但对于支持 Adaptive Cards like these Partners 的其他渠道,您可能会找到其他解决方案,例如为卡片设置 动态高度 以支持大文本和许多其他内容。
更新
我希望这对您有所帮助,因为自适应卡片中还没有 "view more" 选项,但是有一个如下所示的切换选项
转到 Adaptive cards designer 并将以下内容(替换原来的 json)粘贴到左下角的 Card Payload Editor
之后点击右上角的Preview Mode,然后点击预览卡,你会有一个TOGGLE Action
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "Container",
"selectAction": {
"type": "Action.ToggleVisibility",
"targetElements": [
"leg1Details"
]
},
"items": [
{
"type": "ColumnSet",
"columns": [
{
"width": "24px",
"items": [
{
"type": "Image",
"style": "Person",
"backgroundColor": "#0078D7",
"url": "http://messagecardplayground.azurewebsites.net/assets/smallairplane_white.png"
}
],
"type": "Column"
},
{
"width": "stretch",
"spacing": "Small",
"verticalContentAlignment": "Center",
"items": [
{
"type": "TextBlock",
"text": "**Depart:** Delta Air Lines flight 8471 to Paris"
}
],
"type": "Column"
}
]
},
{
"type": "ColumnSet",
"spacing": "None",
"columns": [
{
"width": "24px",
"items": [
{
"type": "Image",
"horizontalAlignment": "Center",
"width": "1px",
"url": "http://messagecardplayground.azurewebsites.net/assets/palebluedot1x1.png",
"height": "20px"
}
],
"type": "Column"
},
{
"width": "stretch",
"spacing": "Small",
"items": [
{
"type": "TextBlock",
"text": "Bengaluru, Sun 11/12/2017 1:55 AM, 10 hours 41 minutes",
"isSubtle": true
}
],
"type": "Column"
}
]
}
]
},
{
"type": "ColumnSet",
"id": "leg1Details",
"isVisible": false,
"spacing": "None",
"columns": [
{
"width": "24px",
"padding": "none",
"backgroundImage": {
"url": "http://messagecardplayground.azurewebsites.net/assets/palebluedot1x1.png",
"mode": "repeatVertically",
"horizontalAlignment": "Center"
},
"type": "Column"
},
{
"width": "stretch",
"spacing": "Small",
"items": [
{
"type": "Container",
"padding": {
"top": "default"
},
"items": [
{
"type": "ColumnSet",
"columns": [
{
"width": 45,
"items": [
{
"type": "Container",
"padding": "none",
"backgroundImage": "http://messagecardplayground.azurewebsites.net/assets/TxP_Background.png",
"items": [
{
"type": "Image",
"horizontalAlignment": "Center",
"url": "http://messagecardplayground.azurewebsites.net/assets/TxP_Flight.png"
}
]
},
{
"type": "Container",
"style": "emphasis",
"spacing": "None",
"items": [
{
"type": "TextBlock",
"text": "Flight to Paris",
"wrap": true,
"size": "ExtraLarge",
"weight": "Lighter",
"color": "Accent"
},
{
"type": "TextBlock",
"text": "Delta Air Lines flight 8471",
"wrap": true,
"size": "Medium",
"spacing": "Small"
},
{
"type": "TextBlock",
"wrap": true,
"text": "Confirmation code: ABCDEF",
"size": "Medium",
"spacing": "None"
},
{
"type": "TextBlock",
"wrap": true,
"text": "10 hours 45 minutes",
"size": "Medium",
"spacing": "None"
}
]
}
],
"type": "Column"
},
{
"width": 55,
"spacing": "None",
"padding": "default",
"items": [
{
"type": "Container",
"height": "stretch",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"width": "auto",
"items": [
{
"type": "TextBlock",
"text": "BLR",
"weight": "Lighter",
"size": "ExtraLarge"
}
],
"type": "Column"
},
{
"width": "stretch",
"verticalContentAlignment": "Center",
"items": [
{
"type": "Image",
"width": "10000px",
"url": "http://messagecardplayground.azurewebsites.net/assets/graydot2x2.png",
"height": "2px"
}
],
"type": "Column"
},
{
"width": "auto",
"spacing": "Small",
"verticalContentAlignment": "Center",
"items": [
{
"type": "Image",
"url": "http://messagecardplayground.azurewebsites.net/assets/smallairplane.png",
"height": "16px"
}
],
"type": "Column"
},
{
"width": "auto",
"items": [
{
"type": "TextBlock",
"text": "CDG",
"weight": "Lighter",
"horizontalAlignment": "Right",
"size": "ExtraLarge"
}
],
"type": "Column"
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"width": 1,
"items": [
{
"type": "TextBlock",
"text": "1:55 AM",
"size": "Medium"
}
],
"type": "Column"
},
{
"width": 1,
"items": [
{
"type": "TextBlock",
"text": "8:10 AM",
"horizontalAlignment": "Right",
"size": "Medium"
}
],
"type": "Column"
}
]
},
{
"type": "ColumnSet",
"spacing": "None",
"columns": [
{
"width": 1,
"items": [
{
"type": "TextBlock",
"isSubtle": true,
"wrap": true,
"text": "November 12, 2017"
}
],
"type": "Column"
},
{
"width": 1,
"items": [
{
"type": "TextBlock",
"isSubtle": true,
"wrap": true,
"text": "November 12, 2017",
"horizontalAlignment": "Right"
}
],
"type": "Column"
}
]
},
{
"type": "ColumnSet",
"spacing": "None",
"columns": [
{
"width": 1,
"items": [
{
"type": "TextBlock",
"isSubtle": true,
"text": "Bengaluru"
}
],
"type": "Column"
},
{
"width": 1,
"items": [
{
"type": "TextBlock",
"isSubtle": true,
"text": "Paris",
"horizontalAlignment": "Right"
}
],
"type": "Column"
}
]
}
]
},
{
"type": "ColumnSet",
"horizontalAlignment": "Right",
"separator": true,
"spacing": "Large",
"columns": [
{
"width": "auto",
"selectAction": {
"type": "Action.OpenUrl",
"url": "http://www.microsoft.com"
},
"items": [
{
"type": "ColumnSet",
"columns": [
{
"width": "auto",
"verticalContentyAlignment": "center",
"items": [
{
"type": "Image",
"url": "http://messagecardplayground.azurewebsites.net/assets/smallairplane.png",
"height": "16px"
}
],
"type": "Column"
},
{
"width": "auto",
"spacing": "Small",
"items": [
{
"type": "TextBlock",
"text": "Check in"
}
],
"type": "Column"
}
]
}
],
"type": "Column"
},
{
"width": "auto",
"spacing": "Large",
"selectAction": {
"type": "Action.OpenUrl",
"url": "http://www.microsoft.com"
},
"items": [
{
"type": "ColumnSet",
"columns": [
{
"width": "auto",
"verticalContentyAlignment": "center",
"items": [
{
"type": "Image",
"url": "http://messagecardplayground.azurewebsites.net/assets/calendaricon.png",
"height": "16px"
}
],
"type": "Column"
},
{
"width": "auto",
"spacing": "Small",
"items": [
{
"type": "TextBlock",
"text": "View in Calendar"
}
],
"type": "Column"
}
]
}
],
"type": "Column"
}
]
}
],
"type": "Column"
}
]
}
]
}
],
"type": "Column"
}
]
}
]}