Wednesday, January 17, 2018

Custom Confirm Dialog Button Labels

Some time ago, someone on the apex.world Slack channel asked a question about the APEX confirm dialog. The question was if it was possible to change the labels of the confirm dialog buttons from "Cancel/Ok" to "No/Yes".

If we look at the JavaScript APIs documentation we can see that there are three different ways that we can display a confirmation dialog:
  • apex.confirm
  • apex.page.confirm
  • apex.message.confirm
Note
The confirm function from the page namespace is different from the one in the confirm namespace. They both render the same confirmation dialog though.

apex.confirm: Alias for the apex.page.confirm function.

apex.page.confirm: Displays a confirmation dialog showing a message (pMessage) and OK and Cancel buttons. Depending on the user's choice, submits the page setting the request value to pRequest, or does not submit the page.

apex.message.confirm: Displays a confirmation dialog showing a message (pMessage), and OK and Cancel buttons. The callback function passed as the pCallback parameter is called when the dialog is closed, and passes true if OK is pressed and false otherwise.

The following JavaScript code:
apex.message.confirm( "Are you sure?", function( okPressed ) {
    console.log(okPressed ? 'Ok' : 'Cancel');
});

Would display this dialog:


Now, back to the original question. What if we would like to change those button labels.

If we have a look at the JavaScript code of the apex.message.confirm function, we can see that the labels are based on some apex.lang messages (APEX.DIALOG.OK and APEX.DIALOG.CANCEL) and that there is no built-in way to change the labels.

But...

What we can do is change the values (using the JavaScript API of the apex.lang namespace) of the two messages and then call the confirm function. We should also revert the changes to the messages after that so that everything remains as it was initially.

Ok, so let's create a wrapper function on apex.message.confirm (the same also works for apex.page.confirm)  and add two parameters for the button labels.

The function could look like this:
function customConfirm( pMessage, pCallback, pOkLabel, pCancelLabel ){
    var l_original_messages = {"APEX.DIALOG.OK":     apex.lang.getMessage("APEX.DIALOG.OK"),
                               "APEX.DIALOG.CANCEL": apex.lang.getMessage("APEX.DIALOG.CANCEL")};

    //change the button labels messages
    apex.lang.addMessages({"APEX.DIALOG.OK":     pOkLabel});
    apex.lang.addMessages({"APEX.DIALOG.CANCEL": pCancelLabel});

    //show the confirm dialog
    apex.message.confirm(pMessage, pCallback);

    //changes the button labels messages back to their original values
    apex.lang.addMessages({"APEX.DIALOG.OK":     l_original_messages["APEX.DIALOG.OK"]});
    apex.lang.addMessages({"APEX.DIALOG.CANCEL": l_original_messages["APEX.DIALOG.CANCEL"]});
}

Then, calling our function:
customConfirm( "Are you sure?", function( okPressed ) {
    console.log(okPressed ? 'Ok' : 'Cancel');
}, "Yes", "No");

Would result in this:

or anything you want, like this:

You can have a look at it in action in my Demo Application

Enjoy!

15 comments:

  1. Excellent.. I have a requirement. Can you please help me out?. I have created modal dialog. Once clicking on the CANCEL button, system will ask confirmation (Yes or Cancel) using apex.confirm. If user clicks YES, modal dialog should be closed or cancelled.

    ReplyDelete
  2. Hello,

    I would like to note that there's a built in way to change them.
    In shared components -> translate -> text messages
    You can write the name of the item ex APEX.DIALOG.OK and for the language that you want you can specify the label value

    ReplyDelete
  3. Excellent work. Thanks Maxime.
    In your post you mention that "..If we have a look at the JavaScript code of the apex.message.confirm function..."
    Can you please tell me how can I access to it ?

    ReplyDelete
    Replies
    1. Thank you Mario
      The libraries files are located under /i/libraries/...
      For the apex.message APIs, that would be in /i/libraries/apex/message.js

      There are a couple of places/ways to look at the code.
      1. You can download the APEX install files and extract the files
      2. You can enable debug mode (just so that you get the non minified files with comments) on your application then inspect the page in the browser's dev tool then you'll be able to locate the file under sources (at least that's how it is for Chrome)
      3. check the Oracle CDN file (https://static.oracle.com/cdn/apex/19.1.0.00.15/libraries/apex/message.js?v=19.1.0.00.15)

      Regards
      Max

      Delete
  4. Hi,

    How can I customize the button size of "OK" and "Cancel".
    I want the button size as "Small".

    How this can be achieved?

    Thanks,

    ReplyDelete
  5. This comment has been removed by the author.

    ReplyDelete
  6. hi,
    is there any way i can have more than 2 default buttons on Confirm Alert as per Client's requirement? if it is how i can have and capture their values? is there any step by step approach tutorial / guide link for a beginner like me, so please share I will be much grateful.
    regards

    ReplyDelete
  7. Thnaks Max, you saved my day. Juno.

    ReplyDelete
  8. Hi Max. I've found several of these blog posts but I'm still lost. I am trying to create a confirm message for my truncate button and I can't figure out how to do both of them. Do I create a dynamic action on the button for the confirm message and then a process for the truncate procedure? I only used a process for the button to truncate previously and it works, but I haven't successfully done it with the message. Thanks!

    ReplyDelete
  9. What if I want to include the value of one of the items in the page in the message, how should i do it?

    ReplyDelete
    Replies
    1. Hello
      The easiest would be to use the apex.item('your_page_item_name').getValue() API to construct the message.
      Regards
      Max

      Delete