Calling REST web api from PCF

[indikaa]

Hi Everyone, 

Looking for a sample PCF component which calls REST api? 

[HemantG]

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]

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>

[HemantG]

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]

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]

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:

[HemantG]

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]

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

[HemantG]

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]

Hi @HemantG ,

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