Confirmation Modal Utility: Ability to use in JS Query like notifications

Feature Requests
, , , ,
1

It would be a really neat feature if we could trigger a confirmation modal within a JS Query like how we can with notifications.

For example, if we could do something like this:

utils.showConfirmation({
    title: 'Please Confirm';
    description: 'Are you sure you want to <take specific action>?';
    actions: {
        acceptOptions: {
            text: 'Confirm'
            background: {{ `${theme.warning}` }},
            color: '#FFFFFF'
        },
        cancelOptions: {
            text: 'Cancel'
            background: {{ `${theme.canvas}` }},
            color: '#FFFFFF'
        }
    } 
})
3 Likes
2

AJ! I should send this over teams too so check there but here is an idea you could try.

utils.confirm({
title: 'Please Confirm',
description: 'Are you sure you want to take the specific action?',
acceptLabel: 'Confirm',
cancelLabel: 'Cancel',
onConfirm: () => {
// Code to execute if the user confirms
console.log('Confirmed!');
// Place your action code here
},
onCancel: () => {
// Code to execute if the user cancels
console.log('Cancelled');
}
});

You may be able to trigger a modal or confirmation prompt using utils.showNotification or utils.confirm, but utils.showConfirmation is not a built-in function. To achieve the desired behavior, you can use utils.confirm for a simple confirmation dialog. If you try this out Iā€™m interested in hopping on a call and seeing your use case.

3

Ay carumba...is utils.confirm seriously a utility included in Retool and this whole time I just missed it!? :flushed: Haha I was aware that utils.showConfirmation is not an available utility which is why I had it in Feature Requests, I just wanted to be able to have access to something like the sweetAlert2 library so we could designate confirmations as well as other notification types with a simple JS method natively usable from the utility level.

But it sounds like it may already exist? I'm blown away I never noticed it :laughing: I've built a confirmation modal previously, but wanted to be able to do it without self-built custom logic. I'm gonna look into utils.confirm though! :fist: Thanks man!

4

Hey all! This is a neat idea and something I'm happy to pass on to the team. :+1:

I don't think utils.confirm is a thing in the current build, but it is possible to dynamically require user confirmation before running a query:

image
image1432Ɨ480 39.3 KB

As such, I imagine it should be relatively straightforward to turn this into a utils method!

2 Likes
5

That would be awesome! There are occasions where I'd want to pop a confirmation like a notification during a process within a JS Query where advanced settings in a query wouldn't be conventional. Let me know if this gets added and thanks for the reply @Darren!!!

1 Like
6

Hi @Darren - when the user clicks "cancel" on the confirmation, is there any way to return that back as the result of the query? I think it currently just doesn't execute. Would be much better if the "cancel" would send something back that you can use in a branch. For example, if changing a switch value would trigger a query that maybe a user doesn't want to trigger, it would be great if clicking "cancel" on the notification would send something back that would let me re-set the switch.

7

That's an interesting idea. Currently, if you trigger a query that requires confirmation to run it will return undefined if cancelled by the user.

This is a really bare-bones example but I set up query3 to require user confirmation and, as such, we can perform some logic using its return value:

image
image978Ɨ522 22 KB

I don't think this is exactly what you're describing but it does open some interesting use cases, potentially.

1 Like
8

Interesting. I was thinking more about having control within the query that I am getting confirmation for, but creating a wrapper like this does open up possibilities. I imagine in general it would be something like:

let askUser = await coolButDestructiveQuery.trigger();

if (x) {
  return coolButDestructiveQuery.data
} else {
  // Leave everything the way you found it, maybe notify the user
  return utils.showNotification({
    title: "Whew!",
    description: "That was a close one!",
    notificationType: "Info",
  });
}

But what if I want this to be on the submit of a form? I guess instead of using the "reset form on successful submit" button, since the wrapper will "submit" successfully either way, I would need to script it into my actions on user clicking yes (form would be left as is if the user clicks no since I unchecked the box).

Thanks for the idea!

1 Like
9

Absolutely! I actually have created something similar -- in which there's an app I created for our company where at the details page of an employee, you have an option to "terminate" them on a selected date by clicking a button that opens a date picker in a modal. If you terminate them, it runs a JS query that simply opens another modal.

In that modal, there is a form where you can select whether or not to terminate them by clicking 'Confirm' or 'Cancel'.

If the end user clicks 'Confirm', it fires the update query which contains the changeset data to terminate them from the previous form with the date picker -- in which at that time I clear that form 'on success' of the update query.

But it would be much simpler to just have an option in a JS query to use something like utils.showConfirmation({}) like how you would use utils.showNotification({}). :star_struck:

2 Likes
10

Hi @TRF i tried this utils.confirm({
title: 'Please Confirm',
description: 'Are you sure you want to take the specific action?',
acceptLabel: 'Confirm',
cancelLabel: 'Cancel',
onConfirm: () => {
// Code to execute if the user confirms
console.log('Confirmed!');
// Place your action code here
},
onCancel: () => {
// Code to execute if the user cancels
console.log('Cancelled');
} it doesn't work

11

Hey @Tosin_Akinde! I think that particular code sample is more of a hypothetical, as utils.confirm is not a valid function. The team is aware of the interest in such a feature, but it hasn't yet been prioritized. I'll update this thread as soon as there is news to share. :+1:

12

Hi @Darren Thank you so much I appreciate your response

1 Like