Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item...
Transcript of Practical Dynamic Actions – Intro - Amazon S3 · 9.5 6 Show Text Item "Enter User" Hide List Item...
1 . 1
PracticalPracticalDynamic Actions – IntroDynamic Actions – IntroJorge Rimblas
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
1 . 3
Age: 13 years!Staff: 80+ employees68 consultants/developers2015: 60% GrowthAPEX Solutions: 12 Years!Largest APEX practice in North AmericaOracle Center of Excellence
2
AgendaAgendaBrowser events
Dynamic Action Structure
Demos
AJAX
Advanced Dynamic Actions
3 . 1
BackgroundBackground
3 . 2
Your static web pages areYour static web pages are"alive""alive"
3 . 3
Ok, maybe not "alive", butOk, maybe not "alive", butthey are not just static.they are not just static.
3 . 4
JavaScript can affect the structureJavaScript can affect the structure(this means changing the HTML)
WithWith
3 . 5
JavaScript can affect the lookJavaScript can affect the look(this means changing the CSS and Styles)
WithWith
3 . 6
DefinitionsDefinitions
3 . 7
Client SideClient Side
3 . 8
Client Side
Server Side
4
Dynamic ActionsDynamic Actionsare all aboutare all aboutClient SideClient Side" "" " EventsEventsactivitiesactivities
5 . 1
BrowserBrowserEventsEvents
5 . 2
ClickClick
ChangeChange
Key PressKey Press
Page LoadPage Load
ScrollScroll ResizeResize
5 . 3
Any Browser EventAny Browser Event
5 . 4
Custom Events!Custom Events!
5 . 5
Browser EventsBrowser Events4.2 5.0
5 . 6
APEX
4.2
APEX
5.0
6 . 1
ActionsActions
6 . 2
Component ActionsComponent ActionsHide/ShowDisable/EnableClearSet Valueetc...
6 . 3
Style ActionsStyle ActionsSet ClassRemove ClassSet Style
6 . 4
Navigation ActionsNavigation ActionsSubmit PageCancel DialogClose Dialog APEX 5
6 . 5
Notification ActionsNotification ActionsAlertConfirm
6 . 6
"Other" Actions"Other" ActionsExecute JavaScript Code Execute PL/SQL CodePluginsetc...
More aboutthis later
7 . 1
Anatomy of aAnatomy of aDynamic ActionDynamic Action
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]
7 . 3
When eventWhen event
True ActionsTrue Actions
False ActionsFalse Actions
WhenWhenTrueTrue
WhenWhenFalseFalse
[Optional Client Side Condition]
8 . 1
Anatomy of aAnatomy of aDynamic ActionDynamic ActionAPEX view
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
8 . 3
Where?Where?Where will the event happen?
8 . 4
Where?Where?Where will the event happen?
Item(s)
Button
Region
jQuery Selector
JavaScript Expression
8 . 5
APEX 4.2 vs APEX 5.0APEX 4.2 vs APEX 5.0
9 . 1
Demo:Demo:HideHide&Show&Show
9 . 2
Two Buttons to Hide/ShowTwo Buttons to Hide/Show
P11
9 . 3
Builder TabsBuilder Tabs
P20
9 . 4
With No Dynamic ActionsWith No Dynamic ActionsP20
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
9 . 7
Disable & EnableDisable & EnableSometimes a good alternative to Hide & Show
10 . 1
Demo:Demo:HideHide&Show&Show
•Conditional••Conditional•
P25
10 . 2
StructureStructure
Condition
10 . 3
10 . 4
Condition DetailCondition Detail
Condition
10 . 5
Several Condition OptionsSeveral Condition Options
11 . 1
Demo:Demo:SetSetValueValue
P30
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
12 . 1
Demo:Demo:
Uppercase CodeUppercase Code
KeyKeyReleaseRelease
P40
12 . 2
12 . 3
Event
Set Value action
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
13 . 1
Demo:Demo:ChangeChange&&RefreshRefresh
P110
13 . 2
13 . 3
Don't forget:Don't forget:Page Items to SubmitPage Items to Submit
Inspect SubmissionInspect Submission
13 . 4
13 . 5
P110_DEPTNO is sentP110_DEPTNO is sent
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)
14 . 2
Client Side
Server Side
AJAX
14 . 3
JavaScript
SQL
PL/SQL
15 . 1
Demo: AJAXDemo: AJAXDemo:Demo:
15 . 2
Multiple ActionsMultiple ActionsIt's easy!
P215
15 . 3
15 . 4
Two Different DATwo Different DA1. Assign RoleAssign Role2. Remove RoleRemove Role
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);
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;
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
15 . 8
Get the ID valueGet the ID value
this.triggeringElement.getAttribute("data-id");
this.triggeringElement.dataset.id
15 . 9
Get the ID valueGet the ID value
this.triggeringElement.dataset.id
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
16 . 1
Event ScopeEvent ScopeStaticStaticDynamicDynamicOnceOnce
16 . 2
StaticStaticDynamicDynamicOnceOnce
17 . 1
AdvancedAdvancedDynamicDynamicActionsActions
17 . 2
this.triggeringElement
this.browserEvent
this.data
Built-in JavaScript ObjectsBuilt-in JavaScript Objects
18 . 1
triggeringElementtriggeringElementAvailable inside the DA JavaScript
var el = this.triggeringElement;
var $el = $(this.triggeringElement);
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
19 . 1
Complex PageComplex PageAPEX 4.2
19 . 2
Complex PageComplex PageAPEX 5.0
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/
20 . 2
Sample Dynamic ActionsSample Dynamic Actions
20 . 3
21
@rimblas
Q&AQ&APractical Dynamic ActionsPractical Dynamic Actions
Jorge Rimblas
rimblas.com/blog
22