How to render a list returned from a webhook

Question

I am using Google Actions. I am returning JSON from my webhook and receiving the following error when I test my action in the simulator:

"Failed to render List or Collection prompt because of missing Type Override for a slot. Note, List and Collection should only be used in slot filling. There should be a corresponding Type Override that describes how to render the List or Collection for this Type."

The JSON is a slightly modified sample taken from docs at https://developers.google.com/assistant/conversational/prompts-selection.

The typeOverrides name 'items' matches a slot name for the scene.

Here is the webhook request and the response JSON.

*** REQUEST ***

 {
  "handler": {
    "name": "aa"
  },
  "intent": {
    "name": "searchIntent",
    "params": {
      "searchParm": {
        "original": "milk",
        "resolved": "milk"
      }
    },
    "query": "milk"
  },
  "scene": {
    "name": "Start",
    "slotFillingStatus": "UNSPECIFIED",
    "slots": {},
    "next": {
      "name": "SearchScene"
    }
  },
  "session": {
    "id": "ABwppHGln0UTzfUPqJ1SMr1Cuw2TyPjJQoGUkULazcObus3vUwJCJCpba--5PSRwjqMQelRqMAUnwPvl",
    "params": {},
    "typeOverrides": [],
    "languageCode": ""
  },
  "user": {
    "locale": "en-AU",
    "params": {},
    "accountLinkingStatus": "ACCOUNT_LINKING_STATUS_UNSPECIFIED",
    "verificationStatus": "VERIFIED",
    "packageEntitlements": [],
    "lastSeenTime": "2020-11-05T21:24:16Z"
  },
  "home": {
    "params": {}
  },
  "device": {
    "capabilities": [
      "SPEECH",
      "RICH_RESPONSE",
      "LONG_FORM_AUDIO"
    ]
  }
}

*** RESPONSE ***

{
  "session": {
    "id": "ABwppHGln0UTzfUPqJ1SMr1Cuw2TyPjJQoGUkULazcObus3vUwJCJCpba--5PSRwjqMQelRqMAUnwPvl",
    "params": {},
    "typeOverrides": [
      {
        "name": "items",
        "synonym": {
          "entries": [
            {
              "name": "ITEM_1",
              "synonyms": [
                "Item 1",
                "First item"
              ],
              "display": {
                "title": "Item #1",
                "description": "Description of Item #1",
                "image": {
                  "alt": "Google Assistant logo",
                  "height": 0,
                  "url": "https://developers.google.com/assistant/assistant_96.png",
                  "width": 0
                }
              }
            },
            {
              "name": "ITEM_2",
              "synonyms": [
                "Item 2",
                "Second item"
              ],
              "display": {
                "title": "Item #2",
                "description": "Description of Item #2",
                "image": {
                  "alt": "Google Assistant logo",
                  "height": 0,
                  "url": "https://developers.google.com/assistant/assistant_96.png",
                  "width": 0
                }
              }
            },
            {
              "name": "ITEM_3",
              "synonyms": [
                "Item 3",
                "Third item"
              ],
              "display": {
                "title": "Item #3",
                "description": "Description of Item #3",
                "image": {
                  "alt": "Google Assistant logo",
                  "height": 0,
                  "url": "https://developers.google.com/assistant/assistant_96.png",
                  "width": 0
                }
              }
            },
            {
              "name": "ITEM_4",
              "synonyms": [
                "Item 4",
                "Fourth item"
              ],
              "display": {
                "title": "Item #4",
                "description": "Description of Item #4",
                "image": {
                  "alt": "Google Assistant logo",
                  "height": 0,
                  "url": "https://developers.google.com/assistant/assistant_96.png",
                  "width": 0
                }
              }
            }
          ]
        },
        "typeOverrideMode": "TYPE_REPLACE"
      }
    ]
  },
  "prompt": {
    "override": false,
    "content": {
      "list": {
        "items": [
          {
            "key": "ITEM_1"
          },
          {
            "key": "ITEM_2"
          },
          {
            "key": "ITEM_3"
          },
          {
            "key": "ITEM_4"
          }
        ],
        "subtitle": "List subtitle",
        "title": "List title"
      }
    },
    "firstSimple": {
      "speech": "This is a list.",
      "text": "This is a list."
    }
  }
}

Answer 1

I share with all of you the solution for this.

It is true that the documentation omits certain parts to make this work, but if we pay attention to reading and following it to the letter it really works.

Once we have our Actions Builder project, the first thing we do is create an entity in the types section. Just that, we don't need to add inputs or values, just create the type.

The next step is to prepare the scene where we will show our collection. In this case I created one called INTRO.

This is where you have the error. You are trying to display the collection in the webhook that fires when you enter the scene. Nothing has to be placed there, it must be empty.

The next step is to add the slot type and a name. We must also configure 2 more things, one is to make said slot mandatory and the other is to activate the checkbox so that it calls our handler who is in charge of painting the collection.

If you notice, I named the slot: type_option and it is of type prompt_type, that is, the type I declared in the first step. Then I marked that slot as required and finally I activated it to call the handler named LaunchRequest that is in my webhook.

Now let's see the code.

const LaunchRequestHandler = app => {

  app.handle('LaunchRequest', conv => {
    conv.session.typeOverrides = [
      {
        name: 'prompt_option', // We reference the type of slot, not the name
        mode: 'TYPE_REPLACE',
        synonym: {
          entries: [
            {
              name: 'ITEM_1',
              synonyms: ['Item 1', 'First item'],
              display: {
                title: 'Element 1',
                description: 'This is the element 1',
                image: new Image({
                  url: '<YOUR URL>',
                  alt: 'example'
                })
              }
            },
            {
              name: 'ITEM_2',
              synonyms: ['Item 2', 'Second item'],
              display: {
                title: 'Element 2',
                description: 'This is the element 2',
                image: new Image({
                  url: '<YOUR URL>',
                  alt: 'example 2'
                })
              }
            }
          ]
        }
      }
    ];

    const items = [{ key: 'ITEM_1' }, { key: 'ITEM_2' }]

    conv.add(new Collection({ title: '<YOUR TITLE>', subtitle: '<YOUR SUBTITLE>', items }))
  })
}

This is the piece of code that we configure to be called when we want to present the collection. If we look closely, we refer to the type not to the name of the slot.

With this, everything should work, if we do the test from the simulator. Everything is perfect.

I hope my help has served you well.

Answer 2

The TypeOverride name should match the Type of the slot, not the name of the slot.