簡體   English   中英

如何使用情境文本值創建自適應卡?

[英]How to create adaptive cards with situational text values?

我正在嘗試在瀑布對話框中為我的一個機器人創建一個自適應卡片,它將在渲染時顯示名稱和搜索項目(兩個字符串)。 我想要使​​用的兩個值都存儲在我的對話框的Context.Activity.Value屬性中,所以我需要知道的是如何在創建過程中的某些時刻將這些值插入到我的自適應卡中,以便“文本”文本塊的值可以包含我的值。

我已經研究過在自適應卡架構中使用空JSON對象,我可以在自適應卡的創建過程中以某種方式填充,但是還沒有弄清楚如何插入所述值。 我是C#和Bot Framework的初學者,所以我不知道該嘗試什么。

以下是我的瀑布對話框中自適應卡的步驟:

private async Task<DialogTurnResult> AdaptiveCardTest(WaterfallStepContext stepContext, 
CancellationToken cancellationToken)
        {
            var introCard = File.ReadAllText("./Content/AdaptiveCardTest.json");

            var card = AdaptiveCard.FromJson(introCard).Card;
            var attachment = new Attachment(AdaptiveCard.ContentType, content: card);

            var response = MessageFactory.Attachment(attachment, ssml: card.Speak, 
            inputHint: InputHints.AcceptingInput);

            await stepContext.Context.SendActivityAsync(response);

            return await stepContext.NextAsync();
        }

AdaptiveCardTest.json是自適應卡的json文件。 目前它只有一個圖像彈出窗口,其中包含一些文本,其中包含占位符,我想要用戶名和搜索項。 占位符鏈接存在,因為實際鏈接非常長。

{
    "type": "AdaptiveCard",
    "id": "NewUserGreeting",
    "backgroundImage": "image_url_placeholder"
    "body": [
        {
            "type": "Container",
            "items": [
                {
                    "type": "Image",
                    "url": "image_url_placeholder_2"",
                    "size": "Stretch"
                }
            ]
        },


        {
            "type": "Container",
            "spacing": "None",
            "backgroundImage": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAXCAIAAACAiijJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAqSURBVDhPY1RgL2SgDDBBaQrAqBEIMGoEAowagQCjRiDAqBEIQLERDAwAIisAxhgAwtEAAAAASUVORK5CYII=",
            "items": [
                {
                    "type": "TextBlock",
                    "id": "title",
                    "spacing": "Medium",
                    "size": "Large",
                    "weight": "Bolder",
                    "color": "Light",
                    "text": "Hi, I'm **your** Virtual Assistant",
                    "wrap": true
                },
                {
                    "type": "TextBlock",
                    "id": "body",
                    "size": "Medium",
                    "color": "Light",
                    "text": "The user {{Name}} would like to know more about {{SearchItem}}.",
                    "wrap": true
                }
            ]
        }
    ],

}

非常感謝任何幫助,謝謝!

這是我過去使用Handlebars所做的事情,這是一種用模型中的屬性替換自適應卡JSON中的標記的好方法。 只需確保自適應卡JSON中的標記與模型屬性匹配

看看他們的網站了解更多細節,但這只是一個例子:

Handlebars.Compile(<Adaptive card template>);

把手可作為Nuget包提供,您可以將其添加到項目中。

對於你的簡單場景,我會選擇@MikeP的建議。 將來,如果您想在模板不夠的情況下執行更復雜的操作,則可以在安裝 AdaptiveCard NuGet軟件包后使用.NET SDK動態構建自適應卡。

.NET SDK上的文檔非常有限,但AdaptiveCard對象的屬性通常與其JSON對應項一致。

一個例子是:

const string ISO8601Format = "yyyy-MM-dd";
string text = "dynamic-text-here;

DateTime today = DateTime.Today;
string todayAsIso = today.ToString(ISO8601Format);

// Create card
AdaptiveCard adaptiveCard = new AdaptiveCard("1.0")
{
    Body =
    {
        new AdaptiveContainer
        {
            Items =
            {
                new AdaptiveTextBlock
                {
                    Text = question,
                    Wrap = true
                },
                new AdaptiveDateInput
                {
                    // This Id matches the property in DialogValueDto so it will automatically be set
                    Id = "UserInput",
                    Value = todayAsIso,
                    Min = today.AddDays(-7).ToString(ISO8601Format),
                    Max = todayAsIso,
                    Placeholder = todayAsIso
                }
            }
        }
    },
    Actions = new List<AdaptiveAction>
    {
        new AdaptiveSubmitAction
        {
            // Data can be an object but this will require the value provided for the 
            // Content property to be serialised it to a string
            // as per this answer https://stackoverflow.com/a/56297792/5209435
            // See the attachment block below for how this is handled
            Data = "your-submit-data",
            Title = "Confirm",
            Type = "Action.Submit"
        }
    }
};

// Create message attachment
Attachment attachment = new Attachment
{
    ContentType = AdaptiveCard.ContentType,
    // Trick to get Adapative Cards to work with prompts as per https://github.com/Microsoft/botbuilder-dotnet/issues/614#issuecomment-443549810
    Content = JsonConvert.DeserializeObject(JsonConvert.SerializeObject(adaptiveCard))
};

cardActivity.Attachments.Add(attachment);

// Send the message
context.SendActivityAsync(cardActivity);

因為ItemsActions是集合,所以您可以在代碼中使用條件邏輯在運行時根據某些條件構建這些集合,然后將構建集合傳遞給ItemsActions ,這將比使用替換占位符的JSON模板更靈活在已知位置的令牌。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM