MS Power Apps Detay Ekranı Ve Form Ekranı

Bu öğreticide, Power Apps'te ayrıntı ekranının ve form ekranının sıfırdan nasıl oluşturulacağı hakkında konuşacağız.

Power Apps kullanım kolaylığı için tasarlandığından, mevcut ekranları, galerileri ve diğer temel öğeleri içeren şablonlarla kolayca gelir . Ancak, uygulamanızı oluştururken benzersiz hedefleriniz olabileceğini bilerek kendi uygulamanızı sıfırdan oluşturmanız gereken zamanlar olacaktır.

Bu nedenle, bir uygulamayı oluşturan yapı taşlarını anlamak önemlidir. Ekran bunlardan biri.

İçindekiler

• MS Power Apps'te Ayrıntı Ekranını Oluşturma
• Galeriyi Detay Ekranına Bağlama
• Galeri ve Ayrıntı Ekranı Arasında Gezinme
• Form Düzenleme Ekranını Oluşturma
• Gönder Düğmesini İşlevsel Hale Getirme
• Düzenleme Ekranı ile Detay Ekranı Arasında Gezinme
• MS Power Apps'te Yeni Bir Form Ekranı Oluşturma
• MS Power Apps'te Yeni Form ve Düzenleme Formu Arasında Geçiş Yapma
• Geri İşlevini Kullanma
• Çözüm

MS Power Apps'te Ayrıntı Ekranını Oluşturma

Ayrıntı ekranı, veri kaynağınızdan gelen her kayıtla birlikte gelen tüm bilgileri içerir.

Aşağıdaki örnekte, farklı kayıtları gösteren bir galeri göreceksiniz. Galeri, o kaydın yalnızca bir önizlemesini içerir. Bu durumda, Viki Darling girişine bakarsanız adı, soyadını, yeri ve VIP seviyesini göreceksiniz.

Ancak bu giriş birçok başka ayrıntıyla birlikte gelir. Veri kaynağına bakarsak, bir müşteri numarası, katılma tarihi, pasaport numarası ve temsilci adı da olduğunu görürüz.

Ayrıntı ekranı bunun için var. Bu, kullanıcıların galerideki herhangi bir giriş noktasına tıkladıkları anda ulaşacakları bir ekrandır. Galeride görünmeyen diğer tüm detayları burada görecekler.

Ayrıntı ekranını oluşturmaya başlamak için MasterScreen'e geri dönüp kopyalayacağız.

Bir ana ekrandan başlamak, bir uygulamanın sıfırdan nasıl oluşturulacağıyla ilgili bir eğitimde tartıştığımız bir şeydi. Uygulamanızın temel öğelerini içeren bir ana ekrana sahip olmak, tüm ekranlarınızı görünüm ve düzen açısından tek tip tutmayı kolaylaştırır.

Yinelenen ekranın adını DetailScreen olarak değiştirelim.

Üstteki etiketi de değiştirip Müşteri Detayı yazalım.

Bu ekranı sıfırdan oluşturuyor olsak da, her ayrıntıyı manuel olarak eklemenize gerek yok. Power Apps, tüm bu süreci bizim için otomatik hale getirdi.

Ekle şeridi altında yapılabilecek bir görüntüleme formu ekleyerek başlayacağız.

Bu ekranın aslında müşteri detaylarını görüntülemek dışında bir kullanımı olmayacağı için köşeleri sürükleyerek formun tüm ekranı doldurmasını sağlayabiliriz.

Ayrıntı ekranı bir veri kaynağına ihtiyaç duyar. Bir veri kaynağını burada sağ bölmede Özellikler altında bağlayabiliriz. Bu uygulama için Table1 kullanıyoruz.

Artık ayrıntıları çekeceğimiz bir veri kaynağımız olduğuna göre, ekranda hangi ayrıntıları göstermek istediğimize karar verme zamanı. Bu, Alanları Düzenle'ye tıklayarak yapılabilir.

Amacımıza uygun olduğunu düşündüğümüz her alanı işaretleyerek alanlar ekleyebiliriz. Bu durumda, tüm bu alanları içine ekleyelim.

Power Apps daha sonra, seçtiğimiz tüm alanları az önce oluşturduğumuz FormViewer1 olan forma yükleyecektir.

Üzerine tıklarsak, veri kaynağımızdaki farklı sütunların her biri için otomatik olarak veri kartları kurduğunu gösterir.

Ve her bir veri kartı için, veri kartının adını taşıyan şeyi içeren bir anahtar oluşturmuştur.

Ayrıca, o sütunla ilişkili gerçek değeri gösterecek bir değer ayarlamıştır.

Şu anda, bu form henüz herhangi bir değer göstermiyor. Bunun nedeni, galerimizi henüz DetailScreen'e bağlamamış olmamızdır. Yine buradaki amaç, detayların ancak galerimizden bir kayıt seçildikten sonra görüntülenmesidir.

Galeriyi Detay Ekranına Bağlama

Power Apps'teki galerilerle ilgili harika olan şey, Seçili adlı bir özelliğe sahip olmasıdır. Temel olarak galeriyi ayrıntı ekranına bağlar, böylece galeride bir kaydı her seçtiğimizde, yalnızca o belirli girişin ayrıntılarını görüntüler.

Bunu yapmak için FormViewer1'i vurgulayacağız ve Item özelliğine gideceğiz.

Özellikle uygulamanız birden fazla galeri kullanıyorsa, burada doğru galeriye başvurduğunuzdan emin olun. Bu durumda Gallery2'yi kullanmak istiyoruz.

Ayrıntı ekranının formül çubuğuna geri dönerek Gallery2.Selected yazıp Enter'a basacağız.

Şimdi, galeride en son seçilenlerden gelen ayrıntıları burada görüyoruz.

Müşterileri Görüntüle ekranına geri dönelim ve galerimizden Viki Darling'i seçelim.

Buna tıkladıktan sonra detay ekranındaki detayların da değiştiğini ve artık Viki Darling için bilgiler gösterdiğini göreceksiniz.

Bu, bu ekranlar ve içindeki öğeler arasındaki ilişkiyi vurgular. Ayrıntı ekranındaki alanlar, sırayla galeride seçilen kayıt tarafından yönlendirilen form görüntüleyicideki item özelliği tarafından yönlendirilir.

Galeri ve Ayrıntı Ekranı Arasında Gezinme

Şu anda sadece galeride bir giriş seçip detay ekranına manuel olarak gidersek detayları görebiliriz. İdeal olarak, kullanıcılar bir girişi tıkladıkları anda otomatik olarak ayrıntı ekranına yönlendirilmelidir. Bu yüzden ekranlar arasına biraz gezinti ekleyeceğiz.

Detay ekranından galeriye geri dönerek navigasyona başlayalım. Insert şeridinin altındaki Icons butonu üzerinden bir sol ok ekleyeceğiz.

Ekrandaki diğer öğelerle eşleştiğinden emin olmak için rengi beyaz olarak değiştirelim.

Simge vurgulanmış olarak, Gezinme işlevini kullanalım ve simgenin inmesini istediğimiz ekrana başvuralım. Bu durumda, ViewCustomersScreen'dir.

Bir ekrandan diğerine geçerken görsel olarak daha çekici hale getirmek için Fade geçişini kullanalım.

Ardından, bu formülü kilitlemek için Enter'a basıyoruz. Bunu yaptıktan sonra, tek yapmamız gereken simgeye tıklamak.

Bunu yapmak bizi Müşterileri Görüntüle ekranına götürecektir.

Bu kez Müşterileri Görüntüle ekranından detay ekranına geçelim.

Bu sefer galeri içerisinde farklı plaklarla uğraşıyoruz. Ancak bu, her öğe için farklı bir işlem oluşturmamız gerektiği anlamına gelmez. Sadece galeriyi vurgulamamız ve özellikler açılır menüsünden OnSelect'i seçmemiz gerekiyor.

Navigate işlevini tekrar kullanacağız ve DetailScreen'e başvuracağız. Daha önce kullandığımız aynı geçişi kullanacağız. Ardından, bu formülü kilitlemek için Enter tuşuna basın.

Şimdi formülü belirlediğimize göre, Megan Rohman rekorunu tıklayalım.

Şimdi, Megan Rohman'ın ayrıntılarının otomatik olarak ekrana yerleştirildiği ayrıntı ekranına gidiyoruz.

Ayrıntı ekranından müşterileri görüntüle ekranına giden navigasyonu kurduğumuz için, ok simgesine basit bir tıklama sizi doğrudan galeriye geri götürür.

Form Düzenleme Ekranını Oluşturma

Veri kaynağımız bizim için tüm bilgileri sağlasa da, müşterinin bilgilerini güncellememiz gereken zamanlar vardır. Bu, bir düzenleme formu ekranına da ihtiyacımız olacağı anlamına gelir.

Öyleyse ana ekranın başka bir kopyasını oluşturalım ve adını EditScreen olarak değiştirelim.

Yeni müşteri eklemek için de aynı ekranı kullanacağız, bu yüzden etiketi Yeni / Müşterileri Düzenle olarak değiştirelim.

Bu ekran için bir düzenleme formu ekleyeceğiz.

Daha önce eklediğimiz görüntüleme formu gibi, yine de bir veri kaynağı eklememiz gerekiyor. Yine Tablo1'i seçeceğiz.

Bir alan eklemek, sahip olduğunuz verilere ve aklınızdaki son kullanıcıya bağlı olacaktır. Örneğin, bir müşterinin pasaport numarası gerçekte değişmeyecektir. Yani bunu formun dışında bırakmak isteyebilirsiniz.

Şimdilik her şeyi ekleyelim. Bu sefer, her alanın altında boşluklar olduğunu göreceksiniz.

Bu alanlar da düzenlenebilir. Örneğin, DateJoined altında gerçekten zamana ihtiyacımız olmayacak. Sadece tarihe ihtiyacımız var.

Ayrıca alanlarda boşluk olmadığını da fark edeceksiniz. Bu da değiştirebileceğimiz bir şey. FirstName yerine First Name diyebiliriz.

Bu değişiklikleri daha sonra ele alacağız. Şimdilik Müşterileri Görüntüle ekranından seçtiğimiz müşterinin detaylarının bu form düzenleme ekranında göründüğünden emin olmamız gerekiyor.

Form2 vurgulanmış olarak, Items özelliğine gidelim ve bunu Gallery2.Selected ile eşitleyelim.

Artık formda bir müşterimizin bilgilerini gösteriyor.

Düzenlemeye başladığımızda, değişiklikleri göndermek için bir düğmeye ihtiyacımız olacak. O halde Insert şeridinden bir buton ekleyelim.

Düğmeyi etiketleyin ve Gönder yazın.

Formların üç modu vardır - düzenle, yeni ve görüntüle. Şu anda, bu form düzenleme modundadır. Bu, bu alanlardan herhangi birine gidip girişleri değiştirebileceğimiz anlamına gelir.

Bunun aksine, detay ekranı teknik olarak bir görüntüleme galerisidir. Bu yüzden sağ bölmedeki özelliklere bakarsanız, bu da bir form olsa bile bize düzenleme seçeneği sunmuyor.

Görüntüleme formu, görüntüleme modundaysa bu düzenleme ekranının nasıl çalışacağına benzer. Hiçbiri düzenlenemeyecek şekilde tüm öğeleri kilitler.

Bu nedenle, galerimizdeki herhangi bir girişi değiştirmemiz gerekirse, formumuzu düzenleme modunda olmamız gerekir. Alt kısımdaki gönder düğmesinin, formu gerçekten göndermesi ve temeldeki kayıtları güncellemesi için işlevsel olması gerekir.

Gönder Düğmesini İşlevsel Hale Getirme

Gönder düğmesine her tıkladığımızda bir eylemi kilitlemek için OnSelect özelliğine gidip formül çubuğuna SubmitForm yazmamız gerekiyor.

SubmitForm, formdaki tüm güncellemeleri toplayan ve bu değişiklikleri gönderen bir işlevdir. Ayrıca, göndermek istediğimiz gerçek formu da alır, bu durumda bu Form2'dir.

Bakalım formül kilitlendiğine göre şimdi ne olacak. Şu anda Coy Newell'in konumu Amerika Birleşik Devletleri olarak görünüyor.

Kanada olarak değiştirelim ve göndere tıklayalım.

Şimdi detay ekranına döndüğümüzde ise lokasyon olarak Kanada'yı gösteriyor.

Düzenleme ekranına geri dönelim ve bu kez soyadını değiştirelim. Yani Newell yerine, bunu Smith olarak değiştirelim ve gönder'e tıklayalım.

Yine detay ekranına geçecek olursak burada da değişikliklerin yapıldığını görüyoruz.

Müşteri görüntüleme ekranına gidersek Coy Newell'in artık Coy Smith olduğunu ve konumun artık Amerika Birleşik Devletleri yerine Kanada olduğunu da gösteriyor.

Bu, biz çalışırken arka planda bir şeylerin güncellendiğini ve şu anda üzerinde çalıştığımız şeye bağlı tüm ekranlardaki verileri değiştirdiğini gösteriyor. Bu, sahip olduğumuz herhangi bir bilgiyi değiştirmeyi çok daha kolaylaştırır.

Düzenleme Ekranı ile Detay Ekranı Arasında Gezinme

Artık bir düzenleme ekranımız olduğuna göre, detay ekranından o sayfaya inecek araçlara sahip olmak istiyoruz. Öyleyse düzenleme simgesini ekleyelim.

Yine, rengi diğer tüm öğelerle aynı olacak şekilde değiştireceğiz.

Simge vurgulanmış olarak, OnSelect özelliğini seçeceğiz, Navigate işlevini kullanacağız ve bu simgenin yönlendirmesini istediğimiz düzenleme ekranı olan ekrana başvuracağız. Bu sefer ekran geçişi eklemeyelim.

Şimdi, burada yaptığımız değişiklikleri düzenleme ekranında göndermeyi bitirdiğimizde detay ekranına geri dönebilmek istiyoruz. Öyleyse geri simgesini ekleyelim ve aynı formülü kullanalım, ancak bu sefer DetailScreen'e geri dönelim.

Ek navigasyon ile, uygulamamız yayınlandıktan sonra son kullanıcıların bir ekrandan diğerine gitmesi daha kolay olacak.

MS Power Apps'te Yeni Bir Form Ekranı Oluşturma

Artık formu düzenleme ekranına sahip olduğumuza göre, kullanıcıların henüz galeride olmayan kayıtları eklemesine de izin vermeliyiz. Bu sefer yeni bir form eklemeyeceğiz. Bunun yerine, son ekranı Yeni / Müşterileri Düzenle olarak etiketlediğimiz için mevcut olanı kullanacağız.

Power Apps'teki formların yalnızca düzenleme ve görüntüleme moduna geçmenize değil, aynı zamanda yeni moda da geçmenize izin verdiğinden daha önce bahsetmiştik.

Temel olarak, yeni moda geçmek, tüm metin kutularının boş olduğu anlamına gelir. Kutulara herhangi bir şey yazıp gönder'e basarsak, mevcut bir girişi düzenlemek yerine kaydı ekler.

Yani yapabilmemiz gereken bu formun modunu editten newe, sonra da ihtiyaca göre newden edite çevirmek.

Ana ekranlar oluşturmaya ilişkin daha önceki bir eğitimde oluşturduğumuz ana ekrandan başlayalım . Gördüğünüz gibi, burada zaten yeni müşteriler eklemek için bir düğmemiz var.

Şu anda, bu düğme henüz herhangi bir ekrana yönlendirmiyor. Öyleyse düğmeyi vurgulayalım, OnSelect'e gidelim ve EditScreen'e yönlendirmek için Gezinme işlevini kullanalım.

Şimdi, ana sayfadan o düğmeye her tıkladığımızda düzenleme ekranına gideceğiz.

Sorun şu ki, bu ekran daha önce düzenlediğimiz tüm ayrıntılara sahip. Yeni bir müşteri eklediğimiz için boş bir ekran olmasını tercih ederiz.

NewForm adlı başka bir işlev eklemek için ana ekrana geri dönelim. NewForm, biz üzerine inmeden önce formu yeni kipe sokar.

Bu işlev, yeni moda geçmek istediğimiz gerçek forma ihtiyaç duyar, bu nedenle Form2'ye başvuruyoruz.

İki işlev arasında noktalı virgül kullandığımıza dikkat edin. Temel olarak, bir noktalı virgül, bu işlevlerin nasıl çalıştığına ilişkin sırayı belirler. Önce NewForm işlevini çalıştırır ve bu bittiğinde, Gezinme işlevini çalıştırdığı tek zaman budur.

Artık formülü düzelttiğimize göre, Yeni Müşteri Ekle düğmesine tıklamak bizi boş bir forma yönlendirecektir.

MS Power Apps'te Yeni Form ve Düzenleme Formu Arasında Geçiş Yapma

Galerimize geri dönelim ve Viki Darling kaydına tıklayalım.

Diyelim ki buradaki bazı alanları düzenlemek istiyoruz. Bu yüzden düzenle simgesine tıklayacağız.

Sorun şu ki, yeni bir forma iniyoruz, bir düzenleme formuna değil. Bunun nedeni, Yeni Müşteri Ekle düğmesi için gezinmeyi oluşturduğumuzda bunu yeni biçimde bırakmamızdır.

Bu sefer, düzenleme simgesinin, biz o ekrana gelmeden önce formu düzenleme moduna geçirmesini istiyoruz. Bunu gerçekleştirmek için, yeni form için kullandığımız formülün aynısını kullanacağız, ancak bunun yerine EditForm işlevini kullanacağız.

EditForm işlevi, başvurulan formu mevcut modundan düzenleme moduna değiştirir. Bunu bir kez yerleştirdikten sonra, detay ekranından düzenle simgesine her tıkladığımızda, artık düzenleme modunda düzenleme ekranına ineceğiz.

Bu aynı zamanda, Gönder düğmesini gönderdiğimizde, yeni bir giriş eklemek yerine mevcut kaydı güncelleyeceği anlamına gelir.

Geri İşlevini Kullanma

Artık ihtiyacımız olan formları aldığımıza göre, son kullanıcılarımızın doğru ekranlara geldiğinden emin olmak için navigasyonumuzu tekrar kontrol edelim.

Diyelim ki ana ekrandayız ve yeni bir müşteri eklemeye karar verdik. Bizi boş bir forma yönlendiren butona tıklıyoruz. Ama sonra fikrimizi değiştirip geri düğmesine tıklıyoruz.

Ama bunu yaptığımızda bizi ana ekrana geri götürmüyor. Bunun yerine bizi detay ekranına götürüyor.

Ne olduğunu öğrenmek için geri simgesine gidelim ve ona bağlı eyleme bakalım. Ayrıntı ekranına gitmek için varsayılan olarak geri düğmesini ayarladığımız ortaya çıktı.

Burada olmasını istediğimiz şey, buraya gelmeden önceki önceki ekrana gelmemiz. Bu, Gezinme işlevini kullanmak ve belirli bir ekrana başvurmak yerine Geri işlevine geçmemiz gerektiği anlamına gelir.

Bu işlev herhangi bir ekrana başvurmamızı gerektirmez. Hangi ekrandan geldiğimize bağlı olarak davranışı değişir. Bu, ister ana ekrandan ister detay ekranından gelelim, geri işlevine tıklamak artık bizi ziyaret ettiğimiz son ekrana götürecek anlamına geliyor.

Power Apps Giriş: Tanım, Özellikler, İşlevler ve Önem
Power Apps Ortamları: Uygulama Öğelerini Düzgün Kurma
PowerApps İşlevleri ve Formülleri | Giriş

Çözüm

Detaylandırma, düzenleme ve yeni form ekranları ile uygulamamız yavaş yavaş şekilleniyor ve neredeyse yayınlanmaya hazır. Bu, Power Apps'in harika yanıdır. İster bir şablonla başlamayı, ister sıfırdan bir uygulama oluşturmayı seçelim, her şey basit ve oluşturması yeterince kolay.

Sayfalar arası gezinmenin iyi çalıştığından emin olmanın ne kadar önemli olduğunu da gördük. Bu, uygulamamızın yayına girdikten sonra son kullanıcılar için yeterince sezgisel olmasını sağlamada hayati bir rol oynar.

Herşey gönlünce olsun,

Henry