Apply Dynamic styles using dynamic action on oracle Apex

Hai Here is my first post!

Have you ever wondered how to dynamically apply CSS styles on Apex if yes you are on the right page.

Here I am going to explain to you how to make a page item as read-only and remove item borders to the Phone number page item.

So here I have added a style which will make the phone number as read-only and I will remove the border of the page item phone number only if it is an existing record if it is a new record user can type the phone number

I have added a Dynamic action on page load with a client-side condition on it and made it perform JS

In the JS I have added the following code to make the item readonly and remove the borders of the page item "P7_PHONE_NUMBER1" any page item will have its own name as ID so you can use that in the getElementById property

JS CODE:
document.getElementById("P7_PHONE_NUMBER1").readOnly = true; document.getElementById("P7_PHONE_NUMBER1").style.borderStyle = "none"; Result:

When creating a new customer Phone number field is editable

While editing an existing customer phone number field is read-only