Oracle APEX presentation from APEX Alpe Adria conference held in Zagreb 2019. It's about the right way of using JavaScript in APEX.

1. Marko Gorički
April 2019., APEX Alpe Adria
JavaScript in APEX
DO IT RIGHT!

2. • 10+ years working with APEX 🥰
• Presenter at HROUG, SIOUG, KSCOPE, APEX
World, APEX Alpe Adria, APEX Connect
• apex.world Member of the Year 2017.
• APEX related blog on apexbyg.blogspot.comMarko Gorički
Software Consultant@BiLog
@mgoricki

3. • Software development company
• Technology focus Oracle (APEX)
• APEX development, consulting,
educations, plugin development
• APEX solutions
• HR management software
• Reinsurance

4. All thoughts are mine…

6. How to use JavaScript in APEX?

9. #1
Use Dynamic
Actions whenever
possible
• “declarative” / low code
• relatively small footprint
• extensible
• implicit debugging
• reusable
• simple to use

10. #2
Too much of
anything is the
beginning of a
mess
• a lot of Dynamic Actions per page
• too much inline JavaScript
Dorothy Draper

11. #2
Too much of
anything is the
beginning of a
mess
• a lot of Dynamic Actions per page
• too much inline JavaScript
Dorothy Draper

14. More Dynamic Actions
=
Greater overall size of a page
=
Slower page rendering
+
Harder to manage them in Page
Designer

15. #2
Too much of
anything is the
beginning of a
mess
Dorothy Draper
• a lot of Dynamic Actions per page
• too much inline JavaScript

16. <script type="text/javascript">
function fHelloWorld(){
alert(‘Hello World’);
}
</script>
• internal/inline/embedded
<script src=“./external.js”></script>
• external

17. • internal/inline/embedded
• external

18. • internal/inline/embedded
• external
• Dynamic Actions

23. …generally in APEX…

26. ..few minutes later..

28. Why inline JS is BAD?
•increases overall page size
•not reusable
•no minification
•no version control
•no error handling
•hard to maintain
•slower development
•no caching

29. #3
External
JavaScript is good
:)
• caching, file compression
• easier to maintain
• version control
• faster development time
• testing
• use of code/text editor
(IntelliSense)
• error handling
• minification

30. (1)Where to put static (JS) files?
(2)Where to reference them in APEX?
(3)How to write JS code?

31. (1)Where to put static (JS) files?
(2)Where to reference them in APEX?
(3)How to write JS code?

32. Mid Tier Browser / ClientDatabase / APEX

33. Mid Tier Browser / ClientDatabase / APEX
Custom Static Files

34. Mid Tier Browser / ClientDatabase / APEX
APEX Static Files
Custom Static Files

35. Mid Tier Browser / ClientDatabase / APEX
APEX Static Files
Web Server
Custom Static Files

36. Mid Tier Browser / ClientDatabase / APEX Web Server
Custom Static Files
APEX Static Files
over CDN

37. (1)Where to put static (JS) files?
(2)Where to reference them in APEX?
(3)How to write JS code?

38. Application
Shared Components > User Interfaces > User Interface
Details > JavaScript > File URLs
Theme Shared Components > Themes > Create > File URLs
Template Shared Components > Templates > JavaScript > File URLs
Plugin Shared Components > Plug-ins > Files
Page Page Designer > Page X > JavaScript > File URLs
Inline Using <script src=“#APP_IMAGES#external.js”></script>

40. (1)Where to put static (JS) files?
(2)Where to reference them in APEX?
(3)How to write JS code?

41. APEX JavaScript
API

42. APEX JavaScript
API

43. APEX JavaScript
API

44. APEX JavaScript
API
APEX JavaScript
API

45. APEX JavaScript
API
1 2 3

46. How I do it?

48. …is a tool that runs in the background watching for local static file
(e.g. JS, CSS) modifications, compiling them into a better format and
sending them back to your application instantly…
reduce development time
reduce repeating tasks
increase maintainability
better modularization
performance boost
enhanced teamwork
minification
concatenation
source mapping
error handling
easy file upload
browser synchronization

49. Source (SRC) folderFolder structure Distribution (DIST) folder

50. Source (SRC) folderFolder structure Distribution (DIST) folder

51. #5
Use JavaScript
Namespaces
• Namespace - container created to
hold a logical grouping
• Use them:
• to avoid naming collision
• not to pollute global namespace
• to organize code

52. Global Namespace
Stand-alone functions or variables
are polluting global namespace and
can lead to name collision
Global namespace should be
reserved for objects that have
system-wide relevance
function openModal(pDialogId, pDialogTriggerId, pSetFocusId, pClear ) {
$( "#" + pDialogId ).dialog("open");
}
theme42.js
aaapeks.custom.js
function openModal(pPageId){
var vUrl = apex.util.makeApplicationUrl({pageId:pPageId});
apex.navigation.openInNewWindow(vUrl);
};

54. 020_aaapeks.js
/**
* APEX Alpe Adria Namespace
* @namespace aaapeks
*/
aaapeks = {};

55. /**
* APEX Alpe Adria Namespace
* @namespace aaapeks
*/
aaapeks = {};
(function(aaapeks) {
/* namespace code */
})(aaapeks);
Self-invoking function
020_aaapeks.js

56. /**
* APEX Alpe Adria Namespace
* @namespace aaapeks
*/
aaapeks = {};
(function(aaapeks) {
aaapeks.publicFunction = function(){
console.log('This is public function');
};
})(aaapeks);
020_aaapeks.js
Public function

57. * APEX Alpe Adria Namespace
* @namespace aaapeks
*/
var aaapeks = {};
(function(aaapeks) {
var vPrivate; // Private variable;
function privateFunction () {
console.log('Private function');
}
aaapeks.publicFunction = function(){
console.log('Public function');
privateFunction ();
};
})(aaapeks);
020_aaapeks.js
Private functions and variables

58. * APEX Alpe Adria Namespace
* @namespace aaapeks
*/
var aaapeks = {};
(function(aaapeks, debug, $) {
var vPrivate; // Private variable;
function privateFunction () {
debug.log('Private function');
}
aaapeks.publicFunction = function(){
debug.log('Public function');
privateFunction ();
};
})(aaapeks, apex.debug, apex.jQuery);
020_aaapeks.js

59. * APEX Alpe Adria Namespace
* @namespace aaapeks
*/
var aaapeks = {};
(function(aaapeks, debug, $) {
function log(){
Array.prototype.unshift.call(arguments, '020_aaapeks.js');
debug.log.apply(debug,arguments);
};
function privateFunction () {
log('privateFunction', arguments);
};
aaapeks.publicFunction = function(){
log('publicFunction', arguments);
privateFunction ();
};
})(aaapeks, apex.debug, apex.jQuery);
020_aaapeks.js
Private log function

60. #6
Document your code
with JSDoc
• documentation generator for
JavaScript
• using specific comments and tags
• integration with popular text editor

61. (function(aaapeks, debug, $) {
/**
* Private Log function, adds filename as a prefix
* @param {object} arguments - default arguments object
*/
function log(){
Array.prototype.unshift.call(arguments, '020_aaapeks.js');
debug.log.apply(debug,arguments);
};
/**
* Private Function
* @param {string} pParam1 - string parameter
* @private
*/
function privateFunction (pParam1) {
log('privateFunction', arguments);
apex.message.alert(pParam1);
};
/**
* Public function
* @param {string} pParam1 - string parameter
* @example
* aaapeks.publicFunction('This is a test');

64. #7
Hybrid Approach
Dynamic Actions
• use Dynamic Actions whenever is
possible
• call JS custom code from external
files

66. Presentation Take Away
• use Dynamic Actions whenever possible, but don’t overuse them
• put custom JavaScript in external files
• use APEX Nitro to gain many benefits
• modularize JS into Namespaces and separate files
• document your JS code with JSDoc
• use hybrid approach

67. Questions?

68. Thank You!