Angular 4 and SalesforceCanvas integration issue

Question

I have an Angular 4 application. I have integrated this application in sales force as a canvas application using Visual Force.

<apex:page standardController="Account">
<apex:canvasApp applicationName="My_Canvas" parameters="{param1:'value1'}" width="100%"/>
</apex:page>

The requirement is to get the value of param1 from salesfoce/VF page in my Angular application and fetch the data to display in the HTML. I am able to do that partially using the below piece of code in Angular.

loadTasks() {  
this.isloading = true;
Sfdc.canvas.client.ctx(this.callback.bind(this), Sfdc.canvas.oauth.client());
 } 

loadTasksfromCallback()
{this.tasks$=this.dataService.loadTasks((<HTMLInputElement>document.getElementById('url')).value, this.groupsArray );
this.tasks$.subscribe((data) => {

  this.isloading = false;
  console.log('this.isloading',this.isloading);
  this.tasks = data;
  console.log('inside loadTasksfromCallback',this.tasks);
      },
 (error) => {console.log('Inside call error',error)},
 () => {console.log('inside call completed successfully')});
 }


callback(msg) {
if (msg.status !== 200) {
  console.log("Error: " + msg.status);

  return;

}  
this.groupsArray=[];
this.groupsArray.push(msg.payload.environment.parameters.param1);
this.loadTasksfromCallback();

}

The problem is though the value of this.isloading is set to false and this.tasks is having the updated data, that is not reflecting in the HTML page.

Kaushik Kaushik · Accepted Answer · 2018-07-16T13:25:02

We had to explicitly/forcibly ask angular to detect changes after invoking the salesforce context call. this.changeDetector.detectChanges();

Angular 4 and SalesforceCanvas integration issue

1 Answers