Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris. # Tampilan: Template UI untuk menyesuaikan ruang kerja agen di Amazon Connect *Tampilan* adalah template UI yang dapat Anda gunakan untuk menyesuaikan ruang kerja agen Anda. Misalnya, Anda dapat menggunakan tampilan untuk menampilkan atribut kontak ke agen, menyediakan formulir untuk memasukkan kode disposisi, memberikan catatan panggilan, dan menyajikan halaman UI untuk agen berjalan melalui step-by-step panduan. Amazon Connect menyertakan serangkaian tampilan yang dapat Anda tambahkan ruang kerja agen, dan Anda juga dapat membuat tampilan sendiri menggunakan publik APIs kami. Saat mengonfigurasi tampilan dalam aliran menggunakan [Tampilkan tampilan](show-view-block.md) blok, Anda dapat menentukan konten statis dan dinamis untuk setiap tampilan. Konten untuk tampilan tertentu terdiri dari tiga elemen kunci: template, skema input, dan tindakan. **Tip** Untuk pengalaman pemetaan data terbaik, sebaiknya gunakan opsi **Set JSON** di blok. [Tampilkan tampilan](show-view-block.md) Semua ruang nama dalam alur dapat direferensikan di blok **Tampilkan Tampilan**, termasuk`$.External`, sehingga Anda dapat berbagi data dari sistem eksternal ke agen Anda dalam tampilan mana pun yang Anda buat. Anda dapat mencampur dan mencocokkan data dari Amazon Connect dan sumber lain untuk membuat UI terkonsolidasi untuk agen Anda. # Tampilan khusus di ruang kerja agen Amazon Connect Menggunakan APIs Anda dapat membuat sumber daya tampilan Anda sendiri. Sumber daya View mencakup CloudFormation, CloudTrail, dan dukungan penandaan. ## Contoh tampilan API **Lihat deskripsi** Tampilan ini bersarang dua kartu di dalam wadah, dan menempatkan tombol lewati di sebelah kanannya. **Perintah CLI** ``` aws connect create-view --name CustomerManagedCardsNoContainer \ --status PUBLISHED --content file://view-content.json \ --instance-id $INSTANCE_ID --region $REGION ``` **view-content.json** ``` { "Template": "Actions": ["CardSelected", "Skip"] } ``` **Template JSON (tidak dirangkai)** ``` { "Head": { "Title": "CustomerManagedFormView", "Configuration": { "Layout": { "Columns": ["10", "2"] // Default column width for each component is 12, which is also the width of the entire view. } } }, "Body": [ { "_id": "card-container", "Type": "Container", "Props": {}, "Content": [ { "_id": "cafe_card", "Type": "Card", "Props": { "Id": "cafe-card", "Heading": "Cafe Card", "Icon": "Cafe", "Status": "Status Field", "Description": "This is the cafe card.", "Action": "CardSelected" // Note that these actions also appear in the view-content.json file. }, "Content": [] }, { "_id": "no_icon_card", "Type": "Card", "Props": { "Id": "NoIconCard", "Heading": "$.NoIconCardHeading", "Status": "Status Field", "Description": "This is the icon card.", "Action": "CardSelected" // Note that these actions also appear in the view-content.json file. }, "Content": [] } ] }, { "_id": "button", "Type": "Button", "Props": { "Action": "Skip" }, // Note that these actions also appear in the view-content.json file. "Content": ["Skip"] } ] } ``` ## Pandangan **Masukan** `$.NoIconCardHeading`menunjukkan bahwa input untuk bidang `NoIconCardHeading` diperlukan untuk membuat tampilan. Katakanlah `NoIconCardHeading` diatur ke`No Icon Card`. **Penampilan** ![\[Gambar kartu tampilan ruang kerja agen.\]](http://docs.aws.amazon.com/id_id/connect/latest/adminguide/images/view-resources-custom-the-view.png) ## Lihat contoh keluaran Tampilan menghasilkan dua bagian utama data: yang `Action` diambil, dan `Output` data. Saat menggunakan tampilan dengan [blok Tampilkan tampilan](https://docs.aws.amazon.com/connect/latest/adminguide/show-view-block.html), `Action` mewakili cabang, dan `Output` data diatur ke atribut `$.Views.ViewResultData` flow, seperti yang disebutkan dalam dokumentasi blok Tampilkan Tampilan. **Skenario 1: Pilih **Kartu Kartu Cafe**** ``` "Action": "CardSelected" "Output": { "Heading": "CafeCard", "Id": "CafeCard" } ``` **Skenario 2: Pilih Tombol **Lewati**** ``` "Action": "Skip" "Output": { "action": "Button" } ``` ## Contoh keluaran Tampilan Formulir Saat menggunakan tampilan yang **dikelola AWS (tampilan Formulir)**, hasil data formulir akan berada di bawah. *FormData* ``` { FormData: { email: "a@amazon.com" } } ``` Anda dapat mengakses data di blok tampilan tampilan seperti`$.Views.ViewResultData.FormData.email`. Saat menggunakan **tampilan Kustom (dengan komponen formulir)**, hasil data formulir langsung berada di bawah output. ``` { email: "a@amazon.com" } ``` Anda dapat mengakses data di blok tampilan tampilan seperti`$.Views.ViewResultData.email`. # Menyiapkan tampilan AWS terkelola untuk ruang kerja agen di Amazon Connect Amazon Connect mencakup serangkaian tampilan yang dapat Anda tambahkan ruang kerja agen Anda. Lihat berikut ini untuk detail tentang cara mengonfigurasi tampilan AWS terkelola yang berbeda. ------ #### [ Detail view ] **Tampilan Detail** adalah untuk menampilkan informasi kepada agen dan memberi mereka daftar tindakan yang dapat mereka ambil. Kasus penggunaan umum dari **tampilan Detail** adalah memunculkan layar pop ke agen pada awal panggilan. + Tindakan dalam tampilan ini dapat digunakan untuk membiarkan agen melanjutkan ke langkah berikutnya dalam step-by-step panduan atau tindakan dapat digunakan untuk memanggil alur kerja yang sama sekali baru. + **Bagian** adalah satu-satunya komponen yang diperlukan. Di sinilah Anda dapat mengonfigurasi badan halaman yang ingin Anda tampilkan kepada agen Anda. + Komponen opsional seperti **AttributeBar**didukung oleh tampilan ini. [Dokumentasi](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-detail--with-all) interaktif untuk **tampilan Detail** Gambar berikut menunjukkan contoh **tampilan Detail**. Ini memiliki judul halaman, deskripsi, dan empat contoh. ![\[Tampilan detail, dengan judul halaman, deskripsi, dan empat contoh dengan atribut.\]](http://docs.aws.amazon.com/id_id/connect/latest/adminguide/images/details-view-page-heading-sq.png) **Bagian** + Konten dapat berupa string statis, TemplateString atau pasangan kunci-nilai. Ini bisa berupa titik data tunggal atau daftar. Untuk informasi selengkapnya, lihat [TemplateString](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#templatestring) atau [AtrributeSection](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#attribute-section). **AttributeBar (Opsional)** + Opsional, jika disediakan akan menampilkan bilah Atribut di bagian atas tampilan. + Adalah daftar objek dengan properti yang diperlukan, **Label**, **Nilai**, dan properti opsional **LinkType**, **ResourceId**, **Copyable** dan **Url**. Untuk informasi selengkapnya lihat, [Atribut](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#attribute). + **LinkType**bisa eksternal atau menghubungkan aplikasi seperti case. + Ketika itu *eksternal*, pengguna dapat menavigasi ke halaman browser baru, yang dikonfigurasi dengan **Url**. + *Jika terjadi*, pengguna dapat menavigasi ke detail kasus baru di ruang kerja Agen, yang dikonfigurasi dengannya ResourceId. + **Copyable** memungkinkan pengguna untuk menyalin ResourceId dengan memilihnya dengan perangkat input Anda. **Kembali (Opsional)** + Opsional, tetapi diperlukan jika tidak ada tindakan yang disertakan. jika disediakan akan menampilkan tautan navigasi belakang. + Adalah objek dengan *Label* yang akan mengontrol apa yang ditampilkan dalam teks tautan. **Judul (Opsional)** + Opsional, jika disediakan akan menampilkan Teks sebagai judul. **Deskripsi (Opsional)** + Opsional, jika disediakan akan menampilkan deskripsi teks di bawah judul. **Tindakan (Opsional)** + Tidak wajib. Jika disediakan, akan menampilkan daftar tindakan di bagian bawah halaman. **Contoh masukan** ``` { "AttributeBar": [ {"Label": "Example", "Value": "Attribute"}, { "Label": "Example 2", "Value": "Attribute 3", "LinkType": "case", "ResourceId": "123456", "Copyable": true } ], "Back": { "Label": "Back" }, "Heading": "Hello world", "Description": "This view is showing off the wonders of a detail page", "Sections": [{ "TemplateString": "This is an intro paragraph" }, "abc"], "Actions": ["Do thing!", "Update thing 2!"], } ``` **Contoh keluaran** ``` { Action: "ActionSelected", ViewResultData: { actionName: "Action 2" } } ``` ------ #### [ List view ] **Tampilan Daftar** adalah untuk menampilkan informasi sebagai daftar item dengan judul dan deskripsi. Item juga dapat bertindak sebagai tautan dengan tindakan yang dilampirkan. Ini juga secara opsional mendukung navigasi belakang standar dan header konteks persisten. [Dokumentasi](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-list--with-all) interaktif untuk **tampilan Daftar** Gambar berikut menunjukkan contoh tampilan Daftar. Ini memiliki satu kolom dengan tiga item di dalamnya. ![\[Tampilan daftar, satu item daftar dengan tautan, dan dua item tanpa tautan.\]](http://docs.aws.amazon.com/id_id/connect/latest/adminguide/images/list-view-column-sq.png) **Barang** + Wajib, akan menampilkan item ini sebagai daftar. + Setiap item mungkin memiliki Heading, Description, Icon, dan Id. + Semua properti adalah opsional. + Ketika Id didefinisikan, output akan menyertakan nilai sebagai bagian dari output. **AttributeBar (Opsional)** + Opsional, jika disediakan akan menampilkan bilah Atribut di bagian atas tampilan. + Adalah daftar objek dengan properti yang diperlukan, **Label**, **Nilai**, dan properti opsional **LinkType**, **ResourceId**, **Copyable** dan **Url**. Untuk informasi selengkapnya lihat, [Atribut](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#attribute). + **LinkType**bisa eksternal atau menghubungkan aplikasi seperti case. + Ketika itu *eksternal*, pengguna dapat menavigasi ke halaman browser baru, yang dikonfigurasi dengan **Url**. + *Jika terjadi*, pengguna dapat menavigasi ke detail kasus baru di ruang kerja Agen, yang dikonfigurasi dengannya ResourceId. + **Copyable** memungkinkan pengguna untuk menyalin ResourceId dengan memilihnya dengan perangkat input Anda. **Kembali (Opsional)** + Opsional, tetapi diperlukan jika tidak ada tindakan yang disertakan. jika disediakan akan menampilkan tautan navigasi belakang. + Adalah objek dengan *Label* yang akan mengontrol apa yang ditampilkan dalam teks tautan. **Judul (Opsional)** + Opsional, jika disediakan akan menampilkan Teks sebagai judul. **SubHeading (Opsional)** + Opsional, jika disediakan akan menampilkan Teks sebagai judul daftar. **Contoh data masukan** ``` { "AttributeBar": [ { "Label": "Example", "Value": "Attribute" }, { "Label": "Example 2", "Value": "Attribute 2" }, { "Label": "Example 2", "Value": "Attribute 3", "LinkType": "external", "Url": "https://www.amzon.com" } ], "Back": { "Label": "Back" }, "Heading": "José may be contacting about...", "SubHeading": "Optional List Title", "Items": [ { "Heading": "List item with link", "Description": "Optional description here with no characters limit. We can just wrap the text.", "Icon": "School", "Id": "Select_Car" }, { "Heading": "List item not a link", "Icon": "School", "Description": "Optional description here with no characters limit." }, { "Heading": "List item not a link and no image", "Description": "Optional description here with no characters limit." }, { "Heading": "List item no image and with link", "Description": "Optional description here with no characters limit." } ] } ``` **Contoh data keluaran** ``` { Action: "ActionSelected", ViewResultData: { actionName: "Select_Car" } } ``` ------ #### [ Form view ] **Tampilan Formulir** memungkinkan Anda memberi agen Anda bidang masukan untuk mengumpulkan data yang diperlukan dan mengirimkan data ke sistem backend. Tampilan ini terdiri dari beberapa *Bagian* dengan gaya *Bagian* yang telah ditentukan dengan header. Tubuh terdiri dari berbagai bidang input yang disusun dalam kolom atau format tata letak kisi. [Dokumentasi](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-form--with-all) interaktif untuk **tampilan Formulir** Gambar berikut menunjukkan contoh tampilan Formulir untuk reservasi sewa mobil. Ini memiliki bidang lokasi dan tanggal di atasnya. ![\[Tampilan formulir dengan bidang lokasi dan tanggal sebagai contoh.\]](http://docs.aws.amazon.com/id_id/connect/latest/adminguide/images/form-view-sq.png) **Bagian** + Lokasi dalam **tampilan Formulir** tempat bidang input dan bidang tampilan berada. + **SectionProps** + **Menuju** + Judul bagian + **Jenis** + Jenis bagian + FormSection (formulir yang menangani masukan pengguna) atau DataSection (menampilkan daftar label dan nilai) + **Barang** + Daftar data berdasarkan jenisnya. `Type`Kapan`DataSection`, data harus berupa atribut. Jika `Type` ya`FormSection`, data harus berupa komponen bentuk. + **ISEditable** + Tampilkan tombol edit di header saat disediakan saat jenis bagian`DataSection`. + Boolean **Wizard (Opsional)** + Tampilan **ProgressTracker**di sisi kiri tampilan. + Setiap item mungkin memiliki Judul, Deskripsi, dan Opsional. + Judul diperlukan **Kembali (Opsional)** + Adalah objek atau string dengan Label yang akan mengontrol apa yang ditampilkan dalam teks tautan. **Berikutnya (Opsional)** + Tindakan ini digunakan ketika langkah bukan langkah terakhir dalam langkah-langkah. + Adalah objek (FormActionProps) atau string. Untuk informasi selengkapnya, lihat [FormActionProps](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#actionProps). **Batalkan (Opsional)** + Tindakan ini digunakan ketika langkah bukan langkah pertama. + Adalah objek (FormActionProps) atau string. Untuk informasi selengkapnya, lihat [FormActionProps](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#actionProps). **Sebelumnya (Opsional)** + Tindakan ini digunakan ketika langkah bukan langkah pertama. + Adalah objek (FormActionProps) atau string. Untuk informasi selengkapnya, lihat [FormActionProps](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#actionProps). **Edit (Opsional)** + Tindakan ini ditampilkan ketika jenis bagian`DataSection`. + Adalah objek (FormActionProps) atau string. Untuk informasi selengkapnya, lihat [FormActionProps](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#actionProps). **AttributeBar (Opsional)** + Opsional, jika disediakan akan menampilkan bilah Atribut di bagian atas tampilan. + Adalah daftar objek dengan properti yang diperlukan, **Label**, **Nilai**, dan properti opsional **LinkType**, **ResourceId**, **Copyable** dan **Url**. Untuk informasi selengkapnya lihat, [Atribut](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#attribute). + **LinkType**bisa eksternal atau menghubungkan aplikasi seperti case. + Ketika itu *eksternal*, pengguna dapat menavigasi ke halaman browser baru, yang dikonfigurasi dengan **Url**. + *Jika terjadi*, pengguna dapat menavigasi ke detail kasus baru di ruang kerja Agen, yang dikonfigurasi dengannya ResourceId. + **Copyable** memungkinkan pengguna untuk menyalin ResourceId dengan memilihnya dengan perangkat input Anda. **Judul (Opsional)** + String yang ditampilkan sebagai judul halaman. **SubHeading (Opsional)** + Pesan sekunder untuk halaman. **ErrorText (Opsional)** + Opsional, menampilkan pesan kesalahan sisi server. + ErrorProps; Tali **Contoh data masukan** ``` { "AttributeBar": [{ "Label": "Queue", "Value": "Sales" }, { "Label": "Case ID", "Value": "1234567" }, { "Label": "Case", "Value": "New reservation" }, { "Label": "Attribute 3", "Value": "Attribute" } ], "Back": { "Label": "Back Home" }, "Next": { "Label": "Confirm Reservation", "Details": { "endpoint": "awesomecustomer.com/submit", } }, "Cancel": { "Label": "Cancel" }, "Heading": "Modify Reservation", "SubHeading": "Cadillac XT5", "ErrorText": { "Header": "Modify reservation failed", "Content": "Internal Server Error, please try again" }, "Sections": [{ "_id": "pickup", "Type": "FormSection", "Heading": "Pickup Details", "Items": [{ "LayoutConfiguration": { "Grid": [{ "colspan": { "default": "12", "xs": "6" } }] }, "Items": [{ "Type": "FormInput", "Fluid": true, "InputType": "text", "Label": "Location", "Name": "pickup-location", "DefaultValue": "Seattle" }] }, { "LayoutConfiguration": { "Grid": [{ "colspan": { "default": "6", "xs": "4" } }, { "colspan": { "default": "6", "xs": "4" } }] }, "Items": [{ "Label": "Day", "Type": "DatePicker", "Fluid": true, "DefaultValue": "2022-10-10", "Name": "pickup-day" }, { "Label": "Time", "Type": "TimeInput", "Fluid": true, "DefaultValue": "13:00", "Name": "pickup-time" }] }] }, { "_id": "dropoff", "Heading": "Drop off details", "Type": "FormSection", "Items": [{ "LayoutConfiguration": { "Grid": [{ "colspan": { "default": "12", "xs": "6" } }] }, "Items": [{ "Label": "Location", "Type": "FormInput", "Fluid": true, "DefaultValue": "Lynnwood", "Name": "dropoff-location" }] }, { "LayoutConfiguration": { "Grid": [{ "colspan": { "default": "6", "xs": "4" } }, { "colspan": { "default": "6", "xs": "4" } }] }, "Items": [{ "Label": "Day", "Type": "DatePicker", "Fluid": true, "DefaultValue": "2022-10-15", "Name": "dropoff-day" }, { "Label": "Time", "Type": "TimeInput", "Fluid": true, "DefaultValue": "01:00", "Name": "dropoff-time" }] }] }] } ``` **Contoh data keluaran** ``` { Action: "Submit", ViewResultData: { FormData: { "dropoff-day": "2022-10-15", "dropoff-location": "Lynnwood", "dropoff-time": "01:00", "pickup-day": "2022-10-10", "pickup-location": "Seattle", "pickup-time": "13:00" }, StepName:"Pickup and drop off" } } ``` ------ #### [ Confirmation view ] **Tampilan Konfirmasi** adalah halaman untuk menampilkan pengguna setelah formulir dikirimkan atau tindakan telah selesai. Dalam template pra-bangun ini Anda dapat memberikan ringkasan tentang apa yang telah terjadi, setiap langkah selanjutnya, dan petunjuk. **Tampilan Konfirmasi** mendukung bilah atribut persisten, ikon/gambar, judul, dan sub-judul, bersama dengan tombol navigasi kembali ke rumah. [Dokumentasi](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-confirmation--with-all) interaktif untuk **tampilan Konfirmasi** Gambar berikut menunjukkan contoh konfirmasi. ![\[Tampilan konfirmasi, tanda centang dan teks untuk mengonfirmasi penyewaan mobil.\]](http://docs.aws.amazon.com/id_id/connect/latest/adminguide/images/confirmation-view-check-sq.png) **Berikutnya** + Wajib. + Tombol aksi untuk selanjutnya + Label - label string untuk tombol navigasi. **AttributeBar (Opsional)** + Opsional, jika disediakan akan menampilkan bilah Atribut di bagian atas tampilan. + Adalah daftar objek dengan properti yang diperlukan, **Label**, **Nilai**, dan properti opsional **LinkType**, **ResourceId**, **Copyable** dan **Url**. Untuk informasi selengkapnya lihat, [Atribut](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#attribute). + **LinkType**bisa eksternal atau menghubungkan aplikasi seperti case. + Ketika itu *eksternal*, pengguna dapat menavigasi ke halaman browser baru, yang dikonfigurasi dengan **Url**. + *Jika terjadi*, pengguna dapat menavigasi ke detail kasus baru di ruang kerja Agen, yang dikonfigurasi dengannya ResourceId. + **Copyable** memungkinkan pengguna untuk menyalin ResourceId dengan memilihnya dengan perangkat input Anda. **Judul (Opsional)** + String yang ditampilkan sebagai judul halaman. **SubHeading (Opsional)** + Pesan sekunder untuk halaman. **Grafis (Opsional)** + Menampilkan gambar + Objek dengan kunci berikut: + Sertakan - boolean, jika ini benar maka grafik akan dimasukkan dalam halaman. **Contoh Data Masukan** ``` { "AttributeBar": [ { "Label": "Attribute1", "Value": "Value1" }, { "Label": "Attribute2", "Value": "Value2" }, { "Label": "Attribute3", "Value": "Amazon", "LinkType": "external", "Url": "https://www.amzon.com" } ], "Next": { "Label": "Go Home" }, "Graphic": { "Include": true }, "Heading": "I have updated your car rental reservation for pickup on July 22.", "SubHeading": "You will be receiving a confirmation shortly. Is there anything else I can help with today?", } ``` **Contoh Data Keluaran** ``` { "Action": "Next", "ViewResultData": { "Label": "Go Home" } } ``` ------ #### [ Cards view ] **Tampilan Kartu** memungkinkan Anda untuk memandu agen Anda dengan menyajikan kepada mereka daftar topik untuk dipilih segera setelah mereka menerima kontak. [Dokumentasi](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-cards--with-all) interaktif untuk **tampilan Kartu** *Tunjukkan kartu kepada agen Anda.* Gambar berikut menunjukkan contoh enam kartu yang disajikan kepada agen: satu untuk membuat reservasi baru, dan yang lainnya untuk meninjau reservasi untuk perjalanan yang akan datang. ![\[Satu set enam kartu.\]](http://docs.aws.amazon.com/id_id/connect/latest/adminguide/images/solve-view-sq.png) *Ketika agen memilih kartu, info lebih lanjut terungkap.* Gambar berikut menunjukkan kartu terbuka yang menampilkan detail untuk reservasi. ![\[Kartu terbuka yang menunjukkan detail untuk reservasi.\]](http://docs.aws.amazon.com/id_id/connect/latest/adminguide/images/card-view-sq.png) **Bagian** + Ini adalah daftar objek dengan Ringkasan dan Detail. Itu harus disediakan untuk membuat Kartu dan Detail. + Terdiri dari Ringkasan dan Detail. Untuk informasi lebih lanjut lihat [Ringkasan dan Detail](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-cards--with-all). **AttributeBar (Opsional)** + Opsional, jika disediakan akan menampilkan bilah Atribut di bagian atas tampilan. + Adalah daftar objek dengan properti yang diperlukan, **Label**, **Nilai**, dan properti opsional **LinkType**, **ResourceId**, **Copyable** dan **Url**. Untuk informasi selengkapnya, lihat [Atribut](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#attribute). + **LinkType**bisa eksternal atau menghubungkan aplikasi seperti case. + Ketika itu *eksternal*, pengguna dapat menavigasi ke halaman browser baru, yang dikonfigurasi dengan **Url**. + *Jika terjadi*, pengguna dapat menavigasi ke detail kasus baru di ruang kerja Agen, yang dikonfigurasi dengannya ResourceId. + **Copyable** memungkinkan pengguna untuk menyalin ResourceId dengan memilihnya dengan perangkat input Anda. **Judul (Opsional)** + String yang ditampilkan sebagai judul halaman **Kembali (Opsional)** + Ini adalah objek atau string dengan Label yang akan mengontrol apa yang ditampilkan dalam teks tautan. Untuk informasi selengkapnya, lihat [ActionProps](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#actionProps). **NoMatchFound (Opsional)** + Ini adalah string yang menampilkan tombol yang ada di bawah Kartu. Untuk mengetahui informasi selengkapnya, lihat [ActionProps](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#actionProps). **Contoh Data Masukan** ``` { "AttributeBar": [{ "Label": "Queue", "Value": "Sales" }, { "Label": "Case ID", "Value": "1234567" }, { "Label": "Case", "Value": "New reservation" }, { "Label": "Attribute 3", "Value": "Attribute" } ], "Back": { "Label": "Back" }, "Heading": "Customer may be contacting about...", "Cards": [{ "Summary": { "Id": "lost_luggage", "Icon": "plus", "Heading": "Lost luggage claim" }, "Detail": { "Heading": "Lost luggage claim", "Description": "Use this flow for customers that have lost their luggage and need to fill a claim in order to get reimbursement. This workflow usually takes 5-8 minutes", "Sections": { "TemplateString": "Steps:
  1. Customer provides incident information
  2. Customer provides receipts and agrees with amount
  3. Customer receives reimbursement
" }, "Actions": [ "Start a new claim", "Something else" ] } }, { "Summary": { "Id": "car_rental", "Icon": "Car Side View", "Heading": "Car rental - New York", "Status": "Upcoming Sept 17, 2022" }, "Detail": { "Heading": "Car rental - New York", "Sections": { "TemplateString": "

There is no additional information

" } } }, { "Summary": { "Id": "trip_reservation", "Icon": "Suitcase", "Heading": "Trip to Mexico", "Status": "Upcoming Aug 15, 2022", "Description": "Flying from New York to Cancun, Mexico" }, "Detail": { "Heading": "Trip to Mexico", "Sections": { "TemplateString": "

There is no additional information

" } } }, { "Summary": { "Id": "fligh_reservation", "Icon": "Airplane", "Heading": "Flight to France", "Status": "Upcoming Dec 5, 2022", "Description": "Flying from Miami to Paris, France" }, "Detail": { "Heading": "Flight to France", "Sections": { "TemplateString": "

There is no additional information

" } } }, { "Summary": { "Id": "flight_refund", "Icon": "Wallet Closed", "Heading": "Refund flight to Atlanta", "Status": "Refunded July 10, 2022" }, "Detail": { "Heading": "Refund trip to Atlanta", "Sections": { "TemplateString": "

There is no additional information

" } } }, { "Summary": { "Id": "book_experience", "Icon": "Hot Air Balloon", "Heading": "Book an experience", "Description": "Top experience for european travellers" }, "Detail": { "Heading": "Book an experience", "Sections": { "TemplateString": "

There is no additional information

" } } }], "NoMatchFound": { "Label": "Can't find match?" } } ``` **Contoh Data Keluaran** ``` { Action: "ActionSelected", ViewResultData: { actionName: "Update the trip" } } ``` ------ # Sesuaikan tampilan untuk ruang kerja agen Amazon Connect dengan menggunakan HTML dan JSX Anda dapat menyesuaikan tampilan dan nuansa tata letak sumber daya Lihat. Anda melakukan ini dengan memanfaatkan HTML atau JSX ketika Anda meneruskan parameter input ke blok. [Tampilkan tampilan](show-view-block.md) Lengkapi langkah-langkah berikut untuk contoh sederhana tentang bagaimana Anda dapat memanfaatkan HTML atau JSX dengan [Tampilkan tampilan](show-view-block.md) blok. 1. Buat aliran dengan [Tampilkan tampilan](show-view-block.md) blok. 1. Buka halaman Properties dari [Tampilkan tampilan](show-view-block.md) blok. 1. Di bawah **Lihat**, pilih **Detail** dari daftar dropdown. 1. Di bagian **bagian**, pilih **Set JSON**. 1. Salin dan tempel kode JSON berikut. Kode ini menunjukkan bagaimana ekspresi HTML atau JSX diproses. **Contoh HTML** ``` { "TemplateString": "Steps:
  1. Customer provides incident information
  2. Customer provides receipts and agrees with amount
  3. Customer receives reimbursement
" } ``` **Contoh JSX** ``` { "TemplateString": "Please provide an introduction to the customers. Ask them how their day is going Things to say: Hello, how are you today? My name is Bob, who am I speaking to?" } ```