Share via

Kontrol tombol di Power Apps

  • Artikel

Kontrol yang dapat diklik atau diketuk oleh pengguna untuk berinteraksi dengan aplikasi.

KETERANGAN

Konfigurasikan properti OnSelect dari sebuah kontrol Tombol untuk menjalankan satu atau lebih rumus saat pengguna mengeklik atau mengetuk kontrol.

Properti kunci

OnSelect – Tindakan untuk dilakukan ketika pengguna mengetuk atau mengeklik kontrol.

Teks – Teks yang muncul pada kontrol atau yang diketikkan oleh pengguna ke dalam kontrol.

Properti tambahan

Align – Lokasi teks sehubungan dengan pusat horizontal kontrolnya.

AutoDisableOnSelect – Secara otomatis menonaktifkan kontrol saat perilaku OnSelect berjalan.

BorderColor – Warna batas kontrol.

BorderStyle – Mengatur apakah batas kontrol Solid, Putus-Putus, Bertitik, atau Tidak Ada.

BorderThickness – Ketebalan batas kontrol.

Warna – Warna teks dalam kontrol.

DisplayMode – Mengatur apakah kontrol memungkinkan pengguna untuk menginput (Edit), hanya menampilkan data (Tampilkan), atau dinonaktifkan (Nonaktif).

DisabledBorderColor – Warna batas kontrol, jika properti DisplayMode dari kontrol diatur ke Nonaktif.

DisabledColor – Warna teks dalam kontrol, jika properti DisplayMode diatur ke Nonaktif.

DisabledFill – Warna latar belakang, jika properti DisplayMode diatur ke Nonaktif.

FocusedBorderColor – Warna batas kontrol saat kontrol difokuskan.

FocusedBorderThickness – Ketebalan batas kontrol saat kontrol difokuskan.

Fill – Warna latar belakang kontrol.

Font – Nama kelompok fon untuk menampilkan teks.

FontWeight – Berat teks dalam sebuah kontrol: Tebal, Semitebal, Normal, atau Ringan.

Height – Jarak antara tepi atas dan bawah kontrol.

HoverBorderColor – Warna batas kontrol saat pengguna mengarahkan penunjuk mouse ke atas kontrol tersebut.

HoverColor – Warna teks dalam sebuah kontrol saat pengguna mengarahkan penunjuk mouse di atasnya.

HoverFill – Warna latar kontrol saat pengguna mengarahkan penunjuk mouse di atasnya.

Italic – Mengatur apakah teks dalam sebuah kontrol menjadi miring.

PaddingBottom – Jarak antara teks di kontrol dan tepi bawah kontrol tersebut.

PaddingLeft – Jarak antara teks di kontrol dan tepi kiri kontrol tersebut.

PaddingRight – Jarak antara teks di kontrol dan tepi kanan kontrol tersebut.

PaddingTop – Jarak antara teks di kontrol dan tepi atas kontrol tersebut.

Pressed – True jika kontrol ditekan, false jika sebaliknya.

PressedBorderColor – Warna batas kontrol saat pengguna mengetuk atau mengklik kontrol tersebut.

PressedColor – Warna teks dalam kontrol saat pengguna mengetuk atau mengeklik kontrol tersebut.

PressedFill – Warna latar kontrol saat pengguna mengetuk atau mengeklik kontrol tersebut.

RadiusBottomLeft – Sudut kebulatan sudut kiri bawah kontrol.

RadiusBottomRight – Sudut kebulatan sudut kanan bawah kontrol.

RadiusTopLeft – Sudut kebulatan sudut kiri atas kontrol.

RadiusTopRight – Sudut kebulatan sudut kanan atas kontrol.

Size – Ukuran fon teks yang muncul pada kontrol.

Strikethrough – Mengatur apakah akan muncul garis yang melalui teks yang ada pada kontrol.

TabIndex – Perintah navigasi keyboard terkait dengan kontrol lainnya.

Tooltip – Teks penjelasan yang muncul ketika pengguna mengarahkan mouse ke atas kontrol.

Underline – Mengatur apakah akan muncul garis di bawah teks yang ada pada kontrol.

VerticalAlign – Lokasi teks pada kontrol sehubungan dengan pusat vertikal kontrol tersebut.

Visible – Mengatur apakah kontrol akan muncul atau tersembunyi.

Width – Jarak antara tepi kiri dan kanan kontrol.

X – Jarak antara tepi kiri kontrol dan tepi kiri wadah induknya (layar, jika tidak ada wadah induk).

Y – Jarak antara tepi atas dan tepi atas wadah induk (layar, jika tidak ada wadah induk).

Navigate( ScreenName, ScreenTransitionValue )

Contoh

Menambahkan rumus dasar ke sebuah tombol

  1. Tambahkan kontrol Text input dan beri nama Sumber.

    Anda tidak tahu cara menambahkan, menamai, dan mengonfigurasi kontrol?

  2. Tambahkan kontrol Tombol, atur properti Teks menjadi "Tambah", dan atur properti OnSelect ke rumus ini:
    UpdateContext({Total:Total + Value(Source.Text)})

    Ingin informasi lebih lanjut tentang fungsi UpdateContext atau fungsi lainnya?

  3. Tambahkan kontrol Label, atur properti Teks di bilah rumus ke Nilai (Total), lalu tekan F5.

  4. Kosongkan teks default dari Sumber, masukkan angka di dalamnya, lalu klik atau ketuk Tambah.

    Kontrol Label akan menampilkan angka yang Anda ketik.

  5. Hapus angka default dari Sumber, masukkan angka lain di dalamnya, lalu klik atau ketuk Tambah.

    Kontrol Label akan menampilkan jumlah kedua angka yang Anda ketik.

  6. (opsional) Ulangi langkah sebelumnya satu atau beberapa kali.

  7. Untuk kembali ke ruang kerja default, tekan ESC (atau klik atau ketuk ikon tutup di sudut kanan atas).

Mengonfigurasi tombol dengan beberapa rumus

Tambahkan rumus yang menghapus kontrol input Teks di antara entri.

  1. Atur properti HintText dari Sumber ke "Masukkan angka".

  2. Atur properti OnSelect dari Tambah ke rumus ini:

    UpdateContext({Total:Total + Value(Source.Text)});
    UpdateContext({ClearInput: ""})

    Catatan

    Pisahkan beberapa formula dengan titik koma “;”.

  3. Atur properti Default dari Sumber ke ClearInput.

  4. Tekan F5, lalu uji aplikasi dengan menambahkan beberapa angka bersamaan.

Tambahkan tombol lain untuk mereset total

Tambahkan tombol kedua untuk menghapus total antara penghitungan.

  1. Tambahkan kontrol Tombol lain, atur properti Teks menjadi "Hapus", dan atur properti OnSelect ke rumus ini:

    UpdateContext({Total:0})

  2. Tekan F5, tambahkan beberapa angka bersamaan, lalu klik atau ketuk Hapus untuk mereset total.

Mengubah tampilan tombol

Mengubah bentuk tombol

Secara default, Power Apps membuat kontrol Tombol persegi panjang dengan sudut yang membulat. Anda dapat membuat modifikasi dasar pada bentuk kontrol Tombol dengan mengatur properti Height, Width, dan Radius.

Catatan

Ikon dan Bentuk menyediakan berbagai macam desain dan dapat melakukan beberapa fungsi dasar yang sama dengan yang dilakukan Tombol. Namun, Ikon dan Bentuk tidak memiliki properti Teks.

  1. Tambahkan kontrol Button, lalu atur properti Height dan Width ke 300 untuk membuat tombol persegi yang lebih besar.

  2. Modifikasi properti RadiusTopLeft, RadiusTopRight, RadiusBottomLeft, dan RadiusBottomRight untuk menyesuaikan besarnya kurvatur pada setiap sudut. Berikut adalah beberapa contoh berbagai bentuk, masing-masing mulai dari tombol persegi 300 x 300:

Mengubah warna tombol saat Anda mengarahkan kursor ke atasnya

Secara default, warna isi kontrol Tombol akan meredup 20% saat Anda mengarahkan kursor di atasnya dengan mouse. Anda dapat menyesuaikan perilaku ini dengan mengubah properti HoverFill yang menggunakan fungsi ColorFade. Jika Anda mengatur rumus ColorFade ke persentase positif, warnanya akan menjadi lebih terang saat Anda mengarahkan kursor ke atas tombol, sedangkan persentase negatif akan membuat warna menjadi lebih gelap.

  • Ubah persentase ColorFade dalam properti HoverFill dari salah satu tombol yang Anda buat dan perhatikan efeknya.

Anda juga dapat menetapkan warna kontrol Tombol dengan mengatur properti HoverFill ke rumus yang berisi fungsi ColorValue dan bukan fungsi ColorFade, contohnya ColorValue("Red").

Catatan

Nilai warna dapat berupa definisi warna CSS apa pun, baik itu nilai nama maupun hex.

  • Ganti fungsi ColorFade dengan fungsi ColorValue dari salah satu tombol yang Anda buat dan perhatikan efeknya.

Panduan aksesibilitas

Kontras warna

Dukungan pembaca layar

Dukungan keyboard

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