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

 

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

Microsoft Business Applications Virtual Launch Event

Join us for an in-depth look at the new innovations across Dynamics 365 and the Microsoft Power Platform.

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

Top Kudoed Authors
Users Online
Currently online: 246 members 5,357 guests
Please welcome our newest community members: