• Post author:
  • Post category:Apex
  • Reading time:2 mins read
Ask for confirmation using JavaScript dialog.

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

An Oracle Apex Consultant, Oracle ACE, and founder of foxinfotech.in and orclqa.com a question and answer forum for developers.

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 .

Comments are closed.