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 Connect Customer Agent

Menggunakan API, Anda dapat membuat sumber daya tampilan Anda sendiri. Sumber daya View mencakup CloudFormation, CloudTrail, dan dukungan penandaan.

Contoh API Views

Lihat deskripsi

Tampilan ini menempatkan dua kartu 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 
                

lihat-konten.json

{
  "Template": <stringified-template-json>
  "Actions": ["CardSelected", "Skip"]
}
                

Template JSON (tidak disatukan)

{
    "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"]
        }
    ]
}
                

Pemandangan

Masukan

$.NoIconCardHeadingmenunjukkan bahwa input untuk bidang NoIconCardHeading diperlukan untuk merender 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 aliran, seperti yang disebutkan dalam dokumentasi blok Show View.

Skenario 1: Pilih Kartu Cafe Card

"Action": "CardSelected"
"Output": {
    "Heading": "CafeCard",
    "Id": "CafeCard"
}
                

Skenario 2: Pilih Tom bol Lewati

"Action": "Skip"
"Output": {
    "action": "Button"
}                    
                

Contoh keluaran Formulir Lihat

Saat menggunakan AWS-managed tampilan (tampilan formulir), hasil data formulir akan berada di bawah FormData.

{
   FormData: {
       email: "a@amazon.com"
   }
}                                       
                

Anda dapat mengakses data di blok tampilan show 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 show seperti$.Views.ViewResultData.email.