Form field

The fields message type displays form fields that you can edit or use to display with a label and value. This message type also supports Markdown and @mentions.

  • To add a default value for a form field, set a value for the "value" key. Or pass in a space to make it blank. For example: "value": " ".
  • To allow editing, add the "editable": true key value. To enable read only, set it to false.
  • If two sequential key/value pairs have the short style set to true, then clients can display both pairs side-by-side in two columns.
    • macOS and Windows clients always displays the pairs side-by-side, even if they need line breaks.
    • Android and iOS clients always display short fields in two columns if the keys and values do not require line breaks. If the keys or values require line breaks, a mobile client may display the fields as stacked.

Example

Example

JSON example

{
    "head": {
        "text": "I am a header",
        "sub_head": {
            "text": "I am a sub header"
        }
    },
    "body": [
        {
            "type": "fields",
            "items": [
                {
                    "key": "Name",
                    "value": " ",
                    "editable": true
                },
                {
                    "key": "Title",
                    "value": " ",
                    "editable": true
                },
                {
                    "key": "Company",
                    "value": "Zoom",
                    "editable": false
                }
            ]
        }
    ]
}

User actions

When a user fills out a form field, a POST request with data about the form field is sent to the Bot Endpoint URL you specified in your apps dashboard. Here is an example request body.

{
    "event": "interactive_message_fields_editable",
    "payload": {
        "accountId": "gVcjZnWWRLWvv_GtyGuaxg",
        "channelName": "Tommy Gaessler",
        "fieldEditItem": {
            "currentValue": "",
            "key": "Title",
            "newValue": "Developer Advocate"
        },
        "messageId": "20190618205323327_EZjIqCQ_aw1",
        "original": {
            "head": {
                "sub_head": {
                    "text": "I am a sub header"
                },
                "text": "I am a header"
            },
            "body": [
                {
                    "type": "fields",
                    "items": [
                        {
                            "editable": true,
                            "value": " ",
                            "key": "Name"
                        },
                        {
                            "editable": true,
                            "value": " ",
                            "key": "Title"
                        },
                        {
                            "editable": false,
                            "value": "Zoom",
                            "key": "Company"
                        }
                    ]
                }
            ]
        },
        "robotJid": "v1m0yn1imztuogsxjje8fdew@xmpp.zoom.us",
        "timestamp": 1560891222018,
        "toJid": "kdykjnimt4kpd8kkdqt9fq@xmpp.zoom.us/robot_v1m0yn1imztuogsxjje8fdew@xmpp.zoom.us",
        "userId": "KdYKjnimT4KPd8KKdQt9FQ",
        "userJid": "kdykjnimt4kpd8kkdqt9fq@xmpp.zoom.us",
        "userName": "Tommy Gaessler"
    }
}