[SalesForce] Get Record using Force:RecordPreview in Client-Side Controller on Init

This is the code that I am trying to execute as below(code from Lightning Documentation with some addon)

Component:

<aura:component
    implements="flexipage:availableForRecordHome,force:lightningQuickActionWithoutHeader,force:hasRecordId">

<aura:attribute name="record" type="Object"/>
<aura:attribute name="recordError" type="String"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

<force:recordPreview aura:id="recordLoader"
  recordId="{!v.recordId}"
  layoutType="FULL"
  targetRecord="{!v.record}"
  targetError="{!v.recordError}"
  />

<!-- Display a header with details about the record -->
<div class="slds-page-header" role="banner">
    <p class="slds-text-heading--label">{!v.record.Name}</p>
    <h1 class="slds-page-header__title slds-m-right--small
        slds-truncate slds-align-left">{!v.record.BillingCity}, {!v.record.BillingState}</h1>
</div>

<!-- Display Lightning Data Service errors, if any -->
<aura:if isTrue="{!not(empty(v.recordError))}">
    <div class="recordError">
        <ui:message title="Error" severity="error" closable="true">
            {!v.recordError}
        </ui:message>
    </div>
</aura:if>

Controller.js

({
    doInit: function(cmp) {
      var act = component.get("v.record");
      console.log("act "+ act);  //returns "act null"
    }
})

But, it returns "act null"

I able to get the account records when using aura:doneRendering, could it be the only way of getting the record?

Best Answer

Record loading happens after component initialized(see the output screenshot). But you can use recordUpdated event of force:recordPreview,instead of the unreliable event aura:doneRendering(Because this is fired more than once unless your component is in isolation).

recordUpdated event is firing only once when I added the below component on the Account layout.

As per the docs,

The event fired when the record is loaded, changed, updated, or removed.

Here is the sample code:

HelloWorld.cmp:

<aura:component
    implements="flexipage:availableForRecordHome,force:lightningQuickActionWithoutHeader,force:hasRecordId">

  <aura:attribute name="record" type="Object"/>
  <aura:attribute name="recordError" type="String"/>
  <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

  <force:recordPreview aura:id="recordLoader"
    recordId="{!v.recordId}"
    layoutType="FULL"
    targetRecord="{!v.record}"
    targetError="{!v.recordError}"
    recordUpdated="{!c.recUpdatedEvent}"
    />
</aura:component>

HelloWorldController.js:

({
    doInit: function(cmp,event,helper) {
      var act = cmp.get("v.record");
      console.log(act);  //returns null
    },
    recUpdatedEvent: function(cmp,event,helper) {
      var act = cmp.get("v.record");
      console.log(act);  //returns Account object
    }   
})

Output:

Note: My dev edition org is on Spring'17.

EDIT: Updated to show that record is loaded after init event.

Related Solutions

[SalesForce] How to Call Js(client side controller) into Helper

Danryl,

A Sample Code below.

<aura:component >
    <ui:outputText aura:Id="Hello" value=""/>
    <ui:button label="Click" press="{!c.Click}"/>
</aura:component>

//Controller

({
    Click : function(component, event, helper)
    {

        helper.helperMethod(component,event,sum);
    }
})

//Helper

({
    helperMethod : function(component,sum) 
    {
        var hello=component.find("Hello");
        hello.set("v.value","New Value !!!")

    }
})

As ankuli suggested, refer the trailhead document.

[SalesForce] Using Webworkers in Lightning Component client controller

Web Workers do currently work in Lightning Components (and apps) but they represent a security attack vector that is possibly not going to be something we can overcome in the initial release of the upcoming Locker Service security model for Lightning Platform. We are discussing this inside of R&D actively but tomorrow is actually feature freeze for Summer'16 and we have not managed to find a solution yet. That does not mean we won't but I cannot guarantee we will before Summer'16 deploys.

With that in mind...

Here is a quick fully working example that uses a worker to multiply 2 numbers:

Static resource named webworker:

onmessage = function(e) {
  console.log('Message received from main script');
  var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
  console.log('Posting message back to main script');
  postMessage(workerResult);
}

webWorkerDemo.app

<aura:application>
    <aura:handler name="init" value="{!this}" action="{!c.init}"/>
</aura:application>

webWorkerDemo.app.controller.js

({
    init : function(component, event, helper) {
        var worker = new Worker("/resource/webworker");
        worker.onmessage = function(e) {
            alert('Message received from worker: ' + e.data);
        };

        worker.postMessage([2, 3]);
    }
})

ltng:require does not factor into web workers - its sole purpose is to load scripts and css into the main page and web workers load their javascript contents directly. A number of your attempted script refs are nonsensical from static resource perspective - e.g heavycalculations.js alone is not a static resource reference at all, and the /resource/*.js also do not make sense since those are not valid developer names. What is the structure of heavycalculations? Is it a single javascript file or a js file in a zip archive?

Best Answer

Related Solutions

[SalesForce] How to Call Js(client side controller) into Helper

[SalesForce] Using Webworkers in Lightning Component client controller

Related Topic