How to display a Table Card from Dialogflow Webhook in Google Assistant

Question

I've setup a ASP.NET MVC 4 Web API to handle dialogflow fulfillment. My goal is to integrate with Google Assistant and display a Table Card as a response. I'm testing through the Google Actions Console Simulator.

I've added the Table Card details in the GoogleCloudDialogflowV2IntentMessage Payload field, based on what I've found out here:

How to add Table Card in Dialogflow Fulfillment?

The Fulfillment Response from my API Webhook ends up looking something like this:

{
  "followupEventInput": {
    "languageCode": null,
    "name": null,
    "parameters": null,
    "ETag": null
  },
  "fulfillmentMessages": [
    {
      "basicCard": null,
      "card": null,
      "carouselSelect": null,
      "image": null,
      "linkOutSuggestion": null,
      "listSelect": null,
      "payload": {
        "google": {
          "expectUserResponse": false,
          "richResponse": {
            "items": [
              {
                "simpleResponse": {
                  "textToSpeech": "Simple Response TEST",
                  "ssml": "Simple Response TEST SSML",
                  "displayText": "Simple Response TEST DISPLAY"
                }
              },
              {
                "tableCard": {
                  "title": "Title",
                  "subtitle": "Subtitle",
                  "image": {
                    "url": "https://www.google.org/static/logo_googledotorg.svg",
                    "accessibilityText": "Image Accessibility Text TEST"
                  },
                  "columnProperties": [
                    {
                      "header": "BanksID",
                      "horizontalAlignment": "LEADING"
                    },
                    {
                      "header": "Name",
                      "horizontalAlignment": "LEADING"
                    }
                  ],
                  "rows": [
                    {
                      "cells": [
                        {
                          "text": "3"
                        },
                        {
                          "text": "Bank 1 TEST"
                        }
                      ],
                      "dividerAfter": false
                    }
                  ],
                  "buttons": [
                    {
                      "title": "Weblink Title",
                      "openUrlAction": {
                        "url": "https://www.google.org",
                        "urlTypeHint": "URL_TYPE_HINT_UNSPECIFIED"
                      }
                    }
                  ]
                }
              }
            ]
          }
        }
      },
      "platform": null,
      "quickReplies": null,
      "simpleResponses": {
        "simpleResponses": [
          {
            "displayText": "Simple Response DISPLAY TEST",
            "ssml": "Simple Response TEST SSML",
            "textToSpeech": "Simple Response TEST",
            "ETag": null
          }
        ],
        "ETag": null
      },
      "suggestions": null,
      "text": null,
      "ETag": null
    }
  ],
  "fulfillmentText": "TEST successful.",
  "outputContexts": [
    {
      "lifespanCount": 5,
      "name": "banks",
      "parameters": {
        "TForView": "rra",
        "DBVerb": "rra",
        "TForView.original": "",
        "DBVerb.original": ""
      },
      "ETag": null
    }
  ],
  "payload": null,
  "source": null,
  "ETag": null
}

Problem is I'm not seeing the Table Card in the simulator. The format of my JSON response is probably not correct, so Google Assistant can't interpret it correctly, but I don't know how to change it. I don't know what the correct format is. Or perhaps I'm missing something else.

How can I display a Table Card in Google Assistant from a Webhook Response?

Any help / other ideas appreciated.

score 0 · Accepted Answer · answered Sep 02 '19 at 16:22

By looking at the Dialogflow Console > DIAGNOSTIC INFO > FULFILLMENT STATUS.

I found out that in the GoogleCloudDialogflowV2IntentMessage I'm setting both the SimpleResponses field and the Payload field; and Google Assistant didn't quite like that. So I've set the SimpleResponses field to null and then got the desired display response on the Google Actions Simulator.

The SimpleResponses is already added into the Payload field and Google Assistant didn't have trouble with that, just the fact that both Payload and SimpleResponses were set.

How to display a Table Card from Dialogflow Webhook in Google Assistant

1 Answers1

Linked