cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
indikaa
Level: Powered On

Calling REST web api from PCF

Hi Everyone, 

Looking for a sample PCF component which calls REST api? 

12 REPLIES 12
PowerApps Staff HemantG
PowerApps Staff

Re: Calling REST web api from PCF

Is this for cds back end

https://docs.microsoft.com/en-us/powerapps/developer/component-framework/sample-controls/webapi-cont...

For generic REST API any JavaScript sample would do, just copy paste into control.
indikaa
Level: Powered On

Re: Calling REST web api from PCF

Hi Hemant, 

Thanks for the reply. 

 

I'm trying to modify one of the downloaded gallery control to do a simple get request to an api using 

 

const request = require('request'); 
 
private SampleHttpsRequest()
    {
        request('https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY', { json: true }, (err, res, body) => {
            if (err) { return console.log(err); }
            console.log(body.url);
            console.log(body.explanation);
            });
    }
 
When I try to build the controller, it gives me lots of errors. (I'm new to typescript )
 

WARNING in ./node_modules/har-validator/node_modules/ajv/lib/async.js 98:20-33
Critical dependency: the request of a dependency is an expression
@ ./node_modules/har-validator/node_modules/ajv/lib/ajv.js
@ ./node_modules/har-validator/lib/node4/promise.js
@ ./node_modules/request/lib/har.js
@ ./node_modules/request/request.js
@ ./node_modules/request/index.js
@ ./GalleryFieldControl/index.ts

WARNING in ./node_modules/har-validator/node_modules/ajv/lib/async.js 119:15-28
Critical dependency: the request of a dependency is an expression
@ ./node_modules/har-validator/node_modules/ajv/lib/ajv.js
@ ./node_modules/har-validator/lib/node4/promise.js
@ ./node_modules/request/lib/har.js
@ ./node_modules/request/request.js
@ ./node_modules/request/index.js
@ ./GalleryFieldControl/index.ts

WARNING in ./node_modules/har-validator/node_modules/ajv/lib/compile/index.js 15:17-30
Critical dependency: the request of a dependency is an expression
@ ./node_modules/har-validator/node_modules/ajv/lib/ajv.js
@ ./node_modules/har-validator/lib/node4/promise.js
@ ./node_modules/request/lib/har.js
@ ./node_modules/request/request.js
@ ./node_modules/request/index.js
@ ./GalleryFieldControl/index.ts

ERROR in ./node_modules/request/lib/har.js
Module not found: Error: Can't resolve 'fs' in 'C:\PROJECTS\PCF\Controls\ImageControl\PCF-Gallery-Control-1.1\node_modules\request\lib'
@ ./node_modules/request/lib/har.js 3:9-22
@ ./node_modules/request/request.js
@ ./node_modules/request/index.js
@ ./GalleryFieldControl/index.ts

ERROR in ./node_modules/forever-agent/index.js
Module not found: Error: Can't resolve 'net' in 'C:\PROJECTS\PCF\Controls\ImageControl\PCF-Gallery-Control-1.1\node_modules\forever-agent'
@ ./node_modules/forever-agent/index.js 6:10-24
@ ./node_modules/request/request.js
@ ./node_modules/request/index.js
@ ./GalleryFieldControl/index.ts

ERROR in ./node_modules/tough-cookie/lib/cookie.js
Module not found: Error: Can't resolve 'net' in 'C:\PROJECTS\PCF\Controls\ImageControl\PCF-Gallery-Control-1.1\node_modules\tough-cookie\lib'
@ ./node_modules/tough-cookie/lib/cookie.js 33:10-24
@ ./node_modules/request/lib/cookies.js
@ ./node_modules/request/index.js
@ ./GalleryFieldControl/index.ts

ERROR in ./node_modules/tunnel-agent/index.js
Module not found: Error: Can't resolve 'net' in 'C:\PROJECTS\PCF\Controls\ImageControl\PCF-Gallery-Control-1.1\node_modules\tunnel-agent'
@ ./node_modules/tunnel-agent/index.js 3:10-24
@ ./node_modules/request/lib/tunnel.js
@ ./node_modules/request/request.js
@ ./node_modules/request/index.js
@ ./GalleryFieldControl/index.ts

ERROR in ./node_modules/forever-agent/index.js
Module not found: Error: Can't resolve 'tls' in 'C:\PROJECTS\PCF\Controls\ImageControl\PCF-Gallery-Control-1.1\node_modules\forever-agent'
@ ./node_modules/forever-agent/index.js 7:10-24
@ ./node_modules/request/request.js
@ ./node_modules/request/index.js
@ ./GalleryFieldControl/index.ts

ERROR in ./node_modules/tunnel-agent/index.js
Module not found: Error: Can't resolve 'tls' in 'C:\PROJECTS\PCF\Controls\ImageControl\PCF-Gallery-Control-1.1\node_modules\tunnel-agent'
@ ./node_modules/tunnel-agent/index.js 4:10-24
@ ./node_modules/request/lib/tunnel.js
@ ./node_modules/request/request.js
@ ./node_modules/request/index.js
@ ./GalleryFieldControl/index.ts

ERROR in C:\PROJECTS\PCF\Controls\ImageControl\PCF-Gallery-Control-1.1\GalleryFieldControl\index.ts
./GalleryFieldControl/index.ts
[tsl] ERROR in C:\PROJECTS\PCF\Controls\ImageControl\PCF-Gallery-Control-1.1\GalleryFieldControl\index.ts(209,84)
TS7006: Parameter 'err' implicitly has an 'any' type.

ERROR in C:\PROJECTS\PCF\Controls\ImageControl\PCF-Gallery-Control-1.1\GalleryFieldControl\index.ts
./GalleryFieldControl/index.ts
[tsl] ERROR in C:\PROJECTS\PCF\Controls\ImageControl\PCF-Gallery-Control-1.1\GalleryFieldControl\index.ts(209,89)
TS7006: Parameter 'res' implicitly has an 'any' type.

ERROR in C:\PROJECTS\PCF\Controls\ImageControl\PCF-Gallery-Control-1.1\GalleryFieldControl\index.ts
./GalleryFieldControl/index.ts
[tsl] ERROR in C:\PROJECTS\PCF\Controls\ImageControl\PCF-Gallery-Control-1.1\GalleryFieldControl\index.ts(209,94)
TS7006: Parameter 'body' implicitly has an 'any' type.
[17:14:28] [build] Failed:
[pcf-1033] [Error] An error occurred compiling or bundling the control.
PS C:\PROJECTS\PCF\Controls\ImageControl\PCF-Gallery-Control-1.1>

 
 
PowerApps Staff HemantG
PowerApps Staff

Re: Calling REST web api from PCF

Is the code working stand alone ? What are the lib/module depedencies, they need to be added to index ts as import. See angular sample for details. Typically I first have the stand alone html page working and then migrate it to custom component. Post the standalone working code and someone can help.

As a type script alternative, pls check out Typed REST and HTTP Client with TypeScript Typings here - https://github.com/microsoft/typed-rest-client
Highlighted
ben-thompson
Level 8

Re: Calling REST web api from PCF

This is the code we use to retrieve data via the web api (it's 2 separate functions as it promises and so the first one is a try catch handler and the second one does the heavy lifting. 

 

public async retrieveCRMRecords (entityName: string, query: string ): Promise<Xrm.RetrieveMultipleResult>{
        try {
        let result=await    this.getResults(entityName,query);
        return result;
        }
        catch (error){
            // display error message within error section of tile
            
            return Promise.reject(error);
        }
        finally {}
        
    }

    public async getResults(entityName: string, query: string ): Promise<Xrm.RetrieveMultipleResult> {
        let a: Promise<Xrm.RetrieveMultipleResult>;
            return Xrm.WebApi.retrieveMultipleRecords(entityName,query).then(
            function success(result) {
            //  return result.entities;
             return result;
            },
            function (error) {
                return Promise.reject(error);                
            }
            )
    }
 
which we then call using
 
        let result= await this.retrieveCRMRecords("entityName",webapiQuery say"?$select=hdn_cssstyle,hdn_name&$filter=_hdn_template_value%20eq%20"+tId);
   
        result.entities.forEach(element => {
//do something with each record.
}
You should be able to repurpose the above to work without much difficulty but don't forget about CORS
indikaa
Level: Powered On

Re: Calling REST web api from PCF

Hi @HemantG , 

I tried the standalone angular application to call web api using httpclient and it worked without any error.

ngOnInit(){
this.http.get('https://api.github.com/users/username').subscribe((response)=>{
this.response = response;
console.log(this.response);
});
}
 
Then I've created a new PCF control project and added below dependencies to package.json 
"dependencies": {
"@types/node": "^10.12.18",
"@types/powerapps-component-framework": "1.1.0",
"@angular/common": "~8.0.0",
"@angular/core": "~8.0.0",
"request": "^2.81.0",
"rxjs": "~6.4.0"
},
 
Used below imports 
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
 
modified the constructor 
constructor(private _http: HttpClient)
    {
    }
 
used it within the init method
public init(context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void, state: ComponentFramework.Dictionary, container:HTMLDivElement)
    {
        
        // Add control initialization code
        this._http.get('https://api.github.com/users/username').subscribe(()=>{
            console.log('Got the response');
        })
    }
 
I can build the project without any dependency errors, but when I run the project it gives me below error:
 
2019-06-09_22h34_17.png
PowerApps Staff HemantG
PowerApps Staff

Re: Calling REST web api from PCF

Is this error in the test harness or the app after config. Can you share the control source zip (hemantg@microsoft.com) so that we can take a look. Note the OOB angular sample control has a bug loading in harness.
indikaparane
Level: Powered On

Re: Calling REST web api from PCF

Hi @HemantG , Thansk for the reply, this was coming on the test harness. 

However we endded up using cross-fetch instead of angular httpclient and it worked. Smiley Happy

 

Capture.PNG

 
PowerApps Staff HemantG
PowerApps Staff

Re: Calling REST web api from PCF

If possible please share the control sample code on githhub, REST has some great use cases and it would benefit the community.

I can then add it to community contol list -  (https://aka.ms/PCFDemos)

 

hemant

indikaparane
Level: Powered On

Re: Calling REST web api from PCF

Hi @HemantG ,

No worries, I'll upload to github and let you guys know. 

Helpful resources

Announcements
firstImage

Watch Sessions On Demand!

Continue your learning in our online communities.

Power Platform 2019 release wave 2 plan

Power Platform 2019 release wave 2 plan

Features releasing from October 2019 through March 2020

FirstImage

Power Platform World Tour

Coming to a city near you

thirdimage

PowerApps Community User Group Member Badge

Fill out a quick form to claim your user group badge now!

FourthImage

Join PowerApps User Group!!

Connect, share, and learn with your peers year-round

SecondImage

Power Platform Summit North America

Register by September 5 to save $200

Users Online
Currently online: 201 members 5,789 guests
Please welcome our newest community members: