Herkese merhaba,

Geçtiğimiz Eylül ayında Microsoft Teams‘de kullanmaya alışkın olduğumuz adaptive card‘ların Power Apps’de de geliştirileceği anons edilmişti. Bu yazımda da power apps üzerinden adaptive card oluşturmadan ve teams’de paylaşmayı basit bir örnek ile anlatacağım.

Adaptive cardları resim, metin, buton, text input gibi ögelerle çalışan mini uygulamlar olarak düşünebilirsiniz. Adaptive kartların en sık kullanıldığı yerler chatbotlar, uygulama içi mesajlaşmalar ve yaşadığı ortam genelde Microsoft Teams olarak karşımıza çıkıyor. Bu kartlar genelde JSON formatta tasarlanır-ki power apps’de de aşağıda gösterdiğim gibi JSON desteği var. JSON dışında başka programlama dilleri ile de kart geliştirilebilir tabi.

Şuan için adaptive card’larda veri saklama sadece Dataverse üzerinden destekleniyor. Bu sebeple veri kaynağı dataverse ile sınırlandırılmış.

Örneğim aşağıdaki gibi isim-soyisim ve yaş bilgilerini alan bir adaptive card oluşturmak üzerine olacak.

İsim-soyisim ve yaş bilgilerini alıp Dataverse’de oluşturacağım bir tablo üzerinde tutan bir adaptive kart dizayn etmek için önce Dataverse‘de yeni bir tablo yapıp name ve age sutunlarını oluşturuyorum. Dataverse’de custom tablo nasıl yapılır bilmiyorsanız linke göz atamanızı tavsiye ederim.

Gittiğim adres Power Apps> Tables > New Table

Kayıtları saklayacağım Dataverse tablomu ve kolonlarını oluşturduktan sonra sol menüden Cards‘ı seçiyorum ve +New Card ile karta isim verip açıklama kısmını dolduruyorum, Create ile studyoya giriyorum.

Canvas app‘e benzer bir arayüzle kartınızı oluşturabileceğiniz ögeler sol menüde yer alıyor.

Senaryoma göre isim-soyisim ve yaş bilgilerini alabileceğim “name” ve “age” adında iki adet text inputa ihtiyacım var. İsterseniz kontrolleri sürükle bırakla karta ekleyebilirsiniz.

Tab menüde yer alan JSON’ı tıkladığınızda gelen default kartın json formatını görüyorsunuz. İsterseniz burdan da body kısmını aşağıya bıraktığım kodu kopyalayarak editleyebilirsiniz. Ben sürükle bırak yerine json’la ilerledim.

 "body": [
          {
            "type": "TextBlock",
            "text": "Welcome",
            "size": "Large",
            "weight": "Bolder"
          },
          {
            "type": "Input.Text",
            "id": "name",
            "placeholder": "Enter your name and Surname",
            "label": "Name/Surname"
          },
          {
            "type": "Input.Number",
            "id": "age",
            "placeholder": "Enter your age",
            "label": "Age"
          }
        ],
        "actions": [
          {
            "type": "Action.Execute",
            "id": "button1",
            "title": "Submit",
            "associatedInputs": "auto",
            "verb": "onSelect_Button1"
          }
        ],

Aldığım inputları tabloya kaydetmek için bir buton ekledim. Bunu sürükle bırakla ekledim ama json tarafındaki değişikliğide ekliyorum.

"actions": [
          {
            "type": "Action.Execute",
            "id": "button1",
            "title": "Button1",
            "associatedInputs": "auto",
            "verb": "onSelect_Button1"
          }
        ]

Gelelim buton tıklandığında dataları saklayacağımız Dataverse tablosuyla bağlantı kurmaya. Data > +Add Data ile veri kaynağımı Dataverse’ü seçiyorum.

İlgili tablomu seçiyorum.

Butonun onselect eventine input ve datasource’u Collect fonksiyonu ile tanımlıyorum.

"verbs": {
        "submit": "echo",
        "onSelect_Button1": "Collect(AdaptiveCard_Tables, {Name2: name, Age2: age});"
      }

veya canvas app’den alışkın olduğumuz formula barda da yazabilirsiniz.

Save ile kaydettikten sonra play ile kartı test ediyorum.

“Dark” veya “Light” modda kartınızın nasıl görüneceğine bakabilirsiniz. Debug penceresinde ise kayda giden verilere bakabilirsiniz.

Kartın üç nokta menüsünden kartı temizleyebilir, kartı yenileyebilir ve kartla ilgili bilgi alabilirsiniz.

Dataverse’e kaydımızın atılıp atılmadığını kontrol edelim.

Son olarak teams‘de de görelim kartımızı.. Bunun için Send‘i kullanıyorum.

Linki kopyaladıktan sonra teamsde istediğiniz kanalda kullanabilirsiniz.

Teams’den aldığım verilerin de dataverse kaydedildiğini görüyorum.

Böylece power apps üzerinden teams için nasıl adaptive card oluşturulduğunu anlatmaya çalıştım, umarım faydalı olmuştur.