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

[arunshankar]

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

[ragavanrajan]

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.

[arunshankar]

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

[ragavanrajan]

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.

[ragavanrajan]

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 

3. Hit Save. 

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

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]

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