2- PowerApps – Nesneleri kullanarak ekranınızı tasarlayın!

Buradaki bir önceki makalede PowerApps çalışma ortamları olan Environments ve PowerApps’in App türlerini tanıdık. Şimdi İçerisinde neredeyse hiç kod olmayan, toplamda en fazla 2 saat içerisinde bitirebileceğiniz, bittiğinde şirket içerisindeki ilgili kişilerle anında paylaşabileceğiniz; IOS, Android farketmeksizin marketten PowerApps’i indiren tüm mobil cihazlarda, tabletlerde ve masaüstü bilgisayarlarda kullanabilecek bir kayıt uygulamasını yapmaya başlayalım. make.powerapps.com internet adresine, kullanıcı adımızla giriş yapıyoruz. Sıfırdan bir uygulama tasarlayacağımız için “Canvas from blank” seçeneğini seçiyoruz.

Uygulamamıza bir isim veriyoruz. Bu isim daha sonradan da değiştirilebilir. Format bölümünde uygulamamızın hangi formda daha iyi bir görünüm kazanmasını istiyorsak onu seçiyoruz. Karar verirken, son kullanıcılarınızın uygulamayı ağırlıklı olarak nerede açacağını düşünebilirsiniz.

Bu uygulamada hazır formları kullanmak yerine sonsuz müdahale edebileceğiniz şekilde her özelliği tek tek ekleyeceğiz. Böylece hazır formların kaydet vb. komutlarındaki kalıp sıkıntılarından kurtulup, kaydederken verilerde format,düzen vb. istediğimiz şekilde değişiklik yapabiliriz.

Son kullanıcıdan aşağıdaki bilgileri alacağız. Bunun için Ad Soyad gibi etiket kısımlarının her biri için Label, veri girişi yapılacak kısımların her biri için Text Input alanı ekledim.

Bir de Şehir, Semt gibi açılır liste olabilecek alanlar için Input alanından Dropdown ekleyebiliriz. Ekleyebileceğiniz diğer seçenekler listede görüldüğü gibi, Tarih seçici için Date picker, kalem kullanarak imza vb. almak için Pen Input ya da Check box vb. olabilir.

Bu örnekte Şehir için drop down ekledikten sonra, drop down’un içinde görülecek değerleri ayarlayalım. Drop down gibi, içerisinde birden fazla veri listelenecek olan nesnelerin “Items” özelliğine verileri tanımlarız. Eğer listemiz çok uzunsa ve önceden veritabanı olarak eklediğimiz bir tabloda varsa direkt o tablonun adını yazabiliriz. Böyle bir tablomuz yoksa manuel olarak bu şekilde [“istanbul”, “Ankara”] öğeleri ekleyebiliriz. (ilerleyen bölümlerde veritabanı eklemeyi göreceğiz)

Çok eskiden uygulamanın davranışını görmek için uygulamayı çalıştırmak zorundaydık. Şimdi uygulamayı çalıştırmaya gerek kalmadan, komutlara Alt tuşu ile birlikte basarak çalışmış hallerini görebiliryoruz. Burada da Alt tuşu ile beraber Drop down’un ok işaretine tıklarsak uygulama çalışırken nasıl görüneceğini görmüş oluruz.

Şimdi iyi geliştiriciler için küçük bir hatırlatma. Uygulama geliştirirken bazen yüzlerce nesne eklemiş oluyoruz. Bu nesneleri başka kodlar içerisinde çağırmak gerekiyor. Eğer aşağıdaki hali ile çalışmaya devam ederseniz malesef her seferinde “onun adı neydi” diye gidip bakmak gerekiyor. Kontrollü ve dolayısıyla hızlı çalışmaya devam edebilmek için nesnelerin isimlendirilmesi çok mühim. Eğer ekip olarak app geliştiriyorsanız standardı ekiple paylaşmakta çok mühim. PowerApps geliştirmeye başladığım 2016 yılından beri aşağıdaki standartla çok rahat ediyorum.

Label’lar için lbl_, Textbox’lar için txt_ , dropdown’lar için dd_ vb. gibi. Böylece kodu yazarken txt_ yazdığınız anda txt olan öğeler liste halinde açılıyor ve ismini hatırlamasanız bile bulmak inanılmaz kolaylaşıyor. Bazen Türkçe’den dolayı nesne isimleri uzayıp gidiyor, bu nedenle, aslında eğer yatkınsanız nesneleri ingilizce isimlendirmenizi tavsiye ederim.

Bu düzenlemenin ardından, bir de nesnelerin yerlerini düzenleyelim. Tüm nesneleri tek tek düzeltmeye çalışmak yerine, tıpkı MS Office ailesindeki gibi “Align “ komutunu kullanacağız. Sol baştan aynı hizada olmaları için Align Left ve dikeyde aralarındaki mesafeleri eşitlemek için, bu listenin en altında olan “Distribute Vertically” seçeneğini kullanıyoruz.

Insert sekmesi altındaki, Button seçeneği ile bir de Kaydet düğmesi ekleyelim. Eklediğiniz öğelerin görünen metinlerini değiştirmek için üzerine çift tıklayabilirsiniz. Ya da aşağıdaki resimde sağ panelde görüldüğü gibi “ Text “ bölümünü kullanabilirsiniz.

Yeni başlayanların en sık yaptığı hata, aşağıdaki kırmızı ile işaretlenen bölümde oluyor.

On select yazısını gördüğünüz o olan , seçili olan nesnenin yani şuanda Butonun tüm özelliklerini kontrol edebileceğiniz bir açılır listedir.
Butonlara ilk tıkladığınızda bu listede “OnSelect” özelliği default olarak geliyor. Yani şuanda “fx” yazan alana, bu butona basınca gerçekleşecek eylemi yazabiliriz sadece. Bir renk kodu ya da “kaydet” gibi bir metin yazarsak hata alırız. Eğer butonun görünen adını değiştireceksek Onselect yazan yerden “Text” i seçmeliyiz. Ya da rengini değiştireceksek “Fill” seçeneğini seçmeliyiz.

Format ile ilgili bazı Temel ayarlar uzun süredir sağdaki panelde de yer alıyor. Hangisi kolayınıza geliyorsa tercih edebilirsiniz.

Şimdi bahsettiğim şekilde biraz renkleri ile oynadım. Bu sayfa için bir defalığa mahsus olarak her nesneyi tek tek seçip istediğim renkleri belirttim. Diğer sayfaları bu şekilde tek tek renklendirmeyeceğiz. Bu sayfadaki renk kodlarını otomatik almasını sağlayacağız. bunu ilerleyen makalelerde yazacağım.

App’e devam edelim. TextBoxların içerisindeki metinleri silmek için, textbox’a tıkladığınızda gelen sağ panelde Default bölümünün içini temizleyelim. Ya da az önce belirttiğimiz FX yani formül çubuğundan Default özelliği seçilerekte yapılabilir. Sağ panel bunun gibi bazı basit işler için hızlı olmanızı sağlar.

Veri girişi ekranı için şimdilik bu kadar alan yeterli. Daha sonra veri görüntüleme makalesinde Galeri özelliğini de kullanacağız. Şimdi verilerimizi kaydedeceğimiz veritabanımızı eklemek için diğer adımları buradan görelim.