Practic Pr al actic Dynamic Actions Intro Jorge Rimblas 1. 1

Transcription

1 Practical Dynamic Actions Intro Jorge Rimblas 1.1

2 Jorge Rimblas Senior APEX 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

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

5 Background 3. 1

6 Your static web pages are "alive" 3. 2

7 Ok, maybe not "alive", but they are not just static. 3.3

8 With JavaScript can affect the structure (this means changing the HTML) 3. 4

9 With JavaScript can affect the look (this means changing the CSS and Styles) 3. 5

10 Definitions 3. 6

11 Client Side 3. 7

12 Client Side Server Side 3. 8

13 Dynamic Actions are all about Client Side " activities " Events 4

14 Browser Events 5. 1

15 Change Page Load Click Scroll Resize Key Press 5. 2

16 Any Browser Event 5. 3

17 Custom Events! 5. 4

18 Browser Events

19 APEX 4.2 APEX

20 Actions 6. 1

21 Component Actions Hide/Show Disable/Enable Clear Set Value etc

22 Style Actions Set Class Remove Class Set Style 6. 3

23 Navigation Actions Submit Page Cancel Dialog Close Dialog APEX

24 Notification Actions Alert Confirm 6. 5

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 [Optional Client Side Condition] When True What to do? [Affected Elements] When False What to do? [Affected Elements] 7. 2

28 When event [Optional Client Side Condition] When True True Actions When False False Actions 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

34 Demo:Hide &Show 9. 1

35 Two Buttons to Hide/Show P

36 Builder Tabs 9. 3

37 P20

38 P20 With No Dynamic Actions 9. 4

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. 56

40 Disable & Enable Sometimes a good alternative to Hide & Show 9. 7

41 Demo:Hide &Show Conditional 10. 1

42 P25

43 Structure Condition 10. 2

44 Condition Detail Condition

45 Several Condition Options 10. 5

46 Demo:Set Value 11. 1

47 P30

48 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", "");

49 Demo: Key Release Uppercase Code 12. 1

50 P40

51 Set Value action Event

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

53 Demo:Change & Refresh 13. 1

54 P110

55 Don't forget: Page Items to Submit

56 Inspect Submission

57 P110_DEPTNO is sent

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 AJAX Server Side 14. 2

60 JavaScript SQL PL/SQL 14. 3

61 Demo: AJAX 15. 1

62 Multiple Actions It's easy! 15. 2

63 P215

64 Two Different DA Assign Role 1. Remove Role

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

71 Event Scope Static Dynamic Once 16. 1

72 Static Dynamic Once 16. 2

73 Advanced Dynamic Actions 17. 1

74 Built-in JavaScript Objects this.triggeringelement this.browserevent this.data 17. 2

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

78 Complex Page APEX

79 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

80 Sample Dynamic Actions 20. 2

81 20. 3

82 Q&A Practical Dynamic Actions Jorge rimblas.com/blog 21

83 22