cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Anonymous
Not applicable

Launching PowerApp from Sharepoint site

I have finished an app. I have a hard time udnerstanding how sharing works.

 

What I would like to do is put the app on my SharePoint site. My app connects to a list on my SharePoint site and is able to edit, add, view records. Is there a posibility to create a new SharePoint page and put the app in it? Or put the app launcher in the page so that people would only need to that page and click launch app? How do you do this?

 

Thanks!

1 ACCEPTED SOLUTION

Accepted Solutions

You don't have to worry about the modern UI. That was more relevant to the blog post that the other individual posted. So first let's start by creating a page just for this. If you already have one like it looks like perhaps you can skip a step or two here. But first

 

1. Navigate to Site Content > Pages (may also be called Site Pages).

 

 

2. In Pages, either select an existing page (If you already have one created, Or navigate to file and create a new one.

3. Once you've created your page, go ahead and edit the page, and you should see something very similar to what I have below.

4. Click on the web part zone you want to add your powerapp to, and you should get a prompt to add a web part. Add the "Page Viewer" Web Part.

5. With that added, you can now go to edit the settings for the web part (It'll say click on the tool pane" in the web part in case you can't find the settings) and you can set the configuration just like below.

 

It takes the URL that you used in your other example that was based on the IFrame. Please enter that same URL and then make sure to set a height value.

Click 'Ok' and you will see your app render on the page. You can publish to then see it fully render and you might want to change the chrome settings to get rid of the title / border. Also to note I prefer the tablet layout for web apps rather than mobile apps. They do however work really well in side bars and I've done some POCs for displaying a mobile app in the sidebar.

 

***Note I've only been able to have this work consistently in Chrome only. IE and Mozilla have some issues***

 

There is one more step to make sure to turn off the locked aspect ratio in the PowerApp settings page itself. This helps fit the PowerApp into the web part better. Go to web.powerapps.com, and navigate to your app and open it in your preferred editor.

Click on File and then navigate to the screen orientation settings and set "lock aspect ratio" to off.

 

Hope this helps!

View solution in original post

6 REPLIES 6
carlosag
Power Apps
Power Apps

You might find this blog post useful https://wonderlaura.com/2017/04/27/embed-powerapps-on-sharepoint-modern-pages/

It shows how you can embed powerapps using an iframe in a sharepoint page.

We will be making this better and aimpler, stay tuned but for now that post may do the trick for you.
stormea
Advocate III
Advocate III

If you are not using the modern UI, you can also use a Page Viewer Web Part to embed the Web URI of the app into the web part. make sure to turn off 'Locked Aspect Ratio' on the app settings and set a fixed height for the web part. I suggest approximately 400 - 500px if you are using the tablet view and embedding into your page.

 

-Storm

Anonymous
Not applicable

@carlosagThanks for the article very helpful. I also found this one: https://powerapps.microsoft.com/en-us/blog/embed-an-app/ which had a bit better description of generating Embed Uri.

I managed to put it on the SharePoint site however it apears to be scalled down, as in it is way too small to be useful, I tried to play around with width and height options in SharePoint but that did not give me any results. Is there any way I can make the app bigger?

Issue1.png

 

@stormeaI am still fairly new with the glosary of SharePoint. What do you mean by Modern UI? Also I am not too sure how you create a Page Viewer Web Part. I followed this instruction list I found online:

  • Click the Settings gear icon and choose Site Contents.
  • Click the Site Pages library or whichever library you want to hold your new Web Part page.
  • Click the Files tab of the Ribbon. ...
  • Click the New Document drop-down list on the left of the Ribbon and select Web Part Page.

However, at step 4 I am only able to create New Document and not New Web Part Page. Am I doing it wrong?

Issue2.png

 

 

 

You don't have to worry about the modern UI. That was more relevant to the blog post that the other individual posted. So first let's start by creating a page just for this. If you already have one like it looks like perhaps you can skip a step or two here. But first

 

1. Navigate to Site Content > Pages (may also be called Site Pages).

 

 

2. In Pages, either select an existing page (If you already have one created, Or navigate to file and create a new one.

3. Once you've created your page, go ahead and edit the page, and you should see something very similar to what I have below.

4. Click on the web part zone you want to add your powerapp to, and you should get a prompt to add a web part. Add the "Page Viewer" Web Part.

5. With that added, you can now go to edit the settings for the web part (It'll say click on the tool pane" in the web part in case you can't find the settings) and you can set the configuration just like below.

 

It takes the URL that you used in your other example that was based on the IFrame. Please enter that same URL and then make sure to set a height value.

Click 'Ok' and you will see your app render on the page. You can publish to then see it fully render and you might want to change the chrome settings to get rid of the title / border. Also to note I prefer the tablet layout for web apps rather than mobile apps. They do however work really well in side bars and I've done some POCs for displaying a mobile app in the sidebar.

 

***Note I've only been able to have this work consistently in Chrome only. IE and Mozilla have some issues***

 

There is one more step to make sure to turn off the locked aspect ratio in the PowerApp settings page itself. This helps fit the PowerApp into the web part better. Go to web.powerapps.com, and navigate to your app and open it in your preferred editor.

Click on File and then navigate to the screen orientation settings and set "lock aspect ratio" to off.

 

Hope this helps!

Anonymous
Not applicable

@stormeaThank you for very detailed tutorial. I followed all steps and it works perfectly!

This is great and I completely forgot about iFrame.

For some reason, the Param("screenName") function was not directing me to the specified screen when loading as a webpart from SharePoint. Though, the same link worked as expected when pasted directly in the browser.

 

Therefore, iFrame solved the issue 🙂

 

Thanks,

 

Erik

Helpful resources

Announcements
October Events

Mark Your Calendars

So many events that are happening this month - don't miss out!

Ignite 2022

WHAT’S NEXT AT MICROSOFT IGNITE 2022

Explore the latest innovations, learn from product experts and partners, level up your skillset, and create connections from around the world.

Power Apps Africa Challenge 2022

Power Apps Africa Challenge

Your chance to join an engaging competition of Power Platform enthusiasts.

Users online (3,758)