Unable to open Slack modal from Google App Scripts

Question

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.

`However, nothing is happening when I interact with the button`. You mean nothing is happening on the slack side? What about the request from GAS UrlFetch, have you checked the response code, error messages, etc.? Also, I'm seeing two different requests, which one is failing? — Iamblichus, Nov 03 '20 at 11:28
My first URLFetch sends my intractable payload, which is successful. The part that is failing is when I click on the button on the first payload in Slack which is the part inside the doPost(e). I expect a modal to show after the user clicks the button, but slack shows progress circle on the side of the button for a few seconds and then nothing happens on Slack. I am unable to display the modal. I suspect I am placing either the token or the trigger id incorrectly but I can't figure out the correct method. — CTR Tracker, Nov 03 '20 at 11:52
1) Did you publish the apps script project as a web app accessible by anyone? 2) Is the Slack app's request URL pointing to your published web app? 3) Try using something like https://requestbin.com/ to inspect the payload that Slack is actually sending (you'll see it's actually easier to use `e.parameter.trigger_id`). — Diego, Nov 03 '20 at 13:49
Have you checked whether the `doPost` function is getting called when the button is clicked? (see `My Executions` at Apps Script dashboard). In that case, can you do some basic logging in order to check where the script is failing, including examining the response from the UrlFetch request? (For example, `var res = UrlFetchApp.fetch(slackUrl, options_upd); console.log(res.getContentText()); console.log(res.getResponseCode());`) — Iamblichus, Nov 03 '20 at 14:01
Thanks, I will try to check where it fails again. The app is indeed: - accessible by anyone (even anonymous) - request URL is pointing to my app, because I get results when doPost(e) is called - I added a part to input rows of data to the sheet when doPost(e) is called, and it is working. It correctly writes my token and trigger_id to rows every time button is clicked. - I also double checked my OAuth token, and re-installed the slack app forged measure. When I use e.parameter.trigger_id I thought I was not getting anything because google sheets was not writing the input the cells. — CTR Tracker, Nov 03 '20 at 15:00
Thanks for your suggestions, I changed my payload as Diego suggested but it didn't fix the problem. I also checked what I am sending to Slack after to request the Modal to open. I unfortunately can not see the problem myself. If someone can help point out if there is an issue with it, would really help me out. https://gyazo.com/92b6a5ca2aeb0d7ef0e6fd0d1359da79 — CTR Tracker, Nov 03 '20 at 18:44

Diego · Accepted Answer · 2020-11-03T19:23:35.470

1

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),
};

edited Nov 03 '20 at 19:23

answered Nov 03 '20 at 15:23

Diego

9,261
2
19
33

Thanks for the suggestion. I changed the payload with the one you provided but it is unfortunately still not working. I checked what I am sending to slack after the interaction, I don't see a issue with it myself: https://gyazo.com/92b6a5ca2aeb0d7ef0e6fd0d1359da79 – CTR Tracker Nov 03 '20 at 18:42
@CTRTracker Have you inspected Slack's response to your POST request? – Diego Nov 03 '20 at 19:21
@CTRTracker Make sure you included "Bearer" in your authorization header. See updated answer ^ – Diego Nov 03 '20 at 19:24
Thanks a lot Diego! Everything works after I followed your suggestions for including the type in the view, and including "Bearer" inside the Authorization header. – CTR Tracker Nov 04 '20 at 09:16

Unable to open Slack modal from Google App Scripts

1 Answers1