line bot 的新功能範例code

Line 於今天發表了 Messaging API 的新功能：[Messaging API] New template message features released

其中包含了一個新的 template:image_carousel，以及一個新的 postback:datetimepicker

image_carousel 可以讓你一次傳最多五張圖以橫向捲動方式瀏覽

datetimepicker 可以在按下按鈕時彈出日期時間選擇器

iOS line 7.9 版本以上才能使用 datetimepicker

android line 7.12 版本以上才能使用 datetimepicker

結合這兩個新功能的範例 message json 如下:

{
  "type": "template",
  "altText": "this is a image carousel template",
  "template": {
      "type": "image_carousel",
      "columns": [
          {
            "imageUrl": "https://www.petfinder.com/wp-content/uploads/2012/11/91615172-find-a-lump-on-cats-skin-632x475.jpg",
            "action": {
              "type": "datetimepicker",
              "label": "選日期",
              "data": "q1",
              "mode": "date"
            }
          },
          {
            "imageUrl": "https://www.cats.org.uk/uploads/images/featurebox_sidebar_kids/grief-and-loss.jpg",
            "action": {
              "type": "datetimepicker",
              "label": "選時間",
              "data": "q2",
              "mode": "time"
            }
          },
          {
            "imageUrl": "https://static.pexels.com/photos/126407/pexels-photo-126407.jpeg",
            "action": {
              "type": "datetimepicker",
              "label": "選日期時間",
              "data": "q3",
              "mode": "datetime"
            }
          }
      ]
  }
}

他的點擊範圍是整張圖

點第一張圖：

點第二張圖：

點第三張圖：

datetime picker 的三種傳回結果：