>> How toTech-Forward >>

1. 1
>> How toTech-Forward >>
Kai Donato, Team Lead JavaScript
HROUG Spring Conference, 18th May 2022

2. 2
about me
Team Lead JavaScript @ MT AG
Architect, Project Leader and Developer (JavaScript & APEX)
Kai Donato

3. 3
> 300 Employees
> 50 APEX Experts
certified partner for
leading
technologies
Vendor neutral
Cross-Industry
Top Company for
Trainees & Students
Head Office
Ratingen
Branch Offices
Frankfurt am Main
Köln
München
Hamburg
> 125 Active Clients
> 44 Mio. Euro
Revenue in 2021
Privately-Owned
Founded
1994
Your partner for digital change
Individual IT solutions from one source
about MT AG

4. 5
Agenda
1. Confirm & Alert Basics
Pre APEX 21.2
2.
Differences
4.
Challenges
5.
Conclusion
6.
New in APEX 21.2
3.

5. 6
→ JavaScript calls
→ based on Browser different
→ Showing a text
→ Buttons OK and Cancel
→ Showing a text
→ User can click OK
Basics
Confirm
Alert
Confirm & Alert Basics

6. 7
Confirm Basics
confirm(“test“);
Firefox Edge (Chromium)
Chrome

7. 8
Alert Basics
alert(“test“);
Firefox Edge (Chromium)
Chrome

8. 9
Pre APEX 21.2
Confirm Delete

9. 10
Pre APEX 21.2 – JavaScript API
apex.page.confirm('Delete Department', 'DELETE‘);
or
apex.confirm('Delete Department', 'DELETE‘);
or with
apex.page.confirm("Save Department?", {
request:"SAVE",
set:{"P1_DEPTNO":10, "P1_EMPNO":5433}
});
Confirm

10. 11
New in APEX 21.2
Declarative Confirm for Buttons

11. 12
Confirmation „Style“
Danger
Warning
Information
Default
Success

12. 13
New in APEX 21.2
Declarative Confirm by Dynamic Action

13. 14
New in APEX 21.2
Declarative Confirm by Dynamic Action customized

14. 15
New in APEX 21.2
Declarative Alert by Dynamic Action

15. 16
New in APEX 21.2
• First
Declarative way of Dependencies

16. 17
New in APEX 21.2
Upgrade Application -> Migrate old confirm delete

17. 18
Differences
Legacy/Old
Declarative APEX 21.2
Legacy / Old APEX 21.2
no UI customization
=> Buttons, Dialog Position, Button Positions
fixed
Headline / Text / Icon / Button / Size / Position
customizable
Browser based UI Universal Theme Style
Blocking Callback functionality
Simple Syntax Complex Syntax

18. 19
Challenges
apex.message.confirm('Delete this?', function(okPressed) {
if (okPressed) {
alert('deleted');
}
});
apex.message.confirm('2nd Delete this?', function(okPressed) {
if (okPressed) {
alert('2nd deleted');
}
});
handling JavaScript confirm
if (confirm('Delete this?')) {
alert('is deleted');
}
if (confirm('2nd Delete this?')) {
alert('2nd is deleted');
}
Both Confirm Messages will directly be rendered
first confirm will „block“

19. 20
Challenges
apex.message.confirm('Delete this?',
function(okPressed) {
if (okPressed) {
alert('deleted');
}
});
apex.message.confirm('2nd Delete this?',
function(okPressed) {
if (okPressed) {
alert('2nd deleted');
}
});
handling JavaScript confirm
apex.message.confirm('Delete this?', function(okPressed) {
if (okPressed) {
alert('deleted’);
apex.message.confirm('2nd Delete this?',
function(okPressed) {
if (okPressed) {
alert('2nd deleted');
}
});
}
});

20. 21
Challenges
$('.t-Body-nav a') // click on navigation tree
.add($('a.t-Tabs-link')) // click on tabs
.on('click', function(event) {
if (ask_confirm_discard()) {
event.preventDefault(); // stop standard event
confirm_redirect(apex.lang.getMessage('APEX.WARN_ON_UNSAVED_CHANGES‘)
,event.currentTarget.href); // use currentTarget instead of target
}
});
calling „confirm“ from multiple Sources

21. 22
Challenges
function confirm_redirect(i_message, i_url, i_show_spinner = true) {
apex.message.confirm(i_message, function(okPressed) {
if (okPressed) {
redirect_page(i_url, i_show_spinner);
}
});
}
function redirect_page(i_url, i_show_spinner = true) {
if (i_show_spinner) {
setTimeout(function(){ spinner_show(); }, 1); // showSpinner
}
apex.navigation.redirect(i_url);
}
calling „confirm“ from multiple Sources

22. 23
Challenges
function my_redirect(pWhere) {
var origRedirect = apex.navigation.redirect;
console.log( "Before apex.navigation.redirect", pWhere );
apex.message.confirm("You sure?", function( okPressed ) {
if( okPressed ) {
origRedirect.apply(arguments);
}
});
}
apex.navigation.redirect = my_redirect;
Overwrite a the redirect

23. 24
Challenges
Combine custom JavaScript with declarative Confirm

24. 25
APEX 21.2 – JavaScript API
- apex.confirm (only alias)
- apex.page.confirm
- apex.message.confirm
see https://apex.oracle.com/jsapi

25. 26
JavaScript usage possible but different syntax
Customization possible
Complex JavaScript scenarios not easy
Look & Feel like other APEX components
Declarative usage for most Applications
Conclusion

26. 27
Thank you for listening
Questions?
Oliver Lemm
Business Unit Manager APEX
@OliverLem
m
https://www.linkedin.com/in/oliverlem
m