Iframes when necessity calls for them Speaker Mirela Georgescu Date 22-03-2018 Email mirela.georgescu@transfer-solutions.com WWW.TRANSFER-SOLUTIONS.COM
Profile 1995 Founded In a close relationship with our clients we deliver excellent, full-service IT in order to help them to reach their goals. 15+ Mln. revenue 150+ Employees 20+ APEX experts Core values Collaboration Respect Pragmatism Loyalty 2 2
APEX Services Cloud / onpremise management Training Pragmatic approach Instant business value Complete support for implementation possible Application management Development mobile & web apps (App factory) 3 3
Outline Intro When? Why? What? How? Communication Add iframes Iframes and APEX Save Success- and error messages Conclusions 4
Intro - Why this presentation? You re the voice of reason. Stupid iframes. So difficult and don t communicate with each other. Transfer Solutions APEX special interest group 5
Intro - History of the solution The beginning: 2014 APEX 4.2 Requirements: 3 mouse clicks good performance good UX 6
Intro - History of the solution Options: PL/SQL region Dialog Iframes Too complex Not user friendly Performance drawbacks Use APEX functionalities Divide the complexity 7
Intro - History of the solution 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 8
When start with iframes? Experience in jquery / JavaScript Best practices Time 9
Why using iframes? Lots of information Fast No effort (not many clicks) Dynamic content Inter-dependent content 10
What are iframes? Pages <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> PARENT </html> </iframe> </body> $( iframe[name= framefrm_3061 ] ) window.frames[ framefrm_3061 ] IFRAME IFRAME 11
Communication - HTML, APEX items PARENT Iframe to parent: parent.$(.t-body') parent.$( #P100_EDITABLE_FRAME_ID') IFRAME IFRAME 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 ) 12
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'); PARENT IFRAME IFRAME 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 13
How - to add iframes? 1. Create url using apex_page.get_url 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 APEX Report Region Row 1 Row 2 Row 3, FRM t.id as frame_name... from my_table t, my_metadata m... 15
How - to add frames? 2. Add the url as data attribute In the template Column HTML expression APEX Report Region Row 1 Row 2 Row 3 <div class="framediv" data-iframe-url="#url#" data-iframe-name="#frame_name#"></div> 16
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') APEX Report Region Row 1 <iframe name="frame1" src="http://...1"></iframe> Row 2 } + '" class="hidden" src="' + framedif.data('url') + '"></iframe>'); Row 3 }); 17
How - to add frames? 4. Resize iframe when finished loading APEX Report Region Row 1 <iframe name="frame1" src="http://...1"></iframe> Row 2 APEX Report Region Row 1 APEX iframe page Row 3 Row 2 Row 3 18
How - to add frames? 4. Resize iframe when finished loading IFRAME var iframes = { "triggerresize" : function(){ var e = $.Event( "resizeiframe", { iframename: window.name } ); PARENT var parentpage = { "bindresizeiframe" : function(){ $('body').on('resizeiframe', function(e){ }} parent.$('body').trigger(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(); 19
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 20
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 21
Success- and error messages In the iframe In the parent Mini success message 1. All iframes at the same time On success On error (scroll? focus?) 2. Previous iframe On success? On error On both 22
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 23
We proudly present our 3 sessions at APEX World 2018! Thursday 13:30 Dynamical OracleJET charts interactive and compelling, but also complex (Lidewij van den Brink) 14:30 Iframes when necessity calls for them (Mirela Georgescu) Friday 10:40 Oracle APEX goes viral the antidote to the most commonly used word processor (Arjan van der Palen, Pieter Brekelmans (NVIC))
Questions Answers CONSULTING MANAGED SERVICES EDUCATION WWW.TRANSFER-SOLUTIONS.COM 25