Oracle Application Express (APEX) is shipped with several JavaScript libraries, jQuery being the best known one of them. And on top of these libraries the APEX Development Team created their own. You probably used a couple of these API's already, like $s, $v etc. But there are way more and some of them are extremely useful. But first you have to be aware they exists. And secondly you have to know how to use the properly. This session will cover the most valuable JavaScript API's with some real world examples. Most developers stick to the standard $s and $v functions - even without knowing there is also a $v2 and $s can have more parameters. The focus will be on the namespaced apex API's, like apex.server.process and apex.event.trigger.

1. APEX JAVASCRIPT API’s

2. 2

5. APEX GURU

6. 6
Why JavaScript?

7. We’ve got Dynamic Actions !
• Declarative
• Fire on Event
• Action (True / False)
7

8. But even in Dynamic Actions …
• Conditions
8

9. But even in Dynamic Actions …
• Conditions
• Elements
9

10. But even in Dynamic Actions …
• Conditions
• Elements
• Settings
10

11. But even in Dynamic Actions …
• Conditions
• Elements
• Settings
• Code
11

12. 12

13. Copyright © 2016 APEX Consulting
$
13

14. $ ?
• $ = jQuery
• jQuery = apex.jQuery (2.1.3)
• You can install another version (e.g. 2.2.0) and use $
• Use jQuery selectors
14

15. Use jQuery selectors
• #ID
• .class
• element
• [attribute=value]
• :pseudo (:checked, :visible, etc.)
• Mix and match
15

16. Mix and match
• Click on a city and show
the name in a popup
16

17. 17
tdtd.t-Report-celltd.t-Report-cell[headers=CUST_CITY]
alert($(this.triggeringElement).text());

19. Copyright © 2016 APEX Consulting
$v, $v2, $s
19

20. $v
• Don’t use # for ID, just the ID itself - or a DOM node
$v(“#P4_FIELD”)
$v(“P4_FIELD”)
$(“P4_FIELD”).val()
$(“#P4_FIELD").val()
$v($(“input[name=p_t01]"))
$v($("input[name=p_t01]")[0])
20

21. $v2
• Same as $v for single value items
• Checkbox, Shuttle, Multi Select
• $v(“P4_CHECKBOX”)
• $v2(“P4_CHECKBOX”)
• Count selected items
21

22. $s
• Sets an item value
• $s(“P4_FIELD”,”ABCDE”)
• $s(“P4_CHECKBOX","10:30")
• $s(“P4_CHECKBOX”,[“20","40"])
• Click on report row to set ID
• For current record (http://roelhartman.blogspot.nl/2015/09/implementing-current-record-indicator.html)
• For master / detail sync
22

23. 23
#dept tbody td.t-Report-cell
$s("P4_DEPTNO",
$(this.triggeringElement)
.siblings(“[headers=DEPTNO]")
.text()
);

24. 24

25. 25

26. Copyright © 2016 APEX Consulting
apex.jQuery.find (et.al)
Traversing
26

27. Traversing
• find() / children()
• closest() / parent() / parents()
• each()
27

28. find() / children()
• Looks “down” in the DOM
• One level vs. all levels
• Get me a list of all Salary data in the #emp report:
28

29. closest() / parent() / parents()
• Look “up” in the DOM
• One level / First found / All levels
• “Highlight Current Record”:
• After Refresh of :
$(".rowlink").closest("div.t-Region, div.t-IRR-region”)
• Set the class of the current TR
$(“.rowlink”).closest(“tr”).addClass(“clickable”);
29

30. each()
• Execute a function for each matched element
• Example : Highlight all high salaries
30

31. 31
$("#emp")
.find("td[headers=SAL]")
.each( function(){
if (parseInt($(this).text()) > 2500 ){
$(this).addClass("highSal");
}
});

32. 32

34. Copyright © 2016 APEX Consulting
apex.event.trigger
34

35. apex.event.trigger
• Start a Dynamic Action using standard events
apex.event.trigger(“#emp”, “apexrefresh”)
apex.event.trigger(window, “apexwindowresized”)
• or … create your custom event
apex.event.trigger(“#emp”, “fireSalesmen”)
35

36. 36
$("#emp")
.find("td[headers=JOB]")
.each( function(){
if ($(this).text() == "SALESMAN" ){
$(this).closest("tr").fadeOut(2000);
}
});

37. 37

38. 38

39. Copyright © 2016 APEX Consulting
apex.server.process
39

40. apex.server.process
• Fast
• Total control
• Solves “async issues”
40

41. 41

42. apex.server.process
• Fast
• Total control
• Solves “async issues”
• http://api.jquery.com/jquery.ajax/
42

43. apex.server.process
• Fast
• Total control
• Solves “async issues”
• http://api.jquery.com/jquery.ajax/
43

44. 44
apex.server.process(
'getEMP',
{ x01 : $(this.triggeringElement).data().action,
pageItems: "#P7_EMPNO"
},
{ success: function(data){
showEmp(data);
}
}
);

45. 45
apex.server.process(
'getEMP',
{ x01 : (this.browserEvent.which==39)?"N":"P",
pageItems: "#P7_EMPNO"
},
{ success: function(data){
showEmp(data);
}
}
);

46. 46

47. My Top 5
5. apex.jQuery / $
4. $v, $v2, $s
3. apex.jQuery.find et.al.
2. apex.event.trigger
1. apex.server.process
47

48. Q& A@roelh
roel@apexconsulting.nl
http://www.apexconsulting.nl

49. @roelh
roel@apexconsulting.nl
http://www.apexconsulting.nl
Copyright © 2016 APEX Consulting
49