Bu öğrenme içeriğinde, Bir Fikrim Var! Web uygulaması kapsamında hazırladığımız Fikir Liste ekranı için oluşturduğumuz SQL aksiyonun veri bağlama işlemlerini gerçekleştireceğiz.
Hatırlayacağımız üzere ekranda yer alan filtreleme alanları için SQL aksiyonda ilgili koşul yapılarını kurgulamıştık. Oluşturduğumuz kurgu doğrultusunda ekranda yer alan ve filtrelemeye olanak sağlayan Text Inputlar ve Select Box’lar için de aksiyon bağlantılarını sağlamamız gerekecek.
Hazırsak başlayalım!
- Ilk olarak Bir fikrim var web uygulaması için hazırladığımız Fikir Liste ekranı açın.
- Ekran seçiliyken Properties panelinde yer alan Add Actiona tıklayın.
- 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.
- Ardından daha önce fikir ekleme ekranında Fikir Kategorisi seçimi için Selectbox’ta verileri listelemek için oluşturduğumuz aksiyonu ekleyin.
- Ekrana son olarak SQL aksiyonla oluşturduğumuz, filtreleme yapısına sahip aksiyonu Initial aksiyonu ekleyin.
- Şimdi hangi verinin hangi elementte gösterileceğine yönelik veri bağlama işlemlerini yapalım.
- Header’da yer alan Image elementini seçin.
- Properties Panelde yer alan Value alanında Symbol Picker aracılığıyla Action Results olarak dönen Personnel bilgilerini çektiğimiz aksiyon içerisinde yer alan Personnel Image’i seçin.
- Şimdi diğer alanlar olan FullName ve Title için de aynı işlemleri uygulayarak ilgili aksiyon sonuçlarını bağlayın.
Ekranda yer alan diğer elementler ile devam edelim.
- Kategorileri listeleyecek SelectBox elementini seçin.
- Properties panelde Options altında aksiyon olarak kategorileri listelemek için oluşturduğunuz aksiyonu seçin.
- Ardından Field to Display alanında CategoryName, Field to use as Key alanında ID seçimini yapın.
Şimdi ekrana Initial action olarak eklediğimiz ve filtrelemeye bağlı olarak fikirleri listeleyecek olan aksiyonun parametrelerini tanımlayalım.
- IdeaTitle parametresi için Symbol Picker aracılığıyla Components altında bulunan Title’i temsil eden Textinputu seçin.
- IdeaCategory için Symbol Picker>Components>SelectBox1 seçimini yapın.
- IdeaUser parametresi için Symbol Picker aracılığıyla Components altında bulunan kullanıcı aramayı temsil eden Textinputu seçin.
- Filtreleme kurgusunda ekrandaki inputlardaki değişime bağlı olarak listenin güncellenmesi için bu aksiyonu input elementlerin onChange Event’ine de ekleyin ve parametre tanımlamalarını sağlayın.
Fikirlerin listeleneceği GalleryView’e veri bağlama işlemlerini gerçekleştirelim.
- Item Tree aracılığıyla GalleryView elementini seçin.
- Gallery View’in Properties panelinde yer alan Datasource alanında fikirleri filtreleyerek listeleyecek aksiyonu seçin.
- Gallery View içerisinde yer alan her bir elementi seçerek Value alanında tanımlamaları sağlayın.
Dashboard ekranda oluşturduğumuz kurguya benzer şekilde Beğeni ikonuna tıklandığında beğeni sayısında gerçekleşecek artışı sağlayacak yapıyı oluşturalım.
- Beğeni işlemini sağlayacak ikonu seçin.
- Properties Paneli aracılığıyla ManagedDb altında bulunan Save Record aksiyonunu ekleyin.
- Insert seçimi yaparak IdeaLike tablosunu seçin.
- Tüm alanların seçimini yapın.
- Id parametresi için New Guid seçimi yapın.
- CreatedDate Parametresi için Default>Now
- IdeaId parametresi için Current kategorisi altında yer alan IdeaId seçimini yapın.
- PersonnelId parametresi için ekranda Initial Action olarak çalıştırdığımız, giriş yapmış kullanıcının bilgisini çeken aksiyon sonucunda dönen Id değerini tanımlayın.
- Sonraki işlem olarak beğeni sayısının güncellenmesi için Save Record aksiyonu ardına fikirleri filtreleyerek listeleyecek aksiyonu seçin.
- Parametre tanımlamalarını gerçekleştirin.
Beğeni kurgusuna benzer yapıda fikre yorum yapmaya yönelik yapıyı kurgulamanızı ve bağlamanızı bekliyoruz. Ayrıca yine benzer bir süreci yürüterek mobil uygulamada yer alan fikir liste ekranında veri bağlama işlemlerini yürütmenizi beklemekteyiz.
