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

(0) Share

Report

Posted on by Arun Shankar

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

Categories:

Power Apps portals

All responses (5)

Answers (0)

Sort by

ragavanrajan 7,044 Most Valuable Professional on at

Like
a
(2)

Report
Copy link

Link copied!

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-component-framework-control-support-power-apps-portals

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.
Arun Shankar 10 on at

Like
a
(0)

Report
Copy link

Link copied!

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 7,044 Most Valuable Professional on at

Like
a
(0)

Report
Copy link

Link copied!

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 7,044 Most Valuable Professional on at

Like
a
(0)

Report
Copy link

Link copied!

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.
oliver.rodrigues 9,482 Most Valuable Professional on at

Like
a
(0)

Report
Copy link

Link copied!

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