Panduan Langkah demi Langkah: Membuat Adaptive Card Pertama Anda di MS Teams

By Mirko Peters · 2026-08-12 · Updated 2026-08-29

Selamat datang kembali di blog! Jika Anda pernah merasa kewalahan dengan bunyi notifikasi obrolan, pesan saluran, dan peringatan otomatis yang terus-menerus masuk, Anda tentu tidak sendirian…

Automatically translated with AI from the original post. Read the English original

Titelbild: Step-by-Step Guide: Building Your First Adaptive Card in MS Teams

Selamat datang kembali di blog! Jika Anda pernah merasa kewalahan dengan bunyi notifikasi obrolan, pesan saluran, dan peringatan otomatis yang terus-menerus masuk, Anda tentu tidak sendirian. Pekerja digital masa kini menghadapi volume informasi yang luar biasa besar, sering kali menerima puluhan notifikasi setiap jamnya. Arus yang tak henti-hentinya ini memecah fokus, memaksa kita terus berpindah konteks, dan membuat kita merasa lelah secara mental pada akhir hari. Dalam episode podcast kami, Build Actionable Teams Notifications with Adaptive Cards, kami membahas bagaimana Anda dapat sepenuhnya mengubah pendekatan komunikasi dengan meninggalkan notifikasi statis yang tidak berguna dan menggantinya dengan pesan cerdas yang interaktif.

Hari ini, kita akan melanjutkan pembahasan tersebut dengan pendekatan langsung praktik. Panduan ini akan memandu Anda melalui proses pembuatan Adaptive Card pertama Anda untuk Microsoft Teams. Baik Anda ingin menyederhanakan persetujuan internal, menyiarkan peringatan insiden penting, maupun sekadar membuat alur kerja harian tim Anda lebih lancar, menguasai Adaptive Card adalah salah satu keterampilan dengan dampak terbesar yang dapat Anda kembangkan di ekosistem Microsoft 365. Mari langsung kita mulai dan lihat apa saja yang dibutuhkan untuk memulainya.

Memahami Dasarnya: Mengapa Notifikasi Tradisional Gagal

Sebelum kita mulai membangun sesuatu, ada baiknya memahami masalah inti yang ingin kita selesaikan. Sebagian besar notifikasi standar di Microsoft Teams memberi tahu Anda bahwa sesuatu telah terjadi, tetapi tidak memberi cara langsung untuk meresponsnya. Bayangkan Anda menerima notifikasi yang menyatakan bahwa sebuah pesanan pembelian baru memerlukan persetujuan Anda. Dengan notifikasi teks standar, Anda harus membaca notifikasi tersebut, membuka peramban web, masuk ke aplikasi line-of-business yang terpisah, membuka data yang dimaksud, dan akhirnya mengklik "Approve".

Rangkaian langkah yang panjang ini memecah konsentrasi dan menghabiskan waktu berharga. Kalikan gangguan tersebut enam puluh kali dalam sejam, dan produktivitas Anda akan lenyap. Adaptive Card mengatasi hal ini dengan menghadirkan antarmuka aplikasi langsung di dalam jendela obrolan. Anda dapat membaca data, mengisi input formulir, dan mengklik tombol aksi tanpa pernah meninggalkan klien Teams. Namun, untuk menerapkan kartu-kartu ini dengan sukses, Anda perlu memahami alat dan prasyarat dasar yang dibutuhkan untuk menghidupkannya.

Prasyarat dan Alat

Membangun Adaptive Card tidak memerlukan latar belakang pengembangan perangkat lunak yang mendalam, tetapi Anda perlu mengenal perangkat alat penulisan standar yang disediakan Microsoft. Memiliki utilitas yang tepat di tangan memastikan proses desain Anda berjalan lancar dari konsep hingga penerapan.

Sumber Daya Esensial untuk Perancang Kartu

Adaptive Card Designer: Area bermain visual berbasis peramban tempat Anda dapat menyeret dan melepas elemen, melihat pratinjau perangkat secara langsung, dan langsung menghasilkan skema JSON yang mendasarinya.
Microsoft Teams UI Kit (Figma): Sangat berharga untuk panduan desain, tema, standar aksesibilitas, dan ukuran responsif di berbagai aplikasi klien.
Pusat Dokumentasi Resmi: Panduan definitif Anda untuk memeriksa versi skema yang didukung, aksi kartu, dan batasan rendering khusus host di Teams.
Templat Contoh: Templat JSON siap pakai dari komunitas open-source yang memberi Anda titik awal untuk pola umum seperti persetujuan, jajak pendapat, dan peringatan media kaya.

Setelah lingkungan desain Anda siap, Anda sudah bisa mulai menyusun tata letak visual dan struktur data kartu Anda.

Membuat Adaptive Card

Membuat Adaptive Card pada dasarnya adalah latihan penyusunan tata letak dan struktur JSON. Karena Adaptive Card menggunakan skema yang tidak bergantung pada platform, satu definisi kartu dapat dirender secara native di klien Windows, macOS, iOS, Android, dan web.

Menggunakan Adaptive Card Designer

Cara termudah untuk membangun kartu pertama Anda adalah dengan menggunakan alat perancang berbasis web. Berikut alur kerja sederhana yang bisa Anda ikuti:

Buka Adaptive Card Designer resmi di peramban web Anda.
Pilih templat awal, misalnya notifikasi dasar atau formulir input, sebagai fondasi yang kokoh.
Seret dan lepaskan elemen visual seperti TextBlock, FactSet, gambar, dan ActionSet ke kanvas Anda.
Atur properti seperti ukuran font, jarak, dan judul tombol agar sesuai dengan gaya komunikasi organisasi Anda.
Ubah target pratinjau Anda ke "Microsoft Teams" untuk memastikan tampilan kartu bagi pengguna akhir Anda.
Salin kode JSON yang dihasilkan otomatis dari panel tampilan kode.

Memahami Dasar Struktur JSON

Setiap Adaptive Card pada dasarnya didukung oleh payload JSON terstruktur. Berikut contoh sederhana dan mudah dipahami untuk skema JSON Adaptive Card yang mendefinisikan sapaan dasar dan tombol aksi:

{
  "type": "AdaptiveCard",
  "version": "1.4",
  "body": [
    {
      "type": "TextBlock",
      "text": "Welcome to your first adaptive card!",
      "size": "Medium",
      "weight": "Bolder"
    }
  ],
  "actions": [
    {
      "type": "Action.Submit",
      "title": "Acknowledge"
    }
  ]
}

Dalam cuplikan ini, objek root menentukan jenis kartu dan versi skema. Array body berisi komponen visual seperti blok teks, sedangkan array actions mendefinisikan tombol interaktif—seperti Action.Submit atau Action.OpenUrl—yang memungkinkan pengguna memicu alur kerja di latar belakang.

Mengirim Kartu dengan Bot atau Graph API

Setelah payload JSON final dan teruji di designer, langkah berikutnya adalah mengirimkan kartu tersebut langsung kepada pengguna di dalam Microsoft Teams. Ada beberapa opsi penerapan yang andal, bergantung pada arsitektur teknis Anda.

Anda dapat memanfaatkan Power Automate untuk integrasi alur kerja low-code, atau menggunakan bot kustom dan Microsoft Graph API untuk mekanisme pengiriman tingkat enterprise yang lebih canggih. Menggunakan aplikasi Azure AD terdaftar bersama Bot Framework REST API memungkinkan Anda mengirim kartu interaktif ke pengguna tertentu atau saluran berprioritas tinggi secara otomatis.

Berikut contoh struktur payload saat membungkus Adaptive Card Anda di dalam lampiran pesan Bot Framework:

{
  "type": "message",
  "attachments": [
    {
      "contentType": "application/vnd.microsoft.card.adaptive",
      "content": {
        "type": "AdaptiveCard",
        "version": "1.4",
        "body": [
          {
            "type": "TextBlock",
            "text": "New Service Request Pending Review"
          }
        ],
        "actions": [
          {
            "type": "Action.Submit",
            "title": "Approve"
          },
          {
            "type": "Action.Submit",
            "title": "Reject"
          }
        ]
      }
    }
  ]
}

Dengan menghubungkan payload ini ke pemicu otomatis—seperti baris baru di daftar SharePoint atau eksekusi sistem yang gagal di Power Automate—Anda mengubah peringatan pasif menjadi permintaan keputusan yang aktif.

Menguji dan Men-debug Kartu

Penerapan harus selalu didahului dengan pengujian yang cermat. Karena klien yang berbeda (seperti aplikasi desktop Teams, aplikasi seluler, dan klien email Outlook) merender Adaptive Card melalui konfigurasi host yang berbeda-beda, kesalahan tata letak yang halus kadang bisa muncul.

Saat men-debug kartu Anda, perhatikan praktik terbaik berikut:

Validasi Versi Skema: Pastikan versi kartu Anda sesuai dengan kemampuan yang didukung oleh arsitektur klien Microsoft Teams saat ini.
Periksa Rendering Teks: Pastikan data variabel terisi dengan benar dan tidak menimbulkan ruang kosong jika sebuah field data kosong.
Uji di Berbagai Perangkat: Pratinjau kartu Anda pada ukuran layar ponsel yang sempit untuk memastikan tata letak kolom dan kumpulan tombol tersusun rapi tanpa pemotongan teks yang janggal.
Tangani Aksi Submit: Pastikan layanan backend Anda menangani payload JSON yang masuk dengan benar saat dipicu oleh tombol interaksi pengguna.

Kesimpulan

Mengubah pengalaman harian Anda di Microsoft Teams berarti mengurangi hambatan dan menyaring kebisingan digital. Dengan mengganti peringatan statis yang tidak berguna menjadi Adaptive Card yang dinamis dan interaktif, Anda dan tim dapat bertindak tegas tanpa terus-menerus berpindah konteks antaraplikasi yang terpisah. Hari ini kita telah membahas mekanisme dasar dalam merancang, menyusun, dan menerapkan kartu-kartu ini, tetapi ini baru permulaan dari apa yang bisa Anda capai.

Untuk mendalami strategi produktivitas dan mempelajari bagaimana alat modern dapat membentuk ulang ruang kerja digital Anda, dengarkan episode podcast pendamping, Build Actionable Teams Notifications with Adaptive Cards. Mulailah bereksperimen dengan kartu kustom Anda hari ini, sederhanakan alur kerja Anda, dan rebut kembali fokus mendalam Anda!