cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
SumitThakran
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

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

11 REPLIES 11

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!

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

 

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!

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

 

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

 

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

Can you post the webapi call code you are using?

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
 
 

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...

Hi Scott,

 

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

 

 

 

Thanks

 

 

Helpful resources

Announcements
Power Apps Africa Challenge 2022

Power Apps Africa Challenge

Your chance to join an engaging competition of Power Platform enthusiasts.

Super User 2 - 2022 Congratulations

Welcome Super Users

The Super User program for 2022 - Season 2 has kicked off!

September Events 2022

Check out all of these events

Attend in person or online, there are incredible conferences and events happening all throughout the month of September.

Government Carousel

New forum: GCC, GCCH, DoD - Federal App Makers (FAM)

In response to the unique and evolving requirements of the United States public sector, Microsoft has created Power Apps US Government.

Users online (1,775)