Building a canvas app the iFrame component

(0) Share

Report

Posted on by nhtkid

188

Dear Community,

I am building a Canvas app with iFrame component displaying our SharePoint site.

I am trying to follow the below article but unable to proceed.

Add IFrame - Power Apps | Microsoft Docs

When I click the + sign, there is no Portal Components, as suggested in the Doc.

There is only something called get more Components in the bottom of the screen.

It takes me to a section to first create a component library, which subsequently opened up a new page and asking me to create a component. I don't think that's the right area like the Doc described.

What am I missing here?

Thanks!

Categories:

Building Power Apps

I have the same question (0)

All responses (3)

Answers (0)

rb 835 Super User 2024 Season 1 on at

Like (1)

Report

Hi,

I think the impacting difference here is that you have created a Canvas app, not a Portal app. Different authoring tools and features are available in both.

Portal studio is more akin to web-design, and generally for people wanting to create external facing websites from the Power Platform.

You will need to assess the differences and figure out if you need to swap to a Portal app.

Was this reply helpful? Yes No
nhtkid 188 on at

Like (1)

Report

Thanks. You are absolutely right about that. That MS Native iFrame component is for Portal app, not for a Canvas app on mobile.

Anyway, I got that worked out and watched some YT video, finally did it using a third party solution from yashag2255.

GitHub - yashag2255/iframePCF: PCF to enable an iframe functionality in canvas apps for Power Apps.
Power Apps iFrame Component - YouTube

My issue now is that when I check the app on computer within browser, it works fine, loaded my SharePoint site.
When I try to use Power Apps mobile app on the phone, and open the app, the SharePoint site does not load.
Instead, it returned the following code.

Can anyone tell me where to from here troubleshooting this issue?
It looks like something gone wrong with the Authentication.

The web page at https://login.microsoftonline.com/randomtokenid/oauth2/authorize?client_id=00000003-0000-0ff1-ce00-000000000000&response_mode=form_post&protectedtoken=true&response_type=code%20id_token&resource=randomtokenid&scope=openid&nonce=randomtokenid5&redirect_uri=https%3A%2F%2FMYCOMPANY.sharepoint.com%2F_forms%2Fdefault.aspx&state=OD0w&claims=%7B%22id_token%22%3A%7B%22xms_cc%22%3A%7B%22values%22%3A%5B%22CP1%22%5D%7D%7D%7D&wsucxt=1&cobrandid=11bd8083-87e0-41b5-bb78-0bc43c8a8e8a&client-request-id=randomtokenid&popupui=1 could not be loaded because:
net::ERR_BLOCKED_BY_RESPONSE

Was this reply helpful? Yes No
Nghiem Doan Microsoft Employee on at

Like (0)

Report

Hi, I am experiencing the same issue. I ended up build launch the app on Mobile, not using iFrame so my mobile users can use this. iFrame is not recommended for mobile devices if it is required to pass authentication. Here are my findings on this topic.

In some cases, iframe in these WebView applications has been able to authenticate and set cookies for users explicitly at least for a single session. This authentication could fail for a few reasons—policies on authentication in an iframe or on creating new windows. Most recently, this authentication may be blocked by the OS feature that prevents cross-site tracking, or more specifically, setting and reading cookies in iframes that aren’t related to the root page.
How to enable cookies & cross site tracking in Teams IOS App - Microsoft Community Hub

Was this reply helpful? Yes No