Oracle Apex: Display Confirm Dialogs Using JavaScript

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:

Vinish Kapoor
Vinish Kapoor

Vinish Kapoor is a seasoned software development professional and a fervent enthusiast of artificial intelligence (AI). His impressive career spans over 20 years, marked by a relentless pursuit of innovation and excellence in the field of information technology. As an Oracle ACE, Vinish has distinguished himself as a leading expert in Oracle technologies, a title awarded to individuals who have demonstrated their deep commitment, leadership, and expertise in the Oracle community.

Related Posts

11 Comments

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

    • 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.

    • 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

    • Try this one:

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

    • 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....

    • 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. 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. 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");
    }
    });

  6. Hello,

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

    Best .

Comments are closed.