Continuing the previous post, we will now be talking about the Dynamic Action - Set Style
This Dynamic Action lets you define a style property (CSS) for the affected elements.
Its use is very simple and very useful in some cases. Let's take a practical example.
Case Study
Suppose there is a sellers table with the percentage commission that is allowed for a particular sale. In this case, we want to validate whether or not a commission is in the amount allowed for the seller.
Let's create a form where we will select a seller, we will inform the value of the sale and, soon thereafter, the value of your commission. After this, we will calculate the total percentage of the sale and, if it is greater than what is allowed, the commission amount will be red, otherwise we will define the green color, indicating that the commission is within acceptable standards.
We will have the following salesperson table:
Set Style
To carry out our practical example, we will have the following form:
Labels and their respective items:
To find out the percentage of commission set for the total sale, we will create a Set Value Dynamic Action > PL/SQL Expression below:
to_char((:PX_TOTAL_COMMISSION / :PX_SALES_AMOUNT) * 100, '990D00')The value resulting from the above Dynamic Action expression will be set to "Commission Obtained" (PX_PCT_COMMISSION_TOTAL) and this item will be used in our Set Style dynamic action.
1. Our Dynamic Action Set Style will be executed from the item "Total Commission Amount" (PX_PCT_COMMISSION_TOTAL). Right-click on the item and select "Create Dynamic Action"
2. We define the name of the dynamic action for "Set Style - Commission Alert " and that the action will be performed when the item is changed. .
3. Now, in order for us to set the style, we need to verify that the percentage value in the "Commission Obtained" (PX_PCT_COMMISSION_TOTAL) item is greater than "Expected Commission" (PX_PCT_COMMISSION). For this we define a Client-side Condition of type JavaScript Expression.
JavaScript Expression:
$v("P8_PCT_COMMISSION_TOTAL") > $v("P8_PCT_COMMISSION")($v) Retrieves the value of the item.
4. After performing the previous steps, we have created a true Set Style action that will be performed when the "Commission Obtained" is greater than "Expected Commission". In "Settings" we define "Style Name" for color and "Value" with the color code that we want to alert the user. In this case: red (#E95B54).
5. Then we select the item that will have the style defined by the dynamic action, which in our example will be "Total Commission Amount" (PX_TOTAL_COMMISSION).
6. To conclude, we can create a false Set Style action if the commission amount is within the expected, setting the color green (#3CAF85) for the item.
The result
In practice...
To see our Dynamic Action (Set Style) in action, go to the demo application below.
Demo Application
Link: Learning APEX App
User (default): demo
Password: demo