Embed Size (px)
Citation preview
WWW.TRANSFER-SOLUTIONS.COM
Speaker Mirela Georgescu
Date 22-03-2018
Email [email protected]
Iframeswhen necessity calls for them
2
“In a close relationship with our clients we deliver excellent, full-service IT in order tohelp them to reach their goals.”
Core values
Collaboration Respect Pragmatism Loyalty
Employees150+
APEX experts20+
Founded1995
Profile
€15+ Mln. revenue
2
APEX Services
Training
Developmentmobile & web
apps(App factory)
Applicationmanagement
Cloud / on-premise
management
■ Pragmatic approach
■ Instant business value
■ Complete support forimplementation possible
3 3
Intro
When?
Why?
What?
How?
Communication
Add iframes
Iframes and APEX
Save
Success- and error messages
Conclusions
4
Outline
5
Intro - Why this presentation?
Transfer Solutions
APEX special interest group
Stupid iframes.
So difficult and
don’t communicate
with each other.You’re the voice
of reason.
The beginning: 2014
APEX 4.2
Requirements: 3 mouse clicks
good performance
good UX
Intro - History of the solution
6
Options:
PL/SQL region
Too complex
Dialog
Not user friendly
Performance drawbacks
Iframes
Use APEX functionalities
Divide the complexity
Intro - History of the solution
7
Same-origin policy
Bits of information, scarce in combination with APEX
http://hardlikesoftware.com/weblog/2015/05/22/apex-5-0-dialogs/
http://www.aaronpeters.nl/blog/iframe-loading-techniques-performance
Team
Intro - History of the solution
8
9
Experience in jQuery / JavaScript
Best practices
Time
When – start with iframes?
Why – using iframes?
10
Lots of information
Fast
No effort (not many clicks)
Dynamic content
Inter-dependent content
11
What – are iframes?
<body>
…
<iframe name="frameFRM_3061" src="f?p=100:100:15730403415750::NO:1152:P1152_ID:3061&cs=DkVa…" >
#document
<html>
….
</html>
</iframe>
<iframe name="frameFRM_3062“ src="f?p=100:100:15730403415750::NO:1152:P1152_ID:3062&cs=3dna8FU…" >
#document
<html>
……
</html>
</iframe>
…
</body>
Pages
PARENT
IFRAME
IFRAME
$(‘iframe[name=“frameFRM_3061”]’)
window.frames[‘frameFRM_3061’]
12
Communication - HTML, APEX items
Iframe to parent:
parent.$(‘.t-Body')
parent.$(‘#P100_EDITABLE_FRAME_ID')
Parent to iframe:
$(‘iframe[name=“IFR_123”]’).contents().find('.t-Body')
Iframe to iframe: through the parent
parent.$(‘iframe[name=“IFR_123”]’).contents().find(‘.t-Body’)
PARENT
IFRAME
IFRAME
13
Communication – functions, triggers
Iframe to parent:
parent.p0100.handleRefreshRegions();
parent.$(‘#P100_VESSEL').trigger(‘apexrefresh’);
Parent to iframe:
window.frames['frameFRM_3061'].apex.submit(‘SAVE’);
window.frames['framevarious'].$('#P1043_RLN_ID').trigger('apexrefresh');
Iframe to iframe, through the parent:
parent.window.frames['frameFRM_3061'].apex.item('P100_RLN_ID').setValue(‘123’);
Alternative: jQuery postMessage plugin at https://github.com/cowboy/jquery-postmessage/ custom events
PARENT
IFRAME
IFRAME
15
How - to add iframes?
select t.id
....
, apex_page.get_url
( p_page => m.app_page_id
, p_clear_cache => m.app_page_id
, p_items => ‘P‘ || m.app_page_id || ‘_ID‘
, p_values => t.id
) as url
, ‘FRM’ || t.id as frame_name
...
from my_table t
, my_metadata m
...
1. Create url using apex_page.get_url
APEX Report Region
Row 1
Row 2
Row 3
16
How - to add frames?
<div class="framediv" data-iframe-url="#URL#"
data-iframe-name="#FRAME_NAME#"></div>
2. Add the url as “data” attribute
In the template
Column HTML expression
APEX Report Region
Row 1
Row 2
Row 3
17
How - to add frames?
3. Dynamic action to add the iframe element
$(document).on('click', '#ROTATION_REPORT .myArrowDown', function () {
var frameDif = $(this).closest('.framediv');
if (frameDif .find(‘iframe’).length == 0){
frameDif.html('<iframe name="frame' + frameDif.data('name')
+ '" class="hidden" src="' + frameDif.data('url') + '"></iframe>');
}
});
APEX Report Region
Row 1<iframe name="frame1" src="http://...1"></iframe>
Row 2
Row 3
18
How - to add frames?
4. Resize iframe when finished loading
APEX Report Region
Row 1
Row 2
Row 3
APEX iframe page
APEX Report Region
Row 1<iframe name="frame1" src="http://...1"></iframe>
Row 2
Row 3
19
How - to add frames?
4. Resize iframe when finished loading
var iframes = {
"triggerResize" : function(){
var e = $.Event( "resizeIframe", { iframeName: window.name } );
parent.$('body').trigger(e);
}}
var parentPage = {
"bindResizeIframe" : function(){
$('body').on('resizeIframe', function(e){
var iFrame = $('iframe[name="' + e.iframeName + '"]');
var winHeight = iFrame.contents().find('.t-Body').height();
iFrame.closest('. framediv ').height(winHeight);
});
}}
Called in IFRAME page template: Execute when Page Loads
iframes.triggerResize();
Called in PARENT page: On load
parentPage.bindResizeIframe();
IFRAME PARENT
20
Iframes and APEX
Page load use APEX Automatic Row Fetch (recommended)
do not use “set_session_state”
Page process
use custom PL/SQL process
do not use Automatic Row Processing
(Current version of data in database has changed since user initiated update process)
Developer Toolbar
21
Save – apex.submit
All iframes “at the same time”
On click of a button, as the user requests it
Possible browser performance issues
? Asynchronicity
Previous iframe
Good performance
Save “on the fly”, non-invasive success messages
Have to know which iframe to submit
Have to know when to submit
? No save action from user needed
22
Success- and error messages
1. All iframes “at the same time”
On success
On error (scroll? focus?)
On both
In the iframe
In the parent
Mini success message
2. Previous iframe
On success
? On error
23
Conclusions
Large part of APEX can be used, should be used as much as possible
? Iframes can be tamed, but it comes with challenges
No low-code application, Javascript / jQuery knowledge needed
We proudly present our 3 sessions at APEX World 2018!
Thursday13:30 Dynamical OracleJET charts – interactive and compelling, but also complex
(Lidewij van den Brink)
14:30 Iframes – when necessity calls for them(Mirela Georgescu)
Friday10:40 Oracle APEX goes viral – the antidote to the most commonly used word processor
(Arjan van der Palen, Pieter Brekelmans (NVIC))
25
Questions
Answers
CONSULTING | MANAGED SERVICES | EDUCATION
WWW.TRANSFER-SOLUTIONS.COM
