Dashboard Ekranına Veri Bağlama

Bu öğrenme içeriğinde Bir Fikrim Var Web uygulamasının Dashboard ekranında, önceki öğrenme içeriklerinde oluşturduğumuz aksiyonları kullanarak veri bağlama işlemlerini gerçekleştireceğiz.

Veri bağlama işlemlerini gerçekleştirmek için ekranı incelediğimizde ekranın her açılışında giriş yapmış kullanıcının bilgilerinin görüntülenmesi için giriş yapmış personel bilgilerini çeken aksiyonu Initial Action olarak ekleyip ilgili alanlara veri bağlantısı sağlamamız gerektiğini yorumlayabiliyoruz.

Ardından ekran her açıldığında uygulamadaki toplam fikir sayısını ve giriş yapmış kullanıcının toplam fikir sayısını gösteren kart yapısı için fikir sayılarını çeken iki farklı aksiyonu Initial aksiyon olarak eklemek ve önceden sabit değer verdiğimiz sayı alanlarına veri bağlantısı sağlamak gerekmektedir.

Son olarak son fikirlerin listelendiği alanda yine ekran her açıldığında son eklenen fikir listesini göstermek için oluşturmuş olduğumuz aksiyonu ekrana Initial Action olarak eklemeliyiz ve ardında ekranda ilgili alanlar için veri bağlama işlemlerini gerçekleştirmeliyiz.

1. Ilk olarak Bir fikrim var web uygulaması için hazırladığımız Dashboard ekranı açın.
2. Ekran seçiliyken Properties panelinde yer alan Add Actiona tıklayın.
3. Açılan menüde Initial Action’a tıklayın ve Custom kategorisi altında ilk olarak Header’da kullanmak için oluşturduğumuz aksiyonu ekleyin.
4. Ardından yine aynı adımları uygulayarak Toplam fikir sayısı, kullanıcı fikir sayısı ve fikir listeleme aksiyonlarını ekrana Initial aksiyon olarak ekleyin.

Bu işlemlerle ekran her açıldığında kullanmak istediğimiz verileri, veri kaynağından çekmeyi sağladık. Şimdi hangi verinin hangi elementte gösterileceğine yönelik veri bağlama işlemlerini yapalım.

5. Header’da yer alan ve giriş yapmış personelin görselini gösteren Image elementini seçin.
6. Properties Panelde yer alan Value alanında Symbol Picker’a tıklayın.
7. Action Results’da Personnel bilgilerini çektiğimiz aksiyon içerisinde yer alan Personnel Image’i seçin.
8. Şimdi diğer alanlar olan FullName ve Title için de aynı işlemleri uygulayarak ilgili aksiyon sonuçlarını bağlayın. İsterseniz ilgili alanlar için Placeholder yani yer tutucu metin ekleyebilirsiniz.

Kartlarda yer alan fikir sayıları için veri bağlama işlemlerini yapalım.

9. Tüm fikirlerin toplam sayısının yazdığı Label’i seçin Properties panelde Value alanında Symbol Picker aracılığıyla toplam fikir aksiyonunun sonucunda dönen sayıyı bağlayın.
10. Benzer işlem adımlarını gerçekleştirerek giriş yapmış kullanıcının toplam fikir sayısının yer aldığı Label’i seçin ve yine Value alanında Symbol Picker aracılığıyla Kullanıcı fikir sayısı aksiyonunun sonucunda dönen sayıyı bağlayın.

Bu işlemlerle birlikte Header ve kart yapısında yer alan veri bağlama işlemlerini gerçekleştirdik.

Şimdi son eklenen fikirlerin listelendiği Gallery View yapısı ile devam edelim.

11. Item Tree aracılığıyla GalleryView elementini seçin.
12. Gallery View’in Properties panelinde yer alan Datasource alanında son eklenen fikirlerin listelenmesi için oluşturduğunuz ve ekrana Initial Action olarak eklediğiniz aksiyonu seçin.
13. Ardından fikri oluşturan personel görseline veri bağlamak için GalleryView içerisinde yer alan Personel görselini seçin.
14. Properties panelde Value alanında Field to Display altında PersonnelImage seçimini yapın.
15. Benzer işlemleri GalleryView’de yer alan diğer tüm elementler için tek tek uygulayın.
16. Fikirlerin sahip olduğu beğeni, yorum ve diğer destekleyen bilgilerini Builder 2 kursunda detaylı inceleyeceğiz.

Tüm elementler için veri bağlama işlemlerini gerçekleştirdikten sonra Dashboard ekranınız artık kullanıma hazır.

Benzer işlemleri gerçekleştirerek Web uygulamasında yer alan fikir liste ekranını, Mobil uygulamada yer alan Dashboard ekranını hazırlayabilirsiniz.