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
Power Apps Staff HemantG
Power Apps 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>

 
 
Power Apps Staff HemantG
Power Apps 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
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
Power Apps Staff HemantG
Power Apps 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. 🙂

 

Capture.PNG

 
Power Apps Staff HemantG
Power Apps 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

Highlighted
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
Better Together’ Contest Finalists Announced!

'Better Together’ Contest Finalists Announced!

Congrats to the finalists of our ‘Better Together’-themed T-shirt design contest! Click for the top entries.

thirdimage

Power Apps Community User Group Member Badge

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

sixthImage

Join THE global Microsoft Power Platform event series

Attend for two days of expert-led learning and innovation on topics like AI and Analytics, powered by Dynamic Communities

Power Platform 2019 release wave 2 plan

Power Platform 2019 release wave 2 plan

Features releasing from October 2019 through March 2020

thirdimage

Microsoft Business Applications Virtual Launch

Join us for the Microsoft Business Applications Virtual Launch Event on Thursday, April 2, 2020, at 8:00 AM PST.

thirdimage

Community Summit North America

Innovate, Collaborate, Grow - The top training and networking event across the globe for Microsoft Business Applications

Users online (10,052)