My Top 5 APEX JavaScript API's
13 likes7,375 views
The document discusses the use of JavaScript with Oracle APEX, emphasizing dynamic actions and jQuery integration for manipulation of web elements. It covers key functions like $v and $s for handling item values, as well as methods for traversing the DOM using find(), closest(), and each(). Additionally, it highlights the apex.server.process function for managing asynchronous processes and interacting with server-side data.
![Use jQuery selectors
• #ID
• .class
• element
• [attribute=value]
• :pseudo (:checked, :visible, etc.)
• Mix and match
15](https://image.slidesharecdn.com/top5jsapis-160513084919/85/My-Top-5-APEX-JavaScript-API-s-15-320.jpg)
![17
tdtd.t-Report-celltd.t-Report-cell[headers=CUST_CITY]
alert($(this.triggeringElement).text());](https://image.slidesharecdn.com/top5jsapis-160513084919/85/My-Top-5-APEX-JavaScript-API-s-17-320.jpg)
![$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](https://image.slidesharecdn.com/top5jsapis-160513084919/85/My-Top-5-APEX-JavaScript-API-s-20-320.jpg)
![$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](https://image.slidesharecdn.com/top5jsapis-160513084919/85/My-Top-5-APEX-JavaScript-API-s-22-320.jpg)
![23
#dept tbody td.t-Report-cell
$s("P4_DEPTNO",
$(this.triggeringElement)
.siblings(“[headers=DEPTNO]")
.text()
);](https://image.slidesharecdn.com/top5jsapis-160513084919/85/My-Top-5-APEX-JavaScript-API-s-23-320.jpg)
![31
$("#emp")
.find("td[headers=SAL]")
.each( function(){
if (parseInt($(this).text()) > 2500 ){
$(this).addClass("highSal");
}
});](https://image.slidesharecdn.com/top5jsapis-160513084919/85/My-Top-5-APEX-JavaScript-API-s-31-320.jpg)
![36
$("#emp")
.find("td[headers=JOB]")
.each( function(){
if ($(this).text() == "SALESMAN" ){
$(this).closest("tr").fadeOut(2000);
}
});](https://image.slidesharecdn.com/top5jsapis-160513084919/85/My-Top-5-APEX-JavaScript-API-s-36-320.jpg)
My Top 5 APEX JavaScript API's
- 2. 2
- 5. APEX GURU
- 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
- 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
- 49. @roelh [email protected] http://www.apexconsulting.nl Copyright © 2016 APEX Consulting 49