Embed Size (px)
Citation preview
APEX JAVASCRIPT API’s
2
APEX GURU
6
Why JavaScript?
We’ve got Dynamic Actions !
• Declarative
• Fire on Event
• Action (True / False)
7
But even in Dynamic Actions …
• Conditions
8
But even in Dynamic Actions …
• Conditions
• Elements
9
But even in Dynamic Actions …
• Conditions
• Elements
• Settings
10
But even in Dynamic Actions …
• Conditions
• Elements
• Settings
• Code
11
12
Copyright © 2016 APEX Consulting
$
13
$ ?
• $ = jQuery
• jQuery = apex.jQuery (2.1.3)
• You can install another version (e.g. 2.2.0) and use $
• Use jQuery selectors
14
Use jQuery selectors
• #ID
• .class
• element
• [attribute=value]
• :pseudo (:checked, :visible, etc.)
• Mix and match
15
Mix and match
• Click on a city and show the name in a popup
16
17
tdtd.t-Report-celltd.t-Report-cell[headers=CUST_CITY]
alert($(this.triggeringElement).text());
Copyright © 2016 APEX Consulting
$v, $v2, $s
19
$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
$v2
• Same as $v for single value items
• Checkbox, Shuttle, Multi Select
• $v(“P4_CHECKBOX”)
• $v2(“P4_CHECKBOX”)
• Count selected items
21
$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
#dept tbody td.t-Report-cell
$s("P4_DEPTNO", $(this.triggeringElement) .siblings(“[headers=DEPTNO]") .text() );
24
25
Copyright © 2016 APEX Consulting
apex.jQuery.find (et.al)Traversing
26
Traversing
• find() / children()
• closest() / parent() / parents()
• each()
27
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
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
each()
• Execute a function for each matched element
• Example : Highlight all high salaries
30
31
$("#emp") .find("td[headers=SAL]") .each( function(){ if (parseInt($(this).text()) > 2500 ){ $(this).addClass("highSal"); } });
32
Copyright © 2016 APEX Consulting
apex.event.trigger
34
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
$("#emp") .find("td[headers=JOB]") .each( function(){ if ($(this).text() == "SALESMAN" ){ $(this).closest("tr").fadeOut(2000); } });
37
38
Copyright © 2016 APEX Consulting
apex.server.process
39
apex.server.process
• Fast
• Total control
• Solves “async issues”
40
41
apex.server.process
• Fast
• Total control
• Solves “async issues”
• http://api.jquery.com/jquery.ajax/
42
apex.server.process
• Fast
• Total control
• Solves “async issues”
• http://api.jquery.com/jquery.ajax/
43
44
apex.server.process( 'getEMP', { x01 : $(this.triggeringElement).data().action, pageItems: "#P7_EMPNO" }, { success: function(data){ showEmp(data); } } );
45
apex.server.process( 'getEMP', { x01 : (this.browserEvent.which==39)?"N":"P", pageItems: "#P7_EMPNO" }, { success: function(data){ showEmp(data); } } );
46
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
http://www.apexconsulting.nl
Copyright © 2016 APEX Consulting49
