slackapi / bolt-js

A framework to build Slack apps using JavaScript
https://tools.slack.dev/bolt-js/
MIT License
2.74k stars 393 forks source link

Can't get custom error message to work. #1746

Closed ChristopheFlimo closed 1 year ago

ChristopheFlimo commented 1 year ago

(Describe your issue and goal here) Using it on a modal option_1 is a textbox

But I get no error message displayed in my modal. clicking the button trigger the code. here my dummy code. What did I miss?


app.action('add_options', async ({ ack, body, context }) => {
    const option1Value = body.view.state.values['option_block_1']['option_1'].value;
    if (1==1) {app.action('add_options', async ({ ack, body, context }) => {
    const option1Value = body.view.state.values['option_block_1']['option_1'].value;
    if (1==1) {
      const errors = {
        option_block_1: {
          option_1: 'Please fill in the option field'
        }
      };
      await ack({
        response_action: 'errors',
        errors: errors
      });
      return;
    }
  });
hello-ashleyintech commented 1 year ago

Hi, @ChristopheFlimo! Thank you for your question! 🙌

I am a bit confused by this part of the code:

app.action('add_options', async ({ ack, body, context }) => {
    const option1Value = body.view.state.values['option_block_1']['option_1'].value;
    if (1==1) {app.action('add_options', async ({ ack, body, context }) => {
    const option1Value = body.view.state.values['option_block_1']['option_1'].value;

Was this done on purpose? If so, I recommend moving the nested app.action - there is a chance the ack() may not be working properly due to this nested behavior. Additionally, there might be an issue with the structure of your errors object - see below.

Typically, to populate the errors in a Bolt JS app, the ack() would look something like this:

  if (Object.entries(errors).length > 0) {
    ack({
      response_action: 'errors',
      errors: errors
    });
  } else {
    ack(); // close this modal - or also possible to set `response_action: 'clear'`
  }

Within that, errors should be structured where each entry in the object has a key that is the block_id of the erroneous input block, which then maps to a value - the plain text error message to be displayed to the user (referenced from here). It looks like you are utilizing a nested object for your error value, which might be causing issues with surfacing errors. Similarly, I also recommend double checking to make sure you are using the block_id as the key(s) in your errors object.

I hope this helps!

hello-ashleyintech commented 1 year ago

Hi, @ChristopheFlimo!

I just received some additional clarification from my team that passing in the response_action error behavior does not work with app.action() (block_action request handlers), but rather only app.view() (view submission handlers). So it looks like you'll need to also move this logic over to the app.view() that handles this specific modal.

Let me know if you have any questions!

ChristopheFlimo commented 1 year ago

The first few lines were just test I should have removed in my example. I have now fixed the issue. it was refering the block_id.control_id instead of just block_id

ChristopheFlimo commented 1 year ago

Thanks @hello-ashleyintech for the help so far. I am reopening it because while I was able to trigger the validation using modal form submit button. I wasn't able to get it to work on any other buttons in my modal. As @hello-ashleyintech mentioned, it doesn't seem to work with app.action events. My question now is, how can I trigger the app.view event when clicking a button inside my modal. Not just the modal submit button.

seratch commented 1 year ago

Hi @ChristopheFlimo,

My question now is, how can I trigger the app.view event when clicking a button inside my modal. Not just the modal submit button.

Unfortunately, this is not feasible. Also, there is no workaround so far except appending a section block to display what's wrong. See https://github.com/slackapi/bolt-js/issues/1414#issuecomment-1088298864 for more details.

github-actions[bot] commented 1 year ago

👋 It looks like this issue has been open for 30 days with no activity. We'll mark this as stale for now, and wait 10 days for an update or for further comment before closing this issue out. If you think this issue needs to be prioritized, please comment to get the thread going again! Maintainers also review issues marked as stale on a regular basis and comment or adjust status if the issue needs to be reprioritized.

github-actions[bot] commented 1 year ago

As this issue has been inactive for more than one month, we will be closing it. Thank you to all the participants! If you would like to raise a related issue, please create a new issue which includes your specific details and references this issue number.