Bagikan melalui

Template layar kalender di aplikasi kanvas

Dalam aplikasi kanvas, tambahkan layar kalender yang menampilkan aktivitas mendatang pengguna dari akun Office 365 Outlook. Pengguna dapat memilih tanggal dari kalender dan menggulir daftar aktivitas hari tersebut. Anda dapat mengubah rincian yang ditampilkan dalam daftar, tambahkan layar kedua yang menampilkan rincian lebih lanjut tentang setiap aktivitas, menampilkan daftar peserta untuk setiap aktivitas, dan membuat penyesuaian lainnya.

Anda juga dapat menambahkan layar berbasis template yang menampilkan data yang berbeda dari Office 365, seperti email, orang dalam organisasi, dan ketersediaan pengguna orang ingin mengundang ke pertemuan.

Ikhtisar ini mengajarkan Anda:

  • Cara menggunakan layar kalender default.
  • Cara memodifikasinya.
  • Cara mengintegrasikannya ke dalam aplikasi.

Untuk melihat lebih jauh fungsionalitas standar layar ini, lihat referensi layar pertemuan.

Prasyarat

Pengenalan dengan bagaimana cara menambah dan mengatur layar dan kontrol lainnya saat Anda membuat aplikasi dalam Power Apps.

Fungsionalitas default

Untuk menambahkan layar kalender dari template:

  1. Masuk ke Power Apps, lalu buat aplikasi atau membuka aplikasi yang ada dalam Power Apps Studio.

    Topik ini menunjukkan sebuah aplikasi ponsel, namun konsep yang sama berlaku pada aplikasi tablet.

  2. Pada tab Beranda dari pita, pilih Layar baru > Kalender.

    Secara degault, layar akan terlihat seperti ini:

    Layar kalender.

  3. Untuk menampilkan data, pilih pilihan dalam daftar drop-down di dekat bagian atas layar.

    Layar kalender setelah pemuatan selesai.

Beberapa catatan yang membantu:

  • Tanggal hari ini dipilih secara default, dan Anda dapat dengan mudah mengembalikannya dengan memilih ikon kalender di sudut kanan atas.
  • Jika Anda memilih tanggal yang berbeda, lingkaran mengelilinginya, dan persegi panjang yang berwarna terang (biru jika tema default diterapkan) mengelilingi tanggal hari ini.
  • Jika setidaknya satu aktivitas dijadwalkan untuk tanggal tertentu, lingkaran berwarna kecil akan muncul dalam tanggal tersebut di kalender.
  • Jika Anda memilih tanggal yang dijadwalkan satu atau beberapa aktivitas, aktivitas akan muncul dalam daftar di bawah kalender.

Menyesuaikan layar

Anda dapat memodifikasi fungsi default layar ini dengan beberapa cara umum:

Jika Anda ingin memodifikasi layar lebih lanjut, gunakan referensi layar kalender sebagai panduan.

Tentukan kalender

Jika Anda sudah mengetahui kalender mana yang akan dilihat pengguna, Anda dapat menyederhanakan layar dengan menentukan kalender tersebut sebelum mempublikasikan aplikasi. Perubahan ini menghilangkan kebutuhan untuk daftar drop-down kalender, sehingga Anda dapat menghapusnya.

  1. Atur properti OnStart aplikasi ke rumus ini:

    Set( _userDomain, Right( User().Email, Len( User().Email ) - Find( "@", User().Email ) ) );
Set( _dateSelected, Today() );
Set( _firstDayOfMonth, DateAdd( Today(), 1 - Day( Today() ), Days ) );
Set( _firstDayInView, 
    DateAdd( _firstDayOfMonth, -( Weekday( _firstDayOfMonth) - 2 + 1 ), Days )
);
Set( _lastDayOfMonth, DateAdd( DateAdd( _firstDayOfMonth, 1, Months ), -1, Days ) );
Set( _calendarVisible, false );
Set( _myCalendar, 
    LookUp(Office365Outlook.CalendarGetTablesV2().value, DisplayName = "{YourCalendarNameHere}" )
);
Set( _minDate, 
    DateAdd( _firstDayOfMonth, -( Weekday(_firstDayOfMonth) - 2 + 1 ), Days )
);
Set( _maxDate, 
    DateAdd(
        DateAdd( _firstDayOfMonth, -( Weekday(_firstDayOfMonth) - 2 + 1 ), Days ),
        40, 
        Days 
    )
);
ClearCollect( MyCalendarEvents, 
Office365Outlook.GetEventsCalendarViewV3(_myCalendar.name, 
    Text( _minDate, UTC),
    Text( _maxDate, UTC)
).value
);
Set( _calendarVisible, true )

    Catatan

    Rumus ini sedikit diedit dari nilai default properti OnSelect dari daftar drop-down untuk memilih kalender. Untuk informasi lebih lanjut tentang kontrol tersebut, lihat bagian di referensi layar kalender.

  2. Ganti {YourCalendarNameHere}, termasuk kurung kurawal, dengan nama kalender yang ingin Anda tampilkan (misalnya, Kalender).

    Penting

    Langkah berikut mengasumsikan bahwa Anda telah menambahkan hanya satu layar kalender ke aplikasi. Jika Anda menambahkan lebih dari satu, nama kontrol (seperti iconCalendar1) akan berakhir dengan nomor yang berbeda, dan Anda harus menyesuaikan rumus yang sesuai.

  3. Atur properti Y dari kontrol iconCalendar1 ke ekspresi ini:

    RectQuickActionBar1.Height + 20

  4. Atur properti Y dari kontrol LblMonthSelected1 ke ekspresi ini:

    iconCalendar1.Y + iconCalendar1.Height + 20

  5. Atur properti Teks dari kontrol LblNoEvents1 ke nilai ini:

    "No events scheduled"

  6. Atur properti yang Terlihat dari LblNoEvents1 ke rumus ini:

    CountRows(CalendarEventsGallery1.AllItems) = 0 && _calendarVisible

  7. Hapus kontrol Ini:

    • dropdownCalendarSelection1
    • LblEmptyState1
    • iconEmptyState1

  8. Jika layar kalender tidak memiliki layar default, tambahkan tombol yang menavigasikan dari layar default ke layar kalender sehingga Anda dapat menguji aplikasi tersebut.

    Misalnya, tambahkan tombol pada Layar1 yang menavigasi ke Layar2 jika Anda menambahkan layar kalender ke aplikasi yang Anda buat dari kosong.

  9. Simpan aplikasi, lalu uji di browser atau di perangkat bergerak.

Tampilkan rincian yang berbeda tentang aktivitas

Secara default, galeri dalam kalender, dinamai CalendarEventsGallery, menampilkan waktu mulai, durasi, subjek, dan lokasi setiap aktivitas. Anda dapat mengonfigurasi galeri untuk menampilkan bidang apa pun (seperti pengelola) di mana konektor Office 365 didukung.

  1. Dalam CalendarEventsGallery, atur properti Teks dari label baru atau yang ada untuk ThisItem yang diikuti dengan periode.

    IntelliSense mencantumkan bidang yang dapat Anda pilih.

  2. Pilih dari bidang yang Anda inginkan.

    Label menampilkan jenis informasi yang Anda tentukan.

Sembunyikan aktivitas yang tidak diblokir

Di beberapa kantor, anggota tim mengirimkan permintaan pertemuan untuk saling memberi tahu ketika mereka akan berada jauh dari kantor. Untuk menghindari pemblokiran jadwal setiap orang, orang yang mengirimkan permintaan menetapkan ketersediaannya ke Kosong. Anda dapat menyembunyikan aktivitas ini dari kalender dan galeri dengan memperbarui beberapa properti.

  1. Atur properti Item dari CalendarEventsGallery ke rumus ini:

    SortByColumns(
    Filter(
        MyCalendarEvents,
        Text( Start, DateTimeFormat.ShortDate ) = 
            Text( _dateSelected, DateTimeFormat.ShortDate ),
        ShowAs <> "Free"
    ),
    "Start"
)

    Dalam rumus ini, fungsi Filter tidak hanya menyembunyikan aktivitas yang dijadwalkan untuk tanggal selain satu yang dipilih, namun juga aktivitas yang ketersediaannya diatur ke Kosong.

  2. Dalam kalender, atur properti yang Terlihat dari kontrol Lingkaran ke rumus ini:

    CountRows(
    Filter(
        MyCalendarEvents,
        DateValue( Text(Start) ) = DateAdd( _firstDayInView, ThisItem.Value, TimeUnit.Days ),
        ShowAs <> "Free"
    )
) > 0 && !Subcircle1.Visible && Title2.Visible

    Rumus ini berisi filter yang sama dengan rumus sebelumnya. Oleh karena itu, lingkaran indikator aktivitas hanya muncul di tanggal jika memiliki satu atau beberapa aktivitas yang berada pada tanggal yang dipilih dan yang ketersediaannya tidak diatur ke Kosong.

Integrasikan layar ke aplikasi

Layar kalender adalah bundel kontrol yang canggih, namun berfungsi paling baik sebagai bagian dari aplikasi yang lebih besar dan serbaguna. Anda dapat mengintegrasikan layar ini ke aplikasi yang lebih besar dengan beberapa cara, termasuk menambahkan pilihan berikut:

Lihat rincian aktivitas

Jika pengguna memilih aktivitas dalam CalendarEventsGallery, Anda dapat membuka layar lain yang menampilkan informasi lebih lanjut tentang aktivitas tersebut.

Catatan

Prosedur ini menampilkan rincian aktivitas dalam galeri dengan konten dinamis, namun Anda dapat mencapai hasil yang sama dengan melakukan pendekatan lain. Misalnya, Anda dapat mendapatkan lebih banyak kontrol desain dengan menggunakan rangkaian label sebagai gantinya.

  1. Tambahkan layar kosong, bernama EventDetailsScreen, yang berisi galeri dengan tinggi fleksibel yang kosong dan tombol yang menavigasi kembali ke layar kalender.

  2. Di galeri dengan tinggi fleksibel, tambahkan kontrol Label dan kontrol Teks HTML, dan atur properti AutoHeight dari keduanya menjadi benar.

    Catatan

    Power Apps mengambil badan pesan dari setiap aktivitas sebagai teks HTML, sehingga Anda harus menampilkan konten tersebut dalam kontrol Teks HTML.

  3. Atur properti Y dari kontrol Teks HTML ke ekspresi ini:

    Label1.Y + Label1.Height + 20

  4. Sesuaikan properti tambahan yang diperlukan agar sesuai dengan kebutuhan gaya Anda.

    Misalnya, Anda mungkin ingin menambahkan baris pemisah di bawah kontrol Teks HTML.

  5. Atur properti Item dari galeri dengan tinggi fleksibel ke rumus ini:

    Table(
    { Title: "Subject", Value: _selectedCalendarEvent.Subject },
    { 
        Title: "Time", 
        Value: _selectedCalendarEvent.Start & " - " & _selectedCalendarEvent.End 
    },
    { Title: "Body", Value: _selectedCalendarEvent.Body }
)

    Rumus ini membuat galeri data dinamis yang diatur ke nilai bidang _selectedCalendarEvent, yang diatur setiap kali pengguna memilih aktivitas di kontrol CalendarEventsGallery. Anda dapat memperluas galeri ini untuk memasukkan lebih banyak bidang dengan menambahkan label lainnya ke dalamnya, namun kumpulan ini menyediakan titik awal yang bagus.

  6. Dengan item galeri di tempatnya, atur properti Teks dari kontrol Label ke ThisItem.Title, dan properti HtmlText dari kontrol Teks HTML ke ThisItem.Value.

  7. Dalam CalendarEventsGallery, atur properti OnSelect dari kontrol Judul ke rumus ini:

    Set( _selectedCalendarEvent, ThisItem );
Navigate( EventDetailsScreen, None )

    Catatan

    Selain menggunakan variabel _selectedCalendarEvent, Anda bahkan bisa menggunakan CalendarEventsGallery.Selected.

Tampilkan peserta aktivitas

Operasi Office365.GetEventsCalendarViewV2 mengambil beberapa bidang untuk setiap peristiwa, termasuk seperangkat peserta opsional yang diperlukan dan terpisah oleh titik koma. Dalam prosedur ini, Anda akan mengurai setiap rangkaian peserta, menentukan peserta mana yang ada di organisasi Anda, dan mengambil profil Office 365 dari siapa pun.

  1. Jika aplikasi Anda tidak berisi konektor Office 365 Users, tambahkan.

  2. Untuk mengambil profil Office 365 dari peserta pertemuan, atur properi OnSelect dari kontrol Judul di CalendarEventsGallery ke rumus ini:

    Set( _selectedCalendarEvent, ThisItem );
ClearCollect( AttendeeEmailsTemp,
    Filter(
        Split( ThisItem.RequiredAttendees & ThisItem.OptionalAttendees, ";" ),
        !IsBlank( Result )
    )
);
ClearCollect( AttendeeEmails,
    AddColumns( AttendeeEmailsTemp, 
        "InOrg",
        Upper( _userDomain ) = Upper( Right( Result, Len( Result ) - Find( "@", Result ) ) )
    )
);
ClearCollect( MyPeople,
    ForAll( AttendeeEmails, If( InOrg, Office365Users.UserProfile( Result ) ) ) 
);
Collect( MyPeople,
    ForAll( AttendeeEmails,
        If( !InOrg, 
            { DisplayName: Result, Id: "", JobTitle: "", UserPrincipalName: Result }
        )
    )
)

Daftar ini membahas apa yang dilakukan setiap operasi ClearCollect:

  • ClearCollect(AttendeeEmailsTemp)

    ClearCollect( AttendeeEmailsTemp,
    Filter(
        Split( ThisItem.RequiredAttendees & ThisItem.OptionalAttendees, ";" ), 
        !IsBlank( Result)
    )
);

    Rumus ini menggabungkan peserta yang diperlukan dan opsional ke dalam string tunggal dan kemudian membagi string ke alamat individual di setiap titik koma. Rumus kemudian menyaring nilai kosong dari rangkaian tersebut dan menambahkan nilai lainnya ke dalam kumpulan bernama AttendeeEmailsTemp.

  • ClearCollect(AttendeeEmails)

    ClearCollect( AttendeeEmails,
    AddColumns( AttendeeEmailsTemp, 
        "InOrg",
        Upper( _userDomain ) = Upper( Right( Result, Len(Result) - Find("@", Result) ) )
    )
);

    Rumus ini secara kasar menentukan apakah peserta berada dalam organisasi Anda. Definisi _userDomain hanyalah URL domain di alamat email dari orang yang menjalankan aplikasi. Garis ini membuat kolom benar/salah tambahan, bernama InOrg, dalam kumpulan AttendeeEmailsTemp. Kolom ini berisi benar jika userDomain setara dengan URL domain alamat email di baris tertentu dari AttendeeEmailsTemp.

    Pendekatan ini tidak selalu akurat, tetapi akan cukup dekat. Misalnya, peserta tertentu di organisasi Anda mungkin memiliki alamat email seperti Jane@OnContoso.com, sedangkan _userDomain adalah Contoso.com. Pengguna aplikasi dan Jane bisa bekerja di perusahaan yang sama namun memiliki sedikit variasi di alamat emailnya. Untuk kasus seperti ini, Anda mungkin ingin menggunakan rumus ini:

    Upper(_userDomain) in Upper(Right(Result, Len(Result) - Find("@", Result)))

    Namun, rumus ini cocok dengan alamat email seperti Jane@NotTheContosoCompany.com dengan _userDomain seperti Contoso.com, dan orang-orang tersebut tidak bekerja di perusahaan yang sama.

  • ClearCollect(MyPeople)

    ClearCollect( MyPeople,
    ForAll( AttendeeEmails, 
        If( InOrg, 
            Office365Users.UserProfile( Result )
        )
    )
);
Collect( MyPeople,
    ForAll( AttendeeEmails,
        If( !InOrg, 
            { 
                DisplayName: Result, 
                Id: "", 
                JobTitle: "", 
                UserPrincipalName: Result
            }
        )
    )
);

    Untuk mengambil profil Office 365, Anda harus menggunakan operasi Office365Users.UserProfile atau Office365Users.UserProfileV2. Pertama operasi ini mengumpulkan semua profil Office 365 untuk peserta yang berada di org pengguna. Kemudian operasi menambahkan beberapa bidang untuk peserta dari luar organisasi. Anda memisahkan dua item ini ke dalam operasi yang berbeda karena loop ForAll tidak menjamin urutan. Oleh karena itu, ForAll bisa mengumpulkan peserta dari luar organisasi terlebih dahulu. Dalam kasus ini, skema untuk MyPeople hanya berisi DisplayName, Id, JobTitle, dan UserPrincipalName. Namun, operasi UserProfile mengambil data yang lebih melimpah dari itu. Sehingga Anda memaksa pengumpulan MyPeople untuk menambahkan profil Office 365 sebelum profil lain.

    Catatan

    Anda dapat mencapai hasil yang sama hanya dengan satu fungsi ClearCollect:

    ClearCollect( MyPeople, 
    ForAll(
        AddColumns(
            Filter(
                Split(
                    ThisItem.RequiredAttendees & ThisItem.OptionalAttendees, 
                    ";"
                ), 
                !IsBlank( Result )
            ), 
            "InOrg", _userDomain = Right( Result, Len( Result ) - Find( "@", Result ) )
        ), 
        If( InOrg, 
            Office365Users.UserProfile( Result ), 
            { 
                DisplayName: Result, 
                Id: "", 
                JobTitle: "", 
                UserPrincipalName: Result, 
                Department: "", 
                OfficeLocation: "", 
                TelephoneNumber: ""
            }
        )
    )
)

Untuk menyelesaikan latihan ini:

  1. Tambahkan layar yang berisi galeri di mana properti Item diatur ke MyPeople.

  2. Di properti OnSelect dari kontrol Judul di CalendarEventsGallery, tambahkan fungsi Navigasi ke layar yang Anda buat di langkah sebelumnya.

Langkah berikutnya

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).