0

I cannot seem to figure out why I cannot gain access to attributes from within my afterRender - custom renderer.

The values are coming over as NULL, but when using the exact same code in another context I am able to get the attribute values.

Why can I not get the values from afterRender? I would like to use them to built a query.

I previously used <aura:handler name="render" value="{!this}" action="{!c.onRender}"/> the method onRender used the code below, this is the same code that is being used in my afterRender method.

({
    afterRender : function(cmp, helper) {
        this.superAfterRender();
        console.log('AFTER RENDER CALLED');

        var projectId = cmp.get("v.projectId");
        var accountId = cmp.get("v.accountId");

        //if(!projectId || !accountId) return;

        console.log("PROJECT: " + projectId);
        console.log("ACCOUNT ID: " + accountId);

        if(!cmp.get("v.isRendered")){
            cmp.set("v.isRendered", true);
        }

        var action = cmp.get("c.getSubscriptionsForAccount");
        action.setParams({
                "accountId" : accountId
        });
        action.setCallback(this, function(res) {
            var state = res.getState();
            if (state === "SUCCESS") {
                console.log("SUBSCRIPTIONS: " + res.getReturnValue());
                cmp.set("v.subscriptions", res.getReturnValue());
            } else if (state === "INCOMPLETE") {
            } else if (state === "ERROR") {
                var errors = response.getError();
                if (errors) {
                    if (errors[0] && errors[0].message) {
                        console.log("Error message: " + 
                                 errors[0].message);
                    }
                } else {
                    console.log("Unknown Error");
                }
            }

            //$A.get('e.force:refreshView').fire();
        });
        //$A.enqueueAction(action);
    }
})

I found that when using the 'aura:handler' method that the controller method gets called repeatedly. I have access to the attributes though.

MAIN COMPONENT:

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" controller="AddProductInScopeToProjectController">
    <aura:attribute name="recordId" type="String" />
    <aura:attribute name="project" type="Project__c" />
    <aura:attribute name="recordError" type="String" />
    <force:recordData aura:id="projectRecord"
                      layoutType="FULL"
                      recordId="{!v.recordId}"
                      targetError="{!v.recordError}"
                      targetFields="{!v.project}"
                      mode="EDIT" />

    <div class="slds-box slds-theme_default">
        <div class="slds-grid">
            <header class="slds-media slds-media_center slds-has-flexi-truncate">
              <div class="slds-media__figure">
                <lightning:icon iconName="custom:custom60" size="small"/>
              </div>
              <div class="slds-media__body">
                <h2>
                  <a href="javascript:void(0);" class="slds-card__header-link slds-truncate" title="Products In Scope">
                    <span class="slds-text-heading_small">Add Products In Scope</span>
                  </a>
                </h2>
              </div>
            </header>
        </div>
        <div class="slds-grid slds-m-top_medium">
            <div class="slds-button-group" role="group">
                <button class="slds-button slds-button_neutral">Subscriptions</button>
                <button class="slds-button slds-button_neutral">Assets</button>
            </div>
        </div>
        <c:AddProductInScopeToProjectSubscriptionList projectId="{!v.project.Id}" accountId="{!v.project.Account__c}" />
    </div>

    <!-- Display Lightning Data Service errors, if any -->
    <aura:if isTrue="{!not(empty(v.recordError))}">
        <div class="recordError">
            {!v.recordError}
        </div>
    </aura:if>
</aura:component>

INNER COMPONENT - THE CUSTOM RENDERER IS ON THIS COMPONENT

<aura:component implements="flexipage:availableForAllPageTypes,force:hasRecordId" access="global" controller="AddProductInScopeToProjectController">
    <aura:attribute name="projectId" type="String" />
    <aura:attribute name="accountId" type="String" />
    <aura:attribute name="recordError" type="String" />
    <aura:attribute name="subscriptions" type="SBQQ__Subscription__c[]" />

    <div class="slds-grid slds-m-top_medium">       
        <table class="slds-table slds-table_bordered slds-table_cell-buffer">
          <thead>
            <tr class="slds-text-title_caps">
              <th scope="col">
                <div class="slds-truncate" title="Subscription #">Subscription #</div>
              </th>
              <th scope="col">
                <div class="slds-truncate" title="Product">Product</div>
              </th>
              <th scope="col">
                <div class="slds-truncate" title="Product Code">Product Code</div>
              </th>
              <th scope="col">
                <div class="slds-truncate" title="Quantity">Quantity</div>
              </th>
            </tr>
          </thead>
          <tbody>
            <aura:iteration items="{!v.subscriptions}" var="subscription">
                <tr>
                  <th scope="row" data-label="Subscription #">
                    <div class="slds-truncate" title="Subscription #"><a href="javascript:void(0);">{subscription.Name}</a></div>
                  </th>
                  <td data-label="Product">
                    <div class="slds-truncate" title="Product">{subscription.SBQQ__Product__c}</div>
                  </td>
                  <td data-label="Product Code">
                    <div class="slds-truncate" title="Product Code">{subscription.Product_Code_REF__c}</div>
                  </td>
                  <td data-label="Quantity">
                    <div class="slds-truncate" title="Quantity">{subscription.SBQQ__Quantity__c}</div>
                  </td>
                </tr>
            </aura:iteration> 
          </tbody>
        </table>
    </div>
     </aura:component>

SAMPLE CODE CHANGES BASED ON COMMENTS:

<aura:attribute name="accountId" type="String" default=""/>
<aura:attribute name="recordError" type="String" />
<aura:attribute name="subscriptions" type="SBQQ__Subscription__c[]" />

<aura:handler name="change" value="{!v.accountId}" action="{!c.handleAccountIdChange}"/>
2
  • Hi Sean, it appears that you've fallen for the same problem as in this question that I linked. Simply put, force:recordData loads the data after the first rendering cycle, so you'll never see those attributes set. Instead, set an aura:valueChange handler or something.
    – sfdcfox
    Apr 1, 2018 at 1:03
  • I changed my post to show the change, I went the aura:valueChange route but it still doesn't work. The event is not being fired so the method isn't being called. I want the method to run when the accountId value changes or is set.
    – Coova
    Apr 1, 2018 at 1:48

0

Browse other questions tagged .