Bagikan melalui

Bab 3: Membangun prototipe low-code

Catatan

Bab 2 merujuk pada aplikasi seluler yang digunakan oleh teknisi dan teknisi lapangan, dan aplikasi desktop yang digunakan oleh staf di tempat. Bagian berikut berfokus pada desain, penerapan, dan peluncuran aplikasi perangkat bergerak yang dibangun dengan Power Apps. Aplikasi desktop dibiarkan sebagai olahraga untuk Pembaca.

Kiana skeptis terhadap solusi kode rendah dan Power Apps. Namun, Kiana dan Maria memutuskan untuk membuat aplikasi bersama untuk membantu teknisi lapangan memeriksa inventaris (dan memesan suku cadang, jika perlu), memeriksa basis pengetahuan, dan memeriksa janji temu berikutnya saat mereka sedang keluar kantor untuk melakukan panggilan servis. Kiana dan Andhara berencana menggunakan pengalaman ini untuk mempelajari cara menambahkan kontrol dan menggunakan rumus dalam Power Apps.

Meskipun membangun prototipe awal dengan kode rendah biasanya merupakan tugas pengembang warga, Kiana memutuskan untuk memperhatikan prosesnya guna memahami bagaimana aplikasi dibangun. Kiana membutuhkan informasi ini untuk membantu Maria mengintegrasikan sumber data dunia nyata, Web API, dan layanan lain yang diperlukan ke dalam aplikasi.

Item 1: Manajemen inventaris lapangan

Tujuan awal Andhara adalah membuat aplikasi kanvas yang menampilkan daftar komponen dan memungkinkan pengguna melihat rincian bagian apa pun. Akhirnya, pengguna juga harus dapat memesan suku cadang; namun, versi awal aplikasi ini hanya akan menjadi prototipe dan tidak akan dihubungkan dengan back end. Setelah memperoleh masukan dari Caleb, teknisi lapangan utama, Maria akan bekerja dengan Kiana untuk mengintegrasikan aplikasi kanvas dengan sistem inventaris yang berjalan di lokasi.

Andhara sangat memahami sistem manajemen inventaris yang ada dan memahami informasi ada di dalamnya. Maria memulai dengan membuat buku kerja Excel yang berisi tabel yang menyimpan data tiruan dengan rincian beberapa contoh bagian. Bidang dalam tabel adalah ID, Nama, IDKategori, Harga, Ikhtisar, JumlahStokTersedia, dan Gambar (URL yang merujuk ke gambar komponen). Buku kerja ini dapat digunakan untuk membangun dan menguji aplikasi kanvas, untuk memastikan bahwa aplikasi tersebut menampilkan data yang diperlukan dengan benar. Maria menyimpan buku kerja ini dalam OneDrive akun dengan nama BoilerParts.xlsx.

Catatan

Anda dapat menemukan salinan buku kerja ini di folder Aset di repositori Git untuk panduan ini.

Lembar kerja suku cadang boiler, menampilkan daftar suku cadang dengan Id, Nama, CategoryId, Harga, Ikhtisar, NumberInStock, dan kolom Gambar.

Jika Anda seorang desainer database relasional, Anda akan melihat bahwa buku kerja Excel menampilkan tampilan data yang didenormalisasi. Misalnya, dalam basis data relasional, CategoryID kemungkinan besar berupa pengenal numerik yang merujuk ke tabel terpisah yang berisi rincian kategori, termasuk namanya.

Catatan

URL di kolom Gambar saat ini hanya berupa tempat penampung. Dalam aplikasi yang telah selesai, URL ini akan menggantikan alamat file gambar nyata.

Ikuti langkah-langkah berikut untuk membuat aplikasi dengan Power Apps.

  1. Masuk ke Power Apps.

  2. Pada halaman Beranda , di bawah Mulai dari data, pilih Excel Online.

    Halaman beranda Power Apps Studio.

  3. Pada halaman Koneksi , pilih OneDrive untuk Bisnis, lalu pilih Buat.

    Sambungan OneDrive Baru.

  4. Pada halaman OneDrive untuk Bisnis , pilih file BoilerParts.xlsx .

    Hubungkan ke buku kerja Excel.

  5. Pilih tabel dalam file Excel (Maria membuat tabel dengan menggunakan nama default, Tabel1), lalu pilih Hubungkan.

    Hubungkan ke tabel Excel.

  6. Tunggu Power Apps membuat aplikasi.

    Buat aplikasi.

  7. Setelah aplikasi dibuat, Anda akan melihat layar Browse , yang menampilkan bidang CategoryID, ID, dan Image dari setiap baris tabel komponen dalam buku kerja.

    Suku cadang yang ditampilkan di layar Telusuri.

  8. Bidang yang saat ini ditampilkan tidak terlalu berguna untuk membantu teknisi memilih produk. Pada panel yang menampilkan layar Telusuri , pilih label Penukar Panas di baris data pertama. Pada bilah rumus, pilih properti Teks dari daftar turun bawah. Ubah nilai properti ini menjadi ThisItem.Name. Teks di bidang pertama dari setiap baris akan beralih untuk menampilkan nama suku cadang.

    Catatan

    Pada gambar berikut, label Penukar Panas yang awalnya ditampilkan pada formulir telah berubah menjadi nama produk, Pemanas 3,5 W/S.

    Ubah teks untuk kontrol label.

  9. Ulangi langkah sebelumnya untuk label ID dan Gambar . Ubah properti Teks pada bidang ID ke IDKategori, dan properti Teks pada bidang Gambar ke Ikhtisar. Layar Telusuri sekarang akan tampak seperti gambar berikut, yang kemungkinan besar akan berguna bagi teknisi lapangan saat memilih komponen.

    Daftar item yang menampilkan nama suku cadang, kategori yang ada di dalamnya, dan ikhtisar deskriptif.

  10. Fitur pencarian pada layar Browse secara default menggunakan bidang yang awalnya dipilih saat layar dibuat—dalam hal ini, CategoryID, ID, dan Image. Hasilnya diurutkan berdasarkan CategoryID. Ada baiknya untuk mengalihkannya ke bidang Nama, IDKategori, dan Ringkasan , dengan hasil diurutkan berdasarkan Nama. Pilih kontrol BrowseGallery1 pada panel Tampilan Pohon . Pada daftar turun ke bawah di sisi kiri bilah rumus, pilih properti Item . Tarik sisi bawah bilah rumus ke bawah sehingga rumus benar-benar terlihat. Rumus berisi ekspresi berikut:

    **SortByColumns(Search([\@Table1], TextSearchBox1.Text, "CategoryID","ID","Image"), "CategoryID", If(SortDescending1, Descending, Ascending))

    Urutkan dan cari bidang.

  11. Ubah ekspresi Search untuk merujuk ke bidang Name, CategoryID, dan Overview dengan menggunakan rumus berikut:

    SortByColumns(Search([\@Table1], TextSearchBox1.Text, "Name", "CategoryID", "Overview"), "Name", If(SortDescending1, Descending, Ascending))

  12. Judul di header formulir tidak membantu, dan tema default tidak sesuai dengan tampilan dan nuansa korporasi VanArsdel. Pada layar Browse , pilih label Table1 , dan pada bilah Formula , ubah properti Text pada label menjadi "Browse Parts" (sertakan tanda kutip ganda pada nilainya).

  13. Pada bilah alat, pilih Tema (Anda mungkin harus memperluas bilah alat untuk menampilkan lebih banyak item), lalu pilih tema Hutan . Warna dan gaya untuk layar Jelajahi akan berubah agar sesuai dengan tema.

    Pilih Tema.

Buat layar Rincian lebih bermanfaat

Anda telah membuat aplikasi dasar dan memodifikasi layar Jelajahi untuk menampilkan bidang yang dapat digunakan teknisi untuk mengidentifikasi suatu komponen. Aplikasi ini juga berisi layar Detail , yang menampilkan semua informasi untuk bagian yang dipilih. Bidang di layar ini saat ini tidak ditampilkan dalam urutan logika, jadi Anda harus menyusun ulang bidang tersebut. Anda juga dapat menghapus bidang ID dari layar ini, karena informasi ini tidak relevan bagi teknisi.

  1. Pada panel Tampilan pohon , gulir ke bawah dan pilih DetailScreen1. Layar ini menampilkan rincian tentang bagian yang dipilih pengguna pada layar Telusuri .

    Layar rincian suku cadang.

  2. Di header layar Detail pada panel tengah, pilih label Tabel1 . Pada panel kanan, pada tab Properties , ubah properti Text ke Part Details.

    Catatan

    Dalam banyak kasus, Anda dapat memperoleh hasil yang sama dengan menggunakan bilah rumus sebagai panel Properti . Namun, beberapa properti hanya tersedia melalui panel Properti .

    Ubah header layar telusuri suku cadang.

  3. Pada panel Tampilan pohon , di bawah DetailScreen1, pilih DetailForm1. Pada panel kanan, pada tab Properti , pilih Edit bidang di samping Bidang. Pada panel tengah, pilih dan tarik bidang sehingga bidang ditampilkan dalam urutan berikut, dari atas ke bawah:

    • Nama
    • CategoryID
    • Gambaran Umum
    • Harga
    • NumberInStock
    • Image
    • ID

    Susun bidang di layar rincian.

  4. Pilih bidang ID , pilih elipsis yang muncul di sisi kanan bidang, lalu pilih Hapus dari menu tarik-turun yang muncul. Tindakan ini menghapus bidang ID dari formulir.

    Hilangkan bidang ID dari formulir.

  5. Pada panel Tampilan Pohon , di bawah DetailForm1, pilih CategoryID_DataCard1. Elemen ini adalah kontrol DataCard yang menampilkan nama bidang (disebut kunci) dan nilainya.

    Kontrol kartu data CategoryID.

    Pada panel kanan, pada tab Lanjutan , pilih Buka kunci untuk mengubah properti. Di bagian Data , ubah bidang DisplayName menjadi "Kategori" (sertakan tanda kutip).

    Catatan

    Seperti halnya tab Properti , banyak properti pada tab Lanjutan juga dapat diakses melalui bilah rumus. Untuk mengatur properti ini, Anda dapat menggunakan bilah rumus jika diinginkan.

    Mengubah nama tampilan bidang rincian CategoryID.

  6. Ulangi langkah sebelumnya untuk mengubah kunci NumberInStock_DataCard1 menjadi "Nomor dalam Stok" (sertakan tanda kutip).

  7. Anda perlu menyesuaikan format bidang Harga untuk menampilkan data sebagai nilai mata uang. Pada panel Tampilan Pohon , di bawah DetailForm1, di bawah Price_DataCard1, pilih DataCardValue7. Ini adalah bidang yang menampilkan nilai bidang Harga . Pada panel DataCardValue7 di sebelah kanan, pada tab Lanjutan , ubah properti Teks menjadi Teks(Nilai(Parent.Default), "[$-en-US]$ ###,##0.00")

    Pratinjau harga sebagai Mata Uang.

    Ekspresi Parent.Default mengacu pada item data yang terikat dengan kontrol induk ( DataCard)—dalam hal ini, kolom Price . Fungsi Text memformat ulang nilai ini dengan menggunakan format yang ditetapkan sebagai argumen kedua; dalam contoh ini, ini adalah mata uang lokal dengan dua tempat desimal.

  8. Kartu data gambar harus menampilkan gambar dari bagian tersebut daripada URL file gambar. Pada panel Tree view , di bawah DetailForm1, di bawah Image_DataCard1, pilih DataCardValue3, lalu pilih Delete untuk menghapus kontrol ini.

  9. Pilih Image_DataCard1. Pada panel kiri, pilih + Sisipkan. Pada panel Sisipkan , perluas Media, lalu pilih Gambar.

    Mengganti URL gambar dengan gambar.

  10. Kembali ke panel Tampilan Pohon , dan verifikasi bahwa kontrol teks Image1 telah ditambahkan ke kontrol Image_DataCard1 .

    Pastikan kontrol gambar telah ditambahkan.

  11. Pada panel Tampilan Pohon , pilih Image_DataCard1. Pada panel kanan, pada tab Lanjutan , ubah Tinggi menjadi 500, untuk menyediakan ruang yang cukup guna menampilkan gambar.

    Mengatur tinggi kartu data gambar.

  12. Pada panel Tampilan pohon , pilih Gambar1. Atur properti berikut:

    • Gambar: Induk.Default
    • PosisiGambar: PosisiGambar.Sesuaikan
    • Lebar: 550
    • Tinggi: 550

    Catatan

    Gambar yang ditampilkan saat ini kosong karena URL di buku kerja Excel hanya pengganti. Anda akan mengatasi masalah ini dan mengambil URL sebenarnya, bila aplikasi tersebut diikat ke API Web di bagian berikutnya.

Aplikasi ini juga berisi layar Edit , yang memungkinkan pengguna mengubah informasi untuk suatu bagian. Seorang teknisi tidak boleh mengubah rincian suku cadang, membuat suku cadang baru, atau menghapus suku cadang dari katalog.

  1. Pada panel Tampilan Pohon , pilih EditLayar1. Pilih tombol elipsis, lalu pilih Hapus untuk menghapus layar ini.

    Menghapus layar Edit.

  2. Pada panel Tampilan Pohon , pilih DetailsScreen1. Perhatikan bahwa Power Apps Studio menampilkan pesan kesalahan untuk layar ini. Kesalahan ini terjadi karena DetailsScreen1 berisi ekspresi yang merujuk ke layar EditScreen1 , yang tidak ada lagi.

  3. Di header DetailsScreen1, pilih ikon pensil (IconEdit1). Properti OnSelect untuk kontrol ini berisi ekspresi EditForm(EditForm1);Navigate(EditScreen1, ScreenTransition.None). Saat ikon Edit dipilih, ekspresi ini berjalan dan mencoba berpindah ke layar EditScreen1 .

    Edit properti OnSelect.

  4. Pada panel Tampilan Pohon , pilih IkonEdit1, lalu pilih Hapus. Ikon ini tidak lagi diperlukan.

  5. Pilih IkonHapus1, lalu pilih Hapus. Ikon ini digunakan untuk menghapus suku cadang saat ini, dan juga tidak diperlukan.

    Menghilangkan ikon hapus dan edit.

  6. Perhatikan bahwa teks Rincian Bagian telah menghilang dari tajuk layar, dan sebagai gantinya Power Apps Studio menampilkan pesan kesalahan. Hal ini terjadi karena lebar kontrol label yang menampilkan teks dihitung. Pada panel Tampilan Pohon , pilih LblAppName2. Periksa properti Lebar . Nilai properti ini adalah hasil dari ekspresi Parent.Width - Self.X - IconDelete1.Width - IconEdit1.Width.

    Kontrol LblAppName2 yang menampilkan kesalahan lebar.

  7. Ubah ekspresi untuk properti Width menjadi Parent.Width - Self.X. Kesalahan akan hilang dan teks Detail Bagian akan muncul kembali di tajuk layar.

  8. Pada panel Tampilan Pohon , pilih TelusuriLayar1. Layar ini juga akan menampilkan pesan kesalahan. Ikon + pada bilah alat (IconNewItem1) memungkinkan pengguna untuk menambahkan bagian baru. Properti OnSelect untuk ikon ini merujuk ke layar EditScreen1 .

    Ikon item baru yang menampilkan kesalahan.

  9. Pilih IconNewItem1, lalu pilih Hapus. Seperti sebelumnya, teks di header untuk layar akan hilang dan pesan kesalahan ditampilkan, dan untuk alasan yang sama.

  10. Pada panel Tree view , pada BrowseScreen1, pilih LblAppName1. Ubah ekspresi untuk properti Width dengan menghapus referensi ke IconNewItem1.Width. Ekspresi baru seharusnya adalah Parent.Width - Self.X - IconSortUpDown1.Width - IconRefresh1.Width.

    Ubah lebar label.

  11. Header masih mengalami masalah. Meskipun teks Telusuri Bagian telah muncul kembali, kesalahan sedang ditampilkan, dan ikon penyegaran dan pengurutan berada di tempat yang salah. Pada panel Tampilan Pohon , pilih UrutkanIkonAtasBawah1. Temukan properti X untuk kontrol ini. Properti ini menentukan posisi horizontal ikon di header. Saat ini dihitung berdasarkan lebar kontrol IconNewItem1 .

    Kesalahan ikon Urutkan.

  12. Ubah ekspresi untuk properti X menjadi Parent.Width - Self.Width.

  13. Pada panel Tampilan hierarkis, pilih IconRefresh1. Ubah ekspresi untuk properti X menjadi Parent.Width - IconSortUpDown1.Width - Self.Width. Kesalahan seharusnya hilang semua.

Simpan dan uji aplikasi

Sekarang Anda dapat menyimpan dan menguji aplikasi.

  1. Pilih File>Simpan sebagai.

  2. Di bawah Simpan sebagai, pilih Cloud, masukkan nama VanArsdelApp, lalu pilih Simpan.

    Simpan aplikasi.

  3. Pilih panah kembali untuk kembali ke layar Beranda .

    Kembali ke layar Beranda.

  4. Pilih F5 untuk melihat pratinjau aplikasi. Pada halaman Telusuri Bagian , pilih braket sudut kanan (>) di sebelah kanan bagian mana pun. Layar Detail untuk bagian tersebut muncul.

    Penjalanan awal aplikasi.

  5. Pilih braket sudut kiri (<) di header layar Detail untuk kembali ke layar Telusuri .

  6. Pada layar Telusuri Bagian , masukkan teks di kotak Pencarian . Saat Anda mengetik, item akan difilter untuk hanya menampilkan item yang memiliki teks yang cocok di bidang Nama, ID Kategori, atau Ringkasan .

    Cari di layar Telusuri suku cadang.

  7. Tutup jendela pratinjau dan kembali ke Power Apps Studio.

Item 2: Basis Pengetahuan lapangan

Untuk akses ke basis pengetahuan, Andhara dan Caleb (teknisi) membayangkan antarmuka sederhana di mana pengguna memasukkan istilah pencarian dan aplikasi menampilkan semua artikel basis pengetahuan yang menyebutkan istilah tersebut. Maria tahu bahwa proses ini akan melibatkan Azure Cognitive Search, tetapi tidak perlu—atau bahkan ingin—memahami cara kerjanya. Oleh karena itu, Maria memutuskan untuk hanya menyediakan antarmuka pengguna dasar dan bekerja dengan Kiana nanti untuk menambahkan fungsionalitas yang sebenarnya.

Maria memutuskan untuk membuat layar baru berdasarkan templat Daftar yang tersedia di. Power Apps Studio

  1. Power Apps Studio Pada toolbar layar Utama , pilih Layar Baru, lalu pilih Daftar.

    Template Daftar.

  2. Di header layar, pilih label yang menampilkan teks [Judul]. Ubah properti Teks menjadi "Kueri" (sertakan tanda kutip).

    Memodifikasi teks header layar kueri.

  3. Di header layar, pilih tanda plus (+), lalu pilih Hapus. Ikon dimaksudkan + untuk memungkinkan pengguna menambahkan lebih banyak item ke daftar. Basis pengetahuan bersifat hanya kueri, sehingga fitur ini tidak diperlukan.

    Hapus ikon +.

    Perhatikan bahwa menghapus ikon ini menyebabkan kesalahan di header karena cara menghitung lokasi dan lebar item lainnya. Anda melihat ini sebelumnya dengan layar manajemen inventaris dan solusinya sama, seperti dijelaskan dalam langkah-langkah berikut.

  4. Pada panel Tampilan hierarkis, gulir ke bawah ke bagian Layar1 , dan pilih LblAppName3. Ubah properti Width ke rumus Parent.Width - LblAppName3.X - IconSortUpDown2.Width - IconRefresh2.Width.

    Memodifikasi lebar header layar kueri.

  5. Pada panel Tampilan hierarkis, pilih IconSortUpDown2. Ubah properti X ke rumus Parent.Width - IconSortUpDown2.Width.

  6. Pada panel Tampilan hierarkis, pilih IconRefresh2. Ubah properti X menjadi Parent.Width - IconSortUpDown2.Width - IconRefresh2.Width. Langkah ini harus menangani semua kesalahan pada layar.

  7. Pilih Simpan File>.

  8. Di kotak Catatan versi, masukkan teks Menambahkan UI Pangkalan Pengetahuan Pengetahuan, lalu pilih Simpan.

  9. Kembali ke layar Beranda dan pilih F5 untuk melihat pratinjau layar baru. Ini terlihat seperti gambar berikut ini.

    Layar kueri yang sedang berjalan.

    Perhatikan bahwa jika Anda memilih > ikon di sebelah salah satu entri tiruan, fungsionalitas detail saat ini tidak berfungsi. Anda akan menanganinya nanti bila Anda mengintegrasikan Azure Cognitive Search ke dalam aplikasi.

  10. Tutup jendela pratinjau dan kembali ke Power Apps Studio.

Item 3: Penjadwalan lapangan dan catatan

Andhara bekerja dengan Malik, resepsionis kantor, untuk merancang antarmuka untuk bagian penjadwalan lapangan dan janji temu dari aplikasi. Malik menyediakan buku kerja Excel dengan beberapa data sampel yang dapat digunakan oleh Andhara untuk membuat layar janji temu. Buku kerja berisi tabel dengan kolom berikut:

  • ID (ID janji temu)
  • ID Pelanggan (pengidentifikasi unik untuk pelanggan)
  • Nama Pelanggan
  • Alamat Pelanggan
  • Rincian Masalah (deskripsi teks tentang masalah yang sedang dihadapi pelanggan)
  • Nomor kontak
  • Status
  • Tanggal janji temu
  • Waktu Janji Temu
  • Catatan (deskripsi teks dengan catatan apa pun yang ditambahkan oleh teknisi)
  • Gambar (foto peralatan, baik dalam kondisi kerja setelah diperbaiki atau sebagai gambar tambahan untuk catatan teknisi)

Buku kerja janji temu.

Catatan

Sama seperti data manajemen inventaris bidang, buku kerja ini menyajikan tampilan data yang didenormalkan. Di sistem janji temu yang ada, data ini disimpan dalam tabel terpisah yang menyimpan data janji temu dan data pelanggan.

Maria menyimpan file ini di OneDrive akun dengan nama Appointments.xlsx. Mengingat bahwa sebelumnya nama default untuk tabel digunakan dalam buku kerja dan judul harus diubah di berbagai layar yang dihasilkan, Maria mengganti nama tabel di buku kerja menjadi Janji Temu.

Catatan

Buku kerja ini tersedia di folder Aset repositori Git untuk panduan ini.

Andhara ingin membuat bagian janji temu dari aplikasi secara langsung dari file Excel. Maria memutuskan untuk mengikuti pendekatan yang mirip dengan fungsionalitas manajemen inventaris lapangan, kecuali bahwa kali ini insinyur akan diizinkan untuk membuat dan mengedit janji temu.

Andhara memutuskan untuk membuat layar janji temu pada awalnya sebagai aplikasi terpisah. Dengan cara ini, Maria dapat menggunakan Power Apps Studio untuk menghasilkan sebagian besar aplikasi secara otomatis. Power Apps Studio saat ini tidak memungkinkan Anda membuat layar tambahan dari sambungan data di aplikasi yang ada. Setelah membuat dan menguji layar, Maria akan menyalinnya ke inventaris lapangan dan aplikasi basis pengetahuan.

Catatan

Pendekatan alternatifnya adalah menambahkan tabel Janji Temu dalam file Excel sebagai sumber data kedua ke aplikasi yang ada, lalu membuat layar untuk janji temu dengan tangan. Maria memilih untuk membuat layar baru dari buku kerja dan menyalin layar. Saat ini, Maria lebih akrab dengan konsep copy and paste daripada membuat layar secara manual, dan secara bertahap akan belajar cara membuat layar dari awal seiring berjalannya proses pembuatan aplikasi ini.

Untuk membuat aplikasi janji temu

  1. Di Power Apps Studio bilah menu, pilih File.

    Menu File.

  2. Di panel kiri, pilih Baru. Di panel utama, pilih OneDrive kotak untuk Bisnis - Tata letak telepon.

    Buat aplikasi baru.

  3. Pada panel Koneksi, pilih Appointments.xlsx.

    Aplikasi baru dari buku kerja janji temu.

  4. Dalam file Excel, pilih tabel Janji temu , lalu pilih Hubungkan.

    Pilih tabel janji temu.

  5. Tunggu saat aplikasi dibuat. Saat aplikasi baru muncul, aplikasi akan berisi layar Telusuri , layar Detail , dan layar Edit , menggunakan tema default.

    Aplikasi janji temu yang dibuat.

  6. Pada panel Tampilan hierarkis, di bagian BrowseScreen1 di bawah BrowseGallery1, pilih Image1, lalu pilih Hapus. Layar Telusuri seharusnya hanya mencantumkan janji temu, bukan gambar apa pun yang terkait dengannya.

    Menghapus kontrol gambar.

    Perhatikan bahwa menghapus kontrol Image1 menyebabkan beberapa kesalahan pada layar karena lebar dan lokasi kontrol Title1 keduanya merujuk pada kontrol Gambar . Anda akan memperbaiki masalah ini pada langkah berikut.

  7. Pada panel Tampilan hierarki di bawah BrowseGallery1, pilih Judul1. Ubah nilai dalam properti X menjadi 16. Ubah rumus di properti Width menjadi Parent.TemplateWidth - 104. Langkah ini harus menangani kesalahan untuk layar.

  8. Pada panel Tampilan hierarki di bawah BrowseGallery1, pilih Body1. Kontrol ini saat ini menampilkan rincian telepon kontak untuk pelanggan. Ubah nilai dalam properti Teks menjadi ThisItem.'Nama Pelanggan' (sertakan tanda kutip tunggal).

    Ubah kontrol Body1 ke nama pelanggan.

    Detail pada nama layar Telusuri sekarang menampilkan nama pelanggan.

  9. Pada panel Tampilan hierarkis, pilih BrowseGallery1. Dengan menggunakan bilah rumus, periksa ekspresi di properti Item . Kontrol mencari janji temu dengan menggunakan tanggal, waktu, dan nomor kontak janji temu. Ubah rumus ini untuk mencari nama pelanggan daripada nomor kontak:

    SortByColumns(Search([@Appointments], TextSearchBox1.Text, "Appointment_x0020_Date","Appointment_x0020_Time","Customer_x0020_Name"), "Appointment_x0020_Date", If(SortDescending1, Descending, Ascending)).

    Perhatikan bahwa janji temu dipesan berdasarkan tanggal dan kemudian waktu (dua bidang pertama ditampilkan).

  10. Pada panel Tampilan hierarkis, hapus IconNewItem1. Hanya staf lokal dapat memesan janji temu baru untuk teknisi dan insinyur. Perhatikan bahwa tindakan ini mengakibatkan kesalahan pada formulir karena lebar dan posisi kontrol lain di header merujuk pada ikon yang baru saja Anda hilangkan.

  11. Pada panel Tampilan hierarkis, pilih LblAppName1. Ubah rumus untuk properti Width . ke Parent.Width - Self.X - IconSortUpDown1.Width - IconRefresh1.Width.

  12. Pada panel Tampilan hierarkis, pilih IconRefresh1. Ubah nilai untuk properti X menjadi Parent.Width - IconSortUpDown1.Width - Self.Width.

  13. Pada panel Tampilan hierarkis, pilih iconSortUpDown1. Ubah nilai untuk properti X menjadi Parent.Width - Self.Width.

  14. Pada panel Tampilan hierarkis, pilih BrowseScreen1, lalu pilih tombol elipsis (...). Pada menu tarik-turun yang muncul, pilih Ganti nama dan ubah nama layar menjadi BrowseAppointments.

    Ganti nama layar telusuri.

  15. Dengan menggunakan teknik yang sama, ubah nama kontrol BrowseGallery1 menjadi BrowseAppointmentsGallery.

Itu melengkapi layar Telusuri .

Untuk membuat layar detail

Anda sekarang dapat mengalihkan perhatian Anda ke layar Detail .

  1. Pada panel Tampilan hierarkis, gulir ke bawah ke bagian DetailsScreen1 . Anda dapat melihat bahwa detail disajikan dalam urutan abjad berdasarkan nama bidang, dan beberapa informasi yang berguna—seperti bidang Catatan —tidak ditampilkan sama sekali.

    Tata letak layar rincian janji temu.

  2. Pada panel Tampilan hierarkis, pilih DetailForm1. Di panel kanan pada tab Properti , pilih Edit bidang di samping Bidang. Di panel tengah, pilih masing-masing bidang berikut, lalu pilih Hapus:

    • Tanggal janji temu
    • Waktu Janji Temu
    • ID pelanggan
    • ID

  3. Pilih + Tambahkan bidang, dan tambahkan bidang berikut:

    • Catatan
    • Detail Masalah
    • Status

    Tambahkan bidang ke layar rincian.

  4. Tarik setiap bidang sehingga bidang ditampilkan dalam urutan berikut, dari atas ke bawah:

    • Nama Pelanggan
    • Alamat Pelanggan
    • Nomor kontak
    • Detail Masalah
    • Status
    • Catatan
    • Image

  5. Pada panel Tampilan hierarkis, pilih Notes_DataCard1. Ubah properti Height menjadi 320.

    Ubah ukuran bidang catatan.

  6. Pada panel Tampilan hierarkis, hapusIconDelete1. Teknisi tidak boleh menghilangkan janji temu dari sistem.

  7. Pilih LblAppName2, dan ubah properti Width menjadi Parent.Width - Self.X - IconEdit1.Width.

  8. Dengan menggunakan teknik yang dijelaskan sebelumnya, ubah nama DetailsScreen1 menjadi AppointmentDetails.

Untuk mengedit layar Edit

Layar terakhir yang harus dilihat, untuk saat ini, adalah layar Edit .

  1. Pada panel Tampilan Pohon , pilih EditLayar1.

  2. Pada panel Tampilan hierarkis, di bagian EditScreen1 , pilih EditForm1. Pada panel kanan, pada tab Properti , pilih Edit bidang di samping Bidang.

  3. Hapus bidang berikut:

    • Alamat Pelanggan
    • ID
    • ID pelanggan
    • Tanggal janji temu
    • Waktu Janji Temu

  4. Tambahkan bidang berikut:

    • Detail Masalah
    • Status
    • Catatan

  5. Tarik setiap bidang sehingga bidang ditampilkan dalam urutan berikut, dari atas ke bawah:

    • Nama Kontak
    • Nomor Pelanggan
    • Detail Masalah
    • Status
    • Catatan
    • Image

  6. Pilih bidang Nama Pelanggan dan perluas untuk melihat propertinya. Ubah jenis Kontrol menjadi Lihat teks . Perubahan ini membuat kontrol baca-saja; berguna untuk melihat nama pelanggan di layar Edit , tetapi seorang insinyur seharusnya tidak dapat mengubahnya.

    Buat nama pelanggan hanya baca.

  7. Pilih bidang Nomor Kontak dan perluas untuk melihat propertinya. Ubah jenis Kontrol menjadi Lihat teks . Bidang ini juga harus hanya baca.

  8. Pilih bidang Catatan , perluas, dan ubah jenis Kontrol menjadi Edit teks multibaris. Pengaturan ini memungkinkan teknisi menambahkan catatan terperinci yang dapat menjangkau beberapa baris.

  9. Pilih bidang Status , perluas, dan ubah jenis Kontrol menjadi Nilai yang Diizinkan.

  10. Pada panel Tampilan hierarkis, pilih Status_DataCard5. Di panel kanan, pada tab Properti , pilih Buka Kunci untuk mengubah properti . Gulir ke bawah ke properti AllowedValues , dan ubah teks menjadi ["Tetap", "Bagian Diurutkan", "Tidak Terselesaikan"] (sertakan tanda kurung siku). Insinyur lapangan hanya dapat mengatur Status ke salah satu nilai yang ditentukan ini.

    Atur nilai Status yang diizinkan.

  11. Pada panel Tampilan hierarkis, ganti nama EditScreen1 menjadi EditAppointment.

Sekarang Anda dapat menyimpan dan menguji aplikasi.

  1. Pilih File>Simpan sebagai.

  2. Di bawah Simpan sebagai, pilih Cloud, masukkan nama VanArsdelAppointments, lalu pilih Simpan.

  3. Pilih panah kembali di Power Apps Studio bilah alat untuk kembali ke layar Beranda .

  4. Pilih F5 untuk melihat pratinjau aplikasi. Pada halaman Janji temu , pilih ikon di > samping janji temu apa pun. Layar Detail untuk janji temu akan muncul. Di header, pilih Edit untuk memperbarui janji temu. Tentukan yang berikut:

    • Bidang nama pelanggan dan nomor kontak hanya dapat dibaca.
    • Bidang status terbatas pada nilai di daftar dropdown.
    • Anda dapat memasukkan catatan yang menjangkau beberapa baris.
    • Anda dapat mengunggah file gambar ke bidang gambar.

    Catatan

    Peningkatan yang akan Anda tambahkan nanti akan memungkinkan Anda mengambil gambar dengan ponsel dari dalam aplikasi, dan menambahkannya ke bidang gambar.

    Aplikasi janji temu berjalan.

Menggabungkan layar ke dalam satu aplikasi

Maria telah membangun dua aplikasi, tetapi ingin menggabungkannya menjadi satu aplikasi. Untuk melakukan ini, Maria menyalin layar untuk aplikasi janji temu ke dalam aplikasi manajemen inventaris lapangan dan basis pengetahuan, sebagai berikut:

  1. Buka jendela browser baru, lalu masuk ke Power Apps Studio dengan rincian akun Anda.

  2. Di panel kiri, pilih Aplikasi, pilihVanArdselApp , lalu pilihEdit.

    Buka aplikasi VanArsdel.

  3. Di bilah alat, pilih Layar baru, lalu pilih Kosong. Tindakan ini akan menambahkan layar baru ke aplikasi tempat Anda akan menyalin kontrol untuk layar Telusuri untuk aplikasi VanArsdelAppointments .

    Menambahkan layar kosong.

  4. Layar baru akan diberi nama Screen2. Pada panel Tampilan hierarkis, ganti namanya menjadi BrowseAppointments.

  5. Ulangi langkah sebelumnya dua kali lagi, untuk menambahkan dua layar kosong lagi (Screen3 dan Screen4).

  6. Ganti nama Screen3 sebagai AppointmentDetails, dan ganti nama Screen4 menjadi EditAppointment.

  7. Di bilah alat Power Apps Studio kiri, pilih ikon Data . Pada panel Data , pilih Tambahkan data. Dalam daftar dropdown Pilih sumber data, di bidang Pencarian , masukkan OneDrive, lalu pilih OneDrive untuk Bisnis.

    Pilih sumber data.

  8. Pilih file Excel Appointments.xlsx , pilih tabel Janji temu , lalu pilih Hubungkan.

  9. Beralih ke jendela browser yang menampilkan aplikasi VanArsdelAppointments .

  10. Pada bilah alat, pilih Tema (Anda mungkin harus memperluas bilah alat untuk menampilkan lebih banyak item), lalu pilih tema Hutan . Ini adalah tema yang sama yang digunakan oleh aplikasi VanArsdel .

  11. Di toolbar kiri, pilih ikon Tampilan hierarkis, pilih layar JelajahiJanji Temu, lalu pilih Ctrl+A. Tindakan ini akan memilih semua kontrol di layar.

  12. Pilih Ctrl+C untuk menyalin kontrol ini ke clipboard.

  13. Kembali ke jendela browser yang menampilkan aplikasi VanArsdelApp .

  14. Di toolbar kiri, pilih ikon Tampilan hierarkis, lalu pilih layar BrowseAppointments .

  15. Pilih Ctrl+V untuk menempelkan kontrol ke layar.

    Catatan

    Terkadang header layar tampak sedikit turun. Untuk memperbaiki masalah ini, pilih kontrol IconSortUpDOwn1_1,IconRefresh1_1,LblAppName1_1, dan RectQuickActionBar1_1 Pada panel tampilan hierarki (tahan Shift sambil mengklik untuk memilih lebih dari satu kontrol sekaligus), lalu gunakan tombol mouse atau panah untuk memindahkannya ke atas di panel tampilan desain.

  16. Beralih kembali ke jendela browser yang menampilkan aplikasi VanArsdelAppointments , lalu pilih dan salin kontrol di layar AppointmentDetails ke clipboard (Ctrl+A diikuti dengan Ctrl+C).

  17. Kembali ke jendela browser yang menampilkan aplikasi VanArsdelApp , pilih layar AppointmentDetails , lalu tempel kontrol (Ctrl+V). Sesuaikan posisi kontrol di header layar, jika perlu.

    Catatan

    Anda akan melihat kesalahan yang dilaporkan di header layar AppointmentDetails . Kesalahan ini terjadi karena layar mereferensikan kontrol di layar EditAppointment , yang belum disalin. Langkah-langkah berikutnya seharusnya menangani kesalahan ini.

  18. Beralih kembali ke jendela browser yang menampilkan aplikasi VanArsdelAppointments , lalu pilih dan salin kontrol pada layar EditAppointment ke clipboard.

  19. Kembali ke jendela browser yang menampilkan aplikasi VanArsdelApp , pilih layar EditAppointment , lalu tempel kontrol. Sekali lagi, pindahkan kontrol di header layar jika perlu.

  20. Pada panel Tampilan hierarkis, pilih layar AppointmentDetails dan verifikasi bahwa kesalahan yang ditunjukkan sebelumnya sekarang telah hilang.

  21. Pada panel Tampilan hierarkis, pilih layar BrowseScreen1 . Ganti nama layar ini menjadi BrowseParts.

  22. Ganti nama layar DetailsScreen1 menjadi PartDetails.

  23. Ganti nama layar Screen1 sebagai Basis Pengetahuan.

    Catatan

    Adalah praktik yang baik untuk mengganti nama layar agar dapat mencerminkan fungsinya daripada menggunakan nama default yang dihasilkan oleh Power Apps Studio, terutama jika aplikasi berisi beberapa layar. Hal ini dapat membantu menghindari kebingungan di lain waktu jika aplikasi dimodifikasi oleh pengembang lain.

Menambahkan layar Beranda ke aplikasi

Tahap terakhir adalah menambahkan layar Beranda ke aplikasi. Layar Beranda akan memungkinkan teknisi untuk berpindah di antara berbagai bagian aplikasi (manajemen inventaris, basis pengetahuan, dan janji temu).

  1. Di aplikasi VanArsdelApp pada toolbar, pilih Layar baru, lalu pilih Kosong.

  2. Pada panel Tampilan hierarkis, ganti nama Screen2 menjadi Home.

  3. Pada toolbar, pilih Sisipkan. Dalam daftar kontrol, perluas Media, lalu pilih Gambar. Kontrol akan ditambahkan ke layar.

    Menambahkan kontrol gambar ke layar Beranda.

  4. Atur posisi X kontrol ke 16, dan posisi Y ke 22. Ubah lebar menjadi 605, dan tinggi menjadi 127. Ubah posisi Gambar menjadi Isi.

    Atur ukuran dan posisi gambar.

  5. Saat masih di tab Properti , di daftar dropdown Gambar , pilih + Tambahkan file gambar, lalu unggah gambar VanArsdelLogo.png ke kontrol.

    Catatan

    File gambar tersedia di folder Aset di repositori Git untuk panduan ini.

    Menambahkan logo ke gambar.

  6. Dari daftar kontrol, tambahkan empat kontrol label Teks ke formulir dan posisikan sehingga ditumpuk di bawah logo VanArsdel.

    Menambahkan kontrol label teks.

  7. Pilih kontrol label Teks paling atas. Di panel kanan, pada tab Properti , atur properti Teks ke Janji Temu Berikutnya. Atur Ukuran Font ke 30, dan gunakan pemilih warna untuk mengatur warna font menjadi hijau (agar sesuai dengan logo).

    Mengatur warna font.

  8. Pilih kontrol label Teks kedua . Ubah nilai properti Text menjadi First(Appointments).' Nama Pelanggan' (sertakan tanda kutip). Rumus ini mengambil nama pelanggan dari baris pertama pada tabel janji temu.

    Tampilkan nama pelanggan.

    Catatan

    Saat ini, rumus ini hanya berfungsi sebagai placeholder. Anda akan memodifikasi label nanti untuk mengambil janji temu berikutnya untuk teknisi, dan bukan selalu menampilkan yang pertama.

  9. Pilih kontrol label Teks ketiga , dan atur properti Teks ke Pertama(Janji Temu ).' Tanggal Janji Temu'.

  10. Atur properti Text dari kontrol label keempat ke First(Appointments).' Waktu Janji Temu'. Atur properti Ukuran font ke 30.

  11. Dari daftar kontrol, tambahkan kontrol Persegi panjang . Atur properti berikut untuk kontrol ini:

    • Mode tampilan: Lihat
    • X: 0
    • Y: 632
    • Lebar: 635
    • Tinggi: 1

    Kontrol ini berfungsi sebagai pemisah visual di bagian tengah layar.

  12. Tambahkan tiga kontrol Tombol ke layar, disusun secara vertikal dan diberi jarak merata di bawah pemisah. Atur properti Teks untuk tombol atas ke Janji Temu, properti Teks untuk tombol tengah ke Bagian, dan properti Teks untuk tombol bawah ke Basis Pengetahuan.

    Tombol Layar beranda.

  13. Pilih tombol Janji Temu . Ubah ekspresi dalam tindakan OnSelect ke rumus Navigate(BrowseAppointments, ScreenTransition.Fade). Tindakan ini akan mengalihkan tampilan ke layar janji temu saat pengguna memilih tombol.

    Tombol janji temu.

  14. Atur tindakan OnSelect untuk tombol Parts ke Navigate(BrowseParts, ScreenTransition.Fade).

  15. Atur tindakan OnSelect untuk tombol Basis Pengetahuan ke Navigate(Knowledgebase, ScreenTransition.Fade).

Selain menavigasi dari layar Utama ke layar lain dalam sistem, layar Janji Temu, Bagian , danBasis Pengetahuan memerlukan cara untuk memungkinkan pengguna kembali ke layar Utama . Andhara memutuskan untuk menambahkan tombol kembali ke layar.

  1. Pada panel Tampilan hierarkis, pilih layar BrowseParts .

  2. Pilih kontrol RectQuickActionBar1 untuk memberikan fokus.

  3. Pilih menu Sisipkan , dan pilih ikon Tambahkan. Pindahkan ikon ke kiri kontrol RectQuickActionBar1 . Perhatikan bahwa ikon akan mengaburkan bagian dari label Telusuri Bagian .

    Tambahkan ikon.

  4. Pada menu Tampilan hierarkis, ubah nama kontrol ikon baru menjadi IconReturn1.

  5. Ubah rumus untuk tindakan OnSelect ke ekspresi Back(ScreenTransition.Fade). Fungsi Kembali mengarahkan pengguna ke layar sebelumnya yang mereka kunjungi.

  6. Pada tab Properti , ubah properti Ikon menjadi < Kiri.

  7. Di header layar, pilih label Telusuri Bagian . Ubah properti X menjadi IconReturn1.Width + 20.Label Telusuri bagian tidak boleh lagi dikaburkan sebagian.

    Memindahkan label Telusuri Suku cadang.

  8. Mengikuti proses yang dijelaskan dalam langkah 16 hingga 22, tambahkan ikon bernama IconReturn2 ke kontrol RectQuickActionBar3 di layar Basis Pengetahuan.

  9. Demikian pula, tambahkan ikon bernama IconReturn3 ke kontrol RectQuickActionBar1_1 di layar BrowseAppointments .

  10. Pada panel Tampilan hierarkis, pilih objek Aplikasi . Ubah properti StartScreen ke ekspresi Beranda. Ini memastikan bahwa layar Beranda ditampilkan setiap kali aplikasi dimulai:

    Atur rumus OnStart aplikasi.

    Catatan

    Jika Anda tidak menentukan layar mana yang akan ditampilkan saat aplikasi dimulai, layar yang muncul di bagian atas panel Tampilan hierarki akan digunakan. Untuk memindahkan layar ke awal daftar, klik kanan layar pada panel Tampilan hierarki dan pilih Pindahkan ke atas hingga berada di bagian atas.

Terakhir, Anda dapat menguji aplikasi tersebut.

  1. Pilih Simpan File>. Di kotak Catatan versi, masukkan Versi lengkap dengan layar Utama, lalu pilih Simpan.

  2. Pilih panah kembali untuk kembali ke layar Beranda , lalu pilih F5 untuk menjalankan aplikasi.

  3. Verifikasi bahwa layar Utama untuk aplikasi muncul.

  4. Pilih Janji Temu. Layar janji temu seharusnya muncul.

  5. Pilih panah kembali untuk kembali ke layar Beranda .

  6. Pilih Bagian. Browser suku cadang seharusnya muncul.

  7. Pilih panah kembali untuk kembali ke layar Beranda .

  8. Pilih Basis Pengetahuan. Layar kueri basis pengetahuan seharusnya muncul.

  9. Pilih panah kembali untuk kembali ke layar Beranda .

  10. Tutup jendela pratinjau dan kembali ke Power Apps Studio.

Aplikasi prototipe sekarang selesai.

sebelumnyaBerikutnya