Conditionally Required Floating Item
An item in the Universal Theme using the Optional – Floating template looks like this:
An item using the Required – Floating template looks like this:
In addition, if the item is required we would most probably set the Value Required attribute to Yes. What if the item is sometimes required but not always? How do we create a Conditionally Required field?
Firstly, we would make sure there is a Validation on the field that checks that the value is provided if required. This way, regardless of what the form may or may not send to the database, it is validated appropriately.
Secondly, to indicate to the user that the item is required or optional, based on the value of another item, we can use a Dynamic Action that sets the
required item property (this triggers the client-side validation) and adds or removes the
is-required class from the item’s container (this shows the little red “required” indicator on the page).
For example, let’s say that whether item
P1_COST_CENTRE is required or not is dependent on whether a hidden item,
P1_COST_CENTRE_REQUIRED, has the value
- Create a Dynamic Action
- Event: Change
- Selection Type: Item(s)
- Client-side Condition Type: Item = Value
var item = $("#P1_COST_CENTRE"); item.prop("required",true); item.closest(".t-Form-fieldContainer").addClass("is-required");
var item = $("#P1_COST_CENTRE"); item.prop("required",false); item.closest(".t-Form-fieldContainer").removeClass("is-required");
The above code works for all item templates (“Optional”, “Optional – Above”, “Optional – Floating”, etc.) in the Universal Theme; I’ve tested this on APEX 18.2 and 19.1.
Note: this is custom code for the Universal Theme, so it may or may not work for other themes; and might stop working in a future revision of the theme.
UPDATE 29/7/2019: I’ve created some simple Dynamic Action plugins (for APEX 18.2 and later) to implement this, if you’re interested you can download them from here:
To use these plugins, select them as an Action to take on a Dynamic Action:
EDIT 29/7/2019: modified to use a better method to find the container div.
In other themes, the way that a required field is rendered is different. For example, in Theme 26 (Productivity Applications) the label for a required item is rendered in bold, along with a red asterisk; if the item is optional, no red asterisk is rendered. The way to make an item conditionally mandatory in this theme is:
- Set the item to use the Required template (so that the red asterisk is rendered).
var itemLabel = $("label[for='P1_COST_CENTRE']"); itemLabel.removeClass("uRequired"); itemLabel.addClass("uOptional");
To make the item required again:
var itemLabel = $("label[for='P1_COST_CENTRE']"); itemLabel.removeClass("uOptional"); itemLabel.addClass("uRequired");