cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
arunshankar
Frequent Visitor

How to use or call the regular REACT App in Power portal

Hi Friends

 

Please guide me I want to use the regular REACT App/component in Power portal. I main requirement are

  • To achieve the best Look and feels
  • To provide data Grid with search capability and Modal forms like Sweet Alerts.

How I will call/use the regular REACT App/component in Power portal ??

 

I want to create the whole portal functionality from Login till Sign-Out using the React App/Components.

 

Please guide me.

 

Thanks

Arun

5 REPLIES 5
ragavanrajan
Super User
Super User

Hi @arunshankar 

 

JFYI. The purpose of the portal is to build web application quickly without writing custom code but you are not limited to any frameworks. Portal comes with Bootstrap 3 as of now where you can utilise all your requirements with the help of jquery. 

 

However, if you prefer to React then you can refer to the below blog where Angular is shown as an example. You can apply the same logic to your React components. 

https://www.inogic.com/blog/2018/12/working-with-angular-js-framework-in-dynamics-crm-portal/ 

 

In the recent Portal release wave, you can actually build PCF ( PowerApps Component Framework) controls. Official docs for ref: 

https://docs.microsoft.com/en-us/power-platform-release-plan/2020wave2/power-apps/power-apps-compone... 

 

https://docs.microsoft.com/en-us/powerapps/maker/portals/component-framework-tutorial 

 

Additional Tip: I use the Bulma CSS framework to achieve what you have described. If you are interested. 

https://bulma.io/documentation/ 

 

https://powerusers.microsoft.com/t5/Power-Apps-Portals/Portal-Theme-Bootstrap-Version/m-p/792736 

 

Hope it helps. 
------------

If you like this post, give it a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users to find it.

Dear ragavanrajan

 

Thanks for details. If you dont mind would you please guide me how I will use the Bulma CSS framework in PowerApps Portal.

 

It is request to would you please share the steps of configuring and using the Bulma CSS framework in PowerApps Portal ?

 

Much appreciated your kind help and support.

 

Kind Regards

Arun Shankar

Hi @arunshankar

 

Glad it helps you in some way. The thread link which I shared about Bulma includes how to upload bulma.min.css

 

However, if you are new to the portal 

 

Check the following thread 

https://powerusers.microsoft.com/t5/Power-Apps-Portals/custom-styling-for-OOB-popups/td-p/824212 

 

------------

If you like this post, give it a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users to find it.

Apologize @arunshankar,  I have missed this completely. 

 

Download the bulma.css from the following link 

 

https://bulma.io/ 

 

In Portal Management: 

 

1. Under Content > Web Files> Create new 

2. Name and partial URL as" bulma.min.css". The screenshot below for your reference 

 

ragavanrajan_0-1630291841862.png

3. Hit Save. 

4. In the notes tab > upload the bulma.min.css file. Screenshot for your reference 

 

ragavanrajan_1-1630291907810.png

 

In Portal Studio: 

 

Press sync configuration and browse the website. 

 

Now from Bulma documentation, you can use any components, layout or form components as per your need without writing any custom JS 

 

https://bulma.io/documentation/ 

 


Hope it helps. 
------------

If you like this post, give it a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users to find it.

OliverRodrigues
Super User
Super User

Hi, please take a look at the latest Portals Community Call, where Nick explores using REACT with Portals: https://www.youtube.com/watch?v=q5Ga2swvXEg

 




If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

Power Apps Portals Super User


Oliver Rodrigues


 

Helpful resources

Announcements
UG GA Amplification 768x460.png

Launching new user group features

Learn how to create your own user groups today!

Community Connections 768x460.jpg

Community & How To Videos

Check out the new Power Platform Community Connections gallery!

M365 768x460.jpg

Microsoft 365 Collaboration Conference | December 7–9, 2021

Join us, in-person, December 7–9 in Las Vegas, for the largest gathering of the Microsoft community in the world.

Users online (1,913)