iframes - nloug.nl · speaker mirela georgescu date 22-03-2018 email...
TRANSCRIPT
![Page 1: Iframes - nloug.nl · Speaker Mirela Georgescu Date 22-03-2018 Email mirela.georgescu@transfer-solutions.com Iframes when necessity calls for them. 2 “In a close relationship with](https://reader033.vdocument.in/reader033/viewer/2022041808/5e55c6bad9043a18043a5fd9/html5/thumbnails/1.jpg)
WWW.TRANSFER-SOLUTIONS.COM
Speaker Mirela Georgescu
Date 22-03-2018
Email [email protected]
Iframeswhen necessity calls for them
![Page 2: Iframes - nloug.nl · Speaker Mirela Georgescu Date 22-03-2018 Email mirela.georgescu@transfer-solutions.com Iframes when necessity calls for them. 2 “In a close relationship with](https://reader033.vdocument.in/reader033/viewer/2022041808/5e55c6bad9043a18043a5fd9/html5/thumbnails/2.jpg)
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
![Page 3: Iframes - nloug.nl · Speaker Mirela Georgescu Date 22-03-2018 Email mirela.georgescu@transfer-solutions.com Iframes when necessity calls for them. 2 “In a close relationship with](https://reader033.vdocument.in/reader033/viewer/2022041808/5e55c6bad9043a18043a5fd9/html5/thumbnails/3.jpg)
APEX Services
Training
Developmentmobile & web
apps(App factory)
Applicationmanagement
Cloud / on-premise
management
■ Pragmatic approach
■ Instant business value
■ Complete support forimplementation possible
3 3
![Page 4: Iframes - nloug.nl · Speaker Mirela Georgescu Date 22-03-2018 Email mirela.georgescu@transfer-solutions.com Iframes when necessity calls for them. 2 “In a close relationship with](https://reader033.vdocument.in/reader033/viewer/2022041808/5e55c6bad9043a18043a5fd9/html5/thumbnails/4.jpg)
Intro
When?
Why?
What?
How?
Communication
Add iframes
Iframes and APEX
Save
Success- and error messages
Conclusions
4
Outline
![Page 5: Iframes - nloug.nl · Speaker Mirela Georgescu Date 22-03-2018 Email mirela.georgescu@transfer-solutions.com Iframes when necessity calls for them. 2 “In a close relationship with](https://reader033.vdocument.in/reader033/viewer/2022041808/5e55c6bad9043a18043a5fd9/html5/thumbnails/5.jpg)
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.
![Page 6: Iframes - nloug.nl · Speaker Mirela Georgescu Date 22-03-2018 Email mirela.georgescu@transfer-solutions.com Iframes when necessity calls for them. 2 “In a close relationship with](https://reader033.vdocument.in/reader033/viewer/2022041808/5e55c6bad9043a18043a5fd9/html5/thumbnails/6.jpg)
The beginning: 2014
APEX 4.2
Requirements: 3 mouse clicks
good performance
good UX
Intro - History of the solution
6
![Page 7: Iframes - nloug.nl · Speaker Mirela Georgescu Date 22-03-2018 Email mirela.georgescu@transfer-solutions.com Iframes when necessity calls for them. 2 “In a close relationship with](https://reader033.vdocument.in/reader033/viewer/2022041808/5e55c6bad9043a18043a5fd9/html5/thumbnails/7.jpg)
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
![Page 8: Iframes - nloug.nl · Speaker Mirela Georgescu Date 22-03-2018 Email mirela.georgescu@transfer-solutions.com Iframes when necessity calls for them. 2 “In a close relationship with](https://reader033.vdocument.in/reader033/viewer/2022041808/5e55c6bad9043a18043a5fd9/html5/thumbnails/8.jpg)
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
![Page 9: Iframes - nloug.nl · Speaker Mirela Georgescu Date 22-03-2018 Email mirela.georgescu@transfer-solutions.com Iframes when necessity calls for them. 2 “In a close relationship with](https://reader033.vdocument.in/reader033/viewer/2022041808/5e55c6bad9043a18043a5fd9/html5/thumbnails/9.jpg)
9
Experience in jQuery / JavaScript
Best practices
Time
When – start with iframes?
![Page 10: Iframes - nloug.nl · Speaker Mirela Georgescu Date 22-03-2018 Email mirela.georgescu@transfer-solutions.com Iframes when necessity calls for them. 2 “In a close relationship with](https://reader033.vdocument.in/reader033/viewer/2022041808/5e55c6bad9043a18043a5fd9/html5/thumbnails/10.jpg)
Why – using iframes?
10
Lots of information
Fast
No effort (not many clicks)
Dynamic content
Inter-dependent content
![Page 11: Iframes - nloug.nl · Speaker Mirela Georgescu Date 22-03-2018 Email mirela.georgescu@transfer-solutions.com Iframes when necessity calls for them. 2 “In a close relationship with](https://reader033.vdocument.in/reader033/viewer/2022041808/5e55c6bad9043a18043a5fd9/html5/thumbnails/11.jpg)
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’]
![Page 12: Iframes - nloug.nl · Speaker Mirela Georgescu Date 22-03-2018 Email mirela.georgescu@transfer-solutions.com Iframes when necessity calls for them. 2 “In a close relationship with](https://reader033.vdocument.in/reader033/viewer/2022041808/5e55c6bad9043a18043a5fd9/html5/thumbnails/12.jpg)
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
![Page 13: Iframes - nloug.nl · Speaker Mirela Georgescu Date 22-03-2018 Email mirela.georgescu@transfer-solutions.com Iframes when necessity calls for them. 2 “In a close relationship with](https://reader033.vdocument.in/reader033/viewer/2022041808/5e55c6bad9043a18043a5fd9/html5/thumbnails/13.jpg)
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
![Page 14: Iframes - nloug.nl · Speaker Mirela Georgescu Date 22-03-2018 Email mirela.georgescu@transfer-solutions.com Iframes when necessity calls for them. 2 “In a close relationship with](https://reader033.vdocument.in/reader033/viewer/2022041808/5e55c6bad9043a18043a5fd9/html5/thumbnails/14.jpg)
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
![Page 15: Iframes - nloug.nl · Speaker Mirela Georgescu Date 22-03-2018 Email mirela.georgescu@transfer-solutions.com Iframes when necessity calls for them. 2 “In a close relationship with](https://reader033.vdocument.in/reader033/viewer/2022041808/5e55c6bad9043a18043a5fd9/html5/thumbnails/15.jpg)
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
![Page 16: Iframes - nloug.nl · Speaker Mirela Georgescu Date 22-03-2018 Email mirela.georgescu@transfer-solutions.com Iframes when necessity calls for them. 2 “In a close relationship with](https://reader033.vdocument.in/reader033/viewer/2022041808/5e55c6bad9043a18043a5fd9/html5/thumbnails/16.jpg)
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
![Page 17: Iframes - nloug.nl · Speaker Mirela Georgescu Date 22-03-2018 Email mirela.georgescu@transfer-solutions.com Iframes when necessity calls for them. 2 “In a close relationship with](https://reader033.vdocument.in/reader033/viewer/2022041808/5e55c6bad9043a18043a5fd9/html5/thumbnails/17.jpg)
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
![Page 18: Iframes - nloug.nl · Speaker Mirela Georgescu Date 22-03-2018 Email mirela.georgescu@transfer-solutions.com Iframes when necessity calls for them. 2 “In a close relationship with](https://reader033.vdocument.in/reader033/viewer/2022041808/5e55c6bad9043a18043a5fd9/html5/thumbnails/18.jpg)
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
![Page 19: Iframes - nloug.nl · Speaker Mirela Georgescu Date 22-03-2018 Email mirela.georgescu@transfer-solutions.com Iframes when necessity calls for them. 2 “In a close relationship with](https://reader033.vdocument.in/reader033/viewer/2022041808/5e55c6bad9043a18043a5fd9/html5/thumbnails/19.jpg)
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
![Page 20: Iframes - nloug.nl · Speaker Mirela Georgescu Date 22-03-2018 Email mirela.georgescu@transfer-solutions.com Iframes when necessity calls for them. 2 “In a close relationship with](https://reader033.vdocument.in/reader033/viewer/2022041808/5e55c6bad9043a18043a5fd9/html5/thumbnails/20.jpg)
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
![Page 21: Iframes - nloug.nl · Speaker Mirela Georgescu Date 22-03-2018 Email mirela.georgescu@transfer-solutions.com Iframes when necessity calls for them. 2 “In a close relationship with](https://reader033.vdocument.in/reader033/viewer/2022041808/5e55c6bad9043a18043a5fd9/html5/thumbnails/21.jpg)
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
![Page 22: Iframes - nloug.nl · Speaker Mirela Georgescu Date 22-03-2018 Email mirela.georgescu@transfer-solutions.com Iframes when necessity calls for them. 2 “In a close relationship with](https://reader033.vdocument.in/reader033/viewer/2022041808/5e55c6bad9043a18043a5fd9/html5/thumbnails/22.jpg)
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
![Page 23: Iframes - nloug.nl · Speaker Mirela Georgescu Date 22-03-2018 Email mirela.georgescu@transfer-solutions.com Iframes when necessity calls for them. 2 “In a close relationship with](https://reader033.vdocument.in/reader033/viewer/2022041808/5e55c6bad9043a18043a5fd9/html5/thumbnails/23.jpg)
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))
![Page 24: Iframes - nloug.nl · Speaker Mirela Georgescu Date 22-03-2018 Email mirela.georgescu@transfer-solutions.com Iframes when necessity calls for them. 2 “In a close relationship with](https://reader033.vdocument.in/reader033/viewer/2022041808/5e55c6bad9043a18043a5fd9/html5/thumbnails/24.jpg)
25
Questions
Answers
CONSULTING | MANAGED SERVICES | EDUCATION
WWW.TRANSFER-SOLUTIONS.COM