Oracle Apex Dynamic Action Javascript Conditional Assignment

10.11 Incorporating JavaScript into an Application

Adding JavaScript to a web application is a great way to add features that mimic those found in client/server applications without sacrificing all the benefits of web deployment. Oracle Application Express includes multiple built-in interfaces especially designed for adding JavaScript.

Remember that JavaScript is not appropriate for data intensive validations. For example, to verify that a name is contained within a large database table, you must pull down every record to the client, creating a huge HTML document. In general, complex operations are much better suited for server-side Application Express validations instead of JavaScript.

Topics:

10.11.1 Referencing Items Using JavaScript

When you reference an item, the best approach is to reference by ID. If you view the HTML source of an Oracle Application Express page in a web browser, you would notice that all items have an id attribute. This id corresponds to the name of the item, not the item label. For example, if you create an item with the name and a label of , the ID is .

You can get and set item attributes and values using the JavaScript functions and . Consider the following example:

function showFirstName(){ alert('First Name is ' +$v('P1_FIRST_NAME')) }; function setFirstName(pFirstName){ $s('P1_FIRST_NAME', pFirstName); };

These functions can be called by other JavaScript functions or with the Execute JavaScript code dynamic action.

10.11.2 Incorporating JavaScript Utilizing the JavaScript Attribute

You can include JavaScript into your application by adding it to the JavaScript attribute of the page. This is a good approach for functions that are very specific to a page and a convenient way to test a function before you include it in the file.

In the following example, adding the code would make the function accessible from anywhere on the current page.

To add JavaScript code to the JavaScript attribute:

  1. Navigate to the Page Definition. See "Accessing the Page Definition".

  2. To access the Edit Page:

    • Tree view - Under Page Rendering, double-click the page title at the top of the tree.

    • Component view- Under Page, click the Edit icon.

  3. Scroll down to JavaScript.

  4. Enter code into the following:

    • Function and Global Variable Declaration - Enter JavaScript code (for example, functions or global variable declarations) for code to be used on this page. If the code is used on multiple pages, consider putting it into an external JavaScript file to avoid duplication.

      Code you enter here replaces the substitution string in the page template.

    • Execute When Page Loads - Enter JavaScript code to execute when the page loads. The code is executed after the JavaScript code generated by Oracle Application Express.

    For example, adding the following would test a function accessible from anywhere on the current page.

    function test(){ alert('This is a test.'); }
  5. Apply Changes.

10.11.3 Calling the JavaScript File from the HTML Header Attribute

To call a file from the HTML Header attribute:

  1. Navigate to the Page Definition. See "Accessing the Page Definition".

  2. To access the Edit Page:

    • Tree view - Under Page Rendering, double-click the page title at the top of the tree.

    • Component view- Under Page, click the Edit icon.

  3. Scroll down to HTML Header and Body Attribute.

  4. In HTML Header, call the JavaScript file using the following syntax:

    <script src="/my_images/custom.js" type="text/javascript"></script>
  5. Apply Changes.

10.11.4 Calling the JavaScript File from the Page Template

In Oracle Application Express, you can reference a file in the page template. This approach makes all the JavaScript in that file accessible to the application. This is the most efficient approach since a file loads on the first page view of your application and is then cached by the browser.

The following demonstrates how to include a file in the header section of a page template. Note the line that appears in bold.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>#TITLE#</title> #HEAD# <script src="/my_images/custom.js" type="text/javascript"></script> </head> <body #ONLOAD#>#FORM_OPEN#

10.11.5 Calling JavaScript from a Button

Calling JavaScript from a button is a great way to confirm a request. Oracle Application Express uses this technique for the delete operation of most objects. For example, when you delete a button, a JavaScript message appears asking you to confirm your request. Consider the following example:

function deleteConfirm(msg) { var confDel = msg; if(confDel ==null) confDel= confirm("Would you like to perform this delete action?"); else confDel= confirm(msg); if (confDel== true) doSubmit('Delete'); }

This example creates a function to confirm a delete action and then calls that function from a button. Note that the function optionally submits the page and sets the value of the internal variable to , thus performing the deletion using a process that conditionally executes based on the value of the request.

When you create the button, you must select Redirect to URL. Then, you would specify a URL target such as the following:

javascript:confirmDelete('Would you like to perform this delete action?');

Oracle recommends using dynamic actions as the preferred way of executing JavaScript code. Consider the following example:

  1. Create a button with action of Defined by Dynamic Action. See "Creating a Button Using a Wizard".

  2. Create a dynamic action and using the action type Execute JavaScript Code to execute the previous code, for example:

    if (confirm("Would you like to perform this delete action?")) { apex.submit('Delete'); }

This example uses JavaScript, but you could also easily implement this example without having to use JavaScript. Instead, you can use the declarative actions Confirm and Submit Page which are also translatable. To learn more, see "Implementing Dynamic Actions".

10.11.6 Calling JavaScript Using a Dynamic Action

You can also execute JavaScript code by creating a dynamic action. JavaScript code can be executed with the types Execute JavaScript and Set Value. You can also use JavaScript code for the condition of a dynamic action by setting the condition type to JavaScript Expression. To learn more, see "Implementing Dynamic Actions".

Event - Dynamic actions can be defined to fire based on events that happen on the page. There are four different categories of events that can be utilized, Browser events, Framework events, Component events and Custom events. Here are the details of all the supported events, including the internal JavaScript event name in brackets.

  • Change () - Fires when a control loses the input focus and its value has been modified since gaining focus. Supported User Interface Types: Desktop and jQuery Mobile Smartphone.

  • Click () - Fires when the pointing device button is clicked over the triggering element. Supported User Interface Types: Desktop and jQuery Mobile Smartphone.

  • Double Click () - Fires when the pointing device button is double clicked over the triggering element. Supported User Interface Types: Desktop.

  • Get Focus () - Fires when the triggering element receives focus by either a pointing device or by tabbing into the element. Supported User Interface Types: Desktop and jQuery Mobile Smartphone.

  • Key Down () - Fires when a key on the keyboard is pressed. Use this event when you want to capture special keystrokes such as arrow keys, after a key has been pressed. Supported User Interface Types: Desktop and jQuery Mobile Smartphone.

  • Key Press () - Fires when a key on the keyboard is pressed resulting in text being entered. Use this event when you want to capture actual text entry. Supported User Interface Types: Desktop and jQuery Mobile Smartphone.

  • Key Release () - Fires when a key on the keyboard is released. Use this event when you want to capture special keystrokes such as arrow keys, after a key has been released. Supported User Interface Types: Desktop and jQuery Mobile Smartphone.

  • Lose Focus () - Fires when the triggering element loses focus either by the pointing device or by tabbing out of the element. Supported User Interface Types: Desktop and jQuery Mobile Smartphone.

  • Mouse Button Press () - Fires when the pointing device button is pressed over the triggering element. Supported User Interface Types: Desktop.

  • Mouse Button Release () - Fires when the pointing device button is released over the triggering element. Supported User Interface Types: Desktop.

  • Mouse Enter () - Fires once when the pointing device is moved into the triggering element. Supported User Interface Types: Desktop.

  • Mouse Leave () - Fires once when the pointing device is moved away from the triggering element. Supported User Interface Types: Desktop.

  • Mouse Move () - Fires when the pointing device is moved while it is over the triggering element. Supported User Interface Types: Desktop.

  • Orientation Change () - Fires when a device's orientation changes (by turning it horizontally or vertically). The 'this.browserEvent' JavaScript object contains an 'orientation' property that will equal either 'portrait' or 'landscape'. Supported User Interface Type: 'jQuery Mobile Smartphone'.

  • Page Load (Desktop User Interface uses , jQuery Mobile Smartphone User Interface uses ) – Fires when the page loads. Supported User Interface Types: Desktop and jQuery Mobile Smartphone.

  • Page Unload () - Fires when a page is unloaded. Supported User Interface Types: Desktop and jQuery Mobile Smartphone.

  • Resize () - Fires when the browser window is resized. Supported User Interface Types: Desktop.

  • Resource Load () - When the triggering element is the window element (using a DOM Object value of in the When attributes), the event fires when the browser finishes loading all content within a document, including window, frames, objects and images. For other elements, it fires when the target element and all of its content has finished loading. Supported User Interface Types: Desktop and jQuery Mobile Smartphone.

  • Scroll () - Fires when a scrollable triggering element is scrolled. This could be the browser window (using a DOM Object value of in the When attributes), scrollable frames or elements with the CSS property set to (or when the element's explicit height is less than the height of its contents). Supported User Interface Types: Desktop and jQuery Mobile Smartphone.

  • Scroll Start () - Fires when a scroll begins. Supported User Interface Type: jQuery Mobile Smartphone.

  • Scroll Stop () - Fires when a scroll ends. Supported User Interface Type: jQuery Mobile Smartphone.

  • Select () - Fires when a user selects some text in a text field. Supported User Interface Types: Desktop and jQuery Mobile Smartphone.

  • Swipe () - Fires when a horizontal drag of 30px or more (and less than 75px vertically) occurs, within a 1 second duration. Supported User Interface Type: jQuery Mobile Smartphone.

  • Swipe Left () - Fires when a swipe event occurs moving in the left direction. Supported User. Interface Type: jQuery Mobile Smartphone.

  • Swipe Right () - Fires when a swipe event occurs moving in the right direction. Supported User Interface Type: jQuery Mobile Smartphone.

  • Tap () - Fires after a quick touch event. Supported User Interface Type: jQuery Mobile Smartphone.

  • Tap and Hold () - Fires after a held touch event (held for close to 1 second). Supported User Interface Type: jQuery Mobile Smartphone.

  • Touch Cancel () - Normalized event for handling touch or mousecancel events. Supported User Interface Type: jQuery Mobile Smartphone.

  • Touch End () - Normalized event for handling touchend or mouseup events. Supported User Interface Type: jQuery Mobile Smartphone.

  • Touch Move () - Normalized event for handling touchmove or mousemove events. Supported User Interface Type: jQuery Mobile Smartphone.

  • Touch Start () - Normalized event for handling touchstart or mousedown events. Supported User Interface Type: jQuery Mobile Smartphone.

  • Virtual Click () - Normalized event for handling touchend or mouse click events. On touch devices, this event is dispatched after Touch End. Supported User Interface Type: jQuery Mobile Smartphone.

  • These events are available when there is a component (either an item, region, or dynamic action) available to your application that triggers a custom event. These events appear in the following format Event name [Component Name], for example the Change Order event triggered by the Shuttle native item type appears as Change Order [Shuttle]. Component events are either triggered from native components shipped with Oracle Application Express, or from plug-in components you have installed into your application.

  • Events triggered by native components:

    Change Order [Shuttle] () – Fires when the order of a value in the right hand select list is changed (either using Move Top, Move Up, Move Down, or Move Bottom). There are currently no other events triggered by native components in Oracle Application Express. Supported User Interface Types: Desktop and jQuery Mobile Smartphone.

  • Events triggered by plug-in components:

    These will be available when added to your current application and will be in the format Event name [Component Name]. For help related to events raised by plug-ins, refer to Help text on the plug-in configuration page, by navigating to Shared Components, Plug-ins, plug-in name, Help Text, where the plug-in author may have included documentation. Supported User Interface Types: Determined by the plug-in's User Interfaces > Supported for settings.

  • 0 thoughts on “Oracle Apex Dynamic Action Javascript Conditional Assignment”

      -->

    Leave a Comment

    Your email address will not be published. Required fields are marked *