Skip to main content

Notifications

Community site session details

Community site session details

Session Id : yZtZojbpcG/PZUQoEhqQ8w
Power Apps - Building Power Apps
Unanswered

PowerApps Form IFrame width & Height - sharepoint online Script Editor webpart

Like (0) ShareShare
ReportReport
Posted on 1 May 2020 16:29:06 by 36

Dear All,

 

I have custom SharePoint powerapp form built through customizing sharepoint list. The functionalities are working fine. But the problem is keeping it in SharePoint page through Script Editor Webpart.

We have imported the script editor webpart(pnp) to load the powerApps form (to pass the dynamic parameters from the URL) we are using the script editor form.

 

Thing is -->  we are not able to fit the form into iframe. PowerApps form has custom width & height.

Width : 850px;
height: 1000px;

 

We cannot change the size of the form so we have to achieve through jquery code.

 

 

<html>
<style>
#powerappsframe
{
height: 850px !
}

#powerappsCanvas, iframe{
height: 850px !
}

</style>
<body>
<iframe id=powerappsframe src=""></iframe>
</body>

<script>
document.getElementById('#powerappsframe').src="https://web.powerapps.com/webplayer... "
</script>

</html>

 

 

Any idea will be really helpful.

 

Thanks,

Dhana

  • Dhanasekaran_G Profile Picture
    36 on 04 May 2020 at 13:57:42
    Re: PowerApps Form IFrame width & Height - sharepoint online Script Editor webpart

    Dear @chsanche & All,

     

    Hope you are fine ..

     

    I have tried in CanVas app. Even there i have to reduce the screen and editform height and width programmatically . Any help would be much appreciated.

     

    Thanks,

    Dhana 

  • Dhanasekaran_G Profile Picture
    36 on 02 May 2020 at 03:25:56
    Re: PowerApps Form IFrame width & Height - sharepoint online Script Editor webpart

    @chsanche 

     

    Even if i go for standalone app the issue will be the same. Because we are having accordion menu type of form. i.e, Expand collapse option is enabled.

     

    I was able to achieve it through developer tool by pressing F12 but not through jquery/javascript. Please find the screenshots below.

    App SettingApp SettingPowerApp DesignPowerApp DesignHow it appears on the screenHow it appears on the screenHave bottom space because this powerapps screen heightHave bottom space because this powerapps screen height5.PNG6.PNGJquery styleJquery stylecode to render the powerapps form in script editorcode to render the powerapps form in script editor

     

    Even CanVas app also will get the same issue as we have expand and collapse option. Thank you so much for support !!

     

    Thanks,

    Dhana

     

  • Christopher S Profile Picture
    on 01 May 2020 at 18:03:05
    Re: PowerApps Form IFrame width & Height - sharepoint online Script Editor webpart

    Hi @Dhanasekaran_G 

     

    Can you please share the screenshot that shows the issue? I don't think you will be able to achieve this as the customized form is intended to be used only on the designated list page.

     

    Best Regards

  • Dhanasekaran_G Profile Picture
    36 on 01 May 2020 at 17:45:20
    Re: PowerApps Form IFrame width & Height - sharepoint online Script Editor webpart

    @chsanche  Sure .  But as you mentioned on the above the screenshot I have created the forms.

     

    But It is working when I put that in the same site. Considering the timeline of my project i cannot go back and re-development in canVas app.  only by fixing this way i can catch up the timeline.

     

    Thanks,

    Dhana

  • Christopher S Profile Picture
    on 01 May 2020 at 17:39:13
    Re: PowerApps Form IFrame width & Height - sharepoint online Script Editor webpart

    Hi @Dhanasekaran_G 

     

    Also, if you selected this option:

    Annotation 2020-05-01 113647.png

    That is intended to be used on the same list page when you clic on the New or Edit buttons:

    Annotation 2020-05-01 113755.png

    If you are embedding a customized form anywhere else they are not intended to be used that way.

     

    Best Regards,

    --

    If this reply has answered your question or solved your issue, please mark this question as answered. Answered questions help users in the future who may have the same issue or question quickly find a resolution via search. If you liked my response, please consider giving it a thumbs up. THANKS!

  • Christopher S Profile Picture
    on 01 May 2020 at 17:33:47
    Re: PowerApps Form IFrame width & Height - sharepoint online Script Editor webpart

    Hi @Dhanasekaran_G 

     

    Can you please share a screenshot of the issue?

     

    Best Regards,

  • Dhanasekaran_G Profile Picture
    36 on 01 May 2020 at 17:30:00
    Re: PowerApps Form IFrame width & Height - sharepoint online Script Editor webpart

    Hi @chsanche ,

     

    In sharepoint online site under every list we have customise powerapps option. I have chosen that customize powerapps forms . 

     

    Through this customise powerapps form option, I have created multiple screens like newscreen(newform), editscreen(editform), displayscreen(displayform).

     

    It works fine by embedding in other SharePoint pages. But thing is it has to be fit into the iframe.

     

    -Thanks

    Dhana

     

     

  • Christopher S Profile Picture
    on 01 May 2020 at 17:16:04
    Re: PowerApps Form IFrame width & Height - sharepoint online Script Editor webpart

    Hi @Dhanasekaran_G 

     

    Did you customized the form using PowerApps or did you created a standalone application using PowerApps? This will be very important as customized forms are only intended to be used within the list, they are not intended to be embedded in another page. Please let me know this information.

     

    Best Regards

    --

    If this reply has answered your question or solved your issue, please mark this question as answered. Answered questions help users in the future who may have the same issue or question quickly find a resolution via search. If you liked my response, please consider giving it a thumbs up. THANKS!

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

🌸 Community Spring Festival 2025 Challenge 🌸

WIN Power Platform Community Conference 2025 tickets!

Markus Franz – Community Spotlight

We are honored to recognize Markus Franz as our April 2025 Community…

Kudos to the March Top 10 Community Stars!

Thanks for all your good work in the Community!

Leaderboard

#1
WarrenBelz Profile Picture

WarrenBelz 146,658 Most Valuable Professional

#2
RandyHayes Profile Picture

RandyHayes 76,287 Super User 2024 Season 1

#3
Pstork1 Profile Picture

Pstork1 65,999 Most Valuable Professional

Leaderboard
Loading started