💡 在本文章你將學到：如何將利用 Adaptive 美化後的訊息利用 Teams 發出，同時將記錄回傳到 Teams
之前我們曾經學到如何利用 Adaptive Card 美化溝通訊息，現在我們嘗試利用他直接在 Teams 建立一個 forms 然後將資料存到 Excel 之後，再將紀錄結果回傳到 Teams
以上是本範例的事前準備，接下來我們就開始吧！
在這邊我們的觸發器是希望直接在 Teams Group 被觸發一個關鍵字，整個流程會啟動，因此我們要需選擇 When keywords are mentioned
,即可，如：”wup,yeee”，只要符合其中一個就會觸發加入 Post adaptive card and wait for a response，加入就能呼叫出 Adaptive Card 在目標群組上等待使用者填
這邊提供大家一個範例參考，如果想要調整，請將 Code 複製到 Adaptive Card Designer 微調
請考慮到相容性問題，將以下設定完成
Select host app: Microsoft Teams
Target Version: 1.5 ( 1.6 會在 Teams 出現錯誤)
{
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.5",
"$data": {
"varCustomer": "其他"
},
"actions": [
{
"type": "Action.Submit",
"title": "送出",
"id": "submit"
}
],
"body": [
{
"type": "TextBlock",
"text": "寶寶購買意向書",
"wrap": true,
"id": "title",
"spacing": "None",
"horizontalAlignment": "Center",
"fontType": "Default",
"size": "ExtraLarge",
"weight": "Bolder",
"color": "Accent",
"isSubtle": true
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "Input.Text",
"id": "machine_no",
"label": "機型編號",
"placeholder": "請依此格式: UID-444",
"isRequired": true,
"errorMessage": "請記得填寫本欄位!"
}
]
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "Input.ChoiceSet",
"choices": [
{
"title": "AA",
"value": "AA"
},
{
"title": "QWE",
"value": "QWE"
},
{
"title": "其他",
"value": "其他"
}
],
"placeholder": "若選其他，再填右側",
"label": "客戶清單",
"isRequired": true,
"wrap": true,
"separator": true,
"errorMessage": "請選擇",
"id": "customer"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "Input.Text",
"placeholder": "請輸入廠商名稱",
"label": "自填客戶(選填)",
"id": "customer_other"
}
]
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "Input.ChoiceSet",
"choices": [
{
"title": "1",
"value": "1"
},
{
"title": "2",
"value": "2"
},
{
"title": "3",
"value": "3"
}
],
"placeholder": "數量",
"label": "數量",
"id": "quantity",
"isRequired": true,
"errorMessage": "請記得填寫本欄位!"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "Input.ChoiceSet",
"choices": [
{
"title": "220V/60HZ",
"value": "220V/60HZ"
},
{
"title": "380V/50HZ",
"value": "380V/50HZ"
}
],
"label": "電壓",
"placeholder": "請下拉選單",
"id": "voltage",
"isRequired": true,
"value": "380V/50HZ",
"errorMessage": "請記得填寫本欄位!"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "Input.ChoiceSet",
"choices": [
{
"title": "Yes",
"value": "Yes"
},
{
"title": "No",
"value": "No"
}
],
"id": "New Design",
"label": "新美學",
"value": "Yes",
"isRequired": true,
"errorMessage": "請記得填寫本欄位!"
}
]
}
]
},
{
"type": "Input.Text",
"placeholder": "Placeholder text",
"label": "外觀顏色",
"id": "colors",
"value": "天空色",
"isRequired": true,
"errorMessage": "請記得填寫本欄位!"
},
{
"type": "Input.Date",
"label": "客戶期待交期",
"id": "expect_date",
"isRequired": true,
"errorMessage": "請記得填寫本欄位!"
},
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"wrap": true,
"text": "請確認以下事項後，勾選「我已確認」。"
},
{
"type": "TextBlock",
"text": "1. 天空色很讚?\n2. 特殊客戶指定?\n3. 寶寶認證?\n4. 尿布廠牌指定?",
"wrap": true
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "Input.Toggle",
"id": "check_box",
"title": "我已確認",
"isRequired": true,
"errorMessage": "請記得填寫本欄位!"
}
]
}
]
}
]
},
{
"type": "Input.Text",
"label": "備註",
"placeholder": "不可輸入< > 此類符號",
"id": "note"
}
]
}
iThome鐵人賽
看影片追技術