JavaScript 101 for APEX devs

Kscope26

Philipp Hartenfeller

| Aurora

$whoami

Philipp Hartenfeller

  • Düsseldorf, Germany
  • Oracle APEX Dev since 2016
  • Product Lead at United Codes
  • Web Dev and Databases

Agenda

(Shift + A: jump to Agenda, Shift + O: overview)

Don't Write JS
Unless You Have To

Start with Dynamic Actions

  • Dynamic Actions handle a huge % of interactivity — no JS needed
    • Show / Hide items and regions
    • Set item values
    • Enable / Disable items
    • Refresh reports, interactive grids, charts
    • Submit the page, redirect
    • Execute server-side code (AJAX callback)
  • Reach for Dynamic Actions first, always
  • Only drop to JavaScript when DAs can't express what you need

When You Actually Need JS

  • Complex conditional logic that spans multiple items
  • Reusable functions called from many places on the page
  • Custom plug-in development
  • Integrating third-party libraries (charts, maps, editors…)
  • Fine-grained DOM manipulation beyond what DAs offer

A Quick Heads-Up on Quirks

  • JavaScript has a reputation for being weird
  • But the gotchas are learnable once you understand the rules
    Like "1" + 1 returns "11"
  • By the end of this talk you'll know why and how to avoid it
  • Spoiler: it has everything to do with types

Browser DevTools

Opening DevTools

  • Windows / Linux: F12
  • Mac: Cmd + Option + I
  • Or: right-click anywhere → Inspect
  • Available in every modern browser
  • Tabs you'll use most:
    • Console — run JS, read errors
    • Elements — inspect and modify the DOM
    • Network — watch AJAX calls

The Console Tab

  • Allows you to run JavaScript code on the current page
  • JavaScript errors appear here in red with stack traces
  • Click any error line to jump to the source
  • apex.debug.log() output appears here too
  • Perfect for experimenting: test an apex.item() call before putting it in your DA

Elements & Network Tabs

  • Elements tab
    • See the live DOM
    • Inspect which CSS classes are applied
    • Live-edit styles to test changes without reloading
  • Network tab
    • Watch every AJAX request APEX makes
    • See the request payload: what parameters were sent
    • See the JSON response: what came back

Demo

DevTools walkthrough on an APEX page

Variables & Types

Variables: let and const

Types: The Foundation of the Quirks

  • Use const by default; change to let only when you need to reassign
  • Don't use var in new code

Types: The Foundation of the Quirks

Types: The Foundation of the Quirks

  • JS is dynamically typed: no type declarations, no compile-time check
  • TypeScript exists, but also just transpiles to JS

The + Operator Trap

Strict Equality & Type Conversion

Objects & Arrays

Functions

Function Basics

Arrow Functions

Template Literals

Getting & Setting
APEX Values

apex.item()

Item State

Dynamic Actions vs JS for Items

  • Use a Dynamic Action when:
    • Set a static value on an item
    • Show / hide based on a single condition
    • Disable based on a select list value
  • Write JavaScript when:
    • Logic depends on multiple items at once
    • You're computing a derived value (salary × bonus rate)
    • You want to loop over a set of items

Logging: apex.debug

jQuery in APEX

jQuery is Already Included

  • APEX bundles jQuery — $ is available on every APEX page, no install needed
  • jQuery lets you find DOM elements and interact with them
  • Avoid $('#P1_NAME').val() for APEX items, use apex.item

Selectors

DOM Manipulation & Events

Async & Server Calls

Talking to the Server: apex.server.process

  • apex.server.process is the APEX API to run server-side PL/SQL from JavaScript
  • It calls an Ajax Callback process (defined under your page or application) by name
  • You can send data to the server with the x01–x10 and f01–f50 parameters
  • The PL/SQL process does its work and returns a result, usually as JSON

Why Async Exists

  • JavaScript runs on a single thread, it can only do one thing at a time
  • If JS had to wait for a network call, the entire page would freeze
  • Solution: async operations: start the work, continue running, handle the result later
  • In APEX this means:
    • Every AJAX call to the server is asynchronous
    • Code after the call starts running before the response arrives

The Problem Illustrated

Everything needs to be in the success callback

Demo

Wrap it in a Promise

Now you can await it

Q&A

Scan for speaker evaluation

Speaker evaluation QR code

Thank you!

Speaker evaluation slide

philipp@united-codes.com