Question
How to embed a webpage in a Pega section?
I have been asked to display a report from Tableau in a Pega portal. I imagine creating a section and/or control that takes a URL as a parameter and displays the content from that page in the section. It's the inverse of using Pega mashup/IAC to include Pega in another webpage.
I checked what I could include in a Section, and in the UI gallery. I didn't see anything obvious. Before I really dig, I'm hoping that someone can point me in a direction. Does anyone know how I might do this?
Bonus question: if I do this, will the embedded webpage be responsive?
Cheers,
Elliott
Accepted Solution
Pegasystems Inc.
AU
Hi Davis,
Please find the configuration screen below,
You can see pega login screen in Iframe in my screenshots, because Iframe url origins and the parent web page both have same origin.
For google.com they use X-Frame-Options to sameorgin in Http Header, due to that nothing got displayed. You can check the error in your chrome console.
1. Parent section
2. Included non OOTB section
Pegasystems Inc.
US
Frankly I have no idea about tableau reports, but when I looked at this link
https://onlinehelp.tableau.com/current/pro/desktop/en-us/embed.html
it seems to me that it offers you a way/s to embed tableau views into a webpage, a pega section using a html fragment for example. Have you seen this already? Thanks.
Sunny
Crestone Technology
MX
I will try the HTML fragment, Sunny, and I'll report back here. Thanks for the recommendation.
Crestone Technology
MX
I read that article. Good find! I thought of this as a Pega problem, not a Tableau problem, so it didn't occur to me to search the Tableau website. Unfortunately the code from the Tableau site didn't work - oops - but that's a Tableau problem. I can pursue that separately.
Pegasystems Inc.
AU
Hi Elliot,
Yes you can display a webpage inside your pega section, by including a non OOTB section which is having Iframe tag pointed to you external website, Refer to the image below.
But there can be certain limitation while using Iframe as now a days most websites follows below security standards.
1. Your external website may not allow displaying their web-page content through an Iframe, they may restrict by using 'X-Frame-Options' in http headers to 'deny'
Or
2. They may allow web content display only for same origin in Iframes. by setting 'X-Frame-Options' to 'sameorigin'.
Bonus Answer:
if I do this, will the embedded webpage be responsive? : It entirely depends on how the external websites manages their responsive behavior, As you can see in the screenshot below, in 700*350 px iframe view, pega login page adapted responsiveness.
Hi Elliot,
Yes you can display a webpage inside your pega section, by including a non OOTB section which is having Iframe tag pointed to you external website, Refer to the image below.
But there can be certain limitation while using Iframe as now a days most websites follows below security standards.
1. Your external website may not allow displaying their web-page content through an Iframe, they may restrict by using 'X-Frame-Options' in http headers to 'deny'
Or
2. They may allow web content display only for same origin in Iframes. by setting 'X-Frame-Options' to 'sameorigin'.
Bonus Answer:
if I do this, will the embedded webpage be responsive? : It entirely depends on how the external websites manages their responsive behavior, As you can see in the screenshot below, in 700*350 px iframe view, pega login page adapted responsiveness.
Crestone Technology
MX
Thanks!
Can you give the code that you used in the section that embedded the Pega login screen? I tried doing the same thing with an iframe and with an object tag. In each case, nothing displayed.
I also tried including some public websites like google.com. They displayed nothing. Given your response about security, I was not surprised they did not display.
Accepted Solution
Pegasystems Inc.
AU
Hi Davis,
Please find the configuration screen below,
You can see pega login screen in Iframe in my screenshots, because Iframe url origins and the parent web page both have same origin.
For google.com they use X-Frame-Options to sameorgin in Http Header, due to that nothing got displayed. You can check the error in your chrome console.
1. Parent section
2. Included non OOTB section