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

Tampilan kustom 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 Views 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": <stringified-template-json>
  "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": "FormContainer",
            "Type": "Container",
            "Props": {},
            "Content": [
                {
                    "_id": "cafe_card",
                    "Type": "Card",
                    "Props": {
                        
                        "Id": "CafeCard",
                        "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": "No Icon Card",
                        "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

$.NoIconCardHeadingmenunjukkan bahwa input untuk bidang NoIconCardHeading diperlukan untuk membuat tampilan.

Katakanlah NoIconCardHeading diatur keNo Icon Card.

Penampilan

Lihat contoh keluaran

Tampilan menghasilkan dua bagian utama data: yang Action diambil, dan Output data.

Saat menggunakan tampilan dengan blok Tampilkan tampilan, 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.