Wednesday, July 29, 2015

APEX and the Order Items are Submitted

This is the last post in a multi-part series on how APEX submits and processes input elements from your browser to the server. The goal is to understand the effects of moving elements around the page. It is important to read these articles in the following order.

Back to Basics
APEX and the HTML Form
APEX and the Order Items are Submitted
Why does APEX do this? (by John Snyders)

The goal of this article is to highlight the effects of moving items and regions around on a page. This article will be broken into four sections, a high level recap from the previous two articles, moving an APEX item, moving an APEX item along with its corresponding p_arg_names element, and finally a conclusion. It will reference and build upon the example from the previous article.

Recap

I can't stress enough how important it is to read the previous two articles. To recap, when APEX submits the page it'll use the following values to map the HTML elements to their corresponding APEX items.

APEX Item ID    |  APEX Item      |  Element Name
p_arg_names[1]  |  P1_FIRST_NAME  |  p_t01
p_arg_names[2]  |  P1_LAST_NAME   |  p_t02


Moving APEX items

They're some times where it is required to move APEX items around the page after it has rendered. This example will highlight what happens when an item (and only the item) is moved.

Using the example from the previous article suppose you move P1_LAST_NAME before P1_FIRST_NAME using jQuery. 
$('#P1_LAST_NAME').insertBefore('#P1_FIRST_NAME');

The page will look like:


When the page is submitted, everything still works as expected. P1_FIRST_NAME = Martin and P2_LAST_NAME = D'Souza. In this case, it was safe to the move the item around the page since only the p_t02 element was moved. The order of p_arg_names (which APEX uses to map to apex_application_page_items.item_id an p_txx) was not changed.

Moving an APEX item along with its corresponding p_arg_names element.

Using the previous example, suppose the items were split up into two regions as shown below. To help out, each region has been assigned a static id of region-one and region-two respectively.


Using the following code, Region Two is moved above Region One:
$('#region-two').insertBefore('#region-one');

The screen then looks like:


Referring to the previous article not only has the input element for P1_LAST_NAME moved, but it's corresponding p_arg_names hidden element was moved and its overall order has changed. Now when the page is submitted the following is sent to the server (note the order):

p_arg_names[1] = 32629863123858907 - Maps to APEX item P1_LAST_NAME
p_arg_names[2] = 32629789701858906 - Maps to APEX item P1_FIRST_NAME

p_t01 = Martin
p_t02 = D'Souza

Just to recap and highlight what is about to happen:

p_arg_names[1] (P1_LAST_NAME) maps to p_t01 (Martin)
p_arg_names[2] (P1_FIRST_NAME) maps to p_t02 (D'Souza)

You can see the mis-match occur below once the page has been submitted. Martin is stored in P1_LAST_NAME and D'Souza is stored in P1_FIRST_NAME.

Conclusion

Be very careful when moving APEX items around the page. As a guideline, it's usually safe to move individual items, provided you're not moving any p_arg_names hidden elements. If you're moving a region and/or any p_arg_names elements you may get invalid data assignments if the order of p_arg_names is changed.

This issue was first discussed a very long time ago between myself and Dan McGhan on the Oracle Forums: https://community.oracle.com/message/3182532

3 comments:

  1. Hi Martin,

    Thanks for great articles.
    Worked with APEX for many years,
    but didn't understand how it works.

    Thanks,
    Lev

    ReplyDelete
  2. Hi Martin,

    Very interesting post, thanks!

    After executing the insertBefore to the regions, when you said:

    Just to recap and highlight what is about to happen:
    p_arg_names[1] Maps to p_t01 (P1_LAST_NAME / Martin)
    p_arg_names[2] Maps to p_t02 (P1_FIRST_NAME / D'Souza)

    I believe you really meant:

    p_arg_names[1] Maps to p_t02*
    p_arg_names[2] Maps to p_t01*

    Thank you,

    Erick

    ReplyDelete