cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
Helper I
Helper I

Best way to consume External Rest API in PCF Control

Hi All,

 

I have built one sub grid control using Typescript and React JS in Powerapp Control Framework.

Now i want to add some action in this subgrid control . On click of these action  , it will rather fetch data from external Rest API or update or create data in external web api too.

 

So kindly suggest me what's best way to do these Rest API operations in Typescript. Also should i consume Rest API operations in Typescript or its better to consume it in DotNet Plugin and call register that plugin on click of these action buttons or is there any better approach ?

 

My Concern here is that as Typescript is deployed finally on client side . So if  i consume Rest API in Typescript and deploy this control on Powerapp environment then it will reside on Client side application not on server side like we consume rest api in DotNet class file and hence client side deployment might create security risks too.

 

Any help or suggestion would be appreciated.

 

 

Thanks

 

1 ACCEPTED SOLUTION

Accepted Solutions
Highlighted
Super User
Super User

Re: Best way to consume External Rest API in PCF Control

Hi,

TypeScript is basically just JavaScript so there is no way of hiding security details once it is running on the client. Any authentication you use on the client will be discoverable if someone wanted to find it.

 

Calling a custom action via a PCF control is the same way as it would be via a Custom Ribbon Button JavaScript - the only cavate is that Xrm.WebApi.online.execute is not yet documented (and therefore supported) via PCF - but it is there to use if you use just case the Xrm.WebApi to any in Typescript and don't use the PCF provided typings. The alternative supported approach would be to call the WebApi manually using fetch or XMLHttpRequest- see a related discussion here - https://powerusers.microsoft.com/t5/Power-Apps-Pro-Dev-ISV/How-to-call-custom-actions-using-PCF/td-p...

 

Hope this helps!

View solution in original post

10 REPLIES 10
Highlighted
Super User
Super User

Re: Best way to consume External Rest API in PCF Control

Hi!

It is very common to wrap external API calls inside a Custom Action Plugin - this way your client scripts do not need to have the security information to call the external service.

 

Information on custom actions - https://docs.microsoft.com/en-us/powerapps/developer/common-data-service/custom-actions

Here are the best practices when calling external services in a plugin - https://docs.microsoft.com/en-us/powerapps/developer/common-data-service/access-web-services

 

Hope this helps!

Highlighted
Helper I
Helper I

Re: Best way to consume External Rest API in PCF Control

Hi Scott,

 

Thanks for your comment.

 

Yes , i am aware about building custom plugins and then registering those plugins against action in CRM.

This plugin can be triggered on ribbon buttons created using Ribbon workbench tool or any other tool.

But i want to create action buttons inside PCF control not by Ribbon workbench , then would i be able to call or trigger custom plugin from action button in PCF.

 

Also does Typescript not provide any way to hide these external API details not to expose on client side.

 

 

Thanks

 

Highlighted
Super User
Super User

Re: Best way to consume External Rest API in PCF Control

Hi,

TypeScript is basically just JavaScript so there is no way of hiding security details once it is running on the client. Any authentication you use on the client will be discoverable if someone wanted to find it.

 

Calling a custom action via a PCF control is the same way as it would be via a Custom Ribbon Button JavaScript - the only cavate is that Xrm.WebApi.online.execute is not yet documented (and therefore supported) via PCF - but it is there to use if you use just case the Xrm.WebApi to any in Typescript and don't use the PCF provided typings. The alternative supported approach would be to call the WebApi manually using fetch or XMLHttpRequest- see a related discussion here - https://powerusers.microsoft.com/t5/Power-Apps-Pro-Dev-ISV/How-to-call-custom-actions-using-PCF/td-p...

 

Hope this helps!

View solution in original post

Highlighted
Helper I
Helper I

Re: Best way to consume External Rest API in PCF Control

Hi Scott,

 

Thanks for your comment.

 

About hiding keys in Typescript ,I searched and found below URL which says about creating .env file in project to hide keys. Is it useful 

https://medium.com/better-programming/how-to-hide-your-api-keys-c2b952bc07e6/

 

Also thanks for mentioning approach for custom Action , i will try to follow on that.

 

Thanks

 

Highlighted
Helper I
Helper I

Re: Best way to consume External Rest API in PCF Control

Hi Scott,

 

One More thing, i tried consuming external web api using Fetch in Typescript but its throwing me "Origin blocked by CORS Policy" error. 

How can i overcome such type of error . 

 

Thanks

 

Highlighted
Super User
Super User

Re: Best way to consume External Rest API in PCF Control

Is this in a model driven app or a canvas app?

Can you post the webapi call code you are using?

Highlighted
Helper I
Helper I

Re: Best way to consume External Rest API in PCF Control

Hi Scott,

 

I am building a control and using it in Model Driven apps. On click of control , its hitting external web api and showing its result too.

So Below is line of code i have written for fetching data from external web api in typescript.

 
const FetchResult = await fetch("https://xxxxxxxx").then(.....................
 
Its throwing error CORS Policy error while fetching . I have tried to add mode as "no-cors" but still error is coming.
 
Thanks
 
 
Highlighted
Super User
Super User

Re: Best way to consume External Rest API in PCF Control

Hi - I think the issue is actually to do with the CORS policy of the service you are calling - it must be configured to accept calls from the domain that you are coming from. What is the external service - check if it supports JSONP - https://medium.com/developers-arena/understanding-json-jsonp-cors-and-bypassing-cors-with-jsonp-fa5f...

Highlighted
Helper I
Helper I

Re: Best way to consume External Rest API in PCF Control

Hi Scott,

 

But my external web service is returning result in XML format not in json.

 

 

 

Thanks

 

 

Helpful resources

Announcements
Community Conference

Power Platform Community Conference

Check out the on demand sessions that are available now!

Power Platform ISV Studio

Power Platform ISV Studio

ISV Studio is designed to become the go-to Power Platform destination for ISV’s to monitor & manage published applications.

secondImage

Power Platform 2020 release wave 2 plan

Features releasing from October 2020 through March 2021

Tech Marathon

Maratón de Soluciones de Negocio Microsoft

Una semana de contenido con +100 sesiones educativas, consultorios, +10 workshops Premium, Hackaton, EXPO, Networking Hall y mucho más!

Users online (6,992)