把手模板中的自适应卡输入

时间:2018-06-25 14:54:21

标签: javascript html handlebars.js adaptive-cards botkit

基本上,我正在尝试修改botkit webchat以使用自适应卡,因为使用javascript SDK文档在html平面视图中支持自适应卡,我能够在html平面中做到这一点,但如果使用botkit,即我能够渲染卡片的把手,但是卡片上的按钮不起作用,我无法检查是否有问题,因为我对把手很陌生,

if(message.is_card && message.text){
      var card = {
        "$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",
                    "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 adaptiveCard = new AdaptiveCards.AdaptiveCard();
      adaptiveCard.hostConfig = new AdaptiveCards.HostConfig({
        fontFamily: "Segoe UI, Helvetica Neue, sans-serif"
        // More host config options
      });
      adaptiveCard.onExecuteAction = function(action) { 
        console.log(action.data);
        alert(action.data);
       }

       adaptiveCard.parse(card);
       var renderedCard = adaptiveCard.render();
        console.log(renderedCard);
        message.html = renderedCard.outerHTML;
    }

我在renderMessage函数中添加到client.js的上述代码段中,我正在渲染卡片,但是按钮无法正常工作,请有人告诉我可能是什么问题,我很高兴在需要时提供更多说明/代码。

0 个答案:

没有答案