How to insert an <iframe> in an Admin Panel <field>?

Question

I'm creating a custom module which displays Google Maps 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.

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.

I want to display this Preview Map in a new <field> (just below the field where the URL should be entered) and use a Map Preview <label>. The mockup below displays what I am trying to achieve.

To my modules system.xml file I have added the following 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>

And my MyNamespace/MyModule/Block/System/Config/Map.php contains the following 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>';
    }
}

This does render the Google Map in the Admin Panel and it also renders in the proper <group> but it is not loaded in the <field> that I want. This is an actual screen shot of the current situation.

I have tried every <frontend_type> I can think of....

So my question is: How can I insert an <iframe> in an Admin Panel <field>? Should I add something to my <frontend_model>?

Answer 1

With Varien_Data_Form_Element_Renderer_Interface you have the freedom do design the whole row as you want. Since you extend Mage_Adminhtml_Block_Abstract and return only the iframe in its render() method, this is what you get. To use the default table layout, extend Mage_Adminhtml_Block_Widget_Form_Renderer_Fieldset_Element instead, and use its default toHtml() method after modifying the element property to display the iframe.

Currently the render method will receive a Varien_Data_Form_Element_Link as parameter because that's the frontend_type, 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.

I suggest using label, then the render method looks like this:

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();
}

Note that you have to use after_element_html and leave value empty, because the value of a label is always escaped, while you can always use arbitrary HTML in after_element_html

Answer 2

Define a CSS class here and remove the width="100%".

return '<iframe style="border: 0;" src="'.$url.'" frameborder="0"'
    . ' width="100%" height="270"></iframe>'
;

example:

return '<iframe class="adminmap" style="border: 0;" src="' . $url
    . '" frameborder="0" width="270" height="270"></iframe>'
;

CSS (just guessing on width, and margins)

.adminmap { 
    width: 270px !important; 
    margin-left: 50px; 
}

You may also want to use text for frontend type instead of link.

You can find the different types here.

Answer 3

Well for that you can code in phtml file in design folder you dont need to take iframe as a field take textfield here's what i have done for video slider

1.

foreach ($collection as $item) {

                    $i = $i+1;
                     $item->getTitle($i);
                     $item->getUrl($i);
                     $temp = $item->getUrl();
                     $ytarray=explode("/", $temp);
                            $ytendstring=end($ytarray);
                            $ytendarray=explode("?v=", $ytendstring);
                            $ytendstring=end($ytendarray);
                            $ytendarray=explode("&", $ytendstring);
                            $ytcode=$ytendarray[0]; 
                    ?>";?>

2. this is my block code

 $fieldset->addField('url', 'text', array(
          'label'     => Mage::helper('videoslider')->__('Enter Video URL'),
          'class'     => 'required-entry',
          'style'     => 'width:700px;',
          'required'  => true,
          'name'      => 'url',
      ));

do this and you are all set! make this changes in view folder in your module and also make changes in saveaction in controller so you can display it in admin side too.