Practical

Dynamic Actions – Intro

Jorge Rimblas

1.1
Jorge Rimblas
Senior APEX Consultant

@rimblas
rimblas.com/blog

Contributor to
"Expert Oracle Application Express, 2nd Edition"
with "Themes & Templates" chapter

Oracle DB since 1995

APEX since it was HTMLDB in 2004
Always involved in web technologies
jrimblas in OTN Forums
1.2
Age: 13 years!
Staff: 80+ employees
68 consultants/developers
2015: 60% Growth
APEX Solutions: 12 Years!
Largest APEX practice in North America
Oracle Center of Excellence

1.3
 Agenda
Browser events
Dynamic Action Structure
Demos
AJAX
Advanced Dynamic Actions

2
Background

3.1
Your static web pages are
"alive"

3.2
Ok, maybe not "alive", but
they are not just static.

3.3
With
JavaScript can affect the structure
(this means changing the HTML)

3.4
With
JavaScript can affect the look
(this means changing the CSS and Styles)

3.5
Definitions

3.6
Client Side

3.7
Client Side

Server Side

3.8
Dynamic Actions
are all about
Client Side
" activities " Events
4
Browser
Events

5.1
Change
Page Load
Click
Resize
Scroll
Key Press
5.2
Any Browser Event

5.3
Custom Events!

5.4
 Browser Events
4.2 5.0

5.5
APEX APEX
4.2 5.0

5.6
Actions

6.1
Component Actions
Hide/Show
Disable/Enable
Clear
Set Value
etc...

6.2
Style Actions
Set Class
Remove Class
Set Style

6.3
Navigation Actions
Submit Page
Cancel Dialog
APEX 5
Close Dialog

6.4
Notification Actions
Alert
Confirm

6.5
"Other" Actions
Execute JavaScript Code
More about
Execute PL/SQL Code
this later
Plugins
etc...

6.6
Anatomy of a
Dynamic Action

7.1
When event
[Optional Client Side Condition]

When
True What to do?
[Affected Elements]

When
False What to do?
[Affected Elements]

7.2
When event
[Optional Client Side Condition]

When
True True Actions

When
False False Actions

7.3
Anatomy of a
Dynamic Action
APEX view

8.1
Event/When?
When will the Dynamic Action
execute?

On click
On item (data) change
On Focus
On Page Load
On (any) browser event
etc

8.2
Where?
Where will the event happen?

8.3
Where?
Where will the event happen?

Item(s)
Button
Region
jQuery Selector
JavaScript Expression

8.4
APEX 4.2 vs APEX 5.0

8.5
Demo:Hide
Demo: Hide
&Show

9.1
Two Buttons to Hide/Show

P11

9.2
Builder Tabs

9.3
P20
 P20

With No Dynamic Actions

9.4
Show Text Item "Enter User"
Hide List Item "Select User"
Show "Switch to Select User" Button
Hide "Switch to Enter User" Button

Show List Item "Select User"

Hide Text Item "Enter User"
Show "Switch to Enter User" Button
Hide "Switch to Select User" Button

9.6
5
 Disable & Enable
Sometimes a good alternative to Hide & Show

9.7
Demo:Hide
Demo: Hide
&Show
•Conditional•
10 . 1
P25
Structure
Condition

10 . 2
 Condition Detail

Condition

10 . 4
3
Several Condition Options

10 . 5
Demo:Set
Demo: Set
Value

11 . 1
P30
 Often used as part of several True Actions.
Often used to set a hidden item
Hidden Item needs: "Value Protected" = No

Equivalent to $s API
$s("{ITEM}", "{VALUE}");

// Set to today
$s("P30_LOG_DATE", "&P30_TODAY.");

// Clear date
$s("P30_LOG_DATE", "");

11 . 3
2
Demo: Key
Release
Uppercase Code

12 . 1
P40
 Set Value action

Event

12 . 3
2
 Name to Uppercase Code
this.triggeringElement.value
.toUpperCase()
.replace(/\s+/g, '_')
.substring(0, 20);

1. Value of the triggeringElement

2. Make it uppercase
3. Globally Replace spaces (\s) with "_"
4. Only return the first 20 characters

12 . 4
Demo:Change
Demo: Change
&
Refresh
13 . 1
P110
Don't forget:
Page Items to Submit

13 . 3
2
Inspect Submission
P110_DEPTNO is sent

13 . 5
4
AJAX
asynchronous JavaScript and XML

group of interrelated Web development

techniques used on the client-side to create
asynchronous Web applications
Wikipedia: en.wikipedia.org/wiki/Ajax_(programming)

14 . 1
Client Side

AJAX

Server Side

14 . 2
JavaScript

SQL
PL/SQL

14 . 3
Demo: AJAX

15 . 1
Multiple Actions
It's easy!

15 . 2
P215
Two Different DA
1. Assign Role
2. Remove Role

15 . 4
3
 Assign Role

insert into app_user_roles

( username
1. Event: On Button Click , role_key)
2. Insert new role values
( :P215_USERNAME
3. Refresh Role Dropdown , :P215_ROLE_KEY);

4. Refresh Report

15 . 5
 Remove Role

delete
from app_user_roles
1. Event: On .deleteRow Click where id = :P215_UR_ID;
2. Delete role
3. Refresh Role Dropdown
4. Refresh Report

15 . 6
 Remove Role
1. Event: On .deleteRow Click
2. Ask for Confirmation
3. Use "Set Value" to save ID of clicked row
4. Delete role
5. Give Confirmation
6. Refresh Role Dropdown
7. Refresh Report

15 . 7
 Get the ID value

this.triggeringElement.getAttribute("data-id");

this.triggeringElement.dataset.id

15 . 8
 Get the ID value

this.triggeringElement.dataset.id

15 . 9
Dataset / Data Attributes
// data-id="{value}"
this.triggeringElement.dataset.id

// data-active="YES"
this.triggeringElement.dataset.active

// data-selected="YES"
this.triggeringElement.dataset.selected

// data-lineID="123"
this.triggeringElement.dataset.lineID

// data-rownum="2"
this.triggeringElement.dataset.rownum

15 . 10
Event Scope
Static
Dynamic
Once

16 . 1
Static
Dynamic
Once

16 . 2
Advanced
Dynamic
Actions
17 . 1
Built-in JavaScript Objects
this.triggeringElement

this.browserEvent

this.data

17 . 2
triggeringElement
Available inside the DA JavaScript
var el = this.triggeringElement;

var $el = $(this.triggeringElement);

18 . 1
 Name to Uppercase Code
this.triggeringElement.value
.toUpperCase()
.replace(/\s+/g, '_')
.substring(0, 20);

1. Value of the triggeringElement

2. Make it uppercase
3. Globally Replace spaces (\s) with "_"
4. Only return the first 20 characters

18 . 2
Complex Page
APEX 4.2

19 . 1
Complex Page
APEX 5.0

19 . 2
 Resources
Download Demo App (coming soon!)
JavaScript.com
dynamic-actions.com
Easy Prototyping with triggeringElement
(rimblas.com/blog/2014/06/easy-prototyping-when-using-apex-da-
triggeringelement/)

Install & Review Packaged Application:

"Sample Dynamic Actions"

20 . 1
Sample Dynamic Actions

20 . 2
20 . 3
Q&A
Practical Dynamic Actions
Jorge Rimblas
@rimblas
rimblas.com/blog

21
22