Practical Dynamic Actions - Intro
2 likes892 views
This document provides an overview and demonstration of dynamic actions in Oracle Application Express (APEX). It begins with definitions and background on client-side events and JavaScript. The anatomy of a dynamic action is explained, including the event, actions, and affected elements. Examples are shown of hiding and showing elements, setting values, uppercase coding on key release, and using AJAX. Advanced topics discussed include the triggeringElement object and building complex pages. Resources are listed for further examples and tutorials on dynamic actions.
![When event
What to do?
What to do?
When
True
When
False
[Optional Client Side Condition]
[Affected Elements]
[Affected Elements]
7 . 2](https://image.slidesharecdn.com/jrimblas-160721190058/85/Practical-Dynamic-Actions-Intro-27-320.jpg)
![When event
True Actions
False Actions
When
True
When
False
[Optional Client Side Condition]
7 . 3](https://image.slidesharecdn.com/jrimblas-160721190058/85/Practical-Dynamic-Actions-Intro-28-320.jpg)
![Resources
Demo [ ]
(
)
Install & Review Packaged Application:
"Sample Dynamic Actions"
apex.oracle.com/pls/apex/f?p=90770 Download
JavaScript.com
dynamic-actions.com
Easy Prototyping with triggeringElement
rimblas.com/blog/2014/06/easy-prototyping-when-using-apex-da-
triggeringelement/
20 . 1](https://image.slidesharecdn.com/jrimblas-160721190058/85/Practical-Dynamic-Actions-Intro-79-320.jpg)
Practical Dynamic Actions - Intro
- 1. Practical Dynamic Actions – Intro Jorge Rimblas 1 . 1
- 2. Jorge Rimblas Senior APEX Consultant @rimblas rimblas.com/blog Oracle DB since 1995 APEX since it was HTMLDB in 2004 Always involved in web technologies jrimblas in OTN Forums Contributor to "Expert Oracle Application Express, 2nd Edition" with "Themes & Templates" chapter 1 . 2
- 3. 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
- 4. Agenda Browser events Dynamic Action Structure Demos AJAX Advanced Dynamic Actions 2
- 6. Your static web pages are "alive" 3 . 2
- 7. Ok, maybe not "alive", but they are not just static. 3 . 3
- 8. JavaScript can affect the structure (this means changing the HTML) With 3 . 4
- 9. JavaScript can affect the look (this means changing the CSS and Styles) With 3 . 5
- 11. Client Side 3 . 7
- 12. Client Side Server Side 3 . 8
- 13. Dynamic Actions are all about Client Side " " Eventsactivities 4
- 16. Any Browser Event 5 . 3
- 17. Custom Events! 5 . 4
- 18. Browser Events 4.2 5.0 5 . 5
- 20. Actions 6 . 1
- 22. Style Actions Set Class Remove Class Set Style 6 . 3
- 23. Navigation Actions Submit Page Cancel Dialog Close Dialog APEX 5 6 . 4
- 25. "Other" Actions Execute JavaScript Code Execute PL/SQL Code Plugins etc... More about this later 6 . 6
- 26. Anatomy of a Dynamic Action 7 . 1
- 27. When event What to do? What to do? When True When False [Optional Client Side Condition] [Affected Elements] [Affected Elements] 7 . 2
- 28. When event True Actions False Actions When True When False [Optional Client Side Condition] 7 . 3
- 29. Anatomy of a Dynamic Action APEX view 8 . 1
- 30. 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
- 31. Where? Where will the event happen? 8 . 3
- 32. Where? Where will the event happen? Item(s) Button Region jQuery Selector JavaScript Expression 8 . 4
- 33. APEX 4.2 vs APEX 5.0 8 . 5
- 35. Two Buttons to Hide/Show P11 9 . 2
- 36. Builder Tabs 9 . 3
- 37. P20 9 . 4
- 38. With No Dynamic Actions P20 9 . 5
- 39. 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 . 6
- 40. Disable & Enable Sometimes a good alternative to Hide & Show 9 . 7
- 42. P25 10 . 2
- 45. Several Condition Options 10 . 5
- 47. P30 11 . 2
- 48. Often used as part of several True Actions. Often used to set a hidden item Hidden Item needs: "Value Protected" = No $s("{ITEM}", "{VALUE}"); // Set to today $s("P30_LOG_DATE", "&P30_TODAY."); // Clear date $s("P30_LOG_DATE", ""); Equivalent to $s API 11 . 3
- 50. P40 12 . 2
- 51. Event Set Value action 12 . 3
- 52. 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
- 54. P110 13 . 2
- 55. Don't forget: Page Items to Submit 13 . 3
- 56. Inspect Submission 13 . 4
- 57. P110_DEPTNO is sent 13 . 5
- 58. 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
- 59. Client Side Server Side AJAX 14 . 2
- 61. Demo: AJAXDemo: 15 . 1
- 62. Multiple Actions It's easy! 15 . 2
- 63. P215 15 . 3
- 64. Two Different DA 1. Assign Role 2. Remove Role 15 . 4
- 65. 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
- 66. 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
- 67. 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
- 68. Get the ID value this.triggeringElement.getAttribute("data-id"); this.triggeringElement.dataset.id 15 . 8
- 69. Get the ID value this.triggeringElement.dataset.id 15 . 9
- 70. 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
- 75. triggeringElement Available inside the DA JavaScript var el = this.triggeringElement; var $el = $(this.triggeringElement); 18 . 1
- 76. 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
- 77. Complex Page APEX 4.2 19 . 1
- 78. Complex Page APEX 5.0 19 . 2
- 79. Resources Demo [ ] ( ) Install & Review Packaged Application: "Sample Dynamic Actions" apex.oracle.com/pls/apex/f?p=90770 Download JavaScript.com dynamic-actions.com Easy Prototyping with triggeringElement rimblas.com/blog/2014/06/easy-prototyping-when-using-apex-da- triggeringelement/ 20 . 1
- 80. Sample Dynamic Actions 20 . 2
- 81. 20 . 3
- 82. @rimblas Q&A Practical Dynamic Actions Jorge Rimblas rimblas.com/blog 21
- 83. 22