Dynamic Actions, the Hard Parts

Developer Advocate @ Oracle
April 21, 2020
Dan McGhan
the Hard Parts
Dynamic Actions

Need to learn the basics?
https://bit.ly/intro2js4apex https://bit.ly/js-con-apex

3
2
1
Using and debugging Ajax
Leveraging JavaScript hooks
Understanding DOM events
What are the hard parts of Dynamic Actions?

3
2
1

• Hypertext Markup Language (HTML)
- Markup language that browsers understand to render web pages
• Document Object Model (DOM)
- In memory object representation of the HTML document (DOM tree)
- API for working with and manipulating the memory structure
HTML vs. DOM

HTML document
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork

DOM Tree

What happens if you click an element in the DOM?

• Events are like triggers in the database
- Allow code to respond to user actions
• Browsers automatically trigger many events
• It’s possible to trigger custom events
- APEX makes use of this for framework and component events
What are events?

• on() typically binds event handlers directly on objects
Event binding with on()
$('.report-button').on('click', function() {
console.log('direct binding');
});

});
Document
Region container
Table
Row Button
Row Button

- Bindings are lost when elements are replaced
});
Document
Region container
Table
Row Button
Row Button

});
Document
Region container
Table
Row Button
Row Button
Document
Region container
Table
Row Button
Row Button

Event dispatching and DOM event flow
https://www.w3.org/TR/DOM-Level-3-Events/#event-flow

});
Document
Region container
Table
Row Button
Row Button
Document
Region container
Table
Row Button
Row Button

• on() accepts an optional selector for event delegation
- More efficient than many individual bindings; works if elements replaced
Event delegation with on()
});
$('#report').on('click', '.report-button', function() {
console.log('delegated binding');
});
Document
Region container
Table
Row Button
Row Button

• Dynamic Actions support event delegation too
• Look under the Dynamic Action’s Advanced settings
- Set Event Scope to Dynamic
- Static Container is optional (defaults to the document)
Event delegation with Dynamic Actions
Action
Dynamic Action

3
2
1

• Dynamic Actions can’t cover everything
• JavaScript hooks provide extended declarative capabilities
- Requires basic knowledge of JavaScript and jQuery to use
Learn to use the JavaScript hooks

• Dynamic Actions can’t cover everything
• JavaScript hooks provide extended declarative capabilities
- Requires basic knowledge of JavaScript and jQuery to use
Learn to use the JavaScript hooks
Action
Dynamic Action
When
+
Client-side Condition
Identification
+
Affected Elements

• Most common Event values
When > Event: Typical configuration
Action
Dynamic Action
Click Change
Page Load

• Most common Event values
When > Event: Typical configuration
Action
Dynamic Action
Click Change
Page Load
What if the event you
need isn’t listed?

• Set Event to Custom
- Exposes Custom Event
• Use Custom Event to
- Specify events not in the declarative list
- Bind to multiple events (space delimited)
When > Event: JavaScript hooks
Action
Dynamic Action

ButtonItem(s)
• Most common Selection Type values
When > Selection Type: Typical configuration
Action
Dynamic Action

ButtonItem(s)
• Most common Selection Type values
When > Selection Type: Typical configuration
Action
Dynamic Action
What if you want to select
something other than a
typical APEX component?

• Set Selection Type to jQuery Selector
- Exposes jQuery Selector
• Use jQuery Selector to
- Select elements not in the declarative list
- Can select multiple elements
When > Selection Type: JavaScript hooks
Action
Dynamic Action

• Set Selection Type to JavaScript Expression
- Exposes JavaScript Expression
• Use JavaScript Expression to
Action
Dynamic Action

Action
Dynamic Action
See the help for
useful info.

Action
Dynamic Action

• Most common Type values
Client-side Condition > Type: Typical configuration
Action
Dynamic Action
Item = Value Item != Value
Item is null Item is not null

• Most common Type values
Client-side Condition > Type: Typical configuration
Action
Dynamic Action
Item = Value Item != Value
Item is null Item is not null
What if your condition is more
complex than checking the
value of a single item?

• Set Type to JavaScript expression
• Use JavaScript expression to
- Work with any elements in the DOM
- Implement compound conditions
Client-side Condition > Type: JavaScript hooks
Action
Dynamic Action

Action
Dynamic Action
Can even be an IIFE!
🤪

Action
Dynamic Action
Or a global function call.
😐

• Declarative options are great for common interactions
- Hide/show, enable/disable, refresh, etc.
• Execute JavaScript can do anything not available out of the box
Action: Execute JavaScript
Action
Dynamic Action

3
2
1

• Short for Asynchronous JavaScript and XML
- Sometimes it’s not asynchronous and these days JSON is more popular
• It’s a technique to communicate with the server without a full-page refresh
What is Ajax?
Web Browser Web Server Database
HTTP GET Data
HTML fragment/JSON data
JS
Code

• Just like regular Ajax, only easier
- Oracle Database does the server-side processing
- Dynamic Actions can handle many use cases
- Programmatic options are provided for edge cases
• Must send correct data in to get correct data out
Ajax in APEX

• Three out-of-the-box actions do Ajax
- Refresh
- Set Value
- Execute PL/SQL
• Each provides a means of sending data to the server
- Look for “Items to Submit”
Ajax with Dynamic Actions

• Used to refresh several components
- Regions: Classic Report, Interactive Report, and Interactive Grid
- Items: those with Cascading LOV support
• Don’t forget to send in the correct data
- Page Items to Submit is part of the region definition
- Not necessary for items
Refresh

• Used to set the value of an item/element
• SQL and PL/SQL options do implicit Ajax
- SQL Statement, PL/SQL Expression, PL/SQL Function Body
• Don’t forget to send in the correct data
- Items to Submit is in the action under the SQL or PL/SQL code
Set Value

• Like Set Value but a bit more generic
• Has Wait For Result option to control flow through subsequent actions
• Don’t forget to send and retrieve in the correct data
- Items to Submit and Items to Return are in the action under the SQL or PL/SQL code
Execute PL/SQL

• Look for the data being sent to the server
Debug using the Network tab of your Developer Tools

Live Demo

Ready to learn more?
https://bit.ly/intro2js4apex https://bit.ly/js-con-apex
Follow me on Twitter
twitter.com/dmcghan

Dynamic Actions, the Hard Parts

Dynamic Actions, the Hard Parts

More Related Content

What's hot (20)

Similar to Dynamic Actions, the Hard Parts (20)

Recently uploaded (20)

Dynamic Actions, the Hard Parts