Lightning Out / Visualforce Pass sObject from Visualforce to Javascript Controller

Question

I'm adding a lightning out component to a pre-existing visualforce page. I can pass the values from the sObject bound in the Visualforce page to my Lightning Component by passing these as separate parameters (one for each required field) to associated attributes in my lightning component however I'd like to pass just one attribute and reference this for picking up the fields in my component.

On testing this out this afternoon I've been unable to get this to work.

My Lightning Out VF page is as follows

<apex:page standardController=“Impact__c” showChat="false" tabStyle="case" >
    <apex:includeLightning />
    <div id=“Incident”/> 
    <script>
        $Lightning.use("c:SM_ProblemIncidentChange", function() {
          $Lightning.createComponent("c:SM_ProblemIncident",
            {incidentRecord: "{!Impact__c.Incident__r}"},
          “Incident”,
          function(cmp) {
          });
        });        
     </script>
</apex:page>

If I pass Incident__r or Incident__c I just get the id of the associated incident record in my component as opposed to a full sObject reference, or I'm not accessing these correctly in the component. if I do the following I can pass individual fields.

<apex:page standardController=“Impact__c” showChat="false" tabStyle="case" >
    <apex:includeLightning />
    <div id=“Incident”/> 
    <script>
        $Lightning.use("c:SM_ProblemIncidentChange", function() {
          $Lightning.createComponent("c:SM_ProblemIncident",
            {incidentId: "{!Impact__c.Incident__r}”,
         caseNumber: "{!Impact__c.Incident__r.CaseNumber}”},
          “Incident”,
          function(cmp) {
          });
        });        
     </script>
</apex:page>

Should I be able to pass the full sObject? Is seems the most logical approach instead of individual fields.

Lightning Data Service is not supported on Lightning Out.

Thanks in advance for any tips on this.

Answer 1

While it is true that LDS is not available for Lightning Out I think your best bet in this situation would be to retrieve the object's data within the component.

You get the Id from the page, but the component calls the database to retrieve the record with the specified Id.

Of course, you should be able to pass the full sObject if you format it as a JSON in the component's loader, but I think this approach is a little annoying to maintain if you need to change/add/remove the object's fields (because then you'll have to edit not only your component but also the JSON manually).