google-apps-scriptmodal-dialogslack-apislack-dialogslack-block-kit

Unable to open Slack modal from Google App Scripts


I am trying to open a slack modal on a button click from GAS. Currently I am sending an interactive button with this function:

function Send(){
  
  var url = "my slack url here"
  var payload = 
    {
      "text": "Here's your interactive buttons message.",
    "blocks": [
        {
            "type": "actions",
            "elements": [
                {
                    "type": "button",
                    "text": {
                        "type": "plain_text",
                        "text": "Click Me",
                        "emoji": true
                    },
                    "value": "id_btn",
                    "action_id": "id_btn"
                }
            ]
        }
    ]
    }

var options = {
    "method": "post",
    "contentType": "application/json",
    "payload": JSON.stringify(payload)
  };

UrlFetchApp.fetch(url,options); 
  }

However, nothing is happening when I interact with the button. My current Get/Post method is as follows:

function doGet(e){
return ContentService.createTextOutput(""); 
}

function doPost(e) {

  if (typeof e !== 'undefined') { 

    // Extract the relevant data
    var parameter = e.parameter;
    var date = new Date();
    var payload = JSON.parse(parameter.payload)

    var trigger_id = payload.trigger_id;
    var slackUrl = "https://slack.com/api/views.open";
    var myToken = "Token I got after installing app to slack"

var payload_upd ={
    "trigger_id": trigger_id,
    "type": "modal",
    "view":{
    "title": {
        "type": "plain_text",
        "text": "Gratitude Box",
        "emoji": true
    },
    "submit": {
        "type": "plain_text",
        "text": "Submit",
        "emoji": true
    },
    "close": {
        "type": "plain_text",
        "text": "Cancel",
        "emoji": true
    },
    "blocks": [
        {
            "type": "input",
            "block_id": "my_block",
            "element": {
                "type": "plain_text_input",
                "action_id": "my_action"
            },
            "label": {
                "type": "plain_text",
                "text": "Say something nice!",
                "emoji": true
            }
        }
    ]
    }
}

// Send options   
    var options_upd = {
    "headers": {"Authorization": myToken},
    "method": "post",
    "contentType": "application/json",
    "payload": JSON.stringify(payload_upd),
  }; 
  
    UrlFetchApp.fetch(slackUrl, options_upd);
  }  
  
}

I tried various ways I can combine the trigger_id and token in my payload and options but I am unable to find a way that works. Any help would be appreciated, thank you.


Solution

  • Looks like your payload is invalid as "type": "modal" should be part of the view. Try this payload:

    var payload_upd = {
      "trigger_id": trigger_id,
      "view": {
        "type": "modal",
        "title": {
          "type": "plain_text",
          "text": "Gratitude Box",
          "emoji": true
        },
        "submit": {
          "type": "plain_text",
          "text": "Submit",
          "emoji": true
        },
        "close": {
          "type": "plain_text",
          "text": "Cancel",
          "emoji": true
        },
        "blocks": [
          {
            "type": "input",
            "block_id": "my_block",
            "element": {
              "type": "plain_text_input",
              "action_id": "my_action"
            },
            "label": {
              "type": "plain_text",
              "text": "Say something nice!",
              "emoji": true
            }
          }
        ]
      }
    };
    

    Also, make sure you specify "Bearer" in your Authorization header.

    var options_upd = {
      "headers": {"Authorization": "Bearer " + myToken},
      "method": "post",
      "contentType": "application/json",
      "payload": JSON.stringify(payload_upd),
    };