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:
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");
}
});
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; }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.
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");
}
});
Hi Vineesh,
Can i add apex.navigation.redirect within apex.page.submit? I am having issues with it.
Thank you!
Hello,
Thank you for this article, I would like to know if it was possible to shift the focus to the "Cancel" button ?
Best .