Integrate Salesforce with Angular

Integrate Salesforce with Angular 

Here in this post my main objective is to Fetch the data from Salesforce and display that data in the Front End where i will be using Angular 7.

Note - For any query write in the comment box or mail me at shubham.chauhan.12121996@gmail.com
              I will surely reply
              

Salesforce Integration with Angular

Before starting up with the code i want some prerequisites -
1. Basic Knowledge of PHP
2. Angular is must
3. You must have kowledge about the JSON data format

Firstly go to https://github.com/developerforce/Force.com-Toolkit-for-PHP
and click on Clone or Download after the successful completion of download extract the zip file and paste the Folder named soapclient to your project directory.


Now coming on to the code

1. Firstly create a service in Angular for communicating to the server
2. The Function in the Service will  be calling to the SOAP API.
3. After the API is called it will send back the data in JSON format
    Note - Since SOAP will retrieve the data in XML Format so we have to convert the XML to        JSON format

4. Now after the successful retrieval of the data from Salesforce we can easily use that data.

I have used xampp Server here but its your choice whether you want to use xampp or wampp or any other.

Integrate Salesforce with Angular 

PHP Toolkit

access.php

<?php

define("USERNAME", "Enter your Salesforce User name here");

define("PASSWORD", "Enter your Salesforce Password Here");

define("SECURITY_TOKEN", "Enter your Salesforce Security Token Here");

header('Access-Control-Allow-Origin: *');  /* It may be risky to use this line of code but i didnt find                                                                              any other solution for this as soon as i find any                                                                                        solution  i will update that and if anyone has any                                                                                      solution please mail me  or Comment in the comment                                                                              box */

require_once ('soapclient/SforcePartnerClient.php');


$mySforceConnection = new SforcePartnerClient();

$mySforceConnection->createConnection("PartnerWSDL.xml");

$mySforceConnection->login(USERNAME, PASSWORD.SECURITY_TOKEN); // For Login

$query = "SELECT buyer_name__c, date__c, maximum__c, price__c, status__c, Name, Id from invoice__c where price__c > 3900";

$response = $mySforceConnection->query($query);
echo json_encode($response->records); // The data that will be printed that data angular will be                                                                           //returned to typescript Angular                                                ?>

Run this code separately so as to test whether it is able to fetch data or not.

Angular

                                         

data.service.ts

export class DataService {

showDataFromDb(): Observable<any> {

return this.https.get('http://127.0.0.1/access.php');

/* URL of the file

}

}

/* This is the function that will be calling the PHP Toolkit and since it is an Observable we need to subscribe this method then only it will execute. */

 sample.component.ts 

/* This is the Typescript File from where we will be subscribing this service                                               method */

export class SampleComponentComponent {
buyerDetails: string;

constructor(private dataService: DataStorageService) { }

displayContents(): void {

this.dataService.showDataFromDb().subscribe(

data => {console.log(data);

this.buyerDetails = data; },

err => {console.log(err); }

);

console.log(this.value);

}

}

 sample.component.html

<div *ngFor="let details of buyerDetails">

{{details.fields.Name}}

</div> 

And that's it nothing more than this required.

Look How Simple was that !! 

Iam hope you like the Blog write down do you like the method that i have used or not and if you have any other method tell me that also through Email.