Tuval uygulaması galerisinde verileri gösterme, sıralama ve filtreleme

Farklı ürünler ile ilgili görüntüleri ve metinleri göstermenin yanı sıra ilgili bilgileri sıralamak ve filtrelemek için bir galeri oluşturun.

Power Apps'te, tıpkı bir katalogda gördükleriniz gibi birçok ilgili öğe göstermek için galerileri kullanabilirsiniz. Galeriler; ürünler ile ilgili ad ve fiyat gibi bilgileri göstermek için mükemmeldir. Bu konu başlığı altında, bir galeri oluşturup Excel'dekilere benzer işlevler kullanarak bilgileri sıralayacak ve filtreleyeceğiz. Ayrıca, bir öğe seçildiğinde etrafına bir kenarlık yerleştirilir.

Ön koşullar

• Power Apps için kaydolun ve ardından kaydolmak için kullandığınız kimlik bilgilerini kullanarak oturum açın.
• Şablondan, verilerden veya sıfırdan bir tablet uygulaması oluşturun.
• Denetimleri yapılandırma hakkında bilgi edinin.
• Bu adımlarda, örnek giriş verileri olarak CreateFirstApp (.jpg görüntüleri içerir) kullanılmaktadır. Zip dosyası, Excel'e dönüştürülebilir bir XML dosyası içerir. Aksi halde Power Apps, .zip dosyasındaki dosyaları otomatik olarak okur ve dosyayı başarıyla içeri aktarır. Bu örnek verileri indirip kullanabilir veya kendi verilerinizi içeri aktarabilirsiniz.

Galeride veri gösterme

1. Örnek verileri kullanarak Inventory adlı bir koleksiyon oluşturun. Adımlar:

   1. Ekle sekmesinde, Denetimler'i ve ardından İçeri aktar'ı seçin:

      

   2. İçeri aktar denetiminin OnSelect özelliğini şu formül olarak ayarlayın:
      Collect(Inventory, Import1.Data)

      

   3. Windows Gezgini'ni açmak için Import Data düğmesini seçin. CreateFirstApp.zip seçeneğini belirleyin ve Aç'ı seçin.

   4. Dosya menüsünden Koleksiyonlar'ı seçin. İçeri aktardığınız veriler ile birlikte Inventory koleksiyonu listelenir:

      

      Tasarım görüntüsü, ürün adı ve stoktaki birim sayısı da dahil olmak üzere beş ürün ile ilgili bilgiler içeren Inventory koleksiyonunu oluşturdunuz.

      Not

      İçeri aktar denetimi, Excel'dekilere benzer veriler içeri aktarmak ve koleksiyonu oluşturmak için kullanılır. İçeri aktar denetimi, uygulamanızı oluşturduğunuz ve önizlediğiniz sırada verileri içeri aktarır. Şu anda veriler, uygulamanızı yayımladığınız sırada içeri aktarma denetimiyle içeri aktarılmaz.

2. Tasarımcıya geri dönmek için geri okunu seçin.

3. Ekle sekmesinde, Galeri'ye ve ardından Yatay'a tıklayın veya dokunun.

   

4. Sağ bölmede, başlık ve alt başlığın grafiğin üzerinde göründüğü seçeneğe tıklayın veya dokunun:

   

5. Galerinin Items özelliğini Inventory olarak ayarlayın:

   

6. Galeriyi ProductGallery olarak yeniden adlandırın ve diğer denetimleri engellemeyeceği bir yere taşıyın. Galeriyi üç ürün gösterecek şekilde yeniden boyutlandırın:

   

7. Galerinin ilk öğesinde alttaki etiketi seçin:

   

   Not

   Herhangi bir galerideki ilk öğeyi değiştirdiğinizde galerinin diğer tüm öğelerini de otomatik olarak değiştirmiş olursunuz.

8. Etiketin Metin özelliğini şu ifade olarak ayarlayın:
   ThisItem.UnitsInStock
   

   Bunu yaptığınızda etiket, her bir ürün için stoktaki birimleri gösterir:

Bu adımları uygulayarak .jpg görüntüleri içeren verileri bir koleksiyona aktardınız. Ardından, verileri görüntüleyen bir galeri eklediniz ve her bir ürün için stoktaki birimleri gösterecek şekilde bir etiket yapılandırdınız.

Seçtiğiniz galeri öğesini vurgulama

1. Galerideki ilk öğe dışında herhangi bir öğe seçin. Düzenleme simgesi görüntülenir (sol üst köşede). Düzenleme simgesini seçin:
   

2. Ekle sekmesinde, Şekiller'i ve ardından dikdörtgeni seçin. Tüm galeri öğelerinde düz çizgili mavi bir dikdörtgen görünür.

3. Giriş sekmesinde, Dolgu'yu ve ardından Dolgu yok'u seçin.

4. Kenarlık ve Kenarlık stili seçeneklerini belirleyip düz çizgiyi seçin.

5. Kenarlık seçeneğini yeniden belirleyin ve kalınlığı 3 olarak ayarlayın. Dikdörtgeni, galeri öğesini çevreleyecek şekilde yeniden boyutlandırın. Bu işlemin ardından galerinizdeki öğelerde mavi bir kenarlık bulunur ve öğeler aşağıdaki gibi görünür:
   

6. Şekil sekmesinde, Görünür seçeneğini seçin ve ardından Formül Çubuğuna şu formülü girin:

   If(ThisItem.IsSelected, true)

   Galerideki geçerli seçim, mavi bir dikdörtgen ile çevrelenir. Dikdörtgenin seçtiğiniz her bir öğenin etrafında göründüğünü doğrulamak için birkaç galeri öğesi seçin. Oluşturduğunuz öğeleri görmek ve test etmek için Önizleme seçeneğini de açabileceğinizi unutmayın.

Bu adımları uygulayarak galerideki geçerli seçimin çevresine bir kenarlık eklediniz.

Galeride öğeleri sıralama ve filtreleme

Bu adımlarda, galeri öğelerini artan ve azalan düzende sıralayacağız. Ayrıca, stoktan seçtiğiniz birimlere göre galeri öğelerini "filtrelemek" için bir kaydırıcı denetimi de ekleyeceğiz.

Artan veya azalan düzende sıralama

1. Galerideki ilk öğe dışında herhangi bir öğe seçin.

2. Items özelliği şu anda Inventory (koleksiyonunuzun adı) olarak ayarlanmıştır. Şu şekilde değiştirin:

   Sort(Inventory, ProductName)

   Bunu yaptığınızda galerideki öğeler, artan düzende ürün adına göre sıralanır:

   Azalan düzende sıralamayı deneyin. Galerinin Items özelliğini şu formül olarak ayarlayın:

   Sort(Inventory, ProductName, Descending)

Kaydırıcı denetimi ekleme ve galerideki öğeleri filtreleme

1. Bir Kaydırıcı denetimi ekleyin (Ekle sekmesi > Denetimler), denetimi StockFilter olarak yeniden adlandırın ve galerinin altına taşıyın.

2. Kaydırıcıyı, kullanıcıların stoktaki birimler dışında bir değere ayarlayamayacağı şekilde yapılandırın:

   1. İçerik sekmesinde Min seçeneğini belirleyin ve ardından aşağıdaki ifadeyi girin:
      Min(Inventory, UnitsInStock)
   2. İçerik sekmesinde Max seçeneğini belirleyin ve ardından aşağıdaki ifadeyi girin:
      Max(Inventory, UnitsInStock)

3. Galerideki ilk öğe dışında herhangi bir öğe seçin. Galerinin Items özelliğini şu ifade olarak ayarlayın:
   Filter(Inventory, UnitsInStock<=StockFilter.Value)

4. Önizleme penceresinde, kaydırıcıyı galerideki en yüksek ve en düşük miktar arasında bir değere ayarlayın. Kaydırıcıyı ayarladığınız sırada galeri, yalnızca seçtiğiniz değerden az olan ürünleri gösterir:
   

Şimdi filtremizi ekleyelim:

1. Tasarımcıya geri dönün.
2. Ekle sekmesinde, Metin ve Metin girişi seçeneklerini belirleyin, ardından yeni denetimi NameFilter olarak yeniden adlandırın. Metin denetimini kaydırıcının altına taşıyın.
3. Galerinin Items özelliğini şu ifade olarak ayarlayın:
   Filter(Inventory, UnitsInStock<=StockFilter.Value && NameFilter.Text in ProductName)
4. Önizleme penceresinde, kaydırıcıyı 30 olarak ayarlayın ve metin girişi denetimine g harfini girin. Galeri yalnızca stokta 30'dan az birimi olan ve adında "g" harfini içeren ürünü gösterir:
   

İpuçları ve Püf noktaları

• Ne oluşturduğunuzu görmek ve test etmek için dilediğiniz zaman önizleme düğmesini () seçebilirsiniz.
• Uygulamanızı tasarlarken denetimleri yeniden boyutlandırabilir ve tıklayıp sürükleme özelliğini kullanarak taşıyabilirsiniz.
• Önizleme penceresini kapatmak için ESC tuşuna basın veya X seçeneğini belirleyin.
• Bir galeri kullanırken, galerideki tüm öğeleri değiştirmek için galerinin ilk öğesini seçin. Örneğin, galerideki tüm öğelere bir kenarlık eklemek için ilk öğeyi seçin.
• Galerinin özelliklerini güncelleştirmek için galerideki ilk öğe dışında herhangi bir öğe seçin. Örneğin, galeri için (galerideki öğeler için değil) geçerli olan Items ve ShowScrollbar gibi özellikleri güncelleştirmek için ikinci öğeyi seçin.

Öğrendikleriniz

Bu konu başlığında:

• Bir koleksiyon oluşturdunuz, .koleksiyona jpg görüntüleri içeren veriler aktardınız ve verileri bir galeride gösterdiniz.
• Galerideki her bir görüntü altında, ilgili öğe için stoktaki birimleri listeleyen bir etiket yapılandırdınız.
• Seçtiğiniz öğenin etrafına bir kenarlık eklediniz.
• Öğeleri, artan ve azalan düzende ürün adına göre sıraladınız.
• Bir kaydırıcı ve metin girişi denetimi ekleyerek ürünleri stoktaki birimlere ve ürün adına göre filtrelediniz.