Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.

# Referensi komponen
<a name="components-reference"></a>

Topik ini merinci setiap komponen App Studio, propertinya, dan menyertakan contoh konfigurasi.

## Properti komponen umum
<a name="common-properties"></a>

Bagian ini menguraikan properti dan fitur umum yang dibagikan di beberapa komponen di studio aplikasi. Detail implementasi spesifik dan kasus penggunaan untuk setiap jenis properti dapat bervariasi tergantung pada komponennya, tetapi konsep umum properti ini tetap konsisten di seluruh App Studio.

### Nama
<a name="common-properties-component-name"></a>

Nama default dihasilkan untuk setiap komponen; Namun, Anda dapat mengedit untuk mengubah nama unik untuk setiap komponen. Anda akan menggunakan nama ini untuk mereferensikan komponen dan datanya dari komponen atau ekspresi lain dalam halaman yang sama. Batasan: Jangan sertakan spasi dalam nama komponen; itu hanya dapat memiliki huruf, angka, garis bawah dan tanda dolar. Contoh:`userNameInput`,`ordersTable`,`metricCard1`.

### Nilai primer, Nilai sekunder, dan Nilai
<a name="common-properties-component-values"></a>

Banyak komponen di studio aplikasi menyediakan bidang untuk menentukan nilai atau ekspresi yang menentukan konten atau data yang ditampilkan dalam komponen. Bidang ini sering diberi label sebagai`Primary value`,`Secondary value`, atau sederhananya`Value`, tergantung pada jenis dan tujuan komponen.

`Primary value`Bidang ini biasanya digunakan untuk menentukan nilai utama, titik data, atau konten yang harus ditampilkan secara jelas dalam komponen.

`Secondary value`Bidang, bila tersedia, digunakan untuk menampilkan nilai atau informasi tambahan atau pendukung di samping nilai primer.

`Value`Bidang ini memungkinkan Anda untuk menentukan nilai atau ekspresi yang harus ditampilkan dalam komponen.

Bidang ini mendukung input teks statis dan ekspresi dinamis. Dengan menggunakan ekspresi, Anda dapat mereferensikan data dari komponen lain, sumber data, atau variabel dalam aplikasi Anda, memungkinkan tampilan konten dinamis dan berbasis data.

#### Sintaks untuk ekspresi
<a name="common-properties-component-values-expression-syntax"></a>

Sintaks untuk memasukkan ekspresi di bidang ini mengikuti pola yang konsisten:

```
{{expression}}
```

Di mana *expression* adalah ekspresi valid yang mengevaluasi nilai atau data yang diinginkan yang ingin Anda tampilkan.

##### Contoh: Teks statis
<a name="common-properties-component-values-static-text-examples"></a>
+ Nilai primer: Anda dapat memasukkan nomor statis atau nilai secara langsung, seperti `"123"` atau`"$1,999.99"`.
+ Nilai sekunder: Anda dapat memasukkan label teks statis, seperti `"Goal"` atau`"Projected Revenue"`.
+ Nilai: Anda dapat memasukkan string statis, seperti `"since last month"` atau`"Total Quantity"`.

##### Contoh: Ekspresi
<a name="common-properties-component-values-expression-examples"></a>
+ `Hello, {{currentUser.firstName}}`: Menampilkan salam dengan nama depan pengguna yang saat ini masuk.
+ `{{currentUser.role === 'Admin' ? 'Admin Dashboard' : 'User Dashboard'}}`: Secara kondisional menampilkan judul dasbor yang berbeda berdasarkan peran pengguna.
+ `{{ui.componentName.data?.[0]?.fieldName}}`: Mengambil nilai `fieldName` bidang dari item pertama dalam data komponen dengan ID`componentName`.
+ `{{ui.componentName.value * 100}}`: Melakukan perhitungan pada nilai komponen dengan ID`componentName`.
+ `{{ui.componentName.value + ' items'}}`: Menggabungkan nilai komponen dengan ID `componentName` dan string. `' items'`
+ `{{ui.ordersTable.data?.[0]?.orderNumber}}`: Mengambil nomor urut dari baris pertama data dalam `ordersTable` komponen.
+ `{{ui.salesMetrics.data?.[0]?.totalRevenue * 1.15}}`: Menghitung pendapatan yang diproyeksikan dengan meningkatkan total pendapatan dari baris pertama data dalam `salesMetrics` komponen sebesar 15%.
+ `{{ui.customerProfile.data?.[0]?.firstName + ' ' + ui.customerProfile.data?.lastName}}`: Menggabungkan nama depan dan belakang dari data dalam komponen. `customerProfile`
+ `{{new Date(ui.orderDetails.data?.orderDate).toLocaleDateString()}}`: Memformat tanggal pesanan dari `orderDetails` komponen ke string tanggal yang lebih mudah dibaca.
+ `{{ui.productList.data?.length}}`: Menampilkan jumlah total produk dalam data yang terhubung ke `productList` komponen.
+ `{{ui.discountPercentage.value * ui.orderTotal.value}}`: Menghitung jumlah diskon berdasarkan persentase diskon dan total pesanan.
+ `{{ui.cartItemCount.value + ' items in cart'}}`: Menampilkan jumlah item di keranjang belanja, bersama dengan label`items in cart`.

Dengan menggunakan bidang ekspresi ini, Anda dapat membuat konten dinamis dan berbasis data dalam aplikasi Anda, memungkinkan Anda menampilkan informasi yang disesuaikan dengan konteks pengguna atau status aplikasi Anda. Ini memungkinkan pengalaman pengguna yang lebih personal dan interaktif.

### Label
<a name="common-properties-label"></a>

Properti **Label** memungkinkan Anda untuk menentukan keterangan atau judul untuk komponen. Label ini biasanya ditampilkan di samping atau di atas komponen, membantu pengguna memahami tujuannya.

Anda dapat menggunakan teks statis dan ekspresi untuk menentukan label.

#### Contoh: Teks statis
<a name="label-static-example"></a>

Jika Anda memasukkan teks “Nama Depan” di bidang Label, komponen akan menampilkan “Nama Depan” sebagai labelnya.

#### Contoh: Ekspresi
<a name="label-expression-examples"></a>

##### Contoh: Toko ritel
<a name="label-expression-examples-retail-store-label"></a>

Contoh berikut mempersonalisasi label untuk setiap pengguna, membuat antarmuka terasa lebih disesuaikan dengan individu:

```
{{currentUser.firstName}} {{currentUser.lastName}}'s Account
```

##### Contoh: Manajemen proyek SaaS
<a name="label-expression-examples-project-management-label"></a>

Contoh berikut menarik data dari proyek yang dipilih untuk memberikan label khusus konteks, membantu pengguna tetap berorientasi dalam aplikasi:

```
Project {{ui.projectsTable.selectedRow.id}} - {{ui.projectsTable.selectedRow.name}}
```

##### Contoh: Klinik kesehatan
<a name="label-expression-examples-healthcare-clinic-label"></a>

Contoh berikut merujuk profil pengguna saat ini dan informasi dokter, memberikan pengalaman yang lebih personal bagi pasien. 

```
Dr. {{ui.doctorProfileTable.data.firstName}}
       {{ui.doctorProfileTable.data.lastName}}
```

### Placeholder
<a name="common-properties-placeholder"></a>

Properti Placeholder memungkinkan Anda menentukan petunjuk atau teks panduan yang ditampilkan dalam komponen saat kosong. Ini dapat membantu pengguna memahami format input yang diharapkan atau memberikan konteks tambahan.

Anda dapat menggunakan teks statis dan ekspresi untuk menentukan placeholder.

#### Contoh: Teks statis
<a name="placeholder-static-example"></a>

Jika Anda memasukkan teks `Enter your name` di bidang **Placeholder**, komponen akan ditampilkan `Enter your name` sebagai teks placeholder.

#### Contoh: Ekspresi
<a name="placeholder-expression-examples"></a>

##### Contoh: Jasa keuangan
<a name="placeholder-expression-examples-financial-services-placeholder"></a>

 `Enter the amount you'd like to deposit into your {{ui.accountsTable.selectedRow.balance}} account`Contoh-contoh ini menarik data dari akun yang dipilih untuk menampilkan petunjuk yang relevan, membuat antarmuka intuitif bagi pelanggan perbankan. 

##### Contoh: E-commerce
<a name="placeholder-expression-examples-ecommerce-placeholder"></a>

 `Enter the coupon code for {{ui.cartTable.data.currency}} total`Placeholder di sini diperbarui secara dinamis berdasarkan konten keranjang pengguna, memberikan pengalaman checkout yang mulus. 

##### Contoh: Klinik kesehatan
<a name="placeholder-expression-examples-healthcare-clinic-placeholder"></a>

 `Enter your {{ui.patientProfile.data.age}}-year-old patient's symptoms`Dengan menggunakan ekspresi yang merujuk usia pasien, aplikasi dapat membuat placeholder yang lebih personal dan bermanfaat. 

### Sumber
<a name="common-properties-source"></a>

Properti **Sumber** memungkinkan Anda untuk memilih sumber data untuk komponen. Setelah dipilih, Anda dapat memilih dari jenis sumber data berikut:`entity`,`expression`, atau`automation`.

#### Entitas
<a name="common-properties-source-entity"></a>

Memilih **Entitas** sebagai sumber data memungkinkan Anda menghubungkan komponen ke entitas atau model data yang ada dalam aplikasi Anda. Ini berguna ketika Anda memiliki struktur atau skema data yang terdefinisi dengan baik yang ingin Anda manfaatkan di seluruh aplikasi Anda.

Kapan menggunakan sumber data entitas:
+ Bila Anda memiliki model data atau entitas yang berisi informasi yang ingin ditampilkan dalam komponen (misalnya, entitas “Produk” dengan bidang seperti “Nama”, “Deskripsi”, “Harga”).
+ Saat Anda perlu mengambil data secara dinamis dari database, API, atau sumber data eksternal lainnya dan menyajikannya dalam komponen.
+ Bila Anda ingin memanfaatkan hubungan dan asosiasi yang ditentukan dalam model data aplikasi Anda.

##### Memilih kueri pada entitas
<a name="common-properties-source-selecting-entity-query"></a>

Terkadang, Anda mungkin ingin menghubungkan komponen ke kueri tertentu yang mengambil data dari entitas, bukan seluruh entitas. Di sumber data Entitas, Anda memiliki opsi untuk memilih dari kueri yang ada atau membuat yang baru.

Dengan memilih kueri, Anda dapat:
+ Filter data yang ditampilkan dalam komponen berdasarkan kriteria tertentu.
+ Teruskan parameter ke kueri untuk memfilter atau mengurutkan data secara dinamis.
+ Manfaatkan gabungan kompleks, agregasi, atau teknik manipulasi data lainnya yang didefinisikan dalam kueri.

Misalnya, jika Anda memiliki `Customers` entitas dalam aplikasi Anda dengan bidang seperti`Name`,`Email`, dan`PhoneNumber`. Anda dapat menghubungkan komponen tabel ke entitas ini dan memilih tindakan `ActiveCustomers` data yang telah ditentukan sebelumnya yang memfilter pelanggan berdasarkan statusnya. Ini memungkinkan Anda untuk menampilkan hanya pelanggan aktif dalam tabel, bukan seluruh basis data pelanggan.

##### Menambahkan parameter ke sumber data entitas
<a name="common-properties-source-adding-entity-parameters"></a>

Saat menggunakan entitas sebagai sumber data, Anda juga dapat menambahkan parameter ke komponen. Parameter ini dapat digunakan untuk memfilter, mengurutkan, atau mengubah data yang ditampilkan dalam komponen.

Misalnya, jika Anda memiliki `Products` entitas dengan bidang seperti`Name`,`Description`,`Price`, dan`Category`. Anda dapat menambahkan parameter bernama `category` ke komponen tabel yang menampilkan daftar produk. Saat pengguna memilih kategori dari dropdown, tabel akan secara otomatis diperbarui untuk hanya menampilkan produk yang termasuk dalam kategori yang dipilih, menggunakan `{{params.category}}` ekspresi dalam tindakan data.

#### Ekspresi
<a name="common-properties-source-expression"></a>

Pilih **Ekspresi** sebagai sumber data untuk memasukkan ekspresi kustom atau perhitungan untuk menghasilkan data untuk komponen secara dinamis. Ini berguna ketika Anda perlu melakukan transformasi, menggabungkan data dari berbagai sumber, atau menghasilkan data berdasarkan logika bisnis tertentu.

Kapan menggunakan sumber data **Ekspresi**:
+ Ketika Anda perlu menghitung atau memperoleh data yang tidak tersedia secara langsung dalam model data Anda (misalnya, menghitung total nilai pesanan berdasarkan kuantitas dan harga).
+ Bila Anda ingin menggabungkan data dari beberapa entitas atau sumber data untuk membuat tampilan komposit (misalnya, menampilkan riwayat pesanan pelanggan bersama dengan informasi kontak mereka).
+ Saat Anda perlu membuat data berdasarkan aturan atau ketentuan tertentu (misalnya, menampilkan daftar “Produk yang Direkomendasikan” berdasarkan riwayat penelusuran pengguna).

Misalnya, jika Anda memiliki *Metrics* komponen yang perlu menampilkan total pendapatan untuk bulan berjalan, Anda dapat menggunakan ekspresi seperti berikut ini untuk menghitung dan menampilkan pendapatan bulanan:

```
{{ui.table1.orders.concat(ui.table1.orderDetails).filter(o => o.orderDate.getMonth() === new Date().getMonth()).reduce((a, b) => a + (b.quantity * b.unitPrice), 0)}}
```

##### Otomatisasi
<a name="common-properties-source-automation"></a>

Pilih **Otomasi** sebagai sumber data untuk menghubungkan komponen ke otomatisasi atau alur kerja yang ada di aplikasi Anda. Ini berguna ketika data atau fungsionalitas untuk komponen dihasilkan atau diperbarui sebagai bagian dari proses atau alur kerja tertentu.

Kapan menggunakan sumber data **Otomasi**:
+ Ketika data yang ditampilkan dalam komponen adalah hasil dari otomatisasi atau alur kerja tertentu (misalnya, tabel “Persetujuan Tertunda” yang diperbarui sebagai bagian dari proses persetujuan).
+ Saat Anda ingin memicu tindakan atau pembaruan komponen berdasarkan peristiwa atau kondisi dalam otomatisasi (misalnya, memperbarui Metrik dengan angka penjualan terbaru untuk SKU).
+ Ketika Anda perlu mengintegrasikan komponen dengan layanan atau sistem lain dalam aplikasi Anda melalui otomatisasi (misalnya, mengambil data dari API pihak ketiga dan menampilkannya dalam tabel).

Misalnya, jika Anda memiliki komponen stepflow yang memandu pengguna melalui proses lamaran kerja. Komponen stepflow dapat dihubungkan ke otomatisasi yang menangani pengajuan lamaran kerja, pemeriksaan latar belakang, dan pembuatan penawaran. Saat otomatisasi berlangsung melalui langkah-langkah ini, komponen stepflow dapat diperbarui secara dinamis untuk mencerminkan status aplikasi saat ini.

Dengan hati-hati memilih sumber data yang sesuai untuk setiap komponen, Anda dapat memastikan bahwa antarmuka pengguna aplikasi Anda didukung oleh data dan logika yang tepat, memberikan pengalaman yang mulus dan menarik bagi pengguna Anda.

### Terlihat jika
<a name="visible-if"></a>

Gunakan properti **Visible if** untuk menampilkan atau menyembunyikan komponen atau elemen berdasarkan kondisi atau nilai data tertentu. Ini berguna ketika Anda ingin mengontrol visibilitas bagian-bagian tertentu dari antarmuka pengguna aplikasi Anda secara dinamis.

Properti **Visible if** menggunakan sintaks berikut:

```
{{expression ? true : false}}
```

atau

```
{{expression}}
```

Di mana *expression* adalah ekspresi boolean yang mengevaluasi salah satu atau`true`. `false`

Jika ekspresi dievaluasi`true`, komponen akan terlihat. Jika ekspresi dievaluasi`false`, komponen akan disembunyikan. Ekspresi dapat mereferensikan nilai dari komponen lain, sumber data, atau variabel dalam aplikasi Anda.

#### Contoh ekspresi jika terlihat
<a name="visible-if-examples"></a>

##### Contoh: Menampilkan atau menyembunyikan kolom input kata sandi berdasarkan input email
<a name="visible-if-example-password-email"></a>

Bayangkan Anda memiliki formulir login dengan bidang input email dan bidang input kata sandi. Anda ingin menampilkan bidang input kata sandi hanya jika pengguna telah memasukkan alamat email. Anda dapat menggunakan ekspresi Visible if berikut:

```
{{ui.emailInput.value !== ""}}
```

Ekspresi ini memeriksa apakah nilai `emailInput` komponen bukan string kosong. Jika pengguna telah memasukkan alamat email, ekspresi akan dievaluasi`true`, dan bidang input kata sandi akan terlihat. Jika bidang email kosong, ekspresi dievaluasi`false`, dan bidang input kata sandi akan disembunyikan.

##### Contoh: Menampilkan kolom formulir tambahan berdasarkan pilihan dropdown
<a name="visible-if-example-form-fields-dropdown"></a>

Katakanlah Anda memiliki formulir di mana pengguna dapat memilih kategori dari daftar dropdown. Bergantung pada kategori yang dipilih, Anda ingin menampilkan atau menyembunyikan kolom formulir tambahan untuk mengumpulkan informasi yang lebih spesifik.

Misalnya, jika pengguna memilih *Products* kategori, Anda dapat menggunakan ekspresi berikut untuk menampilkan *Product Details* bidang tambahan:

```
{{ui.categoryDropdown.value === "Products"}}
```

Jika pengguna memilih *Services* atau *Consulting* kategori, Anda dapat menggunakan ekspresi ini untuk menampilkan kumpulan bidang tambahan yang berbeda:

```
{{ui.categoryDropdown.value === "Services" || ui.categoryDropdown.value === "Consulting"}}
```

##### Contoh: Lainnya
<a name="visible-if-example-other"></a>

Untuk membuat komponen terlihat jika nilai `textInput1` komponen bukan string kosong:

```
{{ui.textInput1.value === "" ? false : true}}
```

Untuk membuat komponen selalu terlihat:

```
{{true}}
```

Untuk membuat komponen terlihat jika nilai `emailInput` komponen bukan string kosong:

```
{{ui.emailInput.value !== ""}}
```

### Dinonaktifkan jika
<a name="disabled-if"></a>

Fitur **Disabled if** memungkinkan Anda mengaktifkan atau menonaktifkan komponen secara kondisional berdasarkan kondisi atau nilai data tertentu. Hal ini dicapai dengan menggunakan properti **Disabled if**, yang menerima ekspresi boolean yang menentukan apakah komponen harus diaktifkan atau dinonaktifkan.

Properti **Disabled if** menggunakan sintaks berikut:

```
{{expression ? true : false}}
```

atau

```
{{expression}}
```

#### Contoh ekspresi jika dinonaktifkan
<a name="disabled-if-examples"></a>

##### Contoh: Menonaktifkan tombol kirim berdasarkan validasi formulir
<a name="disabled-if-example-disable-submit-button"></a>

Jika Anda memiliki formulir dengan beberapa bidang input, dan Anda ingin menonaktifkan tombol kirim sampai semua bidang yang diperlukan diisi dengan benar, Anda dapat menggunakan ekspresi **Disabled If** berikut:

```
{{ui.nameInput.value === "" || ui.emailInput.value === "" || ui.passwordInput.value === ""}}
```

Ekspresi ini memeriksa apakah ada bidang input yang diperlukan (`nameInput``emailInput`,,`passwordInput`) kosong. Jika salah satu bidang kosong, ekspresi dievaluasi`true`, dan tombol kirim akan dinonaktifkan. Setelah semua bidang yang diperlukan diisi, ekspresi dievaluasi`false`, dan tombol kirim akan diaktifkan.

Dengan menggunakan jenis ekspresi bersyarat ini di properti **Visible if** dan **Disabled ff**, Anda dapat membuat antarmuka pengguna dinamis dan responsif yang beradaptasi dengan input pengguna, memberikan pengalaman yang lebih efisien dan relevan bagi pengguna aplikasi Anda.

Di mana *expression* adalah ekspresi boolean yang mengevaluasi baik benar atau salah.

Contoh:

```
{{ui.textInput1.value === "" ? true : false}}: The component will be Disabled if the textInput1 component's value is an empty string.
{{!ui.nameInput.isValid || !ui.emailInput.isValid || !ui.passwordInput.isValid}}: The component will be Disabled if any of the named input fields are invalid.
```

#### Tata letak kontainer
<a name="container-layouts"></a>

Properti tata letak menentukan bagaimana konten atau elemen dalam komponen diatur dan diposisikan. Beberapa opsi tata letak tersedia, masing-masing diwakili oleh ikon:
+ **Tata Letak Kolom**: Tata letak ini mengatur konten atau elemen secara vertikal, dalam satu kolom.
+ **Tata letak dua kolom**: Tata letak ini membagi komponen menjadi dua kolom dengan lebar yang sama, memungkinkan Anda untuk memposisikan konten atau elemen berdampingan.
+ **Tata letak baris**: Tata letak ini mengatur konten atau elemen secara horizontal, dalam satu baris.

##### Orientasi
<a name="container-layouts-orientation"></a>
+ **Horizontal**: Tata letak ini mengatur konten atau elemen secara horizontal, dalam satu baris.
+ **Vertikal**: Tata letak ini mengatur konten atau elemen secara vertikal, dalam satu kolom.
+ **Inline wrapped**: Tata letak ini mengatur konten atau elemen secara horizontal, tetapi membungkus ke baris berikutnya jika elemen melebihi lebar yang tersedia.

##### Keselarasan
<a name="container-layouts-alignment"></a>
+ **Kiri**: Sejajarkan konten atau elemen ke sisi kiri komponen.
+ **Pusat**: Memusatkan konten atau elemen secara horizontal di dalam komponen.
+ **Kanan**: Menyelaraskan konten atau elemen ke sisi kanan komponen.

##### Lebar
<a name="container-layouts-width"></a>

Properti **Width** menentukan ukuran horizontal komponen. Anda dapat memasukkan nilai persentase antara 0% dan 100%, mewakili lebar komponen relatif terhadap wadah induknya atau ruang yang tersedia.

##### Tinggi
<a name="container-layouts-height"></a>

Properti **Height** menentukan ukuran vertikal komponen. Nilai “auto” menyesuaikan tinggi komponen secara otomatis berdasarkan kontennya atau ruang yang tersedia.

##### Ruang antara
<a name="container-layouts-space-between"></a>

**Spasi antar** properti menentukan jarak atau kesenjangan antara konten atau elemen dalam komponen. Anda dapat memilih nilai dari 0px (tanpa spasi) ke 64px, dengan penambahan 4px (misalnya, 4px, 8px, 12px, dll.).

##### Bantalan
<a name="container-layouts-padding"></a>

Properti **Padding** mengontrol ruang antara konten atau elemen dan tepi komponen. Anda dapat memilih nilai dari 0px (tanpa padding) ke 64px, dengan penambahan 4px (misalnya, 4px, 8px, 12px, dll.).

##### Latar Belakang
<a name="container-layouts-background"></a>

**Latar Belakang** mengaktifkan atau menonaktifkan warna latar belakang atau gaya untuk komponen.

Properti tata letak ini memberikan fleksibilitas dalam mengatur dan memposisikan konten dalam suatu komponen, serta mengontrol ukuran, jarak, dan tampilan visual komponen itu sendiri.

## Komponen data
<a name="data-components"></a>

Bagian ini mencakup berbagai komponen data yang tersedia di studio aplikasi, termasuk komponen **Tabel**, **Detail**, **Metrik**, **Formulir**, dan **Repeater**. Komponen ini digunakan untuk menampilkan, mengumpulkan, dan memanipulasi data dalam aplikasi Anda.

### Tabel
<a name="table-component"></a>

Komponen **Tabel** menampilkan data dalam format tabel, dengan baris dan kolom. Ini digunakan untuk menyajikan data terstruktur, seperti daftar item atau catatan dari database, secara terorganisir dan easy-to-read cara.

#### Properti tabel
<a name="table-component-properties"></a>

Komponen **Tabel** berbagi beberapa sifat umum dengan komponen lain, seperti`Name`,`Source`, dan`Actions`. Untuk informasi lebih lanjut tentang properti ini, lihat[Properti komponen umum](#common-properties).

Selain properti umum, komponen **Tabel** memiliki properti dan opsi konfigurasi tertentu, termasuk`Columns`,`Search and export`, dan`Expressions`.

##### Kolom
<a name="table-component-properties-columns"></a>

Di bagian ini, Anda dapat menentukan kolom yang akan ditampilkan dalam tabel. Setiap kolom dapat dikonfigurasi dengan properti berikut:
+ **Format**: Tipe data bidang, misalnya: teks, nomor, tanggal.
+ **Label kolom**: Teks header untuk kolom.
+ **Nilai**: Bidang dari sumber data yang harus ditampilkan di kolom ini.

  Bidang ini memungkinkan Anda untuk menentukan nilai atau ekspresi yang harus ditampilkan di sel kolom. Anda dapat menggunakan ekspresi untuk mereferensikan data dari sumber yang terhubung atau komponen lainnya.

  Contoh: `{{currentRow.title}}` - Ekspresi ini akan menampilkan nilai *title* bidang dari baris saat ini di sel kolom.
+ **Aktifkan pengurutan**: Toggle ini memungkinkan Anda mengaktifkan atau menonaktifkan fungsionalitas penyortiran untuk kolom tertentu. Saat diaktifkan, pengguna dapat mengurutkan data tabel berdasarkan nilai di kolom ini.

##### Cari dan ekspor
<a name="table-component-properties-search-and-export"></a>

Komponen **Tabel** menyediakan sakelar berikut untuk mengaktifkan atau menonaktifkan fungsi pencarian dan ekspor:
+ **Tampilkan pencarian** Saat diaktifkan, sakelar ini menambahkan kolom input pencarian ke tabel, memungkinkan pengguna untuk mencari dan memfilter data yang ditampilkan.
+ **Tampilkan ekspor** Saat diaktifkan, sakelar ini menambahkan opsi ekspor ke tabel, memungkinkan pengguna mengunduh data tabel dalam berbagai format, misalnya: CSV.

**catatan**  
Secara default, fungsi pencarian terbatas pada data yang telah dimuat ke dalam tabel. Untuk menggunakan pencarian secara mendalam, Anda harus memuat semua halaman data.

##### Baris per halaman
<a name="table-component-properties-rows-per-page"></a>

Anda dapat menentukan jumlah baris yang akan ditampilkan per halaman dalam tabel. Pengguna kemudian dapat menavigasi antar halaman untuk melihat kumpulan data lengkap.

##### Batas pra-pengambilan
<a name="table-component-properties-pre-fetch-limit"></a>

Tentukan jumlah maksimum catatan yang akan diambil sebelumnya di setiap permintaan kueri. Maksimumnya adalah 3000.

##### Tindakan
<a name="table-component-properties-actions"></a>

Di bagian **Tindakan**, konfigurasikan properti berikut:
+ **Lokasi tindakan**: Saat **Pin ke kanan** diaktifkan, tindakan tambahan apa pun akan selalu ditampilkan di sebelah kanan tabel, terlepas dari pengguliran pengguna.
+ **Tindakan**: Tambahkan tombol tindakan ke tabel. Anda dapat mengonfigurasi tombol-tombol ini untuk melakukan tindakan tertentu saat diklik oleh pengguna, seperti:
  + Jalankan tindakan komponen
  + Arahkan ke halaman yang berbeda
  + Memanggil tindakan data
  + Jalankan kustom JavaScript
  + Memanggil otomatisasi

##### Ekspresi
<a name="table-component-properties-expressions"></a>

Komponen **Tabel** menyediakan beberapa area untuk menggunakan ekspresi dan kemampuan tindakan tingkat baris yang memungkinkan Anda menyesuaikan dan meningkatkan fungsionalitas dan interaktivitas tabel. Mereka memungkinkan Anda untuk secara dinamis referensi dan menampilkan data dalam tabel. Dengan memanfaatkan bidang ekspresi ini, Anda dapat membuat kolom dinamis, meneruskan data ke tindakan tingkat baris, dan data tabel referensi dari komponen atau ekspresi lain dalam aplikasi Anda.

##### Contoh: Mereferensikan nilai baris
<a name="table-component-properties-examples-referencing-row-values"></a>

`{{currentRow.columnName}}`atau Ekspresi `{{currentRow["Column Name"]}}` ini memungkinkan Anda untuk mereferensikan nilai kolom tertentu untuk baris saat ini yang sedang dirender. Ganti *columnName* atau *Column Name* dengan nama sebenarnya dari kolom yang ingin Anda referensikan.

Contoh:
+ `{{currentRow.productName}}`Menampilkan nama produk untuk baris saat ini.
+ `{{currentRow["Supplier Name"]}}`Menampilkan nama pemasok untuk baris saat ini, di mana header kolom berada*Supplier Name*.
+ `{{currentRow.orderDate}}`Menampilkan tanggal pesanan untuk baris saat ini.

##### Contoh: Mereferensikan baris yang dipilih
<a name="table-component-properties-examples-referencing-selected-row"></a>

`{{ui.table1.selectedRow["columnName"]}}`Ekspresi ini memungkinkan Anda untuk mereferensikan nilai kolom tertentu untuk baris yang saat ini dipilih dalam tabel dengan ID*table1*. Ganti *table1* dengan ID sebenarnya dari komponen tabel Anda, dan *columnName* dengan nama kolom yang ingin Anda referensikan.

Contoh:
+ `{{ui.ordersTable.selectedRow["totalAmount"]}}`Menampilkan jumlah total untuk baris yang saat ini dipilih dalam tabel dengan ID*ordersTable*.
+ `{{ui.customersTable.selectedRow["email"]}}`Menampilkan alamat email untuk baris yang dipilih saat ini dalam tabel dengan ID*customersTable*.
+ `{{ui.employeesTable.selectedRow["department"]}}`Menampilkan departemen untuk baris yang saat ini dipilih dalam tabel dengan ID*employeesTable*.

##### Contoh: Membuat kolom kustom
<a name="table-component-properties-examples-creating-custom-columns"></a>

Anda dapat menambahkan kolom kustom ke tabel berdasarkan data yang dikembalikan dari tindakan, otomatisasi, atau ekspresi data yang mendasarinya. Anda dapat menggunakan nilai kolom dan JavaScript ekspresi yang ada untuk membuat kolom baru.

Contoh:
+ `{{currentRow.quantity * currentRow.unitPrice}}`Membuat kolom baru yang menampilkan harga total dengan mengalikan kolom kuantitas dan harga satuan.
+ `{{new Date(currentRow.orderDate).toLocaleDateString()}}`Membuat kolom baru yang menampilkan tanggal pemesanan dalam format yang lebih mudah dibaca.
+ `{{currentRow.firstName + ' ' + currentRow.lastName + ' (' + currentRow.email + ')' }}`Membuat kolom baru yang menampilkan nama lengkap dan alamat email untuk setiap baris.

##### Contoh: Menyesuaikan nilai tampilan kolom:
<a name="table-component-properties-examples-customizing-column-display-values"></a>

Anda dapat menyesuaikan nilai tampilan bidang dalam kolom tabel dengan mengatur `Value` bidang pemetaan kolom. Ini memungkinkan Anda untuk menerapkan pemformatan atau transformasi khusus ke data yang ditampilkan.

Contoh:
+ `{{ currentRow.rating >= 4 ? '⭐️'.repeat(currentRow.rating) : currentRow.rating }}`Menampilkan emoji bintang berdasarkan nilai peringkat untuk setiap baris.
+ `{{ currentRow.category.toLowerCase().replace(/\b\w/g, c => c.toUpperCase()) }}`Menampilkan nilai kategori dengan setiap kata dikapitalisasi untuk setiap baris.
+ `{{ currentRow.status === 'Active' ? '🟢 Active' : '🔴 Inactive' }}`: Menampilkan emoji lingkaran berwarna dan teks berdasarkan nilai status untuk setiap baris.

##### Tindakan tombol tingkat baris
<a name="table-component-properties-examples-row-level-button-actions"></a>

`{{currentRow.columnName}}`atau `{{currentRow["Column Name"]}}` Anda dapat menggunakan ekspresi ini untuk meneruskan konteks baris yang direferensikan dalam tindakan tingkat baris, seperti menavigasi ke halaman lain dengan data baris yang dipilih atau memicu otomatisasi dengan data baris.

Contoh:
+ Jika Anda memiliki tombol edit di kolom tindakan baris, Anda dapat meneruskan `{{currentRow.orderId}}` sebagai parameter untuk menavigasi ke halaman pengeditan pesanan dengan ID pesanan yang dipilih.
+ Jika Anda memiliki tombol hapus di kolom tindakan baris, Anda dapat meneruskan `{{currentRow.customerName}}` ke otomatisasi yang mengirimkan email konfirmasi ke pelanggan sebelum menghapus pesanan mereka.
+ Jika Anda memiliki tombol detail tampilan di kolom tindakan baris, Anda dapat meneruskan `{{currentRow.employeeId}}` ke otomatisasi yang mencatat karyawan yang melihat detail pesanan.

Dengan memanfaatkan bidang ekspresi dan kemampuan tindakan tingkat baris ini, Anda dapat membuat tabel yang sangat disesuaikan dan interaktif yang menampilkan dan memanipulasi data berdasarkan kebutuhan spesifik Anda. Selain itu, Anda dapat menghubungkan tindakan tingkat baris dengan komponen atau otomatisasi lain dalam aplikasi Anda, memungkinkan aliran dan fungsionalitas data yang mulus.

### Detail
<a name="detail-component"></a>

Komponen **Detail** dirancang untuk menampilkan informasi rinci tentang catatan atau item tertentu. Ini menyediakan ruang khusus untuk menyajikan data komprehensif yang terkait dengan satu entitas atau baris, sehingga ideal untuk menampilkan detail mendalam atau memfasilitasi entri data dan tugas pengeditan.

#### Properti detail
<a name="detail-component-properties"></a>

Komponen **Detail** berbagi beberapa properti umum dengan komponen lain, seperti`Name`,`Source`, dan`Actions`. Untuk informasi lebih lanjut tentang properti ini, lihat[Properti komponen umum](#common-properties).

Komponen **Detail** juga memiliki properti dan opsi konfigurasi tertentu, termasuk`Fields`,`Layout`, dan`Expressions`.

#### Tata Letak
<a name="detail-component-properties-layout"></a>

Bagian **Tata Letak** memungkinkan Anda untuk menyesuaikan pengaturan dan presentasi bidang dalam komponen **Detail**. Anda dapat mengonfigurasi opsi seperti:
+ **Jumlah kolom**: Tentukan jumlah kolom untuk menampilkan bidang di.
+ **Urutan bidang**: Seret dan lepas bidang untuk menyusun ulang tampilannya.
+ **Spasi dan perataan**: Sesuaikan jarak dan penyelarasan bidang di dalam komponen.

#### Ekspresi dan contoh
<a name="detail-component-properties-expressions"></a>

Komponen **Detail** menyediakan berbagai bidang ekspresi yang memungkinkan Anda mereferensikan dan menampilkan data dalam komponen secara dinamis. Ekspresi ini memungkinkan Anda membuat komponen **Detail** yang disesuaikan dan interaktif yang terhubung secara mulus dengan data dan logika aplikasi Anda.

##### Contoh: Mereferensikan data
<a name="detail-component-properties-examples-referencing-data"></a>

`{{ui.details.data[0]?.["colName"]}}`: Ekspresi ini memungkinkan Anda untuk mereferensikan nilai kolom bernama “colName” untuk item pertama (indeks 0) dalam larik data yang terhubung ke komponen **Detail** dengan ID “detail”. Ganti “colName” dengan nama sebenarnya dari kolom yang ingin Anda referensikan. Misalnya, ekspresi berikut akan menampilkan nilai kolom “CustomerName” untuk item pertama dalam larik data yang terhubung ke komponen “detail”:

```
{{ui.details.data[0]?.["customerName"]}}
```

**catatan**  
Ekspresi ini berguna ketika komponen **Detail** berada di halaman yang sama dengan tabel yang direferensikan, dan Anda ingin menampilkan data dari baris pertama tabel di komponen **Detail**.

##### Contoh: Rendering bersyarat
<a name="detail-component-properties-examples-conditional-rendering"></a>

`{{ui.table1.selectedRow["colName"]}}`: Ekspresi ini mengembalikan true jika baris yang dipilih dalam tabel dengan ID *table1* memiliki data untuk kolom bernama*colName*. Ini dapat digunakan untuk menampilkan atau menyembunyikan komponen **Detail secara** kondisional berdasarkan apakah baris tabel yang dipilih kosong atau tidak.

Contoh:

Anda dapat menggunakan ekspresi ini di `Visible if` properti komponen **Detail** untuk menampilkan atau menyembunyikannya secara kondisional berdasarkan baris yang dipilih dalam tabel.

```
{{ui.table1.selectedRow["customerName"]}}
```

Jika ekspresi ini dievaluasi ke true (baris yang dipilih dalam *table1* komponen memiliki nilai untuk *customerName* kolom), komponen **Detail** akan terlihat. Jika ekspresi mengevaluasi ke false (yaitu, baris yang dipilih kosong atau tidak memiliki nilai untuk “CustomerName”), komponen Detail akan **disembunyikan**.

##### Contoh: Tampilan bersyarat
<a name="detail-component-properties-examples-conditional-display"></a>

`{{(ui.Component.value === "green" ? "🟢" : ui.Component.value === "yellow" ? "🟡" : ui.detail1.data?.[0]?.CustomerStatus)}}`: Ekspresi ini secara kondisional menampilkan emoji berdasarkan nilai komponen atau bidang data.

Kerusakan:
+ `ui.Component.value`: Referensi nilai komponen dengan ID*Component*.
+ `=== "green"`: Memeriksa apakah nilai komponen sama dengan string “hijau”.
+ `? "🟢"`: Jika kondisinya benar, menampilkan emoji lingkaran hijau.
+ `: ui.Component.value === "yellow" ? "🟡"`: Jika kondisi pertama salah, periksa apakah nilai komponen sama dengan string “kuning”.
+ `? "🟡"`: Jika kondisi kedua benar, menampilkan emoji kotak kuning.
+ `: ui.detail1.data?.[0]?.CustomerStatus`: Jika kedua kondisi salah, ini mereferensikan nilai CustomerStatus "" dari item pertama dalam larik data yang terhubung ke komponen Detail dengan ID “detail1".

Ekspresi ini dapat digunakan untuk menampilkan emoji atau nilai tertentu berdasarkan nilai komponen atau bidang data dalam komponen **Detail**.

### Metrik-metrik
<a name="metrics-component"></a>

Komponen **Metrik** adalah elemen visual yang menampilkan metrik kunci atau titik data dalam format seperti kartu. Ini dirancang untuk memberikan cara yang ringkas dan menarik secara visual untuk menyajikan informasi penting atau indikator kinerja.

#### Properti metrik
<a name="metrics-properties"></a>

Komponen **Metrik** berbagi beberapa properti umum dengan komponen lain, seperti`Name`,`Source`, dan`Actions`. Untuk informasi lebih lanjut tentang properti ini, lihat[Properti komponen umum](#common-properties).

#### Tren
<a name="metrics-properties-trend"></a>

Fitur tren Metrik memungkinkan Anda untuk menampilkan indikator visual kinerja atau perubahan dari waktu ke waktu untuk metrik yang ditampilkan.

##### Nilai tren
<a name="metrics-properties-trend-value"></a>

Bidang ini memungkinkan Anda untuk menentukan nilai atau ekspresi yang harus digunakan untuk menentukan arah dan besarnya tren. Biasanya, ini akan menjadi nilai yang mewakili perubahan atau kinerja selama periode waktu tertentu.

Contoh:

```
{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue}}
```

Ekspresi ini mengambil nilai month-over-month pendapatan dari item pertama dalam data yang terhubung ke Metrik “SalesMetrics”.

##### Tren positif
<a name="metrics-properties-positive-trend"></a>

Bidang ini memungkinkan Anda untuk memasukkan ekspresi yang mendefinisikan kondisi untuk tren positif. Ekspresi harus mengevaluasi benar atau salah.

Contoh:

```
{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue > 0}}
```

Ekspresi ini memeriksa apakah nilai month-over-month pendapatan lebih besar dari 0, menunjukkan tren positif.

##### Tren negatif
<a name="metrics-properties-negative-trend"></a>

Bidang ini memungkinkan Anda untuk memasukkan ekspresi yang mendefinisikan kondisi untuk tren negatif. Ekspresi harus mengevaluasi benar atau salah.

Contoh:

```
{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue < 0}}
```

Ekspresi ini memeriksa apakah nilai month-over-month pendapatan kurang dari 0, menunjukkan tren negatif.

##### Bilah warna
<a name="metrics-properties-color-bar"></a>

Toggle ini memungkinkan Anda mengaktifkan atau menonaktifkan tampilan bilah berwarna untuk menunjukkan status tren secara visual.

##### Contoh Color Bar:
<a name="metrics-properties-color-bar-examples"></a>

##### Contoh: Tren metrik penjualan
<a name="metrics-properties-color-bar-examples-sales-metrics-trend"></a>
+ **Nilai tren**: `{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue}}`
+ **Tren positif**: `{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue > 0}}`
+ **Tren negatif**: `{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue < 0}}`
+ **Bilah warna**: Diaktifkan

##### Contoh: tren metrik inventaris
<a name="metrics-properties-color-bar-examples-inventory-metrics-trend"></a>
+ **Nilai tren**: `{{ui.inventoryMetrics.data?.[0]?.currentInventory - ui.inventoryMetrics.data?.[1]?.currentInventory}}`
+ **Tren positif**: `{{ui.inventoryMetrics.data?.[0]?.currentInventory > ui.inventoryMetrics.data?.[1]?.currentInventory}}`
+ **Tren negatif**: `{{ui.inventoryMetrics.data?.[0]?.currentInventory < ui.inventoryMetrics.data?.[1]?.currentInventory}}`
+ **Warna Bbar: Diaktifkan**

##### Contoh: Tren kepuasan pelanggan
<a name="metrics-properties-color-bar-examples-customer-satisfaction-trend"></a>
+ **Nilai tren**: `{{ui.customerSatisfactionMetrics.data?.[0]?.npsScore}}`
+ **Tren positif**: `{{ui.customerSatisfactionMetrics.data?.[0]?.npsScore >= 8}}`
+ **Tren negatif**: `{{ui.customerSatisfactionMetrics.data?.[0]?.npsScore < 7}}`
+ **Bilah warna**: Diaktifkan

Dengan mengonfigurasi properti terkait tren ini, Anda dapat membuat komponen **Metrik** yang memberikan representasi visual dari kinerja atau perubahan dari waktu ke waktu untuk metrik yang ditampilkan.

Dengan memanfaatkan ekspresi ini, Anda dapat membuat komponen metrik yang sangat disesuaikan dan interaktif yang mereferensikan dan menampilkan data secara dinamis, memungkinkan Anda menampilkan metrik utama, indikator kinerja, dan visualisasi berbasis data dalam aplikasi Anda.

#### Contoh ekspresi metrik
<a name="metrics-expression-examples"></a>

Di panel properti, Anda dapat memasukkan ekspresi untuk menampilkan judul, nilai primer, nilai sekunder, dan keterangan nilai untuk menampilkan nilai secara dinamis.

##### Contoh: Mereferensikan nilai primer
<a name="metrics-expression-examples-referencing-primary-value"></a>

`{{ui.metric1.primaryValue}}`: Ekspresi ini memungkinkan Anda untuk mereferensikan nilai utama komponen **Metrik** dengan ID *metric1* dari komponen atau ekspresi lain dalam halaman yang sama.

Contoh: `{{ui.salesMetrics.primaryValue}}` akan menampilkan nilai utama komponen *salesMetrics* **Metrik**.

##### Contoh: Merujuk nilai sekunder
<a name="metrics-expression-examples-referencing-secondary-value"></a>

`{{ui.metric1.secondaryValue}}`: Ekspresi ini memungkinkan Anda untuk mereferensikan nilai sekunder komponen **Metrik** dengan ID *metric1* dari komponen atau ekspresi lain dalam halaman yang sama.

Contoh: `{{ui.revenueMetrics.secondaryValue}}` akan menampilkan nilai sekunder dari komponen *revenueMetrics* **Metrik**.

##### Contoh: Mereferensikan data
<a name="metrics-expression-examples-referencing-data"></a>

`{{ui.metric1.data}}`: Ekspresi ini memungkinkan Anda untuk mereferensikan data komponen **Metrik** dengan ID *metric1* dari komponen atau ekspresi lain dalam halaman yang sama.

Contoh: `{{ui.kpiMetrics.data}}` akan mereferensikan data yang terhubung ke komponen *kpiMetrics* **Metrik**.

##### Contoh: Menampilkan nilai data tertentu:
<a name="metrics-expression-examples-displaying-specific-data-values"></a>

`{{ui.metric1.data?.[0]?.id}}`: Ekspresi ini adalah contoh bagaimana menampilkan informasi tertentu dari data yang terhubung ke komponen **Metrik** dengan ID*metric1*. Ini berguna ketika Anda ingin menampilkan properti tertentu dari item pertama dalam data.

Kerusakan:
+ `ui.metric1`: Referensi komponen **Metrik** dengan ID*metric1*.
+ `data`: Mengacu pada informasi atau kumpulan data yang terhubung ke komponen itu.
+ `?.[0]`: Berarti item atau entri pertama dalam kumpulan data itu.
+ `?.id`: Menampilkan *id* nilai atau pengenal item atau entri pertama itu.

Contoh: `{{ui.orderMetrics.data?.[0]?.orderId}}` akan menampilkan *orderId* nilai item pertama dalam data yang terhubung ke komponen *orderMetrics* **Metrik**.

##### Contoh: Menampilkan panjang data
<a name="metrics-expression-examples-displaying-data-length"></a>

`{{ui.metric1.data?.length}}`: Ekspresi ini menunjukkan cara menampilkan panjang (jumlah item) dalam data yang terhubung ke komponen **Metrik** dengan ID. *metric1* Ini berguna ketika Anda ingin menampilkan jumlah item dalam data.

Kerusakan:
+ `ui.metric1.data`: Referensi kumpulan data yang terhubung ke komponen.
+ `?.length`: Mengakses jumlah total atau jumlah item atau entri dalam kumpulan data tersebut.

Contoh: `{{ui.productMetrics.data?.length}}` akan menampilkan jumlah item dalam data yang terhubung ke komponen *productMetrics* **Metrik**.

### Repeater
<a name="repeater-component"></a>

Komponen **Repeater** adalah komponen dinamis yang memungkinkan Anda menghasilkan dan menampilkan kumpulan elemen berdasarkan sumber data yang disediakan. Ini dirancang untuk memfasilitasi pembuatan daftar, kisi, atau pola berulang dalam antarmuka pengguna aplikasi Anda. Beberapa contoh kasus penggunaan meliputi:
+ Menampilkan kartu untuk setiap pengguna di akun
+ Menampilkan daftar produk yang menyertakan gambar dan tombol untuk menambahkannya ke keranjang
+ Menampilkan daftar file yang dapat diakses pengguna

Komponen **Repeater** membedakan dirinya dari komponen **Table** dengan konten yang kaya. Komponen **Tabel** memiliki format baris dan kolom yang ketat. **Repeater** dapat menampilkan data Anda dengan lebih fleksibel.

#### Properti repeater
<a name="repeater-component-properties"></a>

Komponen **Repeater** berbagi beberapa properti umum dengan komponen lain, seperti`Name`,`Source`, dan`Actions`. Untuk informasi lebih lanjut tentang properti ini, lihat[Properti komponen umum](#common-properties).

Selain properti umum, komponen **Repeater** memiliki properti tambahan dan opsi konfigurasi berikut.

#### Template barang
<a name="repeater-component-properties-item-template"></a>

**Template Item** adalah wadah tempat Anda dapat menentukan struktur dan komponen yang akan diulang untuk setiap item di sumber data. Anda dapat menarik dan melepas komponen lain ke dalam wadah ini, seperti **Teks**, **Gambar**, **Tombol**, atau komponen lain yang Anda butuhkan untuk mewakili setiap item.

Di dalam **Template item**, Anda dapat mereferensikan properti atau nilai dari item saat ini menggunakan ekspresi dalam format`{{currentItem.propertyName}}`.

Misalnya, jika sumber data Anda berisi `itemName` properti, Anda dapat menggunakan `{{currentItem.itemName}}` untuk menampilkan nama item dari item saat ini.

#### Tata Letak
<a name="repeater-component-properties-layout"></a>

Bagian **Layout** memungkinkan Anda untuk mengkonfigurasi pengaturan elemen berulang dalam Komponen Repeater.

##### Orientasi
<a name="repeater-component-properties-orientation"></a>
+ **Daftar**: Mengatur elemen berulang secara vertikal dalam satu kolom.
+ **Grid**: Mengatur elemen berulang dalam tata letak grid dengan beberapa kolom.

##### Baris per halaman
<a name="repeater-component-properties-rows-per-page"></a>

Tentukan jumlah baris yang akan ditampilkan per halaman dalam tata letak daftar. Pagination disediakan untuk item yang meluap jumlah baris yang ditentukan.

##### Kolom dan Baris per Halaman (Grid)
<a name="columns-and-rows-per-page-grid"></a>
+ **Kolom**: Tentukan jumlah kolom dalam tata letak kisi.
+ **Baris per Halaman**: Tentukan jumlah baris yang akan ditampilkan per halaman dalam tata letak kisi. Pagination disediakan untuk item yang meluap dimensi grid yang ditentukan.

#### Ekspresi dan contoh
<a name="repeater-component-properties-expressions"></a>

Komponen **Repeater** menyediakan berbagai bidang ekspresi yang memungkinkan Anda mereferensikan dan menampilkan data dalam komponen secara dinamis. Ekspresi ini memungkinkan Anda membuat komponen **Repeater** yang disesuaikan dan interaktif yang terhubung secara mulus dengan data dan logika aplikasi Anda.

##### Contoh: Mereferensikan item
<a name="repeater-component-properties-expressions-examples-referencing-items"></a>
+ `{{currentItem.propertyName}}`: Properti referensi atau nilai dari item saat ini dalam **Template Item**.
+ `{{ui.repeaterID[index]}}`: Referensi item tertentu di Komponen Repeater dengan indeksnya.

##### Contoh: Merender daftar produk
<a name="repeater-component-properties-expressions-examples-rendering-product-list"></a>
+ **Sumber**: Pilih *Products* entitas sebagai sumber data.
+ **Template Item**: Tambahkan komponen **Container** dengan komponen **Teks** di dalamnya untuk menampilkan nama produk (`{{currentItem.productName}}`) dan komponen **Image** untuk menampilkan image produk (`{{currentItem.productImageUrl}}`).
+ **Layout**: Atur `Orientation` ke `List` dan `Rows per Page` sesuaikan sesuai keinginan.

##### Contoh: Menghasilkan kisi avatar pengguna
<a name="repeater-component-properties-expressions-examples-generating-user-avatar-grid"></a>
+ **Sumber**: Gunakan ekspresi untuk menghasilkan array data pengguna (misalnya,`[{name: 'John', avatarUrl: '...'}, {...}, {...}]`).
+ **Template Item**: Tambahkan komponen **Image** dan atur `Source` propertinya ke`{{currentItem.avatarUrl}}`.
+ **Layout**: Atur `Orientation` ke`Grid`, tentukan jumlah `Columns` dan`Rows per Page`, dan sesuaikan `Space Between` dan `Padding` sesuai kebutuhan.

Dengan menggunakan `Repeater` komponen, Anda dapat membuat antarmuka pengguna dinamis dan berbasis data, merampingkan proses rendering koleksi elemen dan mengurangi kebutuhan untuk pengulangan manual atau hard-coding.

### Formulir
<a name="form-component"></a>

Komponen Formulir dirancang untuk menangkap input pengguna dan memfasilitasi tugas entri data dalam aplikasi Anda. Ini menyediakan tata letak terstruktur untuk menampilkan bidang input, dropdown, kotak centang, dan kontrol formulir lainnya, memungkinkan pengguna untuk memasukkan atau memodifikasi data dengan mulus. Anda dapat menyarangkan komponen lain di dalam komponen formulir, seperti tabel.

#### Properti bentuk
<a name="form-component-properties"></a>

Komponen **Form** berbagi beberapa properti umum dengan komponen lain, seperti`Name`,`Source`, dan`Actions`. Untuk informasi lebih lanjut tentang properti ini, lihat[Properti komponen umum](#common-properties).

#### Menghasilkan Formulir
<a name="form-component-properties-generate-form"></a>

Fitur **Hasilkan Formulir** memudahkan untuk membuat bidang formulir dengan cepat dengan mengisinya secara otomatis berdasarkan sumber data yang dipilih. Hal ini dapat menghemat waktu dan tenaga ketika membangun formulir yang perlu menampilkan sejumlah besar bidang.

**Untuk menggunakan fitur **Generate Form**:**

1. Dalam properti komponen **Form**, cari bagian **Generate Form**.

1. Pilih sumber data yang ingin Anda gunakan untuk menghasilkan bidang formulir. Ini bisa berupa entitas, alur kerja, atau sumber data lain yang tersedia di aplikasi Anda.

1. Bidang formulir akan dibuat secara otomatis berdasarkan sumber data yang dipilih, termasuk label bidang, jenis, dan pemetaan data.

1. Tinjau bidang yang dihasilkan dan buat penyesuaian yang diperlukan, seperti menambahkan aturan validasi atau mengubah urutan bidang.

1. Setelah Anda puas dengan konfigurasi formulir, pilih **Kirim** untuk menerapkan bidang yang dihasilkan ke komponen **Formulir** Anda.

Fitur **Generate Form** sangat berguna ketika Anda memiliki model data yang terdefinisi dengan baik atau kumpulan entitas dalam aplikasi Anda yang Anda perlukan untuk menangkap masukan pengguna. Dengan membuat kolom formulir secara otomatis, Anda dapat menghemat waktu dan memastikan konsistensi di seluruh formulir aplikasi Anda.

Setelah menggunakan fitur **Hasilkan Formulir**, Anda dapat menyesuaikan tata letak, tindakan, dan ekspresi untuk komponen **Formulir** agar sesuai dengan kebutuhan spesifik Anda.

#### Ekspresi dan contoh
<a name="form-component-properties-expressions"></a>

Seperti komponen lainnya, Anda dapat menggunakan ekspresi untuk referensi dan menampilkan data dalam komponen **Formulir**. Contoh:
+ `{{ui.userForm.data.email}}`: Referensi nilai `email` bidang dari sumber data yang terhubung ke komponen **Formulir** dengan ID`userForm`.

**catatan**  
Lihat [Properti komponen umum](#common-properties) untuk contoh ekspresi lebih lanjut dari properti umum.

Dengan mengonfigurasi properti ini dan memanfaatkan ekspresi, Anda dapat membuat komponen Formulir yang disesuaikan dan interaktif yang terintegrasi secara mulus dengan sumber data dan logika aplikasi Anda. Komponen-komponen ini dapat digunakan untuk menangkap input pengguna, menampilkan data yang telah diisi sebelumnya, dan memicu tindakan berdasarkan pengiriman formulir atau interaksi pengguna.

### Stepflow
<a name="stepflow-component"></a>

Komponen **Stepflow** dirancang untuk memandu pengguna melalui proses multi-langkah atau alur kerja dalam aplikasi Anda. Ini menyediakan antarmuka terstruktur dan intuitif untuk menyajikan urutan langkah, masing-masing dengan set input, validasi, dan tindakannya sendiri.

Komponen Stepflow berbagi beberapa properti umum dengan komponen lain, seperti`Name`,`Source`, dan`Actions`. Untuk informasi lebih lanjut tentang properti ini, lihat[Properti komponen umum](#common-properties).

Komponen **Stepflow** memiliki properti tambahan dan opsi konfigurasi, seperti`Step Navigation`,`Validation`, dan`Expressions`.

## Komponen AI
<a name="ai-components"></a>

### Generasi AI
<a name="genai-component"></a>

Komponen **Gen AI** adalah wadah pengelompokan yang digunakan untuk mengelompokkan komponen dan logika yang menyertainya untuk dengan mudah mengeditnya dengan AI menggunakan obrolan di dalam studio aplikasi. Saat Anda menggunakan obrolan untuk membuat komponen, mereka akan dikelompokkan ke dalam wadah **Gen AI**. Untuk informasi tentang mengedit atau menggunakan komponen ini, lihat[Membangun atau mengedit aplikasi Anda](generative-ai.md#generative-ai-build-app).

## Komponen teks & angka
<a name="text-and-number-components"></a>

### Masukan teks
<a name="text-input-component"></a>

Komponen **input Teks** memungkinkan pengguna untuk memasukkan dan mengirimkan data teks dalam aplikasi Anda. Ini menyediakan cara sederhana dan intuitif untuk menangkap input pengguna, seperti nama, alamat, atau informasi tekstual lainnya.
+ `{{ui.inputTextID.value}}`: Mengembalikan nilai yang disediakan di bidang input.
+ `{{ui.inputTextID.isValid}}`: Mengembalikan validitas nilai yang disediakan di bidang input.

### Teks
<a name="text-component"></a>

Komponen **Teks** digunakan untuk menampilkan informasi tekstual dalam aplikasi Anda. Ini dapat digunakan untuk menampilkan teks statis, nilai dinamis, atau konten yang dihasilkan dari ekspresi.

### Area teks
<a name="text-area-component"></a>

Komponen **area Teks** dirancang untuk menangkap input teks multi-baris dari pengguna. Ini menyediakan area bidang input yang lebih besar bagi pengguna untuk memasukkan entri teks yang lebih panjang, seperti deskripsi, catatan, atau komentar.
+ `{{ui.textAreaID.value}}`: Mengembalikan nilai yang disediakan di area teks.
+ `{{ui.textAreaID.isValid}}`: Mengembalikan validitas nilai yang disediakan di area teks.

### Email
<a name="email-component"></a>

Komponen **Email** adalah bidang input khusus yang dirancang untuk menangkap alamat email dari pengguna. Ini dapat menegakkan aturan validasi khusus untuk memastikan nilai yang dimasukkan mematuhi format email yang benar.
+ `{{ui.emailID.value}}`: Mengembalikan nilai yang disediakan di bidang input email.
+ `{{ui.emailID.isValid}}`: Mengembalikan validitas nilai yang disediakan di bidang input email.

### Kata Sandi
<a name="password-component"></a>

Komponen **Kata Sandi** adalah bidang input yang dirancang khusus bagi pengguna untuk memasukkan informasi sensitif, seperti kata sandi atau kode PIN. Ini menutupi karakter yang dimasukkan untuk menjaga privasi dan keamanan.
+ `{{ui.passwordID.value}}`: Mengembalikan nilai yang disediakan di bidang input password.
+ `{{ui.passwordID.isValid}}`: Mengembalikan validitas nilai yang disediakan di bidang input password.

### Pencarian
<a name="search-component"></a>

Komponen **Pencarian** memberi pengguna bidang input khusus untuk melakukan kueri penelusuran atau memasukkan istilah penelusuran dalam data yang terisi dalam aplikasi.
+ `{{ui.searchID.value}}`: Mengembalikan nilai yang disediakan di bidang pencarian.

### Telepon
<a name="phone-component"></a>

Komponen **Telepon** adalah bidang input yang disesuaikan untuk menangkap nomor telepon atau informasi kontak lainnya dari pengguna. Ini dapat mencakup aturan validasi khusus dan opsi pemformatan untuk memastikan nilai yang dimasukkan mematuhi format nomor telepon yang benar.
+ `{{ui.phoneID.value}}`: Mengembalikan nilai yang disediakan di bidang input telepon.
+ `{{ui.phoneID.isValid}}`: Mengembalikan validitas nilai yang disediakan di bidang input telepon.

### Bilangan
<a name="number-component"></a>

Komponen **Number** adalah bidang input yang dirancang khusus bagi pengguna untuk memasukkan nilai numerik. Ini dapat menegakkan aturan validasi untuk memastikan nilai yang dimasukkan adalah nomor yang valid dalam rentang atau format tertentu.
+ `{{ui.numberID.value}}`: Mengembalikan nilai yang disediakan di bidang input angka.
+ `{{ui.numberID.isValid}}`: Mengembalikan validitas nilai yang disediakan di bidang input angka.

### Mata Uang
<a name="currency-component"></a>

Komponen **mata uang** adalah bidang input khusus untuk menangkap nilai atau jumlah moneter. Ini dapat mencakup opsi pemformatan untuk menampilkan simbol mata uang, pemisah desimal, dan menegakkan aturan validasi khusus untuk input mata uang.
+ `{{ui.currencyID.value}}`: Mengembalikan nilai yang diberikan dalam bidang masukan mata uang.
+ `{{ui.currencyID.isValid}}`: Mengembalikan validitas nilai yang diberikan di bidang masukan mata uang.

### Detail pasangan
<a name="detail-pair-component"></a>

Komponen **pasangan Detail** digunakan untuk menampilkan pasangan kunci-nilai atau pasangan informasi terkait dalam format terstruktur dan dapat dibaca. Ini biasanya digunakan untuk menyajikan detail atau metadata yang terkait dengan item atau entitas tertentu.

## Komponen seleksi
<a name="selection-components"></a>

### Beralih
<a name="switch-component"></a>

Komponen **Switch** adalah kontrol antarmuka pengguna yang memungkinkan pengguna untuk beralih di antara dua status atau opsi, seperti. on/off, true/false, or enabled/disabled Ini memberikan representasi visual dari keadaan saat ini dan memungkinkan pengguna untuk mengubahnya dengan satu klik atau ketuk.

### Ganti grup
<a name="switch-group-component"></a>

Komponen **grup Switch** adalah kumpulan kontrol sakelar individual yang memungkinkan pengguna memilih satu atau beberapa opsi dari set yang telah ditentukan sebelumnya. Ini memberikan representasi visual dari opsi yang dipilih dan tidak dipilih, sehingga memudahkan pengguna untuk memahami dan berinteraksi dengan pilihan yang tersedia.

#### Beralih bidang ekspresi grup
<a name="switch-group-expression-fields"></a>
+ `{{ui.switchGroupID.value}}`: Mengembalikan array string yang berisi nilai setiap sakelar yang diaktifkan oleh pengguna aplikasi.

### Grup kotak centang
<a name="checkbox-group-component"></a>

Komponen **grup Checkbox** menyajikan pengguna dengan sekelompok kotak centang, memungkinkan mereka untuk memilih beberapa opsi secara bersamaan. Ini berguna ketika Anda ingin memberi pengguna kemampuan untuk memilih satu atau lebih item dari daftar opsi.

#### Bidang ekspresi grup kotak centang
<a name="checkbox-group-expression-fields"></a>
+ `{{ui.checkboxGroupID.value}}`: Mengembalikan array string yang berisi nilai setiap kotak centang yang dipilih oleh pengguna aplikasi.

### Grup radio
<a name="radio-group-component"></a>

Komponen **grup Radio** adalah satu set tombol radio yang memungkinkan pengguna untuk memilih satu opsi dari beberapa pilihan yang saling eksklusif. Ini memastikan bahwa hanya satu opsi yang dapat dipilih pada satu waktu, memberikan cara yang jelas dan tidak ambigu bagi pengguna untuk membuat pilihan.

#### Bidang ekspresi grup radio
<a name="radio-group-expression-fields"></a>

Bidang berikut dapat digunakan dalam ekspresi.
+ `{{ui.radioGroupID.value}}`: Mengembalikan nilai tombol radio yang dipilih oleh pengguna aplikasi.

### Pilih tunggal
<a name="single-select-component"></a>

Komponen **Pilih Tunggal** menyajikan pengguna dengan daftar opsi, dari mana mereka dapat memilih satu item. Ini biasanya digunakan dalam skenario di mana pengguna perlu membuat pilihan dari serangkaian opsi yang telah ditentukan, seperti memilih kategori, lokasi, atau preferensi.

#### Bidang ekspresi pilih tunggal
<a name="single-select-expression-fields"></a>
+ `{{ui.singleSelectID.value}}`: Mengembalikan nilai item daftar yang dipilih oleh pengguna aplikasi.

### Multi pilih
<a name="multi-select-component"></a>

Komponen **Multi select** mirip dengan komponen **Pilih Tunggal** tetapi memungkinkan pengguna untuk memilih beberapa opsi secara bersamaan dari daftar pilihan. Ini berguna ketika pengguna perlu membuat beberapa pilihan dari serangkaian opsi yang telah ditentukan, seperti memilih beberapa tag, minat, atau preferensi.

#### Bidang ekspresi multi pilih
<a name="multi-select-expression-fields"></a>
+ `{{ui.multiSelectID.value}}`: Mengembalikan array string yang berisi nilai setiap item daftar yang dipilih oleh pengguna aplikasi.

## Tombol & komponen navigasi
<a name="buttons-and-navigation-components"></a>

Studio aplikasi menyediakan berbagai tombol dan komponen navigasi untuk memungkinkan pengguna memicu tindakan dan menavigasi dalam aplikasi Anda.

### Komponen tombol
<a name="button-components"></a>

Komponen tombol yang tersedia adalah:
+ Tombol
+ Tombol yang diuraikan
+ Tombol ikon
+ Tombol teks

Komponen tombol ini berbagi properti umum berikut:

#### Daftar isi
<a name="button-content"></a>
+ **Label tombol**: Teks yang akan ditampilkan pada tombol.

#### Tipe
<a name="button-type"></a>
+ **Tombol**: Tombol standar.
+ **Diuraikan**: Tombol dengan gaya yang diuraikan.
+ **Ikon**: Tombol dengan ikon.
+ **Teks**: Tombol teks saja.

#### Size
<a name="button-size"></a>

Ukuran tombol. Nilai yang mungkin adalah `Small`, `Medium`, dan `Large`.

#### Ikon
<a name="button-icon"></a>

Anda dapat memilih dari berbagai ikon yang akan ditampilkan pada tombol, termasuk:
+ Amplop Tertutup
+ lonceng
+ Orang
+ Menu Hamburger
+ Pencarian
+ Info dilingkari
+ Perlengkapan
+ Chevron Kiri
+ Chevron Kanan
+ Titik Horisontal
+ Sampah
+ Edit
+ Memeriksa
+ Tutup
+ Rumah
+ Ditambah

#### Pemicu
<a name="button-triggers"></a>

Saat tombol diklik, Anda dapat mengonfigurasi satu atau beberapa tindakan yang akan dipicu. Jenis tindakan yang tersedia adalah:
+ **Basic**
  + Jalankan tindakan komponen: Mengeksekusi tindakan tertentu dalam komponen.
  + Navigasi: Menavigasi ke halaman atau tampilan lain.
  + Memanggil Tindakan Data: Memicu tindakan terkait data, seperti membuat, memperbarui, atau menghapus catatan.
+ **Advanced**
  + JavaScript: Menjalankan JavaScript kode kustom.
  + Memanggil Otomasi: Memulai otomatisasi atau alur kerja yang ada.

#### JavaScript properti tombol aksi
<a name="button-examples-javascript"></a>

Pilih jenis `JavaScript` tindakan untuk menjalankan JavaScript kode kustom saat tombol diklik.

##### Kode sumber
<a name="button-source-code"></a>

Di `Source code` bidang, Anda dapat memasukkan JavaScript ekspresi atau fungsi Anda. Contoh:

```
return "Hello World";
```

Ini hanya akan mengembalikan string `Hello World` ketika tombol diklik.

##### Kondisi: Jalankan jika
<a name="button-run-if"></a>

Anda juga dapat memberikan ekspresi boolean yang menentukan apakah JavaScript tindakan harus dijalankan atau tidak. Ini menggunakan sintaks berikut:

```
{{ui.textinput1.value !== ""}}
```

Dalam contoh ini, JavaScript tindakan hanya akan berjalan jika nilai `textinput1` komponen bukan string kosong.

Dengan menggunakan opsi pemicu lanjutan ini, Anda dapat membuat perilaku tombol yang sangat disesuaikan yang terintegrasi langsung dengan logika dan data aplikasi Anda. Ini memungkinkan Anda untuk memperluas fungsionalitas tombol bawaan dan menyesuaikan pengalaman pengguna dengan kebutuhan spesifik Anda.

**catatan**  
Selalu uji JavaScript tindakan Anda secara menyeluruh untuk memastikan mereka berfungsi seperti yang diharapkan.

### Hyperlink
<a name="hyperlink-component"></a>

Komponen **Hyperlink** menyediakan tautan yang dapat diklik untuk menavigasi ke rute aplikasi eksternal atau internal. URLs 

#### Properti hyperlink
<a name="hyperlink-properties"></a>

##### Daftar isi
<a name="hyperlink-properties-content"></a>
+ **Label hyperlink**: Teks yang akan ditampilkan sebagai label hyperlink.

##### URL
<a name="hyperlink-properties-url"></a>

URL tujuan untuk hyperlink, yang dapat berupa situs web eksternal atau rute aplikasi internal.

##### Pemicu
<a name="hyperlink-properties-triggers"></a>

Saat hyperlink diklik, Anda dapat mengonfigurasi satu atau beberapa tindakan yang akan dipicu. Jenis tindakan yang tersedia sama dengan yang ada pada komponen tombol.

## Komponen tanggal & waktu
<a name="date-and-time-components"></a>

### Date
<a name="date-component"></a>

Komponen **Tanggal** memungkinkan pengguna untuk memilih dan memasukkan tanggal.

Komponen **Tanggal** berbagi beberapa properti umum dengan komponen lain, seperti`Name`,`Source`, dan`Validation`. Untuk informasi lebih lanjut tentang properti ini, lihat[Properti komponen umum](#common-properties).

Selain properti umum, komponen **Tanggal** memiliki properti spesifik berikut:

#### Properti tanggal
<a name="date-component-properties"></a>

##### Format
<a name="date-component-properties-format"></a>
+ **YYYY/MM/DD**, **DD/MM/YYYY**, **YYYY/MM/DD**, **YYYY/DD/MM**, **MM/DD**, **DD/MM**: Format di mana tanggal harus ditampilkan.

##### Nilai
<a name="date-component-properties-value"></a>
+ **YYYY-MM-DD**: Format di mana nilai tanggal disimpan secara internal.

##### Tanggal Min
<a name="date-component-properties-min-date"></a>
+ **YYYY-MM-DD**: Tanggal minimum yang dapat dipilih.
**catatan**  
Nilai ini harus sesuai dengan format`YYYY-MM-DD`.

##### Tanggal maks
<a name="date-component-properties-max-date"></a>
+ **YYYY-MM-DD**: Tanggal maksimum yang dapat dipilih.
**catatan**  
Nilai ini harus sesuai dengan format`YYYY-MM-DD`.

##### Jenis kalender
<a name="date-component-properties-calendar-type"></a>
+ **1 Bulan**, **2 Bulan**: Jenis UI kalender yang akan ditampilkan.

##### Tanggal dinonaktifkan
<a name="date-component-properties-disabled-dates"></a>
+ **Sumber**: Sumber data untuk tanggal yang harus dinonaktifkan. Misalnya: Tidak ada, Ekspresi.
+ **Tanggal dinonaktifkan**: Ekspresi yang menentukan tanggal mana yang harus dinonaktifkan, seperti:
  + `{{currentRow.column}}`: Menonaktifkan tanggal yang cocok dengan apa yang dievaluasi oleh ekspresi ini.
  + `{{new Date(currentRow.dateColumn) < new Date("2023-01-01")}}`: Menonaktifkan tanggal sebelum 1 Januari 2023
  + `{{new Date(currentRow.dateColumn).getDay() === 0 || new Date(currentRow.dateColumn).getDay() === 6}}`: Menonaktifkan akhir pekan.

##### Perilaku
<a name="date-component-properties-behavior"></a>
+ **Terlihat jika**: Ekspresi yang menentukan visibilitas komponen **Tanggal**.
+ **Nonaktifkan if**: Ekspresi yang menentukan apakah komponen **Tanggal** harus dinonaktifkan.

#### Validasi
<a name="date-component-properties-validation"></a>

Bagian **Validasi** memungkinkan Anda menentukan aturan dan batasan tambahan untuk masukan tanggal. Dengan mengonfigurasi aturan validasi ini, Anda dapat memastikan bahwa nilai tanggal yang dimasukkan oleh pengguna memenuhi persyaratan spesifik aplikasi Anda. Anda dapat menambahkan jenis validasi berikut:
+ **Wajib**: Toggle ini memastikan bahwa pengguna harus memasukkan nilai tanggal sebelum mengirimkan formulir.
+ **Kustom**: Anda dapat membuat aturan validasi kustom menggunakan JavaScript ekspresi. Contoh:

  ```
  {{new Date(ui.dateInput.value) < new Date("2023-01-01")}}
  ```

  Ekspresi ini memeriksa apakah tanggal yang dimasukkan sebelum 1 Januari 2023. Jika kondisinya benar, validasi akan gagal.

  Anda juga dapat memberikan pesan validasi kustom untuk ditampilkan ketika validasi tidak terpenuhi:

  ```
  "Validation not met. The date must be on or after January 1, 2023."
  ```

Dengan mengonfigurasi aturan validasi ini, Anda dapat memastikan bahwa nilai tanggal yang dimasukkan oleh pengguna memenuhi persyaratan spesifik aplikasi Anda.

#### Ekspresi dan contoh
<a name="date-component-expressions"></a>

Komponen **Tanggal** menyediakan bidang ekspresi berikut:
+ `{{ui.dateID.value}}`: Mengembalikan nilai tanggal yang dimasukkan oleh pengguna dalam format`YYYY-MM-DD`.

### Waktu
<a name="time-component"></a>

Komponen **Time** memungkinkan pengguna untuk memilih dan memasukkan nilai waktu. Dengan mengonfigurasi berbagai properti komponen **Time**, Anda dapat membuat kolom input waktu yang memenuhi persyaratan spesifik aplikasi Anda, seperti membatasi rentang waktu yang dapat dipilih, menonaktifkan waktu tertentu, dan mengontrol visibilitas dan interaktivitas komponen.

#### Properti waktu
<a name="time-component-properties"></a>

Komponen **Time** berbagi beberapa properti umum dengan komponen lain, seperti`Name`,`Source`, dan`Validation`. Untuk informasi lebih lanjut tentang properti ini, lihat[Properti komponen umum](#common-properties).

Selain properti umum, komponen **Time** memiliki properti spesifik berikut:

##### Interval waktu
<a name="time-component-properties-time-intervals"></a>
+ **5 menit**, **10 menit**, **15 menit**, **20 menit**, **25 menit**, **30 menit**, **60 menit**: Interval yang tersedia untuk memilih waktu.

##### Nilai
<a name="time-component-properties-value"></a>
+ **HH: MM AA**: Format di mana nilai waktu disimpan secara internal.
**catatan**  
Nilai ini harus sesuai dengan format`HH:MM AA`.

##### Placeholder
<a name="time-component-properties-placeholder"></a>
+ **Pengaturan kalender**: Teks placeholder ditampilkan saat bidang waktu kosong.

##### Waktu min
<a name="time-component-properties-min-time"></a>
+ **HH: MM AA**: Waktu minimum yang dapat dipilih.
**catatan**  
Nilai ini harus sesuai dengan format`HH:MM AA`.

##### Waktu maks
<a name="time-component-properties-max-time"></a>
+ **HH: MM AA**: Waktu maksimum yang dapat dipilih.
**catatan**  
Nilai ini harus sesuai dengan format`HH:MM AA`.

##### Waktu dinonaktifkan
<a name="time-component-properties-disabled-times"></a>
+ **Sumber: Sumber** data untuk waktu yang harus dinonaktifkan (misalnya, Tidak Ada, Ekspresi).
+ **Waktu dinonaktifkan**: Ekspresi yang menentukan waktu mana yang harus dinonaktifkan, seperti`{{currentRow.column}}`.

##### Konfigurasi waktu dinonaktifkan
<a name="disabled-times-configuration"></a>

Anda dapat menggunakan bagian **Waktu Dinonaktifkan** untuk menentukan nilai waktu mana yang seharusnya tidak tersedia untuk dipilih.

##### Sumber
<a name="disabled-times-configuration-source"></a>
+ **Tidak ada**: Tidak ada waktu dinonaktifkan.
+ **Ekspresi**: Anda dapat menggunakan JavaScript ekspresi untuk menentukan waktu mana yang harus dinonaktifkan, seperti`{{currentRow.column}}`.

##### Contoh ekspresi:
<a name="disabled-times-configuration-expression-example"></a>

```
{{currentRow.column === "Lunch Break"}}
```

Ekspresi ini akan menonaktifkan setiap saat di mana kolom “Lunch Break” benar untuk baris saat ini.

Dengan mengonfigurasi aturan validasi ini dan ekspresi waktu yang dinonaktifkan, Anda dapat memastikan bahwa nilai waktu yang dimasukkan oleh pengguna memenuhi persyaratan spesifik aplikasi Anda.

##### Perilaku
<a name="time-component-properties-behavior"></a>
+ **Terlihat jika**: Ekspresi yang menentukan visibilitas komponen Waktu.
+ **Nonaktifkan if**: Ekspresi yang menentukan apakah komponen Time harus dinonaktifkan.

##### Validasi
<a name="time-component-properties-validation"></a>
+ **Wajib**: Toggle yang memastikan pengguna harus memasukkan nilai waktu sebelum mengirimkan formulir.
+ **Kustom**: Memungkinkan Anda membuat aturan validasi kustom menggunakan JavaScript ekspresi.

  Pesan **Validasi Kustom: Pesan** yang akan ditampilkan saat validasi kustom tidak terpenuhi.

Contoh:

```
{{ui.timeInput.value === "09:00 AM" || ui.timeInput.value === "09:30 AM"}}
```

Ekspresi ini memeriksa apakah waktu yang dimasukkan adalah 9:00 AM atau 9:30 AM. Jika kondisinya benar, validasi akan gagal.

Anda juga dapat memberikan pesan validasi kustom untuk ditampilkan ketika validasi tidak terpenuhi:

```
Validation not met. The time must be 9:00 AM or 9:30 AM.
```

#### Ekspresi dan contoh
<a name="time-component-expressions"></a>

Komponen Time menyediakan bidang ekspresi berikut:
+ `{{ui.timeID.value}}`: Mengembalikan nilai waktu yang dimasukkan oleh pengguna dalam format HH: MM AA.

##### Contoh: Nilai waktu
<a name="time-component-expressions-examples-time-value"></a>
+ `{{ui.timeID.value}}`: Mengembalikan nilai waktu yang dimasukkan oleh pengguna dalam format`HH:MM AA`.

##### Contoh: Perbandingan waktu
<a name="time-component-expressions-examples-time-comparison"></a>
+ `{{ui.timeInput.value > "10:00 AM"}}`: Memeriksa apakah nilai waktu lebih besar dari 10:00 AM.
+ `{{ui.timeInput.value < "05:00 pM"}}`: Memeriksa apakah nilai waktu kurang dari 17:00.

### Rentang tanggal
<a name="date-range-component"></a>

Komponen **rentang Tanggal** memungkinkan pengguna untuk memilih dan memasukkan rentang tanggal. Dengan mengonfigurasi berbagai properti komponen Rentang Tanggal, Anda dapat membuat kolom input rentang tanggal yang memenuhi persyaratan spesifik aplikasi Anda, seperti membatasi rentang tanggal yang dapat dipilih, menonaktifkan tanggal tertentu, dan mengontrol visibilitas dan interaktivitas komponen.

#### Properti rentang tanggal
<a name="date-range-component-properties"></a>

Komponen **Rentang Tanggal** berbagi beberapa properti umum dengan komponen lain, seperti`Name`,`Source`, dan`Validation`. Untuk informasi lebih lanjut tentang properti ini, lihat[Properti komponen umum](#common-properties).

Selain properti umum, komponen **Rentang Tanggal** memiliki properti spesifik berikut:

##### Format
<a name="date-range-component-properties-format"></a>
+ **MM/DD/YYYY**: Format di mana rentang tanggal harus ditampilkan.

##### Tanggal mulai
<a name="date-range-component-properties-start-date"></a>
+ **YYYY-MM-DD**: Tanggal minimum yang dapat dipilih sebagai awal rentang.
**catatan**  
Nilai ini harus sesuai dengan format`YYYY-MM-DD`.

##### Tanggal akhir
<a name="date-range-component-properties-end-date"></a>
+ **YYYY-MM-DD**: Tanggal maksimum yang dapat dipilih sebagai akhir rentang.
**catatan**  
Nilai ini harus sesuai dengan format`YYYY-MM-DD`.

##### Placeholder
<a name="date-range-component-properties-placeholder"></a>
+ **Pengaturan kalender**: Teks placeholder ditampilkan saat bidang rentang tanggal kosong.

##### Tanggal Min
<a name="date-range-component-properties-min-date"></a>
+ **YYYY-MM-DD**: Tanggal minimum yang dapat dipilih.
**catatan**  
Nilai ini harus sesuai dengan format`YYYY-MM-DD`.

##### Tanggal maks
<a name="date-range-component-properties-max-date"></a>
+ **YYYY-MM-DD**: Tanggal maksimum yang dapat dipilih.
**catatan**  
Nilai ini harus sesuai dengan format`YYYY-MM-DD`.

##### Jenis kalender
<a name="date-range-component-properties-calendar-type"></a>
+ **1 Bulan**: Jenis UI kalender yang akan ditampilkan. Misalnya, satu bulan.
+ **2 Bulan**: Jenis UI kalender yang akan ditampilkan. Misalnya, dua bulan.

##### Hari wajib dipilih
<a name="date-range-component-properties-mandatory-days-selected"></a>
+ **0**: Jumlah hari wajib yang harus dipilih dalam rentang tanggal.

##### Tanggal dinonaktifkan
<a name="date-range-component-properties-disabled-dates"></a>
+ **Sumber: Sumber** data untuk tanggal yang harus dinonaktifkan (misalnya, Tidak Ada, Ekspresi, Entitas, atau Otomasi).
+ **Tanggal dinonaktifkan**: Ekspresi yang menentukan tanggal mana yang harus dinonaktifkan, seperti`{{currentRow.column}}`.

##### Validasi
<a name="date-range-component-properties-validation"></a>

Bagian **Validasi** memungkinkan Anda untuk menentukan aturan dan batasan tambahan untuk input rentang tanggal.

#### Ekspresi dan contoh
<a name="date-range-component-expressions"></a>

Komponen **Rentang Tanggal** menyediakan bidang ekspresi berikut:
+ `{{ui.dateRangeID.startDate}}`: Mengembalikan tanggal mulai dari rentang yang dipilih dalam format`YYYY-MM-DD`.
+ `{{ui.dateRangeID.endDate}}`: Mengembalikan tanggal akhir rentang yang dipilih dalam format`YYYY-MM-DD`.

##### Contoh: Menghitung perbedaan tanggal
<a name="date-range-component-expressions-examples-calculating-date-difference"></a>
+ `{(new Date(ui.dateRangeID.endDate) - new Date(ui.dateRangeID.startDate)) / (1000 * 60 * 60 * 24)}}`Menghitung jumlah hari antara tanggal mulai dan akhir.

##### Contoh: Visibilitas bersyarat berdasarkan rentang tanggal
<a name="date-range-component-expressions-examples-conditional-visibility-based-on-date-range"></a>
+ `{{new Date(ui.dateRangeID.startDate) < new Date("2023-01-01") || new Date(ui.dateRangeID.endDate) > new Date("2023-12-31")}}`Memeriksa apakah rentang tanggal yang dipilih berada di luar tahun 2023.

##### Contoh: Tanggal dinonaktifkan berdasarkan data baris saat ini
<a name="date-range-component-expressions-examples-disabled-dates-based-on-current-row-data"></a>
+ `{{currentRow.isHoliday}}`Menonaktifkan tanggal di mana kolom “isHoliday” di baris saat ini benar.
+ `{{new Date(currentRow.dateColumn) < new Date("2023-01-01")}}`Menonaktifkan tanggal sebelum 1 Januari 2023 berdasarkan “DateColumn” di baris saat ini.
+ `{{new Date(currentRow.dateColumn).getDay() === 0 || new Date(currentRow.dateColumn).getDay() === 6}}`Menonaktifkan akhir pekan berdasarkan “DateColumn” di baris saat ini.

##### Validasi kustom
<a name="date-range-component-expressions-examples-custom-validation"></a>
+ `{{new Date(ui.dateRangeID.startDate) > new Date(ui.dateRangeID.endDate)}}`Memeriksa apakah tanggal mulai lebih lambat dari tanggal akhir, yang akan gagal validasi kustom.

## Komponen media
<a name="media-components"></a>

Studio aplikasi menyediakan beberapa komponen untuk menyematkan dan menampilkan berbagai jenis media dalam aplikasi Anda.

### Sematan iFrame
<a name="iframe-embed-component"></a>

Komponen **embed iFrame** memungkinkan Anda untuk menyematkan konten web eksternal atau aplikasi dalam aplikasi Anda menggunakan iFrame.

#### Properti embed iFrame
<a name="iframe-embed-properties"></a>

##### URL
<a name="iframe-embed-properties-iframe-url"></a>

**catatan**  
Sumber media yang ditampilkan dalam komponen ini harus diizinkan dalam pengaturan keamanan konten aplikasi Anda. Untuk informasi selengkapnya, lihat [Melihat atau memperbarui setelan keamanan konten aplikasi Anda](app-content-security-settings-csp.md).

URL konten eksternal atau aplikasi yang ingin Anda sematkan.

##### Tata Letak
<a name="iframe-embed-properties-iframe-layout"></a>
+ **Lebar**: Lebar iFrame, ditentukan sebagai persentase (%) atau nilai piksel tetap (misalnya, 300px).
+ **Tinggi**: Tinggi iFrame, ditentukan sebagai persentase (%) atau nilai piksel tetap.

### Unggah S3
<a name="s3-upload-component"></a>

Komponen **unggahan S3** memungkinkan pengguna untuk mengunggah file ke bucket Amazon S3. Dengan mengonfigurasi komponen **Unggah S3**, Anda dapat memungkinkan pengguna untuk dengan mudah mengunggah file ke penyimpanan Amazon S3 aplikasi Anda, dan kemudian memanfaatkan informasi file yang diunggah dalam logika dan antarmuka pengguna aplikasi Anda.

**catatan**  
Ingatlah untuk memastikan bahwa izin yang diperlukan dan konfigurasi bucket Amazon S3 tersedia untuk mendukung unggahan file dan persyaratan penyimpanan aplikasi Anda.

#### Properti unggah S3
<a name="s3-upload-properties"></a>

##### Konfigurasi S3
<a name="s3-upload-component-properties-configuration"></a>
+ **Konektor: Pilih konektor** Amazon S3 yang telah dikonfigurasi sebelumnya untuk digunakan untuk unggahan file.
+ **Bucket: Bucket** Amazon S3 tempat file akan diunggah.
+ **Folder**: Folder di dalam ember Amazon S3 tempat file akan disimpan.
+ **Nama file**: Konvensi penamaan untuk file yang diunggah.

##### Konfigurasi unggahan file
<a name="s3-upload-component-properties-file-upload-configuration"></a>
+ **Label**: Label atau instruksi yang ditampilkan di atas area unggahan file.
+ **Deskripsi**: Petunjuk atau informasi tambahan tentang unggahan file.
+ **Jenis file**: Jenis file yang diizinkan untuk diunggah. Misalnya: gambar, dokumen, atau video.
+ **Ukuran**: Ukuran maksimum file individual yang dapat diunggah.
+ **Label tombol**: Teks yang ditampilkan pada tombol pemilihan file.
+ **Gaya tombol**: Gaya tombol pemilihan file. Misalnya, diuraikan atau diisi.
+ **Ukuran tombol**: Ukuran tombol pemilihan file.

##### Validasi
<a name="s3-upload-component-properties-validation"></a>
+ **Jumlah maksimum file**: Jumlah maksimum file yang dapat diunggah sekaligus.
+ **Ukuran file maks**: Ukuran maksimum yang diizinkan untuk setiap file individual.

##### Pemicu
<a name="s3-upload-component-properties-triggers"></a>
+ Saat **berhasil**: Tindakan yang akan dipicu saat unggahan file berhasil.
+ Saat **gagal**: Tindakan yang akan dipicu saat unggahan file gagal.

#### Bidang ekspresi unggah S3
<a name="s3-upload-expression-fields"></a>

Komponen **upload S3** menyediakan bidang ekspresi berikut:
+ `{{ui.s3uploadID.files}}`: Mengembalikan array file yang telah diunggah.
+ `{{ui.s3uploadID.files[0]?.size}}`: Mengembalikan ukuran file pada indeks yang ditunjuk.
+ `{{ui.s3uploadID.files[0]?.type}}`: Mengembalikan jenis file pada indeks yang ditunjuk.
+ `{{ui.s3uploadID.files[0]?.nameOnly}}`: Mengembalikan nama file, tanpa akhiran ekstensi, pada indeks yang ditunjuk.
+ `{{ui.s3uploadID.files[0]?.nameWithExtension}}`: Mengembalikan nama file dengan akhiran ekstensi pada indeks yang ditunjuk.

#### Ekspresi dan contoh
<a name="s3-upload-component-expression-examples"></a>

##### Contoh: Mengakses file yang diunggah
<a name="s3-upload-component-expression-examples-accessing-uploaded-files"></a>
+ `{{ui.s3uploadID.files.length}}`: Mengembalikan jumlah file yang telah diunggah.
+ `{{ui.s3uploadID.files.map(f => f.name).join(', ')}}`: Mengembalikan daftar dipisahkan koma dari nama file yang telah diunggah.
+ `{{ui.s3uploadID.files.filter(f => f.type.startsWith('image/'))}}`: Mengembalikan array hanya file gambar yang telah diunggah.

##### Contoh: Memvalidasi unggahan file
<a name="s3-upload-component-expression-examples-validating-file-uploads"></a>
+ `{{ui.s3uploadID.files.some(f => f.size > 5 * 1024 * 1024)}}`: Memeriksa apakah ada file yang diunggah melebihi ukuran 5 MB.
+ `{{ui.s3uploadID.files.every(f => f.type === 'image/png')}}`: Memeriksa apakah semua file yang diunggah adalah gambar PNG.
+ `{{ui.s3uploadID.files.length > 3}}`: Memeriksa apakah lebih dari 3 file telah diunggah.

##### Contoh: Memicu tindakan
<a name="s3-upload-component-expression-examples-triggering-actions"></a>
+ `{{ui.s3uploadID.files.length > 0 ? 'Upload Successful' : 'No files uploaded'}}`: Menampilkan pesan sukses jika setidaknya satu file telah diunggah.
+ `{{ui.s3uploadID.files.some(f => f.type.startsWith('video/')) ? triggerVideoProcessing() : null}}`: Memicu otomatisasi pemrosesan video jika ada file video yang telah diunggah.
+ `{{ui.s3uploadID.files.map(f => f.url)}}`: Mengambil file URLs yang diunggah, yang dapat digunakan untuk menampilkan atau memproses file lebih lanjut.

Ekspresi ini memungkinkan Anda mengakses file yang diunggah, memvalidasi unggahan file, dan memicu tindakan berdasarkan hasil unggahan file. Dengan memanfaatkan ekspresi ini, Anda dapat membuat perilaku yang lebih dinamis dan cerdas dalam fungsionalitas unggah file aplikasi Anda.

**catatan**  
Ganti *s3uploadID* dengan ID komponen **upload S3** Anda.

### Komponen penampil PDF
<a name="pdf-viewer-component"></a>

Komponen **penampil PDF** memungkinkan pengguna untuk melihat dan berinteraksi dengan dokumen PDF dalam aplikasi Anda. App Studio mendukung jenis input yang berbeda ini untuk Sumber PDF, komponen **penampil PDF** memberikan fleksibilitas dalam cara Anda dapat mengintegrasikan dokumen PDF ke dalam aplikasi Anda, apakah itu dari URL statis, URI data inline, atau konten yang dihasilkan secara dinamis.

#### Properti penampil PDF
<a name="pdf-viewer-properties"></a>

##### Sumber
<a name="pdf-viewer-properties-source"></a>

**catatan**  
Sumber media yang ditampilkan dalam komponen ini harus diizinkan dalam pengaturan keamanan konten aplikasi Anda. Untuk informasi selengkapnya, lihat [Melihat atau memperbarui setelan keamanan konten aplikasi Anda](app-content-security-settings-csp.md).

Sumber dokumen PDF, yang dapat berupa ekspresi, entitas, URL, atau otomatisasi.

##### Ekspresi
<a name="pdf-viewer-properties-source-expression"></a>

Gunakan ekspresi untuk menghasilkan sumber PDF secara dinamis.

##### Entitas
<a name="pdf-viewer-properties-source-entity"></a>

Hubungkan komponen **penampil PDF** ke entitas data yang berisi dokumen PDF.

##### URL
<a name="pdf-viewer-properties-source-url"></a>

Tentukan URL dokumen PDF.

##### URL
<a name="pdf-viewer-properties-source-url-example"></a>

Anda dapat memasukkan URL yang mengarah ke dokumen PDF yang ingin Anda tampilkan. Ini bisa berupa URL web publik atau URL dalam aplikasi Anda sendiri.

Contoh: `https://example.com/document.pdf`

##### URI Data
<a name="pdf-viewer-properties-source-url-data-uri"></a>

**URI Data** adalah cara ringkas untuk menyertakan file data kecil (seperti gambar atau PDFs) sebaris dalam aplikasi Anda. Dokumen PDF dikodekan sebagai string base64 dan disertakan langsung dalam konfigurasi komponen.

##### Gumpalan atau ArrayBuffer
<a name="pdf-viewer-properties-source-url-blob-or-arraybuffer"></a>

Anda juga dapat memberikan dokumen PDF sebagai Blob atau ArrayBuffer objek, yang memungkinkan Anda untuk secara dinamis menghasilkan atau mengambil data PDF dari berbagai sumber dalam aplikasi Anda.

##### Otomatisasi
<a name="pdf-viewer-properties-source-automation"></a>

Hubungkan komponen **penampil PDF** ke otomatisasi yang menyediakan dokumen PDF.

##### Tindakan
<a name="pdf-viewer-properties-actions"></a>
+ **Unduh**: Menambahkan tombol atau tautan yang memungkinkan pengguna mengunduh dokumen PDF.

##### Tata Letak
<a name="pdf-viewer-properties-layout"></a>
+ **Lebar**: Lebar PDF Viewer, ditentukan sebagai persentase (%) atau nilai piksel tetap (misalnya, 600px).
+ **Tinggi**: Ketinggian PDF Viewer, ditentukan sebagai nilai piksel tetap.

### Penampil gambar
<a name="image-viewer-component"></a>

Komponen **penampil gambar** memungkinkan pengguna untuk melihat dan berinteraksi dengan file gambar dalam aplikasi Anda.

#### Properti penampil gambar
<a name="image-viewer-properties"></a>

##### Sumber
<a name="image-viewer-properties-source"></a>

**catatan**  
Sumber media yang ditampilkan dalam komponen ini harus diizinkan dalam pengaturan keamanan konten aplikasi Anda. Untuk informasi selengkapnya, lihat [Melihat atau memperbarui setelan keamanan konten aplikasi Anda](app-content-security-settings-csp.md).
+ **Entity**: Connect komponen **Image viewer** ke entitas data yang berisi file gambar.
+ **URL**: Tentukan URL file gambar.
+ **Ekspresi**: Gunakan ekspresi untuk menghasilkan sumber gambar secara dinamis.
+ **Otomasi**: Hubungkan komponen **penampil gambar** ke otomatisasi yang menyediakan file gambar.

##### Teks Alt
<a name="image-viewer-properties-alt-text"></a>

Deskripsi teks alternatif dari gambar, yang digunakan untuk tujuan aksesibilitas.

##### Tata Letak
<a name="image-viewer-properties-layout"></a>
+ **Image fit**: Menentukan bagaimana gambar harus diubah ukurannya dan ditampilkan di dalam komponen. Misalnya: `Contain`, `Cover`, atau `Fill`.
+ **Lebar**: Lebar komponen **penampil gambar**, ditentukan sebagai persentase (%) atau nilai piksel tetap (misalnya, 300px).
+ **Tinggi**: Ketinggian komponen **penampil gambar**, ditentukan sebagai nilai piksel tetap.
+ **Latar Belakang**: Memungkinkan Anda untuk mengatur warna latar belakang atau gambar untuk komponen **penampil Gambar**.