Saran dan Komentar

Membuat aplikasi kanvas untuk mengelola proyek

  • Artikel
  • 5 menit untuk membaca

Catatan

Artikel ini adalah bagian dari rangkaian tutorial penggunaan Power Apps, Power Automate, dan Power BI dengan SharePoint Online. Pastikan Anda membaca Pendahuluan series untuk mendapatkan gambaran besarnya, serta unduhan terkait.

Dalam tugas ini, kita akan membuat aplikasi kanvas dari awal. Aplikasi ini memungkinkan pengguna untuk menetapkan manajer untuk proyek dan untuk memperbarui rincian proyek. Anda akan melihat beberapa kontrol yang sama dan formula yang Anda lihat di aplikasi pertama, namun Anda akan membangun lebih banyak aplikasi sendiri saat ini. Prosesnya lebih rumit, namun Anda akan belajar lebih banyak, jadi kami pikir ini adalah pertukaran yang adil.

Tinjauan singkat dari Power Apps Studio

Power Apps Studio memiliki tiga panel dan pita yang membuat pembuatan aplikasi terasa seperti membangun dek slide di PowerPoint:

  1. Bilah navigasi kiri, yang menampilkan tampilan hierarki semua layar dan kontrol aplikasi, serta gambar mini layar
  2. Panel tengah, yang berisi layar aplikasi yang Anda kerjakan
  3. Panel kanan, tempat Anda mengatur pilihan seperti tata letak dan sumber data
  4. Properti daftar drop-down, di mana Anda memilih properti yang dibelakukan formula
  5. Bilah formula, di mana Anda menambahkan formula (seperti di Excel) yang menentukan perilaku aplikasi
  6. Pita, di mana Anda menambahkan kontrol dan menyesuaikan elemen desain

Power Apps Studio.

Langkah 1: Buat layar

Dengan ulasan tersebut, mari mulai membuat aplikasi.

Membuat aplikasi

Buat aplikasi kanvas kosong dengan tata letak Telepon, dan nama "aplikasi Manajemen Proyek".

Tambahkan empat layar ke aplikasi

Pada langkah ini, kita akan membuat empat layar kosong untuk aplikasi. Kita akan menggunakan tata letak layar yang berbeda, tergantung pada tujuan layar. Kita akan menambahkan layar ini di langkah selanjutnya.

Layar Tujuan
SelectTask Membuka layar; menavigasi ke layar lain
AssignManager Menetapkan manajer ke proyek yang disetujui
ViewProjects Lihat daftar proyek, dengan informasi ringkasan
UpdateDetails Melihat dan memperbarui rincian untuk proyek

  1. Di tab Beranda, klik atau ketuk NewScreen, lalu Layar yang dapat digulir.

    Layar yang dapat digulir.

  2. Ubah nama layar menjadi SelectTask.

    Ubah nama layar.

  3. Buat dan ganti nama layar tambahan:

    1. Klik atau ketuk NewScreen, lalu Layar yang dapat digulir. Ubah nama layar menjadi AssignManager.
    2. Klik atau ketuk NewScreen, lalu Layar daftar. Ubah nama layar menjadi ViewProjects.
    3. Klik atau ketuk NewScreen, lalu Layar formulir. Ubah nama layar menjadi UpdateDetails.

  4. Pilih elipsis (. . .) di sebelah Screen1, lalu klik atau ketuk Hapus.

    Hapus layar.

Sekarang aplikasi seharusnya tampak seperti pada gambar berikut.

Semua layar aplikasi.

Langkah 2: Menyambungkan ke daftar yang dibuat menggunakan Daftar Microsoft

Pada langkah ini, kita akan terhubung ke daftar Detail Proyek. Kami hanya menggunakan satu daftar di aplikasi ini, tetapi Anda dapat dengan mudah terhubung ke keduanya jika Anda ingin memperpanjang aplikasi.

  1. Di bilah navigasi kiri, klik atau ketuk layar SelectTask:

  2. Di panel kanan, klik atau ketuk Tambahkan sumber data.

    Menyambungkan ke data.

  3. Klik atau ketuk Sambungan baru.

    Sambungan Baru.

  4. Klik atau ketuk SharePoint

    Sambungan SharePoint.

  5. Pilih Sambungkan langsung (layanan awan), lalu klik atau ketuk Buat.

    Terhubung langsung (layanan awan).

  6. Masukkan URL SharePoint, lalu klik atau ketuk Buka.

    URL SharePoint untuk koneksi.

  7. Pilih daftae Rincian Proyek, lalu klik atau ketuk Sambungkan.

    Pilih daftar Rincian Proyek.

    Pada tab Sumber data di panel kanan sekarang menampilkan sambungan yang telah Anda buat.

    Tab sumber data.

Langkah 3: Buat layar SelectTask

Pada langkah ini, kami akan menyediakan cara untuk menavigasi ke layar lain di aplikasi - bekerja dengan beberapa pilihan kontrol, formula, dan pemformatan yang Power Apps sediakan.

Memperbarui judul dan memasukkan teks pengantar

  1. Di bilah navigasi kiri, pilih layar SelectTask.

  2. Di panel tengah, pilih default [Judu], lalu di bilah formula, perbarui properti Teks ke properti "Contoso Project Management".

    Properti teks di bilah formula.

  3. Pada tab Sisipkan, klik atau ketuk Label, lalu seret label di bawah spanduk atas.

    Tambahkan label.

  4. Di bilah formula, atur properti berikut untuk label:

    • Properti Warna = DarkGray

    • properti Size = 18

    • Properti Teks = "klik atau ketuk tugas untuk melanjutkan..."

      Perbarui label teks.

Tambahkan dua tombol navigasi

  1. Pada tab Sisipkan, klik atau ketuk Tombol, lalu seret tombol ke bawah label.

    Tombol Tambahkan.

  2. Di bilah formula, atur properti berikut untuk tombol:

    • Properti OnSelect = Navigasikan(AssignManager, Fade). Saat Anda menjalankan aplikasi dan mengeklik tombol ini, Anda menavigasi ke layar kedua di aplikasi, dengan transisi memudar antara layar.

    • Properti Teks = "Tetapkan Manajer"

  3. Ubah ukuran tombol untuk mengakomodasi teks.

    Tombol Ubah Ukuran.

  4. Masukkan tombol lain dengan properti berikut:

    • Properti OnSelect = Navigasikan(ViewProjects, Fade).

    • Properti Teks = "Rincian Pembaruan"

      Perbarui teks tombol.

      Catatan

      Tombol ini diberi label Rincian Pembaruan, namun kami terlebih dulu menavigasi ke layar ViewProjects untuk memilih proyek yang akan diperbarui.

Jalankan aplikasi

Aplikasi ini belum bisa melakukan banyak hal, namun Anda dapat menjalankannya jika Anda ingin:

  1. Klik atau ketuk layar SelecTask (aplikasi selalu dimulai dari layar yang dipilih dalam mode Pratinjau di Power Apps Studio).

  2. Klik atau ketuk Jalankan ikon aplikasi. di sudut kanan atas untuk menjalankan aplikasi.

  3. Klik atau ketuk salah satu tombol untuk menavigasi ke layar lain.

  4. Klik atau ketuk Tutup ikon pratinjau aplikasi. di sudut kanan atas untuk menutup aplikasi.

Langkah 4: Buat layar AssignManager

Pada langkah ini, kita akan menggunakan galeri untuk menampilkan semua proyek yang telah disetujui namun belum memiliki manajer. Kami akan menambahkan kontrol lainnya, sehingga Anda dapat menetapkan manajer.

Catatan

Kami akan membuat halaman nanti di aplikasi yang memungkinkan Anda mengedit semua bidang untuk proyek (termasuk bidang manajer), tapi kami pikir untuk membangun layar seperti ini, keren juga.

  1. Simpan perubahan yang telah Anda buat sejauh ini.

  2. Di bilah navigasi kiri, klik atau ketuk layar AssignManager:

Memperbarui judul dan memasukkan teks pengantar

  1. Ubah [Judul] ke Menetapkan Manajer.

  2. Tambahkan label dengan properti berikut:

    • Properti Warna = DarkGray

    • properti Size = 18

    • Properti Teks = "Pilih proyek, lalu tetapkan manajer"

      Tata letak menetapkan manajer.

Tambahkan panah kembali untuk kembali ke layar SelectTask

  1. Klik atau ketuk bilah biru di atas layar.

  2. Di tab Sisipkan, klik atau ketuk Ikon, lalu klik atau ketuk Kiri.

    Masukkan panah kiri.

  3. Pindahkan panah ke sisi kiri bilah biru, dan atur properti berikut:

    • Properti Warna = Putih

    • Properti Tinggi = 40

    • Properti OnSelect = Navigasikan(SelectTask, Fade)

    • Properti Lebar = 40

      Tambah tombol kembali.

  1. Pada tab Sisipkan, pilih atau ketuk Galeri, lalu pilih Vertikal.

    Tambahkan galeri vertikal.

  2. Pilih Judul, subjudul, dan isi dari menu Tata letak pada panel kanan.

    Mengubah tata letak galeri.

    Galeri sekarang memiliki tata letak yang tepat, namun masih memiliki teks sampel default. Kami akan memperbaikinya berikutnya.

    Galeri dengan teks default.

  3. Atur properti berikut pada galeri:

    • Properti BorderThickness = 1

    • Properti BorderStyle = Bertitik

    • Properti Item = Filter('Rincian Proyek', PMAssigned="Bebas"). Hanya proyek tanpa manajer yang ditetapkan termasuk dalam galeri.

      Galeri dengan teks dari daftar.

  4. Di panel sebelah kanan, perbarui bidang untuk mencocokkan daftar berikut:

    • ApprovedDate

    • Status

    • Judul

      Galeri.

  5. Mengubah ukuran label di galeri yang sesuai, dan menghapus panah dari item galeri pertama (kita tidak perlu menavigasi di mana pun dari galeri ini).

    Hapus ikon panah.

    Sekarang layar seharusnya tampak seperti pada gambar berikut.

    Galeri berformat.

Mengubah warna item jika dipilih

  1. Pilih galeri, kemudian atur properti TemplateFill ke Jika (Thisitem.IsSelected=benar, Oranye, Putih).

  2. Pilih item di galeri. Sekarang layar seharusnya tampak seperti pada gambar berikut.

    Galeri dengan item yang dipilih.

Tambahkan label, input teks, dan tombol OK untuk mengumpulkan penetapan manajer

  1. Klik atau ketuk di luar galeri yang telah Anda kerjakan.

  2. Pada tab Sisipkan, klik atau ketuk Label. Tarik label di bawah galeri, ke kiri. Atur properti berikut pada label:

    • Properti Ukuran = 20

    • Properti Teks = "Manajer:"

    Tambahkan label Manajer.

  3. Pada tab Sisipkan, pilih atau ketuk Teks, lalu pilih Input teks. Tarik input teks ke bawah galeri, di pusat. Atur properti berikut pada drop down:

    • Properti Default = ""

    • Properti Tinggi = 60

    • Properti Ukuran = 20

    • Properti Lebar = 250

    Tambahkan input teks.

  4. Pada tab Sisipkan, klik atau ketuk Tombol. Tarik tombol ke bawah galeri, ke kanan. Atur properti berikut pada tombol:

    • Properti Tinggi = 60

    • Properti OnSelect = Patch('Rincian Proyek', LookUp('Rincian Proyek', ID = Gallery1.Selected.ID), {PMAssigned: TextInput1.Text}). Untuk informasi lebih lanjut, lihat Pendalaman formula.

    • formula ini memperbarui Daftar Rincian Proyek , menetapkan nilai untuk bidang PMAssigned.

    • Properti Ukuran = 20

    • Properti Teks = "OK"

    • Properti Lebar = 80

    Tambahkan Tombol OK.

Layar yang lengkap seharusnya tampak seperti pada gambar berikut.

Layar Selesai Menetapkan Manajer.

Langkah 5: Buat layar ViewProjects

Pada langkah ini, kami akan mengubah properti untuk aleri pada layar ViewProjects. Galeri ini menampilkan item dari daftar Rincian Proyek . Anda memilih item di layar ini, kemudian mengedit rincian di layar UpdateDetails.

  1. Di bilah navigasi kiri, klik atau ketuk layar ViewProjects.

  2. Ubah [Judul] menjadi "Lihat Proyek".

  3. Di bilah navigasi kiri, klik atau ketuk layar BrowseGallery1 dalam ViewProjects.

  4. Pilih Judul, subjudul, dan isi dari menu Tata letak pada panel kanan.

    Mengubah tata letak galeri.

    Galeri sekarang memiliki tata letak yang tepat, dengan teks sampel default.

    Galeri dengan tata letak kanan.

  5. Pilih tombol refresh Ikon refresh., dan atur properti OnSelect untuk Refresh('Rincian Proyek').

  6. Pilih tombol item baru Tambahkan ikon baru., dan atur properti OnSelect ke NewForm(EditForm1); Navigasikan (UpdateDetails, ScreenTransition.None).

Tambahkan panah kembali untuk kembali ke layar SelectTask

  1. Di bilah navigasi kiri, klik atau ketuk layar AssignManager:

  2. Pilih panah belakang yang Anda tambahkan di sana, dan salin.

  3. Tempel panah ke dalam layar ViewProjects dan posisikan ke kiri tombol refresh.

    Tombol kembali.

    Semua properti yang datang bersama dengan itu, termasuk properti OnSelect Navigasikan(SelectTask, Fade).

  1. Pilih Galeri BrowseGallery1, dan atur properti Item galeri ke SortByColumns(Filter('Rincian Proyek', StartsWith(Judul, TextSearchBox1.Text)), "Judul", jika (SortDescending1, menurun, naik)).

    Ini mengatur sumber data galeri ke daftar Rincian Proyek , dan menggunakan bidang Judul untuk pencarian dan sortir.

  2. Pilih ikon panah Rincian. Di item galeri pertama, dan atur properti OnSelect ke Navigate(UpdateDetails, None).

    Galeri Tampilkan Proyek - item pertama dipilih.

  3. Di panel sebelah kanan, perbarui bidang untuk mencocokkan daftar berikut:

    • Status

    • PMAssigned

    • Judul

      Bidang galeri.

      Layar yang lengkap seharusnya tampak seperti pada gambar berikut.

      Layar Tampilkan Proyek selesai.

Langkah 6: Buat layar UpdateDetails

Pada langkah ini, kami akan menghubungkan formulir edit di layar UpdateDetails ke sumber data kami, dan kami akan membuat beberapa perubahan properti dan bidang. Di layar ini, Anda mengedit rincian untuk proyek yang Anda pilih pada layar Tampilkan Proyek .

  1. Di bilah navigasi kiri, klik atau ketuk layar UpdateDetails.

  2. Ubah [Judul] menjadi "Perbarui Rincian".

  3. Di bilah navigasi kiri, klik atau ketuk layar EditForm1 dalam UpdateDetails.

  4. Atur properti berikut pada formulir:

    • Properti DataSource = 'Rincian Proyek'

    • Properti Item = BrowseGallery1.Selected

  5. Dengan formulir masih dipilih, di panel kanan klik atau ketuk kotak centang untuk bidang berikut, dalam urutan yang ditunjukkan:

    • Judul

    • PMAssigned

    • Status

    • ProjectedStartDate

    • ProjectedEndDate

    • ProjectedDays

    • ActualDays

      Edit bidang formulir.

  6. Pilih tombol batalkan Ikon batalkan., dan atur properti OnSelect ke ResetForm(EditForm1); Back().

  7. Pilih ikon simpan tombol Simpan tanda centang. dan lihat rumus OnSelect - SubmitForm(EditForm1). Karena kita menggunakan kontrol Edit formulir, kita dapat menggunakan Submit(), selain menggunakan Patch() seperti yang kita lakukan sebelumnya.

Layar yang telah dilengkapi sekarang harus terlihat seperti gambar berikut (jika bidang kosong, pastikan Anda memilih item pada layar Tampilkan Proyek).

Layar Rincian Pembaruan selesai.

Langkah 7: Jalankan aplikasinya.

Setelah aplikasi selesai, mari jalankan untuk melihat cara kerjanya. Kami akan menambahkan tautan di situs SharePoint ke aplikasi. Anda akan dapat menjalankan aplikasi di peramban, namun Anda mungkin harus berbagi aplikasi untuk orang lain untuk menjalankannya. Untuk informasi lebih lanjut, lihat Bagikan aplikasi Anda.

  1. Pada peluncur aplikasi Office 365, klik atau ketuk Power Apps.

    Power Apps di peluncur aplikasi Office 365.

  2. Di Power Apps, klik atau ketuk elipsis (. . .) untuk aplikasi Project Management, lalu Buka.

    Pilih aplikasi Project Management.

  3. Salin alamat (URL) untuk aplikasi di peramban.

    Salin URL aplikasi.

  4. Di SharePoint, klik atau ketuk EDIT TAUTAN.

    Edit tautan situs SharePoint.

  5. Klik atau ketuk tautan (+).

    Tambahkan tautan aplikasi ke situs SharePoint.

  6. Masukkan "aplikasi Project Management", lalu tempel di alamat untuk aplikasi.

    Edit properti tautan.

  7. Klik atau ketuk OK, lalu Simpan.

    Simpan perubahan tautan.

Menetapkan manajer ke proyek

Sekarang setelah kami memiliki aplikasi di situs SharePoint kami, kami akan mengambil peran pemberi izin proyek - kami akan mencari proyek apa pun yang tidak memiliki manajer yang ditetapkan, dan menetapkan manajer ke salah satu proyek. Selanjutnya, kami akan mengambil peran manajer proyek, dan menambahkan beberapa informasi tentang proyek yang ditetapkan ke kami.

  1. Pertama, mari lihat daftar Rincian Proyek di SharePoint. Dua proyek memiliki nilai Bebas di kolom PMAssigned. Kita akan melihat ini di aplikasi.

    Proyek yang tidak ditetapkan dalam daftar.

  2. Klik atau ketuk tautan yang Anda buat ke aplikasi.

  3. Di layar pertama, klik atau ketuk Tetapkan Manajer.

    Layar intro aplikasi.

  4. Pada layar Tetapkan Manajer, Anda melihat dua proyek yang belum ditetapkan dari daftar. Pilih proyek Perangkat lunak BI baru.

    Galeri dengan item yang dipilih.

  5. Di input teks Manajer, masukkan "Joni Sherman", lalu klik OK.

    Perubahan diterapkan ke daftar, dan galeri merefresh sehingga hanya menampilkan sisa proyek yang belum ditetapkan.

    Menetapkan manajer ke proyek.

  6. Kembali ke daftar dan refresh halaman. Anda akan melihat bahwa entri proyek sekarang diperbarui dengan nama manajer proyek.

    Manajer proyek yang ditetapkan dalam daftar.

Memperbarui rincian untuk proyek

  1. Klik atau ketuk ikon Kembali. untuk kembali ke layar pertama, lalu klik atau ketuk Perbarui Rincian.

    Rincian pembaruan.

  2. Di layar Tampilkan Proyek, masukkan "Baru" di kotak pencarian.

    Cari di galeri aplikasi.

  3. Klik ikon panah Rincian. Untuk item perangkat lunak BI Baru.

    Galeri item terpilih.

  4. Pada Perbarui Rincian, atur nilai-nilai berikut:

    • Bidang ProjectedStartDate = "3/6/2017"

    • Bidang ProjectedEndDate = "3/24/2017"

    • Bidang ProjectedDays = "15"

    Perbarui rincian item.

  5. Klik atau ketuk Ikon tanda centang. Untuk menerapkan perubahan ke daftar.

  6. Tutup aplikasi, lalu kembali ke daftar. Anda melihat bahwa entri proyek sekarang diperbarui dengan perubahan tanggal dan hari.

    Daftar yang diperbarui.

Pendalaman formula

Ini adalah bagian opsional kedua pada formula Power Apps. Dalam pendalaman pertama, kita melihat salah satu formula yang Power Apps hasilkan untuk galeri telusuri di aplikasi tiga layar. Dalam pendalaman ini, kita akan melihat formula yang kita gunakan untuk layar AssignManageri di aplikasi kedua kita. Ini formulanya:

Patch( 'Rincian Proyek', LookUp( 'Rincian Proyek', ID = Gallery1.Selected.ID ), {PMAssigned: TextInput1.Text} )

Apa yang dilakukan formula ini? Bila Anda memilih item di galeri dan mengeklik tombol OK, formula akan memperbarui Daftar Rincian Proyek, mengatur kolom PMAssigned ke nilai yang Anda tentukan di input teks. formula ini menggunakkan fungsi untuk melakukan pekerjaannya:

  • Fungsi Patch memodifikasi satu atau beberapa catatan dari sumber data.

  • Fungsi LookUp menemukan rekaman pertama dalam tabel yang memenuhi formula.

Saat Anda menaruh fungsi bersama dalam rumusnya, ini yang terjadi:

  1. Bila Anda mengklik tombol OK , fungsi Patch dipanggil untuk memperbarui daftar Rincian Proyek.

  2. Di dalam fungsi Patch, fungsi LookUp mengidentifikasi baris mana dari daftar Rincian Proyek yang perlu diperbarui. Hal ini dilakukan dengan membandingkan ID dari item galeri yang dipilih ke ID dalam daftar. Contohnya, ID 12 berarti bahwa entri untuk Perangkat lunak baru BI harus diperbarui.

  3. Sekarang fungsi Patch memiliki ID yang benar, pembaruan akan memperbarui bidang PMAssigned ke nilai di TextInput1.Text.

Langkah berikutnya

Langkah berikut dalam tutorial ini adalah untuk membuat laporan Power BI untuk menganalisa proyek.

Lihat juga

Catatan

Apa bahasa dokumentasi yang Anda inginkan? Lakukan survei singkat. (perlu diketahui bahwa survei ini dalam bahasa Inggris)

Survei akan berlangsung kurang lebih selama tujuh menit. Tidak ada data pribadi yang dikumpulkan (pernyataan privasi).