Latihan - Tambahkan sumber data ke aplikasi kanvas dan desain halaman fungsional

  • 8 menit

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

Kami akan menggunakan SharePoint sebagai sumber data utama untuk aplikasi ini. Anda dapat menghubungkan 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 di halaman awal SharePoint untuk membuat situs SharePoint.

    Cuplikan layar yang ditampilkan untuk membuat situs di halaman mulai SharePoint.

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

    • 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 dropdown.

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

    Cuplikan layar memperbarui detail situs.

Situs SharePoint modern dibuat dan siap digunakan dalam hitungan detik. Anda sekarang dapat membuat daftar, pustaka dokumen, halaman, dan sebagainya di situs yang baru Anda buat.

Catatan

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

Membuat daftar SharePoint

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

Untuk aplikasi Penjualan Mudah, kami akan membuat daftar yang berisi detail semua kategori produk: Sofa, Kursi, Meja, dan Karpet.

  1. Di situs SharePoint yang baru dibuat dengan nama Penjualan Mudah, pilih dropdown + Baru lalu pilih Daftar untuk membuat daftar SharePoint Anda.

    Cuplikan layar memilih 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 Buat Panel.

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, Bahan Utama, Luas, Tinggi, dan model/gambar 3D produk yang akan dilihat dalam realitas campuran.

  1. Dalam daftar Penjualan mudah yang dibuat, pilih + Tambahkan kolom untuk menambahkan kolom dengan jenis tertentu. Daftar di bawah ini menunjukkan kolom yang perlu dibuat, dengan nama dan jenisnya dalam format ini: Nama Kolom - Jenis kolom.

    • Nama: Baris teks tunggal
    • ImageLink: Satu baris teks
    • Harga: Satu baris teks
    • Dimensi: Satu baris teks
    • Bobot: Satu baris teks
    • Warna: Satu baris teks
    • PrimaryMaterial: Baris teks tunggal
    • 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 Membuat Kolom.

    Ulangi prosedur yang sama untuk sisa kolom dalam daftar sebelumnya.

    Catatan

    Setelah Anda membuat daftar SharePoint, kolom Judul default dibuat yang bisa Anda ganti 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 kanan atas halaman, dan pilih Unduh.

    Folder kustom Power Apps

  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.

    Catatan

    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

    Catatan

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

    Catatan

    Anda tidak memerlukan nilai tinggi, kedalaman, dan lebar untuk daftar kategori Karpet. Kategori produk ini akan mengambil nilai area yang diukur selama sesi Ukur dalam MR dan memberikan harga karpet setelah area yang dihitung. Namun, kita telah menambahkan kolom Harga/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 ion 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 Koneksi secara langsung (cloud-services), lalu pilih Buat, lalu, jika diminta, berikan kredensial.

    Tangkapan layar memilih Buat.

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

    Catatan

    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 mendesain beberapa halaman utama aplikasi. Misalnya, Anda akan belajar mendesain layar splash, halaman produk, dan halaman daftar produk. Kami juga akan mengakses data yang disimpan dalam daftar SharePoint melalui kontrol galeri Power Apps.

Membuka 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 Telepon, lalu pilih Buat.

    Cuplikan layar menentukan nama aplikasi dan memilih buat.

    Power Apps Studio membuat aplikasi kosong untuk ponsel.

    Catatan

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

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

    Cuplikan layar memilih opsi lewati.

Menyambungkan 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 terhubung ke data.

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

    Cuplikan layar memilih opsi tambah 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 Penjualan Mudah.

    Cuplikan layar memilih Easy Sales.

  5. Setelah memilih situs SharePoint Penjualan Mudah, semua daftar yang dibuat di situs tersebut akan ditampilkan. Selanjutnya, pilih daftar SharePoint yang dibuat terkait aplikasi dan klik Sambungkan.

    Cuplikan layar memilih daftar.

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

Membuat layar splash

  1. Pilih opsi Tampilan pohon di sebelah kiri Power Apps Studio. Anda seharusnya 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 membuat 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 penggantian 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 easy sales.

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

    Cuplikan layar menambahkan logo Easy Sales ke layar splash.

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

    Cuplikan layar menambahkan timer.

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

    • Mulai Otomatis: benar

    • Durasi: 2000

    • Terlihat: false

      Cuplikan layar memperbarui properti timer.

      Catatan

      Secara default, durasi diukur dalam milidetik. Karena 1 detik = 1000 milidetik, kita masukkan 2000 sebagai nilai durasi.

  8. Kami ingin layar pembuka hanya terlihat selama dua detik dan kemudian beralih ke halaman Beranda. Buat layar Kosong seperti yang kita lakukan pada langkah sebelumnya dan ganti namanya menjadi Halaman Beranda. Kemudian, pilih tombol timer yang ditambahkan ke layar Pembuka dan konfigurasikan properti OnTimerEnd. Ganti false dengan konten berikut:

    Navigate('Home Page',ScreenTransition.Fade)

    Cuplikan layar mengonfigurasi properti OnTimerEnd.

  9. Simpan aplikasi Anda dengan membuka File>Simpan. Selanjutnya, pilih opsi Cloud dan pilih Simpan.

Membuat halaman beranda

  1. Pilih Halaman Beranda yang 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.

    Cuplikan layar menambahkan tombol.

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

    Cuplikan layar mengedit 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 ganti namanya menjadi Produk dan Karpet.

    Cuplikan layar menambahkan layar baru.

  4. Pilih tombol Sofas_button yang baru dibuat dan konfigurasikan properti OnSelect. Setelah memilih tombol , kita perlu membawa kita ke halaman daftar produk yang dibuat di langkah sebelumnya. Ganti false dengan kode berikut:

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

    Cuplikan layar navigasi halaman sofa

    Catatan

    ID adalah variabel konteks dengan beberapa nilai yang ditetapkan. Nilai ini diteruskan ke halaman tujuan yang disebutkan dalam fungsi Navigasi. Nilai yang ditetapkan ke variabel memfilter 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 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)

    Tip

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

    Catatan

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

    • Layar: Diperlukan. Layar untuk ditampilkan.
    • Transisi: Opsional. Transisi visual untuk digunakan antara layar saat ini dan layar berikutnya. Nilai default-nya 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.

    Tip

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

Sekarang setelah kami menambahkan kategori produk, kami akan menampilkan daftar produk di bawah setiap kategori. Di Power Apps, kita menggunakan Kontrol galeri 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 namanya menjadi Gallery_products. Pada tab Properti di 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 menyambungkan sharepoint

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

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

    • Tetapkan Harga ke judul Subtitle1.

    • Tetapkan Judul ke judul Title1.

      Cuplikan layar mengonfigurasi bidang di halaman produk

    Saat menetapkan bidang sebelumnya, Anda akan mengamati data yang tercermin di Galeri Anda.

  4. Sesuaikan ukuran Gallery_products sesuai kebutuhan. Untuk menambahkan ImageLink ke judul Image1, pilih Image di galeri dan konfigurasikan properti Image di Properti dengan menambahkan baris kode ini:

    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 Kembali di atas Label yang ditambahkan sebelumnya untuk membantu pengguna menavigasi ke Beranda jika diperlukan. Untuk menambahkan ikon Kembali, luaskan dropdown Ikon dan pilih ikon Kembali.

    Cuplikan layar menambahkan ikon kembali di halaman beranda

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

    Navigate('Home Page',ScreenTransition.Cover)

    Cuplikan layar mengonfigurasi properti OnSelect

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

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

    Cuplikan layar mengikuti prosedur yang sama untuk halaman karpet

    Tip

    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 menyertakan Layar pembuka yang sangat baik, Beranda, dan inventaris produk untuk menjelajahi produk.

demo aplikasi setelah tersambung ke sumber data.