Step 1:
=====
Create Interactive Report.
SQL Query:
Select
column_1, column_2, column_3,
'<a href="'||APEX_UTIL.PREPARE_URL('javascript:void(0)')
||'"data-id='||PK_ID||'><span class="RevApp click_class" aria-hidden="true" style="color:red;font-weight: 500;border-radius: 5px;"><img title="Approve " src="#APP_IMAGES#check.png" width="20" height="20"></span></a>'
||' '||'<a href="'||APEX_UTIL.PREPARE_URL('javascript:void(0)')
||'"data-id='||PK_ID||'><span class="Can click_class" aria-hidden="true" style="color:red;font-weight: 500;border-radius: 5px;"><img title="Cancel" src="#APP_IMAGES#cancel.png" width="20" height="20"></span></a>'
||' '||'<a href="'||APEX_UTIL.PREPARE_URL('javascript:void(0)')
||'"data-id='||PK_ID||'><span class="delete click_class" aria-hidden="true" style="color:red;font-weight: 500;border-radius: 5px;"><img title="Delete" src="#APP_IMAGES#delete.png" width="20" height="20"></span></a>'
as Action
FROM TABLE_NAME;
Step 2:
=====
Create Action Wise Item Create.
P10_APPROVED
P10_CANCEL
P10_DELETE
This item always hides.
Step 3:
=====
Create Dynamic Action on Click.
Name: Setvalue_Approved
Event Scope: Dynamic
Event: Click
Selection Type: jQuery Selector
jQuery Selector: .RevApp
Action: Set Value
Set type: JavaScript Expression
JavaScript Expression:
$(this.triggeringElement).parent().data('id')
Fire on Initialization: on
Affected Elements:
Selection Type: Item(s)
Item(s): P10_APPROVED
(Note: Same Action Create for CANCEL & DELETE)
Step 4:
=====
Create Dynamic Action on P10_APPROVED.
Name: Approved_Process
Event Scope: Dynamic
Event: Change
Client-side Condition:
Type: Item is not null
Item: P10_APPROVED
True Action-1
----------------
Action: Clear
Affected Elements:
Selection Type: Item(s)
Item(s): P10_CANCEL,P10_FORWARD
Fire on Initialization: off
True Action-2
-----------------
Action: Alertify [Plug-in]
Message Type: dialog
Dialog Type: Confirm
Message: Do You Want to Approve?
OK Button Label: Yes
Cancel Button Label: No
Fire on Initialization: off
True Action-3
----------------
Action: Execute Server-side Code
PL/SQL Code:
BEGIN
IF :P10_APPROVE IS NOT NULL THEN
update TABLE_NAME set
STATUS='APPROVED',
APP_AT=sysdate
where PK_ID =:P10_APPROVED ;
END IF;
END;
Items to Submit: P10_APPROVED
Fire on Initialization: off
True Action-4
----------------
Action: Alertify [Plug-in]
Message Type: Notification
Dialog Type: Success
Message: Your request has been approved.
Fire on Initialization: off
True Action-5
-----------------
Action: Refresh
Selection Type: Region
Region: Your_Region_Name
Fire on Initialization: off
(Note: Same Action Create for CANCEL & DELETE)
==========================================
Create Custom button, Search/Refresh & Clear.
==========================================
Step: 1
=====
Select Item(Bill Number). Go to Post Text.
<div class="Refresh-button">
<img title="Refresh" src="#APP_FILES#refresh.png" alt="Clear">
<span class="Refresh-text">Refresh</span>
</div>
<div class="clear-button">
<img title="Clear" src="#APP_IMAGES#cancel.png" alt="Clear">
<span class="clear-text">Clear</span>
</div>
Go to Inline CSS.
.clear-button, .Refresh-button {
margin-right: 5px; /* Adjust as Spece*/
margin-left: 5px;
}
.clear-button {
width: 80px; /* Square width */
height: 30px; /* Square height */
display: flex;
align-items: center;
justify-content: center;
border: 2px solid red;
border-radius: 5px; /* Slightly rounded edges */
background-color: #f8d7da; /* Light red background */
cursor: pointer;
text-align: center;
gap: 5px; /* Space between icon and text */
}
.clear-button img {
width: 20px;
height: 20px;
}
.clear-text {
color: red;
font-weight: 500;
font-size: 14px;
}
.Refresh-button {
width: 80px; /* Square width */
height: 30px; /* Square height */
display: flex;
align-items: center;
justify-content: center;
border: 2px solid green;
border-radius: 5px; /* Slightly rounded edges */
background-color: rgb(178, 253, 178); /* Light red background */
cursor: pointer;
text-align: center;
gap: 5px; /* Space between icon and text */
}
.Refresh-button img {
width: 20px;
height: 20px;
}
.Refresh-text {
color: green;
font-weight: 500;
font-size: 14px;
}
Step: 2
=====
Create Dynamic Action for Clear Button.
Name: CLEAR_BUTTON
Event Scope: Static
Event: Click
Selection Type: jQuery Selector
jQuery Selector: .clear-button
True Action-1
---------------
Action: Clear
Affected Elements:
Selection Type: Item(s)
Item(s): Select your items
Fire on Initialization: off
True Action-2
---------------
Action: Refresh
Selection Type: Region
Region: Your_Region_Name
Fire on Initialization: off
=====================================
Create Dynamic Action for Refresh.
Name: REFRESH_BUTTON
Event Scope: Static
Event: Click
Selection Type: jQuery Selector
jQuery Selector: .Refresh-button
Action: Refresh
Selection Type: Region
Region: Your_Region_Name
Fire on Initialization: off