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…

5.
How to use JavaScript in APEX?

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

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

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

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

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

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

12.
• internal/inline/embedded
• external

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

14.
…generally in APEX…

15.
..few minutes later..

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

17.
#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

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

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

20.
Mid Tier Browser / ClientDatabase / APEX

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

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

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

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

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

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

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

28.
APEX JavaScript
API

29.
APEX JavaScript
API

30.
APEX JavaScript
API

31.
APEX JavaScript
API
APEX JavaScript
API

32.
APEX JavaScript
API
1 2 3

33.
How I do it?

34.
…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

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

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

37.
#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

38.
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);
};

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

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

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

42.
* 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

43.
* 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

44.
* 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

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

46.
(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');

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

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

49.
Questions?

50.
Thank You!