PracticalDynamic Actions – IntroJorge Rimblas

1 . 1

Jorge RimblasSenior APEX Consultant

@rimblasrimblas.com/blog

Oracle DB since 1995APEX since it was HTMLDB in 2004Always involved in web technologiesjrimblas in OTN Forums

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

1 . 2

Age: 13 years!Staff: 80+ employees68 consultants/developers2015: 60% GrowthAPEX Solutions: 12 Years!Largest APEX practice in North AmericaOracle Center of Excellence

1 . 3

AgendaBrowser 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", butthey are not just static.

3 . 3

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

With

3 . 4

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

With

3 . 5

Definitions

3 . 6

Client Side

3 . 7

Client Side

Server Side

3 . 8

Dynamic Actionsare all aboutClient Side" " Eventsactivities

4

BrowserEvents

5 . 1

Click

Change

Key Press

Page Load

Scroll Resize

5 . 2

Any Browser Event

5 . 3

Custom Events!

5 . 4

Browser Events4.2 5.0

5 . 5

APEX

4.2

APEX

5.0

5 . 6

Actions

6 . 1

Component ActionsHide/ShowDisable/EnableClearSet Valueetc...

6 . 2

Style ActionsSet ClassRemove ClassSet Style

6 . 3

Navigation ActionsSubmit PageCancel DialogClose Dialog APEX 5

6 . 4

Notification ActionsAlertConfirm

6 . 5

"Other" ActionsExecute JavaScript Code Execute PL/SQL CodePluginsetc...

More aboutthis later

6 . 6

Anatomy of aDynamic Action

7 . 1

When event

What to do?

What to do?

WhenTrue

WhenFalse

[Optional Client Side Condition]

[Affected Elements]

[Affected Elements]

7 . 2

When event

True Actions

False Actions

WhenTrue

WhenFalse

[Optional Client Side Condition]

7 . 3

Anatomy of aDynamic ActionAPEX view

8 . 1

Event/When?When will the Dynamic Actionexecute?

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&Show

9 . 1

Two Buttons to Hide/Show

P11

9 . 2

Builder Tabs

9 . 3

P20

9 . 4

With No Dynamic ActionsP20

9 . 5

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

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

9 . 6

Disable & EnableSometimes a good alternative to Hide & Show

9 . 7

Demo:Hide&Show

•Conditional•10 . 1

P25

10 . 2

Structure

Condition

10 . 3

Condition Detail

Condition

10 . 4

Several Condition Options

10 . 5

Demo:SetValue

11 . 1

P30

11 . 2

Often used as part of several True Actions.Often used to set a hidden item

Hidden Item needs: "Value Protected" = No

$s("{ITEM}", "{VALUE}");

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

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

Equivalent to $s API

11 . 3

Demo:

Uppercase Code

KeyRelease

12 . 1

P40

12 . 2

Event

Set Value action

12 . 3

Name to Uppercase Code

this.triggeringElement.value .toUpperCase() .replace(/\s+/g, '_') .substring(0, 20);

1. Value of the triggeringElement2. Make it uppercase3. Globally Replace spaces (\s) with "_"4. Only return the first 20 characters

12 . 4

Demo:Change&Refresh

13 . 1

P110

13 . 2

Don't forget:Page Items to Submit

13 . 3

Inspect Submission

13 . 4

P110_DEPTNO is sent

13 . 5

AJAXasynchronous JavaScript and XML

group of interrelated Web developmenttechniques used on the client-side to createasynchronous Web applications

Wikipedia: en.wikipedia.org/wiki/Ajax_(programming)

14 . 1

Client Side

Server Side

AJAX

14 . 2

JavaScript

SQL

PL/SQL

14 . 3

Demo: AJAXDemo:

15 . 1

Multiple ActionsIt's easy!

15 . 2

P215

15 . 3

Two Different DA1. Assign Role2. Remove Role

15 . 4

Assign Role

1. Event: On Button Click2. Insert new role3. Refresh Role Dropdown4. Refresh Report

insert into app_user_roles ( username , role_key)values ( :P215_USERNAME , :P215_ROLE_KEY);

15 . 5

Remove Role

1. Event: On .deleteRow Click2. Delete role3. Refresh Role Dropdown4. Refresh Report

delete from app_user_roles where id = :P215_UR_ID;

15 . 6

Remove Role1. Event: On .deleteRow Click2. Ask for Confirmation3. Use "Set Value" to save ID of clicked row4. Delete role5. Give Confirmation6. Refresh Role Dropdown7. 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 ScopeStaticDynamicOnce

16 . 1

StaticDynamicOnce

16 . 2

AdvancedDynamicActions

17 . 1

this.triggeringElement

this.browserEvent

this.data

Built-in JavaScript Objects

17 . 2

triggeringElementAvailable 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 triggeringElement2. Make it uppercase3. Globally Replace spaces (\s) with "_"4. Only return the first 20 characters

18 . 2

Complex PageAPEX 4.2

19 . 1

Complex PageAPEX 5.0

19 . 2

ResourcesDemo [ ]

( )

Install & Review Packaged Application:"Sample Dynamic Actions"

apex.oracle.com/pls/apex/f?p=90770 Download

JavaScript.com

dynamic-actions.comEasy Prototyping with triggeringElement

rimblas.com/blog/2014/06/easy-prototyping-when-using-apex-da-

triggeringelement/

20 . 1

Sample Dynamic Actions

20 . 2

20 . 3

@rimblas

Q&APractical Dynamic Actions

Jorge Rimblas

rimblas.com/blog

21

22