Pedoman desain aplikasi

Kontrol modern

Kontrol modern dalam aplikasi kanvas menunjukkan kemajuan signifikan dalam pengembangan dan desain antarmuka pengguna dalam ekosistem Microsoft. Berbasis pada Sistem Desain Lancar Microsoft, kontrol ini didesain untuk memberikan pengalaman pengguna yang cepat, berorientasi pada kinerja, dan mudah diakses, sekaligus memastikan integrasi yang mulus dengan kemampuan tema. Pengenalan kontrol ini, termasuk daftar tab, bilah kemajuan, tombol info, pemutar, dan banyak lagi, menggarisbawahi perubahan strategis ke arah pembuatan aplikasi yang lebih intuitif, responsif, dan menarik secara visual. Dengan menggunakan kontrol-kontrol modern ini, pengembang dapat dengan mudah menerapkan elemen-elemen UI canggih yang secara estetika menarik dan kaya fungsi, sehingga meningkatkan keterlibatan dan kepuasan pengguna secara keseluruhan.

Desain bawaan kontrol ini, dengan mempertimbangkan tema, memungkinkan tampilan dan nuansa yang seragam dan konsisten di seluruh aplikasi, sehingga secara signifikan mengurangi upaya yang diperlukan dalam kustomisasi dan pemberian merek pada aplikasi. Kemampuan untuk secara otomatis memperbarui gaya semua kontrol berdasarkan tema yang ditetapkan menyederhanakan proses desain dan memastikan aplikasi tetap koheren secara visual. Hal ini selaras sepenuhnya dengan kebutuhan bisnis modern yang ingin menjaga konsistensi merek sambil menawarkan pengalaman digital berkualitas tinggi. Kontrol modern juga menekankan aksesibilitas dan kinerja, memastikan bahwa aplikasi dapat digunakan oleh berbagai audiens, termasuk mereka yang memiliki disabilitas, sejalan dengan prinsip desain inklusif. Dengan demikian, kontrol modern dalam aplikasi kanvas bukan sekadar sekumpulan komponen UI, tetapi seperangkat alat transformatif yang memberdayakan pengembang untuk membangun aplikasi yang lebih efisien, mudah dipelihara, mudah diakses, dan kohesif yang memenuhi kebutuhan bisnis dan pengguna yang terus berkembang.

Penting

Meskipun sebagian kecil kontrol modern pada aplikasi kanvas telah tersedia secara umum (GA), rangkaian fitur yang lebih luas masih dalam tahap pratinjau. Anda dianjurkan untuk menjelajahi dan memberikan masukan pada kontrol pratinjau ini. Namun, penting untuk diingat bahwa fitur dan fungsinya dapat disempurnakan berdasarkan masukan dan pengujian sebelum tersedia umum.

Desain dan pedoman formulir

Atur formulir Anda

• Bagilah formulir Anda ke dalam beberapa bagian yang logis dan kelompokkan bidang-bidang terkait bersama-sama.
• Usahakan agar formulir Anda ditampilkan pada satu layar. Jika panjang, pertimbangkan untuk membaginya menjadi beberapa layar, langkah, atau tab.
• Gunakan bahasa yang jelas dan sederhana untuk label bidang, hindari istilah atau jargon yang tidak dikenal.
• Terapkan aturan validasi untuk memastikan keakuratan data. Untuk bidang yang wajib diisi, tunjukkan dengan jelas bahwa bidang tersebut wajib diisi. Validasi alamat email, nomor telepon, dan format lainnya sesuai kebutuhan.

Gunakan kembali formulir

• Gunakan satu formulir untuk membuat catatan baru, mengedit catatan yang ada, dan menampilkan catatan dalam mode lihat saja.
• Menggunakan kembali formulir yang sama mengurangi waktu pengembangan dan pemeliharaan sekaligus memastikan konsistensi.

Mode formulir

Tetapkan mode formulir secara dinamis berdasarkan tindakan pengguna. Contoh:

• Saat membuat rekaman baru, atur formulir ke mode "Baru".
• Saat mengedit rekaman yang sudah ada, atur formulir ke mode "Edit".
• Saat menampilkan rekaman, atur formulir ke mode "Lihat".

Penempatan kontrol

• Tempatkan kontrol yang berbeda (seperti galeri, formulir tampilan, dan formulir edit) pada layar terpisah untuk membuatnya dapat dibedakan.
• Gabungkan kontrol ini dengan rumus untuk menciptakan pengalaman pengguna yang kohesif.

Kontainer

Seiring dengan berkembangnya ukuran aplikasi kanvas untuk menangani lebih banyak skenario bisnis, jumlah kontrol pun terus bertambah dan diperlukan pengaturan kontrol berdasarkan fungsi yang dijalankannya. Salah satu cara mudah untuk melakukan ini adalah dengan memilih kontrol bersama-sama dan mengelompokkannya ke dalam satu grup. Namun, pengelompokan kontrol tidak selalu disarankan. Kontrol aplikasi kanvas dapat menampung serangkaian kontrol dan memiliki propertinya sendiri. Container

Wadah berfungsi sebagai ruang kosong tempat Anda dapat menyisipkan dan mengatur kontrol dalam kaitannya dengan sudut kiri atas wadah. Anda mempunyai fleksibilitas untuk menumpuk kontainer, memungkinkan terciptanya tata letak yang lebih kompleks dan memberikan kebebasan dalam desain.

Kontainer adalah kontrol sesungguhnya yang memiliki propertinya sendiri seperti Width dan BorderColor. Kontainer memengaruhi tata letak aplikasi dan membantu pengguna Pembaca layar memahami struktur aplikasi.

Meskipun Anda dapat menambahkan kontrol apa pun dalam suatu grup, Anda sebaiknya hanya menambahkan kontrol yang terkait secara logis dalam suatu wadah.

Mengorganisasikan elemen dalam Power Apps menggunakan grup memungkinkan pengguna untuk menerapkan properti bersama ke beberapa elemen. Namun, membuat perubahan properti individual dalam suatu grup mungkin memerlukan penyesuaian manual. Lebih jauh lagi, grup tidak memiliki kehadiran dalam struktur logis suatu aplikasi karena alasan aksesibilitas, karena pembaca layar tidak dapat mengenalinya. Selain itu, ketidakmampuan untuk mengelompokkan secara bertingkat membuat sulit untuk membuat tata letak yang lebih rumit.

Desain dan pedoman galeri

Hindari mengubah item galeri dari dalam

Hindari memodifikasi Items properti galeri dalam acara kontrol anak seperti OnChange atau OnSelect. Hal ini dapat menyebabkan perilaku yang tidak diharapkan, terutama saat menangani kontrol tertentu yang memicu kejadian saat nilainya berubah.

Berhati-hatilah dengan kontrol yang dipicu OnChange

Berhati-hatilah saat menggunakan kontrol seperti Kotak kombo, Pemilih tanggal, Penggeser, atau Alihkan di galeri. Kontrol ini dapat memicu OnChange kejadian secara tidak terduga, yang mengarah ke masalah potensial seperti loop tak terhingga.

Dampak kinerja pada patching

Perhatikan dampak kinerja saat menambal atau memperbarui item di galeri, terutama saat menangani sejumlah besar item. Penambalan dapat berlangsung lambat, dan galeri dapat memuat ulang semua item, sehingga memengaruhi kinerja.

Tangani loop tak terbatas dengan hati-hati**

Jika memodifikasi data galeri memicu peristiwa yang menyebabkan loop tak terbatas, pertimbangkan untuk menggunakan kontrol modern atau kontrol yang tidak memicu OnChange ketika datanya berubah untuk memutus loop.

Hindari galeri bersarang

Galeri yang bersarang dapat menimbulkan masalah kinerja dan pengikatan data yang rumit.

Jika memungkinkan, hindari galeri bersarang. Sebaliknya, cobalah merancang struktur data dan menggunakan fungsi dengan cara yang optimal.

Gunakan galeri dengan ketinggian yang fleksibel

Galeri dengan ketinggian tetap dapat mengakibatkan visibilitas konten terbatas, terutama saat menangani data dinamis.

Gunakan galeri ketinggian fleksibel dengan mengatur Height properti untuk Parent.Height atau nilai dinamis berdasarkan data Anda. Ini memastikan bahwa galeri menyesuaikan tingginya untuk menampung berbagai jumlah data.

Mengoptimalkan pemuatan data

Saat mengoptimalkan pemuatan data di Power Apps, Anda mungkin ingin mengambil dan menampilkan hanya kolom yang diperlukan di galeri daripada mengambil seluruh kumpulan data.

Berikut contoh bagaimana Anda dapat mencapainya: Asumsikan Anda memiliki koleksi EmployeeData dengan beberapa kolom, dan Anda hanya ingin menampilkan kolom "Nama" dan "Departemen" dalam galeri.

// Collection named ProductSales with sample sales data

ClearCollect(ProductSales, 
    Table(
        { ProductName: "Phone", UnitPrice: 499.99, QuantitySold: 100 },
        { ProductName: "Laptop", UnitPrice: 999.99, QuantitySold: 50 },
        { ProductName: "Tablet", UnitPrice: 299.99, QuantitySold: 75 }
    )
)

// Bind the gallery to display only the "ProductName" and "QuantitySold" columns

Gallery1.Items = ShowColumns(ProductSales, ProductName, QuantitySold)

Dapatkan informasi lebih lanjut tentang praktik terbaik Galeri.

Membangun komponen yang dapat digunakan kembali

Kapan membuat komponen kode khusus menggunakan Power Apps Kerangka Komponen (PCF)

Power Platform memungkinkan pembuatan komponen yang dapat digunakan kembali melalui Power Apps Kerangka Komponen (PCF). Detail selengkapnya di sini.

Berikut adalah skenario yang dapat Anda pertimbangkan untuk membuat komponen PCF di Power Apps:

Elemen UI yang kompleks

Saat Anda perlu membuat elemen atau kontrol antarmuka pengguna yang kompleks yang tidak tersedia dalam Power Apps kontrol standar.

Kontrol khusus untuk persyaratan tertentu

Ketika aplikasi Anda memiliki persyaratan khusus yang tidak terpenuhi oleh kontrol bawaan, dan Anda perlu membuat kontrol khusus yang disesuaikan dengan kebutuhan Anda.

Pengalaman pengguna yang konsisten di seluruh aplikasi

Saat Anda ingin mempertahankan pengalaman pengguna yang konsisten di beberapa Power Apps lingkungan dengan merangkum fungsionalitas tertentu dalam komponen PCF.

Dapat digunakan kembali di berbagai aplikasi

Saat Anda mengantisipasi kebutuhan untuk menggunakan kembali bagian fungsionalitas atau elemen antarmuka pengguna tertentu di beberapa aplikasi, membuat komponen PCF memungkinkan Anda membangunnya sekali dan menggunakannya kembali.

Menerapkan logika tingkat lanjut

Ketika Anda perlu menerapkan logika bisnis tingkat lanjut atau perhitungan yang berada di luar kemampuan rumus atau fungsi standar Power Apps.

Pengalaman pengguna yang ditingkatkan

Ketika Anda ingin meningkatkan pengalaman pengguna secara keseluruhan dengan menciptakan komponen yang menarik secara visual dan interaktif yang tidak dapat dicapai dengan kontrol default.

Langkah selanjutnya

Pedoman desain responsif