Use Case of Dynamic Actions in Oracle Apex.

Dynamic Actions is powerful feature providing a way to define complex client-side behavior. You can define an action to occur when a specified event happens on a particular item or within a region. This could be things like showing, hiding, enabling, or disabling an item, setting a value, executing a SQL statement, or even running custom JavaScript code.

In this article we will focus on condition rendering in forms with page items. In web development, condition rendering is the process of showing or hiding elements based on the state of certain variables or conditions, such as the state of a checkbox (checked or unchecked).

Use Case

We have two page items on a form. One is a checkbox group with name [P1_OVERTIME] and the other a number field labelled [P1_OVERTIME_RATE].

Requirements

• On form page load on P6_EA_OVERTIME_RATE page item has to be disabled
• P6_EA_OVERTIME_RATE page item to be enabled and a value entered when “YES” on P6_EA_OVERTIME is selected.
• P6_OVERTIME_RATE disabled when the “NO” on P6_EA_OVERTIME is selected
• A user should NOT be able to select the “YES” & “NO” checkboxes at the same time.
• When a user enters a value into the P6_EA_OVERTIME_RATE and decides to select “NO” on P6_EA_OVERTIME checkbox the value of the P6_EA_OVERTIME_RATE has to be cleared and disabled.

Process

Create the two page items : a checkbox page item with name P6_EA_OVERTIME and static values YES & NO with retun values Y & N respectively, a number field page item with name P6_EA_OVERTIME_RATE.

Static Values of P6_EA_OVERTIME checkbox page item

Create a dynamic action to disable P6_OVERTIME_RATE page item on page load. In your design panel go to the Dynamic actions section to create a Dynamic Action. Give it a name and select Page Load in the When section. Right click the Dynamic Action and create a true action. In the true action action choose Disable in the Action field. Select Items for the selection Type and Add P6_OVERTIME_RATE to the item field in the affected Elements section. In the Execution section make sure Fire On Initialization is turned On. This will ensure the dynamic action fires if the page loads.

The next thing to do is to make sure P6_OVERTIME checkbox values cannot be selected at the same time. This can be achieved with javascript using Dynamic Actions. Find the P6_OVERTIME page item, right click the item and select Create Dynamic Action. Give it a name of choice and keep the rest of the option the same. In this case the dynamic action is triggered when there is a change to the P6_OVERTIME page item.

Create a TRUE action and select Execute Javascript as the Action. A code editor opens up and we add the following code:

This code ensures that only one value of the checkbox can be selected at a time.

Create another true action to ensure that when Yes of the P6_OVERTIME page item is selected the P6_OVERTIME_RATE should be enabled so a user can enter a value of choice. If yes is unchecked or no selected it should clear any value in the P6_OVERTIME_RATE page item and disable it. If P6_OVERTIME is selected should remain disabled.

Save and run. The P6_OVERTIME_RATE will be disabled on page load. If Yes on P6_OVERTIME is selected the P6_OVERTIME_RATE page item will be enable so a value can be added.

Happy Coding!!