Latihan - Menambahkan sumber data ke aplikasi kanvas dan mendesain halaman fungsional

  • 8 menit

Di Power Apps, Anda dapat menyambungkan data dengan aplikasi yang sudah ada atau ke aplikasi yang Anda bangun dari awal. Aplikasi Anda bisa tersambung ke SharePoint, Microsoft Dataverse, Salesforce, OneDrive, atau sumber data lainnya.

Kita akan menggunakan SharePoint sebagai sumber data utama untuk aplikasi ini. Anda bisa menyambungkan ke situs SharePoint untuk membuat aplikasi secara otomatis dari daftar kustom, membuat koneksi sebelum menambahkan data ke aplikasi yang sudah ada, atau membuat aplikasi dari awal.

Membuat situs SharePoint

  1. Masuk ke portal SharePoint dengan info masuk organisasi Microsoft Anda.

  2. Pilih + Buat situs pada halaman mulai SharePoint untuk membuat situs SharePoint .

    Cuplikan layar memperlihatkan untuk membuat situs di halaman mulai SharePoint.

  3. Pada halaman mulai SharePoint, Anda akan menemukan informasi berikut ini:

    • Pilih tipe situs; pilihannya adalah situs Komunikasi atau situs Tim . Pilih situs Komunikasi.

    • Masukkan nama yang sesuai untuk situs; misalnya, Easy Sales.

    • Tambahkan deskripsi Situs jika diperlukan (opsional).

    • Pilih Bahasa pilihan Anda dari menu dropdown.

  4. Pilih Selesai untuk membuat situs SharePoint untuk memuat data Anda.

    Cuplikan layar pembaruan detail situs.

Situs SharePoint modern dibuat dan siap digunakan dalam hitung detik. Sekarang Anda bisa membuat daftar, pustaka dokumen, halaman, dan sebagainya di situs yang baru dibuat.

Nota

Jika Anda memilih situs Tim, grup Microsoft 365 juga dibuat.

Membuat daftar SharePoint

Daftar SharePoint mengumpulkan data dengan beberapa struktur, mirip dengan tabel, lembar bentang, atau database sederhana. Ini dapat mencakup berbagai jenis informasi, seperti angka, teks, lampiran, dan bahkan gambar.

Untuk aplikasi Easy Sales kami, kami akan membuat daftar yang berisi detail semua kategori produk: Sofas, Chairs, Tables, dan Carpets.

  1. Di situs SharePoint yang baru dibuat dengan nama Easy Sales, pilih menu dropdown + New lalu pilih daftar untuk membuat daftar SharePoint Anda.

    Cuplikan layar pemilihan daftar.

  2. Di jendela Buat Daftar, pilih daftar Kosong untuk membuat daftar SharePoint dari awal.

    Cuplikan layar memilih Daftar Kosong.

  3. Konfigurasikan panel Buat sebagai berikut:

    • Masukkan nama yang sesuai untuk daftar; misalnya, Easy Sales.

    • Isi deskripsi, jika diperlukan (opsional).

    • Biarkan kotak centang Tampilkan di navigasi situs dipilih.

    • Pilih Buat.

      Cuplikan layar Panel Buat.

Menambahkan data ke daftar SharePoint Anda

Setelah daftar dibuat, saatnya untuk menambahkan data. Di sini, "data" berarti detail produk tertentu. Detail produk mencakup informasi berikut: Nama, Gambar, Harga, Dimensi, Berat, Warna, PrimaryMaterial, Area, Tinggi, dan model/gambar 3D produk yang akan dilihat dalam realitas campuran.

  1. Dalam daftar penjualan Easy yang dibuat, pilih + Tambahkan kolom untuk menambahkan kolom jenis tertentu. Daftar di bawah ini memperlihatkan kolom yang perlu dibuat, dengan nama dan jenisnya dalam format ini: Nama Kolom - Tipe kolom.

    • Nama: Baris teks tunggal
    • ImageLink: Baris teks tunggal
    • Harga: Satu baris teks
    • Dimensi: Baris teks tunggal
    • Berat: Satu baris teks
    • Warna: Satu baris teks
    • PrimaryMaterial : Satu baris teks
    • Tinggi: Angka
    • Kedalaman: Angka
    • Lebar: Angka
    • Harga/cm2: Angka
    • ProductCategory: Baris teks tunggal
    • FileType: Baris teks tunggal

    Pilih jenis kolom dari menu drop-down; misalnya, pilih Baris tunggal teks.

    Cuplikan layar memilih Satu baris teks.

    Masukkan detail kolom di tab Buat kolom dan pilih Simpan.

    Cuplikan layar Pembuatan Kolom.

    Ulangi prosedur yang sama untuk sisa kolom dalam daftar sebelumnya.

    Nota

    Setelah Anda membuat daftar SharePoint, kolom Judul default dibuat yang bisa Anda ubah namanya menjadi Nama.

  2. Setelah kita menambahkan kolom, kita harus menambahkan data aktual di bawah kolom ini. Mulai tambahkan data ke kolom dengan mengunduh folder kustom yang menyertakan semua detail produk untuk keempat daftar. Untuk mengakses data, pilih tautan berikut, pilih tombol tindakan file lainnya (...) di pojok kanan atas halaman, dan pilih Unduh.

    folder Power Apps kustom

  3. Pilih + Baru untuk menambahkan item lalu isi detail yang diperlukan seperti yang disediakan dalam file Excel yang diunduh. Pilih Simpan untuk menyimpan detail yang dimasukkan.

    Cuplikan layar memilih Baru atau Edit dalam tampilan kisi untuk menambahkan item baru.

    Nota

    Tampilan kisi memungkinkan Anda menambahkan informasi secara bebas ke baris atau kolom yang berbeda.

  4. Mulai tambahkan data Anda di kolom masing-masing, seperti yang ditunjukkan pada gambar:

    Cuplikan layar daftar sharepoint dengan detail tambahan

    Nota

    Jika Anda ingin menyertakan gambar Anda sendiri, Anda dapat menambahkan tautan gambar gambar publik yang tersedia di Internet di bawah kolom ImageLink. Anda bisa mendapatkan tautan gambar dengan mengklik kanan dan memilih opsi Salin alamat gambar.

    Nota

    Anda tidak akan memerlukan nilai-nilai tinggi, kedalaman, dan lebar untuk daftar kategori Karpet . Kategori produk ini akan mengambil nilai luas yang diukur selama Pengukuran dalam sesi MR dan memberikan harga karpet berdasarkan luas yang dihitung. Namun, kami telah menambahkan kolom Price/cm2 untuk membantu proses penghitungan.

Membuat koneksi

Sekarang setelah semua data kami yang diperlukan untuk aplikasi disimpan dalam daftar SharePoint, kita akan membuat koneksi di Power Apps. Setelah koneksi dibuat, Anda dapat dengan mudah mengakses data SharePoint melalui aplikasi.

  1. Untuk mulai membuat koneksi, masuk ke Power Apps dan pilih koneksi di bilah navigasi kiri. Lalu pilih + Koneksi baru di dekat sudut kiri atas.

  2. Pilih SharePoint. Kami memilih SharePoint karena kami telah menyimpan data yang diperlukan dalam daftar SharePoint.

    Cuplikan layar memilih Sharepoint.

  3. Untuk menyambungkan ke SharePoint Online, pilih Sambungkan langsung (layanan cloud), lalu pilih Buat, lalu, jika diminta, berikan kredensial.

    Cuplikan layar memilih Buat.

  4. Koneksi dibuat, dan Anda dapat membuat aplikasi dari awal.

    Nota

    Bahkan jika koneksi dibuat, Anda masih bisa menambahkan, mengedit, dan menghapus data yang disimpan dalam daftar SharePoint Anda. Semua perubahan tercermin dalam aplikasi melalui koneksi.

Mari kita mulai membangun aplikasi Easy Sales berdasarkan data SharePoint, lalu menambahkan data dari sumber lain, jika diinginkan. Dengan mengikuti prosedur ini, Anda akan dapat merancang beberapa halaman utama aplikasi. Misalnya, Anda akan belajar merancang layar percikan, halaman produk, dan halaman daftar produk. Kami juga akan mengakses data yang disimpan dalam daftar SharePoint melalui kontrol galeri Power Apps.

Buka aplikasi kosong

  1. Buka beranda Power Apps, lalu pilih Buat di menu sebelah kiri. Pilih aplikasi Kosong, lalu pilih Buat di bawah aplikasi kanvas kosong .

    Cuplikan layar memilih aplikasi kanvas dari kosong.

  2. Tentukan nama untuk aplikasi Anda; misalnya, Easy-Sales. Pilih Phone, lalu pilih Buat.

    Cuplikan layar menentukan nama aplikasi dan memilih buat.

    Power Apps Studio membuat aplikasi kosong untuk ponsel.

    Nota

    Meskipun Anda dapat merancang aplikasi dari awal untuk berbagai perangkat, topik ini berfokus pada merancang aplikasi untuk ponsel.

  3. Jika kotak dialog Selamat Datang di Power Apps Studio terbuka, pilih Lewati.

    Cuplikan layar memilih opsi lewati.

Hubungkan ke data

Untuk menyertakan data di Power App, Anda harus menyambungkan ke data melalui konektor di aplikasi Anda. Karena kami telah menyimpan semua data dalam daftar SharePoint, kami akan memilih SharePoint sebagai salah satu konektor.

  1. Di sebelah kiri Power Apps Studio, pilih opsi Data.

  2. Setelah membuka panel Data, pilih tombol Tambahkan data untuk menghubungkan ke data.

  3. Di jendela Pilih sumber data, perluas bagian Konektor dan pilih opsi SharePoint.

    Cuplikan layar memilih opsi tambahkan data dan sharepoint.

  4. Pada latihan sebelumnya, kita sudah membuat koneksi. Pilih koneksi yang dibuat untuk menambahkan data ke aplikasi Anda. Pilih situs SharePoint yang dibuat dengan nama Easy Sales.

    Cuplikan layar saat memilih Penjualan Mudah.

  5. Setelah memilih situs Easy Sales SharePoint, semua daftar yang dibuat di situs tersebut ditampilkan. Selanjutnya, pilih daftar SharePoint yang dibuat berkaitan dengan aplikasi dan klik Sambungkan.

    Cuplikan layar memilih daftar.

  6. Semua data yang diperlukan terhubung dan siap digunakan dalam aplikasi. Anda sekarang dapat mulai membangun aplikasi.

Membuat layar pembuka

  1. Pilih opsi tampilan pohon di sebelah kiri Power Apps Studio. Anda harus sudah memiliki layar kosong di Power Apps Studio; jika tidak, pada tab Beranda, pilih panah bawah di samping Layar baru yang membuka daftar jenis layar. Kemudian, pilih Kosong untuk membuat layar kosong.

    Cuplikan layar pembuatan layar baru.

  2. Ganti nama layar menjadi layar Splash dengan memilih ikon tiga titik (...) yang ada di samping nama layar dan pilih opsi Ganti Nama.

    Cuplikan layar saat mengubah nama layar.

  3. Pilih layar yang baru dibuat untuk mengubah propertinya di tab Properti di sisi kanan layar.

  4. Pilih menu drop-down di samping properti gambar Latar Belakang untuk menambahkan gambar ke layar. Pilih + Tambahkan file gambar untuk memilih file logo yang diunduh.

    Cuplikan layar menambahkan logo penjualan yang mudah.

  5. Atur posisi gambar ke Paskan agar seluruh gambar pas dengan ukuran yang ditentukan. Opsi Fit menskalakan gambar secara proporsional dan tidak memotong gambar.

    Cuplikan layar menambahkan logo Easy Sales ke layar splash.

  6. Pada tab Sisipkan, perluas menu dropdown Input dan pilih Timer. Kemudian, seret tombol di layar dan letakkan di mana pun Anda inginkan.

    Cuplikan layar menambahkan timer.

  7. Untuk mengedit beberapa properti timer, Anda bisa menggunakan menu dropdown Properti di sudut kiri atas atau menggunakan panel Properti. Atur properti berikut:

    • AutoStart: true

    • Durasi: 2000

    • Terlihat : false

      Cuplikan layar yang menunjukkan pembaruan properti timer.

      Nota

      Secara default, durasi diukur dalam milidetik. Sejak 1 detik = 1000 milidetik, kita memasukkan 2000 sebagai nilai untuk durasi.

  8. Kami ingin layar percikan terlihat hanya selama dua detik lalu transisi ke halaman Beranda. Buat layar Kosong seperti yang kami lakukan di langkah sebelumnya dan ganti namanya menjadi Halaman Beranda. Kemudian, pilih tombol timer yang ditambahkan ke layar Splash dan konfigurasikan properti OnTimerEnd. Ganti palsu dengan konten berikut:

    Navigate('Home Page',ScreenTransition.Fade)

    Cuplikan layar mengonfigurasi properti OnTimerEnd.

  9. Simpan aplikasi Anda dengan menavigasi ke File >Simpan. Selanjutnya, pilih opsi The cloud dan pilih Simpan.

Membuat halaman beranda

  1. Pilih halaman beranda dibuat sebelumnya. Untuk menyisipkan empat tombol, navigasikan ke tab Sisipkan dan pilih opsi tombol untuk menambahkan tombol ke layar. Sesuaikan ukuran dan posisi tombol ini sesuai kebutuhan. Ganti namanya menjadi Sofas_button, Chairs_button, Tables_button, dan Carpets_button, masing-masing.

    Cuplikan layar menambahkan tombol.

  2. Ubah teks tampilan tombol untuk menunjukkan kategori produk seperti Sofa, Kursi, Tabel, dan Karpet.

    Cuplikan layar pengeditan teks tampilan.

  3. Kami akan menggunakan tombol ini untuk menavigasi ke daftar produk di bawah berbagai kategori. Untuk melakukannya, kita perlu memfilter produk dari daftar SharePoint berdasarkan Kategori Produk. Buat dua layar Kosong baru dan beri nama Produk dan Karpet.

    Cuplikan layar menambahkan layar baru.

  4. Pilih tombol Sofas_button yang baru dibuat dan konfigurasikan properti OnSelect. Setelah memilih tombol, itu harus mengarah ke halaman daftar produk yang dibuat di langkah sebelumnya. Ganti palsu dengan kode berikut:

    Navigate(Products,ScreenTransition.Cover, {ID:1});

    Cuplikan layar navigasi halaman sofa

    Nota

    ID adalah variabel konteks dengan beberapa nilai yang ditetapkan. Nilai ini diteruskan ke halaman tujuan yang disebutkan dalam fungsi Navigasi. Nilai yang diberikan pada variabel menyaring produk berdasarkan Kategori Produk.

  5. Ulangi prosedur yang sama untuk tiga tombol lainnya. Sekali lagi, pastikan Anda memberikan nama layar yang tepat dalam fungsi Navigasi; misalnya, untuk mengonfigurasi properti OnSelect dari tombol-tombol Kursi, Tabel, dan Karpet, gunakan fungsi Navigasi sebagai berikut:

    Navigate(Products,ScreenTransition.Cover, {ID:2});

    Navigate(Products,ScreenTransition.Cover, {ID:3});

    Navigate(Carpets,ScreenTransition.Cover)

    Petunjuk

    Untuk menyimpan kemajuan Anda, pilih tab File di bagian atas dan pilih opsi Simpan. Anda juga dapat menggunakan Ctrl+S untuk menyimpan kemajuan Anda.

    Nota

    Sintaks default dari fungsi Navigasi adalah: Navigasi(Layar [, Transisi [, UpdateContextRecord]])

    • Layar: Diperlukan. Layar yang akan ditampilkan.
    • Transisi: Opsional. Transisi visual yang akan digunakan antara layar saat ini dan layar berikutnya. Nilai defaultnya adalah Tidak Ada.
    • UpdateContextRecord: Opsional. Rekaman yang berisi nama setidaknya satu kolom dan nilai untuk setiap kolom. Rekaman ini memperbarui variabel konteks layar baru seolah-olah diteruskan ke fungsi UpdateContext.

    Ujung

    Anda dapat menguji aplikasi dengan menekan tombol F5 pada keyboard atau mengklik tombol Play di sudut kanan atas Power Apps Studio.

Sekarang setelah kita menambahkan kategori produk, kita akan menampilkan daftar produk di bawah setiap kategori. Di Power Apps, kami menggunakan kontrol Gallery untuk melihat rekaman data.

  1. Di layar Produk, pada tab Sisipkan, pilih Galeri > Vertikal untuk menambahkan kontrol Galeri ke layar Anda.

    Cuplikan layar menambahkan galeri

  2. Ganti nama menjadi Gallery_products. Pada tab Properti dari panel sebelah kiri, konfigurasikan properti Item sebagai berikut:

    If(
ID = 1,
Filter('Easy Sales',(ProductCategory = "Sofa")),
ID = 2,
Filter('Easy Sales',(ProductCategory = "Chair")),
ID = 3,
Filter('Easy Sales',(ProductCategory = "Table")),
ID = 4,
Filter('Easy Sales',(ProductCategory = "Carpet")))

    Cuplikan layar menghubungkan Sharepoint

    Kami memfilter Produk yang disimpan dalam daftar SharePoint berdasarkan Kategori Produk. Variabel konteks digunakan untuk proses pemfilteran.

  3. Konfigurasikan Galeri >properti di panel Properti dengan memilih Edit :

    • Tetapkan Harga ke judul Subtitle1.

    • Tetapkan Judul ke judul Title1.

      Cuplikan layar yang menunjukkan konfigurasi kolom di halaman produk

    Saat menetapkan bidang sebelumnya, Anda akan mengamati data yang tercermin dalam galeri Anda.

  4. Sesuaikan ukuran Gallery_products sesuai kebutuhan. Untuk menambahkan ImageLink ke dalam heading Image1, pilih Gambar di galeri dan konfigurasikan properti Gambar pada tab Properti dengan menambahkan baris kode berikut:

    ThisItem.ImageLink

    Cuplikan layar mengonfigurasi properti gambar di halaman produk

  5. Sekarang, mari kita sisipkan label di bagian atas layar dengan memilih opsi Label. Kemudian, sesuaikan posisi, warna, dan tampilan teks seperti yang ditunjukkan pada gambar:

    Cuplikan layar menambahkan label di halaman produk

  6. Tambahkan ikon Back di atas Label yang ditambahkan sebelumnya untuk membantu pengguna menavigasi ke Halaman Beranda jika diperlukan. Untuk menambahkan ikon Back, perluas dropdown Ikon dan pilih ikon Back.

    Cuplikan layar penambahan ikon kembali di halaman beranda

  7. Posisikan ikon Back dengan benar dan ubah warna tampilannya, jika diperlukan. Konfigurasikan properti OnSelect dengan menambahkan yang berikut ini:

    Navigate('Home Page',ScreenTransition.Cover)

    Cuplikan layar mengonfigurasi properti OnSelect

  8. Ikuti prosedur yang sama untuk halaman Karpet. Konfigurasikan properti Item galeri yang ditambahkan ke halaman Karpet dengan cara berikut:

    Filter('Easy Sales',ProductCategory = "Carpet")

    Cuplikan layar dari mengikuti prosedur yang sama untuk halaman karpet

    Saran

    Untuk menyimpan kemajuan Anda, pilih tab File di bagian atas dan pilih opsi Simpan. Anda juga dapat menggunakan Ctrl+S untuk menyimpan kemajuan Anda.

Setelah menerapkan langkah-langkah sebelumnya, berikut tampilan aplikasi Anda. Aplikasi ini akan mencakup layar pembuka yang sangat baik , halaman beranda , dan inventaris untuk menjelajahi produk.

demo aplikasi setelah menyambungkan ke sumber data.