检查自适应卡中是否填写了输入表单

时间:2017-11-16 13:43:43

标签: node.js botframework adaptive-cards

您可以在自适应卡中使用输入表单。 但是,如何在不进一步进入下一个对话框的情况下检查字段是否已填写。因此,在我单击提交按钮后,它应检查字段是否已填写。

代码:nodejs

示例:http://adaptivecards.io/samples/InputForm.html

2 个答案:

答案 0 :(得分:1)

您可以在bot应用程序中验证输入并控制对话框水满。 E.G。

var bot = new builder.UniversalBot(connector, [(session,args,next) => {

    if (session.message && session.message.value) {
        // A Card's Submit Action obj was received
        if (processSubmitAction(session, session.message.value)) {
            next(session.message.value)
        }
        return;

    } 
        // Display Welcome card with Hotels and Flights search options
        var card = {
            'contentType': 'application/vnd.microsoft.card.adaptive',
            'content': {
                "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
                "type": "AdaptiveCard",
                "version": "1.0",
                "body": [{
                    "type": "ColumnSet",
                    "columns": [{
                            "type": "Column",
                            "width": 2,
                            "items": [{
                                    "type": "TextBlock",
                                    "text": "Tell us about yourself",
                                    "weight": "bolder",
                                    "size": "medium"
                                },
                                {
                                    "type": "TextBlock",
                                    "text": "We just need a few more details to get you booked for the trip of a lifetime!",
                                    "isSubtle": true,
                                    "wrap": true
                                },
                                {
                                    "type": "TextBlock",
                                    "text": "Don't worry, we'll never share or sell your information.",
                                    "isSubtle": true,
                                    "wrap": true,
                                    "size": "small"
                                },
                                {
                                    "type": "TextBlock",
                                    "text": "Your name",
                                    "wrap": true
                                },
                                {
                                    "type": "Input.Text",
                                    "id": "myName",
                                    "placeholder": "Last, First"
                                },
                                {
                                    "type": "TextBlock",
                                    "text": "Your email",
                                    "value": "somevalue",
                                    "wrap": true
                                },
                                {
                                    "type": "Input.Text",
                                    "id": "myEmail",
                                    "placeholder": "youremail@example.com",
                                    "style": "email"
                                },
                                {
                                    "type": "TextBlock",
                                    "text": "Phone Number"
                                },
                                {
                                    "type": "Input.Text",
                                    "id": "myTel",
                                    "placeholder": "xxx.xxx.xxxx",
                                    "style": "tel"
                                }
                            ]
                        },
                        {
                            "type": "Column",
                            "width": 1,
                            "items": [{
                                "type": "Image",
                                "url": "https://upload.wikimedia.org/wikipedia/commons/b/b2/Diver_Silhouette%2C_Great_Barrier_Reef.jpg",
                                "size": "auto"
                            }]
                        }
                    ]
                }],
                "actions": [{
                    "type": "Action.Submit",
                    "title": "Submit"
                }]
            }
        };


        var msg = new builder.Message(session)
            .addAttachment(card);
        session.send(msg);


}, (session, results) => {
    session.send(JSON.stringify(results))
}]);

function processSubmitAction(session, value) {
    var defaultErrorMessage = 'Please complete all the search parameters';
    if (!value.myName) {
        session.send(defaultErrorMessage);
        return false;
    } else {
        return true;
    }
}
希望能有所帮助。

答案 1 :(得分:0)

自适应卡没有客户端验证,因此您必须从机器人服务中检索值并在服务器上进行验证。如果这些字段没有按照您的预期存档,那么您可以将响应发送给用户,并提供他们应该填写的内容。看看这个机器人看一个例子,在对话框中执行一些步骤,何时提示输入,发送空白响应,机器人将回复一条友好消息,要求您填写字段。

http://contososcubabot.azurewebsites.net/

源代码:https://github.com/matthidinger/ContosoScubaBot