Practical Dynamic Actions Intro Jorge Rimblas 1.1
Jorge Rimblas Senior APEX Consultant @rimblas rimblas.com/blog Contributor to "Expert Oracle Application Express, 2nd Edition" with "Themes & Templates" chapter Oracle DB since 1995 APEX since it was HTMLDB in 2004 Always involved in web technologies jrimblas in OTN Forums 1. 2
Age: 13 years! Staff: 80+ employees 68 consultants/developers 2015: 60% Growth APEX Solutions: 12 Years! Largest APEX practice in North America Oracle Center of Excellence 1. 3
Agenda Browser events Dynamic Action Structure Demos AJAX Advanced Dynamic Actions 2
Background 3. 1
Your static web pages are "alive" 3. 2
Ok, maybe not "alive", but they are not just static. 3.3
With JavaScript can affect the structure (this means changing the HTML) 3. 4
With JavaScript can affect the look (this means changing the CSS and Styles) 3. 5
Definitions 3. 6
Client Side 3. 7
Client Side Server Side 3. 8
Dynamic Actions are all about Client Side " activities " Events 4
Browser Events 5. 1
Change Page Load Click Scroll Resize Key Press 5. 2
Any Browser Event 5. 3
Custom Events! 5. 4
Browser Events 4.2 5.0 5. 5
APEX 4.2 APEX 5.0 5. 6
Actions 6. 1
Component Actions Hide/Show Disable/Enable Clear Set Value etc... 6. 2
Style Actions Set Class Remove Class Set Style 6. 3
Navigation Actions Submit Page Cancel Dialog Close Dialog APEX 5 6. 4
Notification Actions Alert Confirm 6. 5
"Other" Actions Execute JavaScript Code Execute PL/SQL Code Plugins etc... More about this later 6. 6
Anatomy of a Dynamic Action 7. 1
When event [Optional Client Side Condition] When True What to do? [Affected Elements] When False What to do? [Affected Elements] 7. 2
When event [Optional Client Side Condition] When True True Actions When False False Actions 7. 3
Anatomy of a Dynamic Action APEX view 8. 1
Event/When? When will the Dynamic Action execute? On click On item (data) change On Focus On Page Load On (any) browser event etc 8. 2
Where? Where will the event happen? 8. 3
Where? Where will the event happen? Item(s) Button Region jquery Selector JavaScript Expression 8. 4
APEX 4.2 vs APEX 5.0 8. 5
Demo:Hide &Show 9. 1
Two Buttons to Hide/Show P11 9. 2
Builder Tabs 9. 3
P20
P20 With No Dynamic Actions 9. 4
Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button Show List Item "Select User" Hide Text Item "Enter User" Show "Switch to Enter User" Button Hide "Switch to Select User" Button 9. 56
Disable & Enable Sometimes a good alternative to Hide & Show 9. 7
Demo:Hide &Show Conditional 10. 1
P25
Structure Condition 10. 2
Condition Detail Condition 10. 34
Several Condition Options 10. 5
Demo:Set Value 11. 1
P30
Often used as part of several True Actions. Often used to set a hidden item Hidden Item needs: "Value Protected" = No Equivalent to $s API $s("{item}", "{VALUE}"); // Set to today $s("p30_log_date", "&P30_TODAY."); // Clear date $s("p30_log_date", ""); 11. 23
Demo: Key Release Uppercase Code 12. 1
P40
Set Value action Event 12. 23
Name to Uppercase Code this.triggeringelement.value.touppercase().replace(/\s+/g, '_').substring(0, 20); 1. Value of the triggeringelement 2. Make it uppercase 3. Globally Replace spaces (\s) with "_" 4. Only return the first 20 characters 12. 4
Demo:Change & Refresh 13. 1
P110
Don't forget: Page Items to Submit 13. 23
Inspect Submission
P110_DEPTNO is sent 13. 45
AJAX asynchronous JavaScript and XML group of interrelated Web development techniques used on the client-side to create asynchronous Web applications Wikipedia: en.wikipedia.org/wiki/ajax_(programming) 14. 1
Client Side AJAX Server Side 14. 2
JavaScript SQL PL/SQL 14. 3
Demo: AJAX 15. 1
Multiple Actions It's easy! 15. 2
P215
Two Different DA Assign Role 1. Remove Role 2. 15. 34
Assign Role 1. Event: On Button Click 2. Insert new role 3. Refresh Role Dropdown 4. Refresh Report insert into app_user_roles ( username, role_key) values ( :P215_USERNAME, :P215_ROLE_KEY); 15. 5
Remove Role 1. Event: On.deleteRow Click 2. Delete role 3. Refresh Role Dropdown 4. Refresh Report delete from app_user_roles where id = :P215_UR_ID; 15. 6
Remove Role 1. Event: On.deleteRow Click 2. Ask for Confirmation 3. Use "Set Value" to save ID of clicked row 4. Delete role 5. Give Confirmation 6. Refresh Role Dropdown 7. Refresh Report 15. 7
Get the ID value this.triggeringelement.getattribute("data-id"); this.triggeringelement.dataset.id 15. 8
Get the ID value this.triggeringelement.dataset.id 15. 9
Dataset / Data Attributes // data-id="{value}" this.triggeringelement.dataset.id // data-active="yes" this.triggeringelement.dataset.active // data-selected="yes" this.triggeringelement.dataset.selected // data-lineid="123" this.triggeringelement.dataset.lineid // data-rownum="2" this.triggeringelement.dataset.rownum 15. 10
Event Scope Static Dynamic Once 16. 1
Static Dynamic Once 16. 2
Advanced Dynamic Actions 17. 1
Built-in JavaScript Objects this.triggeringelement this.browserevent this.data 17. 2
triggeringelement Available inside the DA JavaScript var el = this.triggeringelement; var $el = $(this.triggeringelement); 18. 1
Name to Uppercase Code this.triggeringelement.value.touppercase().replace(/\s+/g, '_').substring(0, 20); 1. Value of the triggeringelement 2. Make it uppercase 3. Globally Replace spaces (\s) with "_" 4. Only return the first 20 characters 18. 2
Complex Page APEX 4.2 19. 1
Complex Page APEX 5.0 19. 2
Resources Download Demo App (coming soon!) JavaScript.com dynamic-actions.com rimblas.com/blog/2014/06/easy-prototyping-when-using-apex-da- Easy Prototyping with triggeringelement ( triggeringelement/ ) Install & Review Packaged Application: "Sample Dynamic Actions" 20. 1
Sample Dynamic Actions 20. 2
20. 3
Q&A Practical Dynamic Actions Jorge Rimblas @rimblas rimblas.com/blog 21
22