*Interactive Grid Option to Enable /Disable the Gird Option Properties*

function( options ) {
options.features.filter = false;
options.features.flashback = false;
options.initialSelection = false;
options.reportSettingsArea = false;

options.initActions = function( actions ) {

actions.hide( "show-help-dialog" );
}
return options;
}

function( options ) {
options.initActions = function( actions ) {

// Hide all elements associated with the show help dialog action
actions.hide( "show-help-dialog" );

// Add a keyboard shortcut to the show filter dialog action

actions.lookup( "show-filter-dialog" ).shortcut = "Ctrl+Alt+F";
actions.update( "show-filter-dialog" );

// Add new actions, either singularly passing in an actions object as shown here, or
in
// multiple by passing an array of action objects
actions.add( {
name: "my-action",
label: "Hello",
action: function( event, focusElement ) {
alert( "Hello World!" );
}
} );
};
return options;
}

Adding Toolbar of Reports

function( options ) {
var $ = apex.jQuery,
toolbarData = $.apex.interactiveGrid.copyDefaultToolbar(), // Make a copy of the
default toolbar
reportsGroupControls = toolbarData.toolbarFind( "reports" ).controls; // Locate the
reports group -- reports - place to display the actions
 // Add new buttons after the default report controls. Note the toolbar is action driven, so
// we just need to define the correct action name with the button.
reportsGroupControls.push({
type: "BUTTON",
action: "save-report",
iconOnly: true
});
reportsGroupControls.push({
type: "BUTTON",
action: "show-save-report-as-dialog",
iconOnly: true
});
reportsGroupControls.push({
type: "BUTTON",
action: "show-edit-report-dialog",
iconOnly: true
});
reportsGroupControls.push({
type: "BUTTON",
action: "delete-report",
iconOnly: true
});

// Assign new toolbar data back to toolbarData configuration property

options.toolbarData = toolbarData;

// Return the options

return options;
}

Download button

function( options ) {
var $ = apex.jQuery,
toolbarData = $.apex.interactiveGrid.copyDefaultToolbar(), // Make a copy of the default
toolbar
actionsMenuGroup = toolbarData.toolbarFind( "actions1" ); // Locate the actions menu
group

// Array position denotes displayed position in the toolbar, so let's add the new download
button directly
// after the actions menu group in the array, such that it displays directly after the actions
menu in the
// toolbar.
// Note: The toolbar is action-driven, so integrates easily with the Interactive Grid. To show the
dialog, we
 // just define the appropriate action for showing the download dialog (show-download-
dialog).
actionsMenuGroup.controls.push( {
type: "BUTTON",
action: "show-download-dialog",
iconBeforeLabel: true,
iconOnly:true
});

// Assign new toolbar data back to toolbarData configuration property

options.toolbarData = toolbarData;

// Return the options

return options;
}

Customized Validation on PageSubmit (Page Load Level / Execute when Page Loads)

var item = apex.item("P4_TESTITEM" );

value = item.getValue();
if ( value !== "valid" ) { // replace with desired constraint check
item.node.setCustomValidity( "Text field needs to be valid" );
console.log(true);
} else {
item.node.setCustomValidity( "" );
console.log(false);
}

Before Page Submit (Page Load Level / Execute when Page Loads)
apex.jQuery( apex.gPageContext$ ).on( "apexpagesubmit", function() {
var item = apex.item("P4_TESTITEM");
item.setValue( item.getValue().toUpperCase());
} );

End of the page Load

apex.jQuery( apex.gPageContext$ ).on( "apexreadyend", function( e ) {

// code here
console.log('Page has been loaded fully ');
} );

if ( apex.model.anyChanges() ) {
apex.message.alert("Save Changes");
}
 if ( apex.model.anyErrors() ) {
apex.message.alert("Fix Errors");
}

Redirect

apex.navigation.redirect ();

Examples
This example demonstrates a call to redirect to page 3 within the current application, in the
current session, with debugging set to NO and setting RP to reset pagination for an Interactive
Report on page 3. The substitution string, APP_SESSION is substituted on the server with the
current session ID.

apex.navigation.redirect ( "f?p=&APP_ID.:3:&APP_SESSION.::NO:RP::" );
This example demonstrates a very simple call to redirect to page 1 in application ID 102, in the
current session. The substitution string, APP_SESSION is substituted on the server with the
current session ID.

apex.navigation.redirect ( "f?p=102:1:&APP_SESSION.:::::" );
This example demonstrates a call to redirect to page 3 within the current application,
$v( "pFlowId" ) in the current session, $v("pInstance"), which is processed on the client. This
example demonstrates calling this function from within a JavaScript file.

apex.navigation.redirect( "f?p=" + $v( "pFlowId" ) + ":3:" + $v( "pInstance" ) );

This example demonstrates a call to redirect to a URL defined in a page item, P1_URL".

apex.navigation.redirect( apex.item("P1_URL").getValue() );

Navigation.dialog

Example :

apex.navigation.dialog(
url,
{
title:'Orders',
height:'480',
width:'800',
modal:true,
resizable:true
},
'a-Dialog--uiDialog',
 $('#mybutton_static_id') );

Close
apex.navigation.dialog.cancel( true );

Example:
apex.navigation.dialog.close( true, function( pDialog ) {
apex.navigation.dialog(
url,
{
title: "About",
height: "480",
width: "800",
maxWidth: "1200",
modal: true,
dialog: pDialog,
resizable: false
},
"a-Dialog--uiDialog",
$( "#mybutton_static_id" ) );
} );

Close and passing parameters:

apex.navigation.dialog.close( true, ["P3_EMPNO","P3_ENAME"] );

> closing a modal dialog page, and returning an array of page items, P3_EMPNO and
P3_ENAME

> modal dialog page, and returning an object of page item, dialogPageId and its value of 3
apex.navigation.dialog.close( true, { dialogPageId: 3 } );

fireCloseHandler

call to close a dialog page, returning an array of page items from the dialog page. The variable
myTriggeringElement is used to define the triggering element of the dialog, a button named
myButton. The page items P3_EMPNO and P3_ENAME are returned to the launching page

var myTriggeringElement;
myTriggeringElement = apex.jQuery( '#myButton' );

navigation.dialog.fireCloseHandler( myTriggeringElement, ["P3_EMPNO”,”P3_ENAME”] );

Example :
var myTriggeringElement,
myPopupWindow;

myTriggeringElement = apex.jQuery( '#myButton' );

 myPopupWindow = apex.navigation.popup ( {
url: "f?p=102:2:&APP_SESSION.:::2::",
name: "Information",
scroll: "no",
resizable: "no",
toolbar: "yes"
} );

navigation.dialog.registerCloseHandler( {
handler$: myTriggeringElement,
dialog: myPopupWindow,
triggeringElement$: myTriggeringElement,
closeFunction: function() {
myPopupWindow.close();
}
});

Popup Close
call to close a popup window, setting the page item P3_STATUS to the string "Action Processed".

apex.navigation.popup.close ( "P3_STATUS", "Action Processed." );

Cancel Unsaved Warning and move to the next

apex.jQuery( "#custom-cancel-button" ).click( function() {

apex.page.cancelWarnOnUnsavedChanges();
apex.navigation.redirect( someUrl );
} );

Confirm Dialog

apex.page.confirm( "Save Department?", {

request: "SAVE",
set: {
"P1_DEPTNO": 10,
"P1_EMPNO": 5433
}
} );

Page Changed :

if ( apex.page.isChanged() ) {
// do something when the page has changed
}
 Submit:

apex.page.submit( {
request: "DELETE",
set: {
"P1_DEPTNO": 10,
"P1_EMPNO": 5433
},
showWait: true,
} );

submit the page when the ENTER key is pressed on a text input.

apex.jQuery("#P1_TEXT").on( "keydown", function( event ) {

apex.page.submit({
submitIfEnter: event
});
});

Validate :
Check if any page items or submittable Application Express models on the page are invalid.

apex.jQuery( "#checkButton" ).click( function() {

if ( !apex.page.validate() ) {
alert("Please correct errors");
}
} );

Warn unsaved Changes

apex.page.warnOnUnsavedChanges( "The employee record has been changed" );

Refresh Region

Example
The following will refresh the region that contains a button with class refresh-button when it is clicked.

apex.jQuery( ".refresh-button" ).click( function( event ) {

var region = apex.region.findClosest( event.target );
if ( region ) {
region.refresh();
}
});
Ajax Call

Returns:
A promise object. The promise done method is called if the Ajax request completes successfully.
This is called in the same cases as the success callback function in pOptions. The promise fail
method is called if the Ajax request completes with an error including internally detected Oracle
Application Express errors. This is called in the same cases as the error callback function in
pOptions. The promise also has an always method that is called after done and error. The
promise is returned even when queue options are used. The promise is not a jqXHR object but
does have an abort method. The abort method does not work for requests that use any queue
options.
Type
Promise
Examples
This example demonstrates an Ajax call to an on-demand process called MY_PROCESS and sets
the scalar value x01 to test (which can be accessed from PL/SQL using apex_application.g_x01)
and sets the page item's P1_DEPTNO and P1_EMPNO values in session state (using jQuery
selector syntax). The success callback is stubbed out so that developers can add their own code
that fires when the call successfully returns. The data parameter to the success callback contains
the response returned from on-demand process.

apex.server.process( "MY_PROCESS", {
x01: "test",
pageItems: "#P1_DEPTNO,#P1_EMPNO"
}, {
success: function( data ) {
// do something here
},
error: function( jqXHR, textStatus, errorThrown ) {
// handle error
}
} );
This example is similar to the previous one except that the response is handled using the
returned promise and the page items are given as an array.

var result = apex.server.process( "MY_PROCESS", {

x01: "test",
pageItems: ["P1_DEPTNO","P1_EMPNO"]
} );
result.done( function( data ) {
// do something here
} ).fail(function( jqXHR, textStatus, errorThrown ) {
// handle error
} ).always( function() {
// code that needs to run for both success and failure cases
} );
(static) url(pDataopt, pPageopt) → {string}
 This function returns a URL to issue a GET request to the current page or page specified in
pPage.

Parameters:
Name Type Attributes Description
pData Object <optional>
Optional object that is used to set additional values which are included into the URL. The special
property, pageItems, which can be of type jQuery selector, jQuery or DOM object or array of
item names, identifies the page items which are included in the URL. You can also set additional
parameters that the apex.show procedure provides (for example you can set the scalar
parameters x01 - x10 and the arrays f01 - f20).
pPage string <optional>
The ID of the page to issue a GET request for. The default is the current page.
Returns:
The URL to issue a GET request.
Type
string
Example
This example gets a URL to issue a GET request to the DELETE function which has been defined
for this page, where the URL sets the scalar value x01 to test (which can be accessed from
PL/SQL using apex_application.g_x01) and will also set the page item's P1_DEPTNO and
P1_EMPNO values in session state (using jQuery selector syntax).

apex.server.url( {
p_request: "DELETE",
x01: "test",
pageItems: "#P1_DEPTNO,#P1_EMPNO"
} );

Wait Pop-up
var popup = apex.widget.waitPopup();
var promise = apex.server.process(...);
promise.always(function() {
popup.remove();
});