adding iframe with external html

Support
#1

After I had lost a lot of time and nerves trying to get some things in Generic/Web UI, I found out that CUBA has (not yet very well documented) Polymer support and I’ve taught that this could be the solution for my problems. And it really could be because I got it working, and in company with PDFKit, I even managed to generate nice PDFs reports and invoices using Polymer.

Now I just wanted to insert iframe that would show invoice preview while in Generic UI, but I don’t know how to add

frame

or

iframe

with external src (link to polymer page) into my XML screen.

Can anyone provide me some example for that? Like Screen with frame showing “google.com”? :slight_smile:

#2

Hello, Igor!

You can use Embedded component for such purpose. For example:


<window xmlns="http://schemas.haulmont.com/cuba/window.xsd"
        class="com.haulmont.sampler.web.ui.components.embedded.web.WebEmbeddedFrame">
    <layout>
        <embedded id="embedded"
                  width="100%"
                  height="100%"/>
    </layout>
</window>


public class WebEmbeddedFrame extends AbstractFrame {

    @Inject
    private Embedded embedded;

    @Override
    public void init(Map<String, Object> params) {
        try {
            embedded.setSource(new URL("https://doc.cuba-platform.com/manual-latest/index.html"));
        } catch (MalformedURLException e) {
            throw new RuntimeException(e.getMessage(), e);
        }
    }
}

Regards,

Gleb

1 Like
#3

Thank you Gleb. I’ve overlooked Embedded component while searching trough Studio’s components. Probably because I was expecting that component would have something like

src

property and that it would try to make our life simpler by enabling us to just enter URL to web page or image.

Unfortunately, that would be too simple and too intuitive… Another of Cuba’s rough edges. :frowning:

#4

Actually, you can use src. My previous example can be rewritten as follows:


<embedded id="embedded"
          height="100%"
          src="url://https://doc.cuba-platform.com/manual-latest/index.html"
          width="100%"/>

Or if you want to show an image:


<embedded id="image" src="theme://images/cuba-logo.png"/>

Regards,

Gleb

1 Like
#5

This one makes more sense :slight_smile:

Before I tried adding this kind of URLs to

src

but it didn’t work so I gave up.

Now when I look at it with inspector I see I got errors in the console because I’ve used url://https://www.google.com for testing, and that URL was blocked (sameorigin error).

CONSOLE:

Refused to display 'https://www.google.hr/?gfe_rd=cr&ei=i_3tWNvEM9SV8Qf22bbQCg' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
com.haulmont.cuba.web.toolkit.ui.WidgetSet-0.js:2629 GET https://www.google.hr/?gfe_rd=cr&ei=i_3tWNvEM9SV8Qf22bbQCg net::ERR_BLOCKED_BY_RESPONSE

When I use my local Polymer link or cuba-platform.com link then it works.

#6

You’re right, some web pages prevent showing them inside iframe for security reasons.