Magento – How to insert an in an Admin Panel <field></h1> </header> <p style='font-size:1.2em'><span class="mr-2 badge badge-success">admin</span><span class="mr-2 badge badge-info">frontend-model</span><span class="mr-2 badge badge-warning">iframe</span><span class="mr-2 badge badge-primary">magento-1</span><span class="mr-2 badge badge-danger">system-config</span></p> <div class="entry-content"> <p>I'm creating a custom module which displays <strong>Google Maps</strong> in the frontend of Magento. To get those maps the Admin would have to enter and save the URL of the map location in the Admin Panel. This all works fine. The URL is being saved in the database and the maps are displayed in the frontend of the store.</p> <p>But now I would like to display a preview of this map in the Admin Panel too. This will allow the Admin to easily check whether the correct URL is entered and saved.</p> <p>I want to display this <code>Preview Map</code> in a new <code><field></code> (just below the field where the URL should be entered) and use a Map Preview <code><label></code>. The mockup below displays what I am trying to achieve.</p> <p><img src="https://i.stack.imgur.com/V3BsM.gif" alt="enter image description here"/></p> <p>To my modules <code>system.xml</code> file I have added the following code:</p> <pre><code><fields> .... <preview translate="label comment"> <label>Map Preview</label> <frontend_type>link</frontend_type> <frontend_model>mymodule/system_config_map</frontend_model> <comment>Preview of your map</comment> <sort_order>20</sort_order> <show_in_default>1</show_in_default> <show_in_website>1</show_in_website> <show_in_store>1</show_in_store> </preview> </fields> </code></pre> <p>And my <code>MyNamespace/MyModule/Block/System/Config/Map.php</code> contains the following code:</p> </p> <pre><code>class MyNamespace_MyModule_Block_System_Config_Map extends Mage_Adminhtml_Block_Abstract implements Varien_Data_Form_Element_Renderer_Interface { public function render(Varien_Data_Form_Element_Abstract $element) { $url = Mage::helper('mymodule')->getMapUrl($store = null); return '<iframe style="border: 0;" src="'.$url.'" frameborder="0" width="100%" height="270"></iframe>'; } } </code></pre> <p>This does render the Google Map in the Admin Panel and it also renders in the proper <code><group></code> but it is not loaded in the <code><field></code> that I want. This is an actual screen shot of the current situation.</p> <p><img src="https://i.stack.imgur.com/DLSNJ.gif" alt="enter image description here"/></p> <p>I have tried every <code><frontend_type></code> I can think of….</p> <p>So my question is: How can I insert an <code><iframe></code> in an Admin Panel <code><field></code>? Should I add something to my <code><frontend_model></code>?</p> </div> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-8728145350222960" data-ad-slot="3177021931" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div id="comments" class="comments-area"> <div class="row"> <div class="col-12"> <div class="mt-3 border-bottom border-success"> <h4 class="text-success"><i class='fa fa-check-circle text-success mr-3'></i><span>Best Answer</span></h4> </div> <div class='bg-transparent mb-3'> <p>With <code>Varien_Data_Form_Element_Renderer_Interface</code> you have the freedom do design the whole row as you want. Since you extend <code>Mage_Adminhtml_Block_Abstract</code> and return <em>only</em> the iframe in its <code>render()</code> method, this is what you get. To use the default table layout, extend <code>Mage_Adminhtml_Block_Widget_Form_Renderer_Fieldset_Element</code> instead, and use its default <code>toHtml()</code> method after modifying the <em>element</em> property to display the iframe.</p> <p>Currently the <code>render</code> method will receive a <code>Varien_Data_Form_Element_Link</code> as parameter because that's the <code>frontend_type</code>, that you specified. But since you don't want to actually show an input field, you should change that to a frontend type where you can more easily replace the rendered output to arbitrary HTML.</p> <p>I suggest using <code>label</code>, then the render method looks like this:</p> <pre><code>public function render(Varien_Data_Form_Element_Abstract $element) { $url = Mage::helper('mymodule')->getMapUrl($store = null); $element->setData('value', ''); $element->setData('after_element_html', '<iframe style="border: 0;" src="'.$url.'" frameborder="0" width="100%" height="270"></iframe>'); return $this->toHtml(); } </code></pre> <p>Note that you have to use <code>after_element_html</code> and leave <code>value</code> empty, because the value of a label is always escaped, while you can always use arbitrary HTML in <code>after_element_html</code></p> </div> </div> <div class="col-4"></div> </div> </div> <div id="related-embeded" class="related-embeded-area"><div class="row"><div class="col-12"><div class="mt-3 border-bottom border-success"><h4 class="text-info"><i class='fa fa-check-circle text-info mr-3'></i><span>Related Solutions</span></h4></div><div class="mt-3 mb-3 border-bottom"><h5><a href='https://itecnotes.com/magento/magento-paypal-hosted-solution-iframe-wrong-language/'>Magento – Paypal Hosted Solution (Iframe) – Wrong Language</a></h5></div><div class='bg-transparent mb-3'> <p>in line 135 replace with:</p> <pre><code>'lc' => substr(Mage::app()->getLocale()->getLocaleCode(),3), </code></pre> <p>this will fetch you the set language for the store view. the output would be, for example: en_US. With substring you get US or IT.</p> <p>Make sure that in the Magento Backend in System > Configuration > General the Locale is set to "English (United States)" </p> </div><div class="mt-3 mb-3 border-bottom"><h5><a href='https://itecnotes.com/magento/magento-insert-a-iframe-to-the-domain-page-when-i-iframe-a-magento-home-page-i-get-blank-page/'>Magento Iframe Issue – Fixing Blank Page When Embedding Home Page</a></h5></div><div class='bg-transparent mb-3'> <p>Its not possible to had an Iframe in the HEAD of the page.</p> <p>Iframes are part of the BODY</p> <p>Try this</p> <pre><code><html> <head>...</head> <body> <iframe>...</iframe> ... </body> </html> </code></pre> <p>I think its possible to integrate any site on other site by frames...BUT its a DIRTY WAY...</p> </div></div></div></div> </div> <div class="col-12 col-md-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-8728145350222960" data-ad-slot="2985450245" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div class='mt-3 ml-4 border-bottom border-success'><h6><span>Related Topic</span></h6></div><ul class='list-group list-group-flush'><li class="list-group-item"><a href='https://itecnotes.com/magento/magento-admin-category-insert-thumbnail-field-has-disappeared/'>Magento 1.9.1.0 – Admin Category Insert Thumbnail Field Missing</a></li><li class="list-group-item"><a href='https://itecnotes.com/magento/magento-magento2-controller-response-for-iframe/'>Magento 2 Controller Response for Iframe</a></li><li class="list-group-item"><a href='https://itecnotes.com/magento/magento-magento-2-in-iframe/'>Magento – Magento 2 in iframe</a></li><li class="list-group-item"><a href='https://itecnotes.com/magento/magento-magento-2-showing-iframe-in-admin-configuration-panel/'>Magento 2: Showing iFrame in Admin Configuration Panel</a></li></ul> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-8728145350222960" data-ad-slot="8970621700" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <footer class="entry-footer"> </footer> </article> </div> </div> </div> </main> </div> </div> <footer id="colophon" class="site-footer"> <div class="site-info"> </div> </footer> </div> <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js?ver=1.12.4' id='jquery-js'></script> <script type='text/javascript' id='jquery-js-after'> jQuery(document).ready(function ($) { const elements = document.getElementsByClassName("js-post-notice"); while(elements.length > 0){ elements[0].parentNode.removeChild(elements[0]); } }) </script> <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js?ver=4.3.1' id='bootstrap4-js'></script> <script type='text/javascript' src='https://itecnotes.com/wp-includes/js/comment-reply.min.js?ver=5.9.10' id='comment-reply-js'></script> </body> </html>