![Page 1: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/1.jpg)
1 . 1
PracticalPracticalDynamic Actions – IntroDynamic Actions – IntroJorge Rimblas
![Page 2: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/2.jpg)
1 . 2
Jorge RimblasJorge 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
![Page 3: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/3.jpg)
1 . 3
Age: 13 years!Staff: 80+ employees68 consultants/developers2015: 60% GrowthAPEX Solutions: 12 Years!Largest APEX practice in North AmericaOracle Center of Excellence
![Page 4: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/4.jpg)
2
AgendaAgendaBrowser events
Dynamic Action Structure
Demos
AJAX
Advanced Dynamic Actions
![Page 5: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/5.jpg)
3 . 1
BackgroundBackground
![Page 6: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/6.jpg)
3 . 2
Your static web pages areYour static web pages are"alive""alive"
![Page 7: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/7.jpg)
3 . 3
Ok, maybe not "alive", butOk, maybe not "alive", butthey are not just static.they are not just static.
![Page 8: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/8.jpg)
3 . 4
JavaScript can affect the structureJavaScript can affect the structure(this means changing the HTML)
WithWith
![Page 9: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/9.jpg)
3 . 5
JavaScript can affect the lookJavaScript can affect the look(this means changing the CSS and Styles)
WithWith
![Page 10: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/10.jpg)
3 . 6
DefinitionsDefinitions
![Page 11: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/11.jpg)
3 . 7
Client SideClient Side
![Page 12: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/12.jpg)
3 . 8
Client Side
Server Side
![Page 13: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/13.jpg)
4
Dynamic ActionsDynamic Actionsare all aboutare all aboutClient SideClient Side" "" " EventsEventsactivitiesactivities
![Page 14: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/14.jpg)
5 . 1
BrowserBrowserEventsEvents
![Page 15: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/15.jpg)
5 . 2
ClickClick
ChangeChange
Key PressKey Press
Page LoadPage Load
ScrollScroll ResizeResize
![Page 16: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/16.jpg)
5 . 3
Any Browser EventAny Browser Event
![Page 17: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/17.jpg)
5 . 4
Custom Events!Custom Events!
![Page 18: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/18.jpg)
5 . 5
Browser EventsBrowser Events4.2 5.0
![Page 19: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/19.jpg)
5 . 6
APEX
4.2
APEX
5.0
![Page 20: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/20.jpg)
6 . 1
ActionsActions
![Page 21: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/21.jpg)
6 . 2
Component ActionsComponent ActionsHide/ShowDisable/EnableClearSet Valueetc...
![Page 22: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/22.jpg)
6 . 3
Style ActionsStyle ActionsSet ClassRemove ClassSet Style
![Page 23: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/23.jpg)
6 . 4
Navigation ActionsNavigation ActionsSubmit PageCancel DialogClose Dialog APEX 5
![Page 24: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/24.jpg)
6 . 5
Notification ActionsNotification ActionsAlertConfirm
![Page 25: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/25.jpg)
6 . 6
"Other" Actions"Other" ActionsExecute JavaScript Code Execute PL/SQL CodePluginsetc...
More aboutthis later
![Page 26: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/26.jpg)
7 . 1
Anatomy of aAnatomy of aDynamic ActionDynamic Action
![Page 27: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/27.jpg)
7 . 2
When eventWhen event
What to do?What to do?
What to do?What to do?
WhenWhenTrueTrue
WhenWhenFalseFalse
[Optional Client Side Condition]
[Affected Elements]
[Affected Elements]
![Page 28: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/28.jpg)
7 . 3
When eventWhen event
True ActionsTrue Actions
False ActionsFalse Actions
WhenWhenTrueTrue
WhenWhenFalseFalse
[Optional Client Side Condition]
![Page 29: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/29.jpg)
8 . 1
Anatomy of aAnatomy of aDynamic ActionDynamic ActionAPEX view
![Page 30: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/30.jpg)
8 . 2
Event/When?Event/When?When will the Dynamic Actionexecute?
On click
On item (data) change
On Focus
On Page Load
On (any) browser event
etc
![Page 31: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/31.jpg)
8 . 3
Where?Where?Where will the event happen?
![Page 32: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/32.jpg)
8 . 4
Where?Where?Where will the event happen?
Item(s)
Button
Region
jQuery Selector
JavaScript Expression
![Page 33: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/33.jpg)
8 . 5
APEX 4.2 vs APEX 5.0APEX 4.2 vs APEX 5.0
![Page 34: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/34.jpg)
9 . 1
Demo:Demo:HideHide&Show&Show
![Page 35: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/35.jpg)
9 . 2
Two Buttons to Hide/ShowTwo Buttons to Hide/Show
P11
![Page 36: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/36.jpg)
9 . 3
Builder TabsBuilder Tabs
![Page 37: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/37.jpg)
P20
![Page 38: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/38.jpg)
9 . 4
With No Dynamic ActionsWith No Dynamic ActionsP20
![Page 39: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/39.jpg)
9 . 5
9 . 6
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
![Page 40: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/40.jpg)
9 . 7
Disable & EnableDisable & EnableSometimes a good alternative to Hide & Show
![Page 41: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/41.jpg)
10 . 1
Demo:Demo:HideHide&Show&Show
•Conditional••Conditional•
![Page 42: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/42.jpg)
P25
![Page 43: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/43.jpg)
10 . 2
StructureStructure
Condition
![Page 44: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/44.jpg)
10 . 3
10 . 4
Condition DetailCondition Detail
Condition
![Page 45: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/45.jpg)
10 . 5
Several Condition OptionsSeveral Condition Options
![Page 46: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/46.jpg)
11 . 1
Demo:Demo:SetSetValueValue
![Page 47: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/47.jpg)
P30
![Page 48: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/48.jpg)
11 . 2
11 . 3
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
![Page 49: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/49.jpg)
12 . 1
Demo:Demo:
Uppercase CodeUppercase Code
KeyKeyReleaseRelease
![Page 50: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/50.jpg)
P40
![Page 51: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/51.jpg)
12 . 2
12 . 3
Event
Set Value action
![Page 52: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/52.jpg)
12 . 4
Name to Uppercase CodeName 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
![Page 53: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/53.jpg)
13 . 1
Demo:Demo:ChangeChange&&RefreshRefresh
![Page 54: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/54.jpg)
P110
![Page 55: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/55.jpg)
13 . 2
13 . 3
Don't forget:Don't forget:Page Items to SubmitPage Items to Submit
![Page 56: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/56.jpg)
Inspect SubmissionInspect Submission
![Page 57: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/57.jpg)
13 . 4
13 . 5
P110_DEPTNO is sentP110_DEPTNO is sent
![Page 58: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/58.jpg)
14 . 1
AJAXAJAXasynchronous JavaScript and XML
group of interrelated Web developmenttechniques used on the client-side to createasynchronous Web applications
Wikipedia: en.wikipedia.org/wiki/Ajax_(programming)
![Page 59: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/59.jpg)
14 . 2
Client Side
Server Side
AJAX
![Page 60: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/60.jpg)
14 . 3
JavaScript
SQL
PL/SQL
![Page 61: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/61.jpg)
15 . 1
Demo: AJAXDemo: AJAXDemo:Demo:
![Page 62: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/62.jpg)
15 . 2
Multiple ActionsMultiple ActionsIt's easy!
![Page 63: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/63.jpg)
P215
![Page 64: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/64.jpg)
15 . 3
15 . 4
Two Different DATwo Different DA1. Assign RoleAssign Role2. Remove RoleRemove Role
![Page 65: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/65.jpg)
15 . 5
Assign RoleAssign 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);
![Page 66: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/66.jpg)
15 . 6
Remove RoleRemove Role
1. Event: On .deleteRow Click2. Delete role3. Refresh Role Dropdown4. Refresh Report
delete from app_user_roles where id = :P215_UR_ID;
![Page 67: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/67.jpg)
15 . 7
Remove RoleRemove 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
![Page 68: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/68.jpg)
15 . 8
Get the ID valueGet the ID value
this.triggeringElement.getAttribute("data-id");
this.triggeringElement.dataset.id
![Page 69: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/69.jpg)
15 . 9
Get the ID valueGet the ID value
this.triggeringElement.dataset.id
![Page 70: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/70.jpg)
15 . 10
Dataset / Data AttributesDataset / 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
![Page 71: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/71.jpg)
16 . 1
Event ScopeEvent ScopeStaticStaticDynamicDynamicOnceOnce
![Page 72: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/72.jpg)
16 . 2
StaticStaticDynamicDynamicOnceOnce
![Page 73: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/73.jpg)
17 . 1
AdvancedAdvancedDynamicDynamicActionsActions
![Page 74: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/74.jpg)
17 . 2
this.triggeringElement
this.browserEvent
this.data
Built-in JavaScript ObjectsBuilt-in JavaScript Objects
![Page 75: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/75.jpg)
18 . 1
triggeringElementtriggeringElementAvailable inside the DA JavaScript
var el = this.triggeringElement;
var $el = $(this.triggeringElement);
![Page 76: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/76.jpg)
18 . 2
Name to Uppercase CodeName 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
![Page 77: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/77.jpg)
19 . 1
Complex PageComplex PageAPEX 4.2
![Page 78: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/78.jpg)
19 . 2
Complex PageComplex PageAPEX 5.0
![Page 79: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/79.jpg)
20 . 1
ResourcesResourcesDownload Demo App (coming soon!)Download Demo App (coming soon!)
()
Install & Review Packaged Application:Install & Review Packaged Application:"Sample Dynamic Actions""Sample Dynamic Actions"
JavaScript.comJavaScript.com
dynamic-actions.comdynamic-actions.comEasy Prototyping with triggeringElementrimblas.com/blog/2014/06/easy-prototyping-when-using-apex-da-
triggeringelement/
![Page 80: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/80.jpg)
20 . 2
Sample Dynamic ActionsSample Dynamic Actions
![Page 81: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/81.jpg)
20 . 3
![Page 82: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/82.jpg)
21
@rimblas
Q&AQ&APractical Dynamic ActionsPractical Dynamic Actions
Jorge Rimblas
rimblas.com/blog
![Page 83: Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item "Select User" Show "Switch to Select User" Button Hide "Switch to Enter User" Button](https://reader033.vdocument.in/reader033/viewer/2022042110/5e8ab2d839fa834d757bf1cd/html5/thumbnails/83.jpg)
22