自适应卡片操作按钮文本和 UI 在 MS 团队频道中被修剪
Adaptive card action button text & UI trimmed inside the MS Team Channel
我遇到一个问题,ms teams 自适应卡片中的按钮和操作不会将文本包装在操作按钮内。即使我们在 MS Team 中应用 " full: width"
,按钮 UI 也完全损坏。我知道 "Wrap: true || false"
我们可以在自适应卡片 body 或文本块的标题中添加,在 MS Team 频道的操作按钮标题中是否有任何其他方法来处理此类场景。
我们使用以下代码实现自适应卡。
public static Attachment ChoiceMenu(string channelType, string text, List buttons, string subCategory = null)
{
var menuCard = new AdaptiveCard("1.2");
if(!string.IsNullOrEmpty(subCategory))
{
menuCard.Body.Add(new AdaptiveTextBlock()
{
Text = subCategory,
Size = AdaptiveTextSize.Large,
Wrap = true,
});
}
menuCard.Body.Add(new AdaptiveTextBlock()
{
Text = text,
Wrap = true,
});
foreach (var button in buttons)
{
var columns = new AdaptiveColumnSet();
menuCard.Body.Add(columns);
var userCategory = new AdaptiveColumn();
columns.Columns.Add(userCategory);
var actionType = new AdaptiveActionSet();
userCategory.Items.Add(actionType);
var submitAction = new AdaptiveSubmitAction()
{
Title = button,
Id = button
};
if (channelType == Channels.Msteams)
{
submitAction.Data = new AdaptiveCardDataObjectForTeams()
{
MsTeams = new MsTeamsObject()
{
Type = ActionTypes.MessageBack,
DisplayText = button,
Text = button
}
};
}
else
{
submitAction.Data = button;
}
actionType.Actions.Add(submitAction);
}
return new Attachment()
{
ContentType = AdaptiveCard.ContentType,
Content = menuCard
};
}
平台
- 网络(MsTeams 网络 http://teams.microsoft.com)微软团队
- 版本 1.4.00.32771(64 位)。最后更新于 12/15/2021。
适配卡片版本
- 1.2
除了在自适应卡片中使用 full width property 之外,似乎没有任何方法可以增加自适应卡片中可操作按钮的大小以正确适应 text/title。
"msteams": {
"width": "Full"
}
根据 Format cards in Microsoft Teams 文档,
Cards support formatting in the text property only, not in the title
or subtitle properties.
注意:Action Button 文本在标题中属性,这就是我们无法对其进行任何格式化的原因。所以无法在 Action Button 中换行。
替代解决方案:
我们已经使用子字符串连接更改了按钮的 MS Team 标题,此后特定字符将显示 "..."
,因此我们也可以通过这种方式解决此问题。
submitAction.Title = button.Length > 50 ? string.Concat(button.Substring(0, 50), "...") : button;
输出:
参考:
我遇到一个问题,ms teams 自适应卡片中的按钮和操作不会将文本包装在操作按钮内。即使我们在 MS Team 中应用 " full: width"
,按钮 UI 也完全损坏。我知道 "Wrap: true || false"
我们可以在自适应卡片 body 或文本块的标题中添加,在 MS Team 频道的操作按钮标题中是否有任何其他方法来处理此类场景。
我们使用以下代码实现自适应卡。
public static Attachment ChoiceMenu(string channelType, string text, List buttons, string subCategory = null)
{
var menuCard = new AdaptiveCard("1.2");
if(!string.IsNullOrEmpty(subCategory))
{
menuCard.Body.Add(new AdaptiveTextBlock()
{
Text = subCategory,
Size = AdaptiveTextSize.Large,
Wrap = true,
});
}
menuCard.Body.Add(new AdaptiveTextBlock()
{
Text = text,
Wrap = true,
});
foreach (var button in buttons)
{
var columns = new AdaptiveColumnSet();
menuCard.Body.Add(columns);
var userCategory = new AdaptiveColumn();
columns.Columns.Add(userCategory);
var actionType = new AdaptiveActionSet();
userCategory.Items.Add(actionType);
var submitAction = new AdaptiveSubmitAction()
{
Title = button,
Id = button
};
if (channelType == Channels.Msteams)
{
submitAction.Data = new AdaptiveCardDataObjectForTeams()
{
MsTeams = new MsTeamsObject()
{
Type = ActionTypes.MessageBack,
DisplayText = button,
Text = button
}
};
}
else
{
submitAction.Data = button;
}
actionType.Actions.Add(submitAction);
}
return new Attachment()
{
ContentType = AdaptiveCard.ContentType,
Content = menuCard
};
}
平台
- 网络(MsTeams 网络 http://teams.microsoft.com)微软团队
- 版本 1.4.00.32771(64 位)。最后更新于 12/15/2021。
适配卡片版本
- 1.2
除了在自适应卡片中使用 full width property 之外,似乎没有任何方法可以增加自适应卡片中可操作按钮的大小以正确适应 text/title。
"msteams": {
"width": "Full"
}
根据 Format cards in Microsoft Teams 文档,
Cards support formatting in the text property only, not in the title or subtitle properties.
注意:Action Button 文本在标题中属性,这就是我们无法对其进行任何格式化的原因。所以无法在 Action Button 中换行。
替代解决方案:
我们已经使用子字符串连接更改了按钮的 MS Team 标题,此后特定字符将显示 "..."
,因此我们也可以通过这种方式解决此问题。
submitAction.Title = button.Length > 50 ? string.Concat(button.Substring(0, 50), "...") : button;
输出:
参考: