Step - 1: Create blank page :
Step - 2:Create classic report region :
Region Name = demo_classicreport
Sample SQL query:
Select
'name:' || ' ' || product_name || '<br> quantity:' || ' ' || product_avail AS card_text,
filename,
mimetype,
image_last_update,
product_image,
sys.dbms_lob.getlength(product_image) AS card_title,
product_id,---my table primary key
list_price,
apex_util.prepare_url('#') AS card_link,
'<div data-id=' || PRODUCT_ID || '>
<button class="t-button t-button--nolabel t-button--icon trash-me" id="fav_' || PRODUCT_ID || '" type="button">
<span class="t-icon fa fa-trash" aria-hidden="true"></span>
</button>
<button class="t-button t-button--nolabel t-button--icon add-favorite" id="fav_' || PRODUCT_ID || '" type="button">
<span class="t-icon fa fa-plus" aria-hidden="true"></span>
</button>
<button class="t-button t-button--nolabel t-button--icon remove-favorite" id="fav_' || PRODUCT_ID || '" type="button">
<span class="t-icon fa fa-minus" aria-hidden="true"></span>
</button>
</div>' AS card_subtext
from product_info;
Step - 3: Create one page item under the classic report and give the name P45_PRODUCT_ID :
Step - 4: Now create dynamic actions for delete, add, remove buttons on click:
Dynamic action for delete button:
Event Scope - Dynamic
Event : Click
Selection Type : jQuery Selector
jQuery Selector : .trash-me
Then Create True Actions As Below:
1.Confirm:
Identification - Action : Confirm
2.Set Value :
Identification - Action : Set Value
Settings - Set Type :Java Script Expression
Java Script Expression : $(this.triggeringElement).parent().data('id')
Affected Elements : Selection Type - item(s)
item(s) - P45_PRODUCT_ID
3.Execute Server-Side Code:
Identification - Action - Execute Server-Side Code
Language PL/SQL Code:
Begin
Delete from demo_product_info where product_id =:P45_PRODUCT_ID;
End;
Items to submit : P45_PRODUCT_ID
Items to return : P45_PRODUCT_ID
4.Submit Page:
Identification - Action - Submit Page
Dynamic action for add button :
Event Scope - Dynamic
Event : Click
Selection Type : jQuery Selector
jQuery Selector : .add-favorite
Create 3 true actions:
1.Set Value :
Identification - Action : Set Value
Settings - Set Type : Java Script Expression
Java Script Expression : $(this.triggeringElement).parent().data('id')
Affected Elements : Selection type - item(s)
item(s) - P45_PRODUCT_ID
2.Execute Server-side Code :
Identification - Action - Execute Server-Side Code
PL/SQL Code:
Begin
Update demo_product_info set product_avail = product_avail + 1
where product_id = :P45_PRODUCT_ID;
End;
Items to submit : P45_PRODUCT_ID
Items to return : P45_PRODUCT_ID
3. Refresh :
Identification - Action : Refresh
Affected Elements : Selection Type - Region
Region - demo_classicreport-----my report name
Create dynamic action for remove button :
Event Scope - Dynamic
Event : Click
Selection Type : jQuery Selector
jQuery Selector : .remove-favorite
Create 3 true actions :
1.Set Value :
Identification - Action : Set Value
Settings - Set Type :Java Script Expression
Java Script Expression : $(this.triggeringElement).parent().data('id')
Affected Elements : Selection Type - item(s)
item(s) - P45_PRODUCT_ID
2.Execute Server-side Code : Identification - Action - Execute Server-Side Code
PL/SQL Code:
Begin
Update demo_product_info set product_avail = product_avail - 1
where product_id =:P45_PRODUCT_ID;
End;
Items to submit : P45_PRODUCT_ID
Items to return : P45_PRODUCT_ID
3. Refresh :
Identification - Action : Refresh
Affected Elements : Selection Type - Region
Region - demo_classicreport -- my report name
Step -5: Save and Run the page:
Output :
Comments
Post a Comment