Action Button Confirmation

Ideas & Product Feedback
1

Adding an option to confirm the action button process would be really helpful.
Right now, it can cause problems if a user presses it accidentally.

Example: Press Action button, prompt “This will … do you want to continue?” Yes/No

In the meantime, I’m creating pages with HTML text and a black form to proceed, but it takes a lot of extra time and is not a very clean way to do it.

Thanks!
Marc

2

Hi @mdykstra,

This can be done with some JavaScript and here’s how it’ll look.

2021-05-06_15-28-53

I’ll break this down into 3 easy steps.

Step 1
Add the CSS Class action-link-confirm to the action link column(s) as shown in the image below.

image
image1287×956 58.9 KB

Step 2
Find the Component ID for the table component that contains the action link as shown in the image below.
You will need it for the next and final step!

Tip: Double click on the info icon 🛈 to quickly copy the component ID

image
image1287×663 65.9 KB

Step 3
Finally, copy and paste the following code into the JavaScript section of your page.

var confirmationText = 'This will set the Contact Date to the current date. Do you want to continue?';

var setOnClickEventsForActionLinks = function(element){
    element.find('.action-link-confirm a').click(function(){
        var r = confirm(confirmationText);
        if (r === true) {
            return true;
        } else {
            return false;
        }
    });
};

TB.render('component_X',function(data){
    var element = data.ele;
    setOnClickEventsForActionLinks(element);
    $('body').click(function(){
    setTimeout(function(){
        element.find('.action-link-confirm a').off();
        setOnClickEventsForActionLinks(element);    
    },800);
    });
});

Please remember to change component_X in the code, to the component ID from step 2.

4 Likes
4

Hey @SafetyUniversity,

Now that we have the option to add classes to Table Columns and we have the Tadabase JavaScript API, I was able to update the post and code above to 3 easy steps. Please review it again and let me know if it works out for you now.

5

Just wanted to add, if you want to see the alert a bit nicer you can use Sweet Alert.

image
image1920×969 79.3 KB

  1. Add this to the app footer code:
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

  2. Change line 5. Instead of:
    var r = confirm(confirmationText);
    Change it to: :
    var r = swal(confirmationText, {buttons: ["No way!", "Yes, proceed"],});

4 Likes
6

Love the cleaner look @moe! Worked 100% for me.

Thanks Tada Team! #tada4life

Adam

7

This is awesome. Is it possible to use for more than 1 action on a table?

8

Can this also be used on a delete button? I thought I had it working, but it’s not.
It opens the dialog box, but if you click yes, it does not delete the record.

Thanks!

9

Hi @moe (and @Chem)

I updated an action link with the script you provided. It looks so much cleaner and polished. However, I discovered that when “Yes” is selected, the action link is not triggered.

I did some troubleshooting and the {buttons: [“No way!”, “Yes, proceed”],} seems to be part of the issue. When I remove the code you suggested, the action is triggered.

Any thoughts on what I may be doing wrong?

~Adam

10

I had the same issue @SafetyUniversity

1 Like
11

Discussion regarding this JavaScript solution can be found here :point_down: