cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
indikaa
Frequent Visitor

Calling REST web api from PCF

Hi Everyone, 

Looking for a sample PCF component which calls REST api? 

12 REPLIES 12
HemantG
Power Apps
Power Apps

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
Frequent Visitor

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>

 
 

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

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
---
If this post has answered your question please consider it for "Accept as Solution" or if it has been helpful give it a "Thumbs Up".
indikaa
Frequent Visitor

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

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.

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

 

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

Hi @HemantG ,

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

Helpful resources

Announcements
PA User Group

Welcome to the User Group Public Preview

Check out new user group experience and if you are a leader please create your group

Power Apps Community Call

Monthly Power Apps Community Call

Did you miss the call?? Check out the Power Apps Community Call here!

secondImage

Experience what’s next for Power Apps

See the latest Power Apps innovations, updates, and demos from the Microsoft Business Applications Launch Event.

Power Platform ISV STudio

Power Platform ISV Studio

ISV Studio is the go-to Power Platform destination for ISV’s to monitor & manage applications post-AppSource publish.

Users online (29,244)