ส่ง Adaptive Card เข้า Microsoft Teams ด้วย Incoming Webhook

จากตอนที่แล้วในเรื่อง Adaptive Card เราได้เห็นประโยชน์ของมันแล้วว่าเพิ่มความสามารถใน Microsoft Teams ได้หลากหลาย ซึ่งเราสามารถใช้วิธียิง Adaptive Card เข้ามาได้หลายวิธีเช่นการใช้ Power Automate Action

นอกจากนี้เรายังสามารถยิง notification จากข้างนอกเข้า Microsoft Teams ได้โดยการใช้ connector ชื่อ Incoming Webhook ยิงมาจาก source ข้างนอกได้

ใช้ Adaptive Card เพื่อยิง input แล้วรับ Output จาก user ออกมาโดยใช้ Power Automate

ขั้นตอน

คลิกขวา หรือ … ที่ Channel บน team ที่เราต้องการแล้วเลือก Connector จากนั้น Add ตัว Incoming Webhook

Role ของเราควรจะเป็น Owner ใน team นั้นเพื่อจะได้ setup ได้

Connectors บน Channel ที่ต้องการ

เลือก Incoming Webhook

ตั้งชื่อแนบรูปไอคอนให้เรียบร้อยแล้วคลิก create จะได้ URL มา

Copy URL ของ Webhook มา

จะมีคล้าย Bot เข้ามาบอกว่าได้มีการสร้าง Webhook เข้ามาที่ Channel

จากนั้นทดลองยิง POST (โดยใช้ tools เช่น Postman) ไปที่ URL นั้นโดยใส่ text ลงไป ซึ่งผลคือมี message เข้าไปที่ channel นั้น

ทดลองยิง POST จาก Postman โดยมี text input

Message เข้าไปที่ channel สำเร็จ

จากนั้นเราก็สามารถส่งเป็น adaptive card เข้าไปได้เช่นกัน ให้เราไปลอง design ตัว Adaptive card จากที่ https://adaptivecards.io/designer/ ทดลองใส่รูป (โดยใส่ URL ของรูป) หรือ input ได้ซึ่ง Target version ใช้ 1.2 ที่ compatible กับ Microsoft Teams

สามารถสร้าง Adaptive Card แล้ว copy code ได้ที่มุมซ้ายล่าง

จากนั้นทำการ copy code ลงไปที่ Postman แล้วลองยิง POST ดู ซึ่งเรานำส่วนนี้ไป ประยุกต์เข้ากับการยิง Adaptive Card เพื่อให้คนใน Team ใส่ input ก็ได้แล้วเก็บค่าออกมา

ใส่โครงเข้ามาก่อน

Copy JSON ออกมา

Paste JSON ลงไปแล้ว Send

Adaptive Card ได้เข้ามาที่ Channel สำเร็จ

การจัดสารเปลี่ยนหรือลบข้อมูลก็ทำได้โดยไปที่ Manage team แล้วก็ App ถ้าอยากลบทิ้งก็คลิกไอคอนถังขยะ ในหน้านี้สามารถสร้าง webhook ขาออกได้

สามารถคลิกไอคอน ถังขยะเพื่อลบได้

Outgoing webhook

สร้าง Outgoing webhook

ถ้าอยากไป edit ให้ไปที่ tab connector เหมือนเดิมตามขั้นตอนแรก

Configure webhook

คราวหน้ามีเวลาจะมาว่ากันต่อครับในส่วนนี้ว่าเราสามารถทำไรได้อีก