Use apex.message.confirm() JavaScript method to display confirm dialogs in Oracle Apex.

We use to display confirmation dialogs to ask for confirmation from the user to perform a particular action. For example, when the user clicks on the Delete button or checks/unchecks a checkbox, etc. The following is the syntax of apex.message.confirm() method.

Syntax

apex.message.confirm( "Are you sure?", function( okPressed ) { 
if( okPressed ) {
   // do somethig if ok button pressed
} 
});

Display Confirm Dialog Using JavaScript Example

Suppose you want to set an item value if OK button pressed on confirm dialog. You can create a dynamic action on a button or an item to execute the JavaScript code when the button clicked or on the change event of an item. Add the following JavaScript code:

apex.message.confirm( "Are you sure to do this?", function( okPressed ) { 
if( okPressed ) {
   apex.item("P1_YOURITEM").setValue("Y"); 
   // change the item above with your page item
} 
});

Also, set the affected item as the P1_YOURITEM in the dynamic action you created to execute the above JavaScript code. Below is the screenshot for your reference:

Ask for confirmation using JavaScript dialog.

To perform more tasks on OK button pressed, you can create a dynamic action on the item P1_YOURITEM to execute PL/SQL code, show/hide elements, etc on the change event.

To perform an action, if the Cancel button clicked on the confirmation dialog, add an else statement. Below is an example:

apex.message.confirm( "Are you sure to reject this work order?", function( okPressed ) { 
if( okPressed ) {
   apex.item("P1_YOURITEM").setValue("Y");
} else {
   // this code will execute if cancel button pressed
   apex.item("P1_YOURITEM").setValue("N");
}
});

Reference:

Related tutorials:

Leave a Reply

This Post Has 11 Comments

  1. Gus

    hi, is it possible to make some changes to the style of the confirm window ? change size / font ? cheers

    1. Vinish Kapoor

      Try adding following CSS to the Inline CSS section of the page:

      div#ui-id-1 {
         font-size: 18px;
         color: red;
      }
      

      If the above CSS does not work, then try inspect element for the dialog box and specify the correct DOM id.

    2. Gus

      thanks for your reply . I’ve tried that but didn’t work . ( changed the id ) . tried the stuff below and didn’t work either.
      .div#ui-id-2 {
        font-size: 18px;
        color: red;
      }

      .div#ui-id-1 {
        font-size: 18px;
        color: red;
      }
      .ui-widget-content{
        font-size: 18px;
        color: green;
      }
      .ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-dialog–notification ui-dialog-buttons ui-draggable{
        font-size: 18px;
        color: blue;
      }
      .ui-dialog–notification .ui-dialog-content p{
        font-size: 18px;
        color: yellow;
      }
      ui-dialog {
        font-size: 18px;
        color: yellow;
      }

      .ui-dialog–notification .ui-dialog-content p {
        color: yellow;
        margin: 0;
      }

      .ui-dialog{
        color: yellow;
        margin: 0;
      }

      what else can I try ?
      thanks in advance

    3. Vinish Kapoor

      Try this one:

      .ui-dialog.ui-dialog--notification .ui-dialog-content, .ui-dialog.ui-dialog--notificationLarge .ui-dialog-content {
        font-size: 18px;
        color: red;
      }
      
    4. Gus

      thanks, Vinish !
      this is what I have in the element inspector <attached image>

      I’ve tried what you said before and this :

      ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-dialog–notification ui-dialog-buttons ui-draggable{
       font-size: 18px;
       color: red;
      }
      but still no luck….

    5. Vinish Kapoor

      The above CSS worked for me. You can try to include !important:

      ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-dialog–notification ui-dialog-buttons ui-draggable{
       font-size: 18px !important;
       color: red !important;
      }
      
  2. narendra

    Hi Vineesh,
    Can we add apex.page.submit inside the OK Pressed condition. If so I am having trouble in routing to create or save. Could you please help out in this.

  3. narendra

    Added as below.

    apex.message.confirm( “Would you like submit for final review? Yes – Click Ok and Save Button”, function( okPressed ) {
    if( okPressed ) {
      if (apex.item(“P1_ITEM_PK”).isEmpty()) {
      apex.page.submit(
        {  
          request: “CREATE” ,  
          showWait: true, } );
      }
      else {
       apex.page.submit(
        {  
          request: “SAVE” ,  
          showWait: true, } );
      }
    } else {
      // this code will execute if cancel button pressed
      apex.item(“P12_ITEM”).setValue(“N”);
    }
    });

  4. Narendra

    Hi Vineesh,
    Can i add apex.navigation.redirect within apex.page.submit? I am having issues with it.

  5. REL

    Thank you!

  6. Kevin WONG

    Hello,

    Thank you for this article, I would like to know if it was possible to shift the focus to the “Cancel” button ?

    Best .