making my tabular form dynamic

问题

I have a checkbox on a tabular form. I need to be able to hide it if the submit date is not filled in and show it when a date is there. Once the checkbox has been clicked, I need to update another field based on the checkbox being clicked or when I hit the update button. is this possible on a Oracle Apex tabular form in version 4.2?

回答1:

You can create dynamic actions on tabular form fields, but you need to know some Javascript / jQuery / DOM stuff as it can't be done declaratively as it can with page items.

As an example, I created a simple tabular form on the EMP table:

Using the browser's Inspect Element tool I can see that the HTML for the Ename field on row 3 looks like this:

<input type="text" name="f03" size="12" maxlength="2000" value="Ben Dev"
    class="u-TF-item u-TF-item--text " id="f03_0003" autocomplete="off">

The relevant bits to note are the name "f03" and the ID "f03_0003". For all tabular form fields, the name indicates the column, and is the same for all fields in that column. The ID is made up of the name plus a string to represent the row - in this case "_0003" to represent row 3.

Similarly, the Hiredate fields are all named "f004" and have IDs like "f04_0003".

Armed with this information we can write a dynamic action. For example, let's say that whenever Ename is empty then Hiredate should be hidden, otherwise shown. In pseudo-code:

whenever an element with name "f03" is changed, the element with name "f04" on the same row should be hidden or shown.

So we can create a synamic action with a When condition like this:

Event = Change
Selection type = jQuery selector
jQuery selector = input[name="f03"]

i.e. whenever an input whose name is "f03" is changed, fire this action.

The action performed will have to be "Execute Javascript code", and the code could be:

// Get the ID of this item e.g. f03_0004
var this_id = $(this.triggeringElement).attr('id');
// Derive the ID of the corresponding Hiredate item e.g. f04_0004
var that_id = 'f04'+this_id.substr(3);

if ($(this.triggeringElement).val() == "") {
    // Ename is empty so hide Hiredate
    $('#'+that_id).closest('span').hide();
} else {
    // Ename is not empty so show Hiredate
    $('#'+that_id).closest('span').show();
}

Because Hiredate is a date picker, I needed to hide/show both the field itself and its date picker icon. I chose to do this by hiding/showing the span that contains them both. This code could have been written in many different ways.

You could apply similar techniques to achieve your aims, but as you can see it isn't trivially easy.

来源：https://stackoverflow.com/questions/40637942/making-my-tabular-form-dynamic

标签

Oracle

oracle-apex