PROJE EKRANLARINI GELİŞTİRME

Form Ekranına Veri Bağlama

Bu öğrenme içeriğinde, önceki öğrenme içeriklerinde Save Record aksiyonu eklediğimiz Bir Fikrim Var web uygulaması yeni fikir oluşturma ekranında veri bağlama işlemlerini gerçekleştireceğiz.

Bu öğrenme içeriğinde, önceki öğrenme içeriklerinde Save Record aksiyonu eklediğimiz Bir fikrim var web uygulaması yeni fikir oluşturma ekranında veri bağlama işlemlerini gerçekleştireceğiz.

  1. Bir fikrim var web uygulamasında yer alan yeni fikir ekleme ekranını açın.

Ekranda yer alan Suggestion Kategorisini seçmeye olanak sağlayan SelectBox için tüm kategorileri çekmeye olanak sağlayan bir select aksiyonuna ihtiyaç duyulmaktadır

  1. Custom Action panelini açın.
  2. + ikonuna tıklayın Add SQL action seçeneğini seçin.
  3. Açılan editörde solda yer alan tablolar içinde IDeaCategory tablosunu bulun ve yanında çıkan 3 nokta aracılığıyla Select aksiyonu seçin, isimlendirin ve Create butonuna tıklayın.
  4. Form ekranında Initial Action olarak oluşturmuş olduğunuz aksiyonu ekleyin.
  5. Kategorileri listeleyecek SelectBox elementini seçin.
  6. Properties panelde Options altında aksiyon olarak kategorileri listelemek için oluşturduğunuz aksiyonu seçin.
  7. Ardından Field to Display alanında CategoryName, Field to use as Key alanında ID seçimini yapın.

Builder 1 Eğitimi Kapsamında tek görsel yüklemeye olanak sağlayan kurgu üzerinden görsel yükleme işlemlerini yürütelim.

  1. GalleyView içerisinde yer alan görseli GalleryView dışına sürükleyin.
  2. GalleryView’in bulunduğu Row’u silin.
  3. Image elementini bulunduğu kolon içinde ortalayın.
  4. Add butonunu seçin.
  5. PhotoFromGallery aksiyonunu ekleyin.
  6. Ardından SetValueOf aksiyonunu ekleyin.
  7. Image elementini seçin.
  8. Symbol Picker aracılığıla PhotoFromGallery aksiyonundan dönen sonucu bağlayın.

Create butonuyla devam edelim. Butonu seçin.

  1. İlk olarak daha önce Dashboard ekranda Header’da kullanıcı bilgilerini göstermek için oluşturduğumuz aksiyonu bu butona ekleyelim. Bunu yapma sebebimiz fikir ekleyecek kullanıcı bilgilerini çekmek. 
  2. Ardından eklediğiniz bu aksiyonu daha önce eklediğimiz SaveRecord aksiyonunun üstüne sürükleyip bırakın.
  3. ID parametresi için New GuID seçimini yapın.
  4. IDeaCategory için Symbol Picker>Components>SelectBox1 seçimini yapın.
  5. IDeaDescription parametresi için Symbol Picker aracılığıyla Components altında bulunan Description’u temsil eden Textinputu seçin.
  6. IDeaHolder parametresi için Symbol Picker>Action Results> SelectUserData>PersonnelID seçimini yapın.
  7. IDeaImage için Symbol Picker>Components>Image1 seçimini yapın.
  8. IDeaTitle parametresi için Symbol Picker aracılığıyla Components altında bulunan Title’i temsil eden Textinputu seçin.
  9. CreatedDate için  Symbol Picker>Defaults>Now seçimini yapın.
  10. Save Record aksiyonu ile işimiz bu kadar. Şimdi Save Record aksiyonunun sonrasına bir GoBack aksiyonu ekleyin. Bu aksiyon aracılığıyla kayıt yapıldıktan sonra bir önceki ekrana dönüş sağlanacaktır.

Bu işlemlerle birlikte form ekranında veri bağlama işlemlerini gerçekleştirdik. Benzer bir süreci yürüterek mobil uygulamadaki yeni bir fikir oluşturma ekranında veri bağlama işlemlerini yürütmenizi bekliyoruz.

Bu öğrenme içeriğinde, önceki öğrenme içeriklerinde Save Record aksiyonu eklediğimiz Bir Fikrim Var web uygulaması yeni fikir oluşturma ekranında veri bağlama işlemlerini gerçekleştireceğiz.

Bu öğrenme içeriğinde, önceki öğrenme içeriklerinde Save Record aksiyonu eklediğimiz Bir fikrim var web uygulaması yeni fikir oluşturma ekranında veri bağlama işlemlerini gerçekleştireceğiz.

  1. Bir fikrim var web uygulamasında yer alan yeni fikir ekleme ekranını açın.

Ekranda yer alan Suggestion Kategorisini seçmeye olanak sağlayan SelectBox için tüm kategorileri çekmeye olanak sağlayan bir select aksiyonuna ihtiyaç duyulmaktadır

  1. Custom Action panelini açın.
  2. + ikonuna tıklayın Add SQL action seçeneğini seçin.
  3. Açılan editörde solda yer alan tablolar içinde IDeaCategory tablosunu bulun ve yanında çıkan 3 nokta aracılığıyla Select aksiyonu seçin, isimlendirin ve Create butonuna tıklayın.
  4. Form ekranında Initial Action olarak oluşturmuş olduğunuz aksiyonu ekleyin.
  5. Kategorileri listeleyecek SelectBox elementini seçin.
  6. Properties panelde Options altında aksiyon olarak kategorileri listelemek için oluşturduğunuz aksiyonu seçin.
  7. Ardından Field to Display alanında CategoryName, Field to use as Key alanında ID seçimini yapın.

Builder 1 Eğitimi Kapsamında tek görsel yüklemeye olanak sağlayan kurgu üzerinden görsel yükleme işlemlerini yürütelim.

  1. GalleyView içerisinde yer alan görseli GalleryView dışına sürükleyin.
  2. GalleryView’in bulunduğu Row’u silin.
  3. Image elementini bulunduğu kolon içinde ortalayın.
  4. Add butonunu seçin.
  5. PhotoFromGallery aksiyonunu ekleyin.
  6. Ardından SetValueOf aksiyonunu ekleyin.
  7. Image elementini seçin.
  8. Symbol Picker aracılığıla PhotoFromGallery aksiyonundan dönen sonucu bağlayın.

Create butonuyla devam edelim. Butonu seçin.

  1. İlk olarak daha önce Dashboard ekranda Header’da kullanıcı bilgilerini göstermek için oluşturduğumuz aksiyonu bu butona ekleyelim. Bunu yapma sebebimiz fikir ekleyecek kullanıcı bilgilerini çekmek. 
  2. Ardından eklediğiniz bu aksiyonu daha önce eklediğimiz SaveRecord aksiyonunun üstüne sürükleyip bırakın.
  3. ID parametresi için New GuID seçimini yapın.
  4. IDeaCategory için Symbol Picker>Components>SelectBox1 seçimini yapın.
  5. IDeaDescription parametresi için Symbol Picker aracılığıyla Components altında bulunan Description’u temsil eden Textinputu seçin.
  6. IDeaHolder parametresi için Symbol Picker>Action Results> SelectUserData>PersonnelID seçimini yapın.
  7. IDeaImage için Symbol Picker>Components>Image1 seçimini yapın.
  8. IDeaTitle parametresi için Symbol Picker aracılığıyla Components altında bulunan Title’i temsil eden Textinputu seçin.
  9. CreatedDate için  Symbol Picker>Defaults>Now seçimini yapın.
  10. Save Record aksiyonu ile işimiz bu kadar. Şimdi Save Record aksiyonunun sonrasına bir GoBack aksiyonu ekleyin. Bu aksiyon aracılığıyla kayıt yapıldıktan sonra bir önceki ekrana dönüş sağlanacaktır.

Bu işlemlerle birlikte form ekranında veri bağlama işlemlerini gerçekleştirdik. Benzer bir süreci yürüterek mobil uygulamadaki yeni bir fikir oluşturma ekranında veri bağlama işlemlerini yürütmenizi bekliyoruz.

Dosyalar

Yardımcı kaynaklar

Sözlük