How to Display Add Remove, Delete buttons on the Cards Using Classic Report in Oracle APEX
- Step - 1:
Create blank page:
- Step - 2:
Create classic report region:
Region Name = demo_classicreports
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. 1. Set Value:
Identification - Action: Set Value
Settings - Set Type: Java Script Expression
Java Script Expression: $(this.triggeringElement).parent().data('id')
Affected Element: Selection type - item(s)
item(s) - P45_PRODUCT_ID
1. 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
Dynamic action for remove button:
- Event Scope - Dynamic
- Event: Click
- Selection Type: jQuery Selector
- jQuery Selector: .remove-favorite
Create 3 true actions:
1. 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:
No comments:
Post a Comment