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

# Pustaka komponen UI untuk pembuat UI di Amazon Connect
<a name="user-interface-component-library-sg"></a>

Semua komponen pembuat UI dijelaskan dalam [dokumentasi komponen Amazon Connect UI](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/overview--page). Dokumentasi ini menunjukkan kepada Anda komponen UI individual yang dapat Anda gunakan di pembuat UI, dan cara mengonfigurasinya.

Anda mengakses komponen pustaka di pembuat UI di panel **Create**, tab **Library**. Gambar berikut menunjukkan contoh tab **Library** dan komponen **Container**. 

![\[Panel Buat pembuat UI, tab Library, komponen UI.\]](http://docs.aws.amazon.com/id_id/connect/latest/adminguide/images/user-interface-component-library-example.png)


## Gunakan Container untuk memindahkan dan mengatur komponen
<a name="user-interface-component-library-containers"></a>

Kontainer adalah blok bangunan inti untuk membuat tampilan. Anda dapat memindahkan komponen UI (termasuk kontainer lain) ke dalam wadah untuk mengelompokkannya secara logis dan visual di halaman. 

Untuk menjaga konten halaman relatif konsisten saat Anda menyesuaikan pengaturan tampilan tingkat atas, sebaiknya gunakan kontainer di semua tampilan Anda. Wadah juga dilengkapi dengan tata letak kolom. Tata letak kolom memungkinkan Anda untuk mengatur konten dalam wadah.

## Buat formulir
<a name="user-interface-component-library-form-section"></a>

Untuk membuat formulir bagi agen atau pelanggan untuk mengisi dan mengirimkan, Anda menggunakan komponen [Formulir](https://d3irlmavjxd3d8.cloudfront.net/?path=/story/aws-managed-views-form--with-all). Anda dapat: 
+ Seret dan jatuhkan komponen **Formulir** ke kanvas dari pustaka UI.
+ Atau, dari tab **Template**, pilih template **Contoh Formulir**. Ini menggunakan komponen formulir.

Komponen [Formulir](https://d3irlmavjxd3d8.cloudfront.net/?path=/story/aws-managed-views-form--with-all) adalah jenis wadah khusus di mana Anda dapat memasukkan bidang input dan menambahkan tombol **Kirim**. Saat pengguna yang berinteraksi dengan panduan menekan tombol **Kirim**, Amazon Connect meneruskan semua nilai yang dimasukkan ke dalam bidang formulir ke alur. Pada saat itu dalam alur, Anda dapat menyesuaikan logika dan send/retrieve data bisnis Anda sendiri ke sistem pihak ketiga dengan menggunakan [Fungsi AWS Lambda ](invoke-lambda-function-block.md) blok. 

Gambar berikut menunjukkan contoh komponen **Formulir** dengan label placeholder dan Tombol Kirim.

![\[Komponen Formulir dengan label placeholder dan Tombol Kirim.\]](http://docs.aws.amazon.com/id_id/connect/latest/adminguide/images/user-interface-component-library-form-section-example.png)