4

A Lightning Component is exposed in a Lightning Tab via Salesforce1 Mobile. This component provides a form to "create" new records. Actually, it creates a record with default values, saves it, then presents it to the user in a force:recordEdit form. If the user cancels, the component deletes the record and returns to the wizard form. If the user saves, it updates the record via the force:recordSave event and redirects to the that record's detail page on the force:recordSaveSuccess event.

This all works great, but when I return to the wizard to start a new deal, it fails to initialize. It doesn't even reach my code, so I don't know why this fails. The only way I can restore the component is to completely refresh the page in a mobile browser (which is obviously not possible in the Salesforce1 Mobile App). Does anyone have any thoughts?

Component.cmp

<aura:component controller="..." implements="force:appHostable,flexipage:availableForAllPageTypes" access="public">

  <!-- Attributes -->

  <!-- Events -->
  <aura:handler name="init" value="{!this}" action="{!c.doInit}"></aura:handler>
  <aura:registerEvent name="saveSuccess" type="force:recordSaveSuccess"></aura:registerEvent>
  <aura:handler name="onSaveSuccess" event="force:recordSaveSuccess" action="{!c.onSaveSuccess}" description="On successful save, open new record detail page."></aura:handler>

  <!-- MARKUP -->
  <div class="slds">

    <!-- CONFIG FORM -->
    <div aura:id="theConfigForm">

      <!-- SELECT OPPORTUNITY / ACCOUNT -->
      <force:inputField aura:id="opportunityLookup" value="{!v.lookup.Opportunity__c}"></force:inputField>
      <force:inputField aura:id="accountLookup" value="{!v.lookup.Account__c}"></force:inputField>
      <!-- / SELECT OPPORTUNITY / ACCOUNT -->

      <!-- SELECT OBJECT -->
      <ui:inputSelect class="slds-select dynamic" aura:id="objectTypeInputSelect" change="{!c.onObjectTypeChange}"/>
      <!-- / SELECT OBJECT -->

      <!-- SELECT RECORD TYPE -->
       <ui:inputSelect class="slds-select dynamic" aura:id="recordTypeInputSelect" change="{!c.onRecordTypeChange}">
         <ui:inputSelectOption text="--None--" label="--None--" value="true" disabled="true"/>
        <aura:iteration items="{!v.recordTypes}" var="recordType">
        <ui:inputSelectOption text="{!recordType.Id}" label="{!recordType.Name}"/>
        </aura:iteration>
       </ui:inputSelect>
      <!-- / SELECT RECORD TYPE -->

      <!-- CREATE RECORD -->
      <ui:button label="Create Deal" class="slds-button slds-button--neutral slds-button--small slds-button--brand" press="{!c.createDeal}"></ui:button>
      <!-- / CREATE RECORD -->

    </div>
    <!-- / CONFIG FORM -->

    <!-- EDIT FORM -->
    <div aura:id="theEditForm" class="slds-hide">
      <ui:button label="Cancel" press="{!c.deleteDeal}"></ui:button>
      <ui:button label="Save" press="{!c.saveDeal}"></ui:button>
      <force:recordEdit aura:id="edit" recordId="{!v.recordId}"/>
    </div>
    <!-- / EDIT FORM -->

  </div>
  <!-- / MARKUP -->

</aura:component>

Controller.js

({
    doInit : function(cmp, evt, hlp) {
        console.log('in c.doInit');
        cmp.set('v.recordId', '');
        hlp.setObjectTypes(cmp);
        hlp.setRecordTypes(cmp, hlp);
    },
    saveDeal : function(cmp) {
        console.log('in c.saveDeal');
        cmp.find("edit").get("e.recordSave").fire();
    },
    onSaveSuccess : function(cmp) {
        console.log('in c.onSaveSuccess');
        var recordId = cmp.get('v.recordId');
        cmp.set('v.recordId','');
        $A.get("e.force:navigateToURL").setParams({
            "url": "/" + recordId,
            isredirect: true
        }).fire();
    }
})

Console Log

# user saves record
in c.saveDeal

# save is successful, so redirect to record detail page
in c.onSaveSuccess
ltng:unrender 5:1;0

# SF1 opens record detail page
WARNING: Access Check Failed! AttributeSet.get(): attribute 'class' of component 'markup://forceChatter:recordFeedContainerMobile {486:c}' is not visible to 'markup://forceChatter:recordFeedContainerMobile {486:c}'.
WARNING: Access Check Failed! AttributeSet.get(): attribute 'class' of component 'markup://force:highlightsStencil {3:1057;a}' is not visible to 'markup://force:highlightsStencil {3:1057;a}'.
WARNING: Performance degradation: Multiple items were set in iteration[id:5:1113;a]in the same Aura cycle.
WARNING: Performance degradation: Multiple items were set in iteration[id:5:1113;a]in the same Aura cycle.

# User attempts to open lightning component via lightning tab
WARNING: Action failed: ltng$locker$controller$createComponent
WARNING: Action failed: one$auraContainer$controller$init
WARNING: components.createComponent(): client-side component creation failed
WARNING: Access Check Failed! AttributeSet.get(): attribute 'active' of component 'markup://one:content {545:c}' is not visible to 'markup://c:CPQ_SSG_CreateDeal {280:1;0}'.
WARNING: Access Check Failed! AttributeSet.set(): 'active' of component 'markup://one:content {545:c}' is not visible to 'markup://c:CPQ_SSG_CreateDeal {280:1;0}'.
WARNING: Access Check Failed! AttributeSet.get(): attribute 'loggingContext' of component 'markup://one:actionCardPhone {27:c}' is not visible to 'markup://c:CPQ_SSG_CreateDeal {280:1;0}'.
WARNING: Access Check Failed! Component.getEvent():'activated' of component 'markup://one:actionCardPhone {27:c}' is not visible to 'markup://c:CPQ_SSG_CreateDeal {280:1;0}'.
  • I strongly suspect that while Salesforce is updating their security related to the Locker component, that we're going to see lots of issues like yours. You may find that waiting a few days will resolve your problems as has been noted when Salesforce has popped in on several other Lightning component problems posted in the last day or two. Otherwise, it may be a situation where you're going to need to clear some events/cache when you're finished creating a new record. Salesforce needs to finish their platform revisions before all of this is going to be clean & clear. – crmprogdev Apr 26 '16 at 22:27
  • 1
    I submitted the issue to Salesforce support and it's in their R&D group. So far, they believe this error is related to the following known issue: Unable to implement "force:inputField" or "force:outputField" markup on lightning components – Isaac May 16 '16 at 17:02
  • As of today, Salesforce resolved my original issue with the above error messages. However, the reason they associated my issue with the known issue above is that my issue masked a deeper issue of the force:inputField components not working. Now, I receive an AuraError with the following error message: Assertion Failed!: Abstract component without provider def cannot be instantiated : markup://force:inputField : undefined – Isaac Jun 14 '16 at 14:44
  • Oh wow! Sounds like the saga continues. Sorry to hear that Isaac. This sounds similar to one of @BobBuzzard posts on the issues he's encountered that SF is also working on. – crmprogdev Jun 14 '16 at 15:53
12

After months of deliberation with Salesforce R&D, we have a workaround.

The error occurs when a force:inputField component is not the immediate child of the aura:component definition tag. Anytime this component is used inside other HTML tags, it will produce the error I've reported.

The problem stems from a deeper issue in the force:inputField component, which Salesforce will fix in their next release (Winter '17). However, they have provided a temporary solution that works for us.

Add a force:outputField component as an immediate child of the aura:component definition with a reference to the same data point as the force:inputField component. By doing this, the force:inputField component will render properly and allow initialization after redirects.

<aura:component controller="..." implements="...">

  <!-- Attributes -->
  <aura:attribute name="account" type="Account" default="{'sobjectType':'Account'}"></aura:attribute>

  <!-- Output Field Workaround -->
  <force:outputField aura:id="accountLookupOutput" value="{!v.record.Account__c}" class="slds-hide"></force:outputField>

  <!-- Markup -->
  <div class="slds">
    <force:inputField aura:id="accountLookup" value="{!v.record.Account__c}"></force:inputField>
  </div>

</aura:component>
  • So basically it's impossible to use SDLS with inputField? – brezotom Aug 2 '16 at 16:17
  • 1
    You can use it, but you must apply the solution advised here. They will not work by themselves without the force:outputField component at the top – Isaac Aug 2 '16 at 16:19
  • Hard to believe they missed this in development :/ – brezotom Aug 2 '16 at 16:23
  • Yeah, it's a pretty bad oversight. Thankfully, they will be fixing by the next release. – Isaac Aug 2 '16 at 18:32
  • 3
    This is still an issue... The force:inputField does not render a lookup relationship as well as picklist values. <aura:attribute name="record" type="MyCustomObject__c" default="{ 'sobjectType': 'MyCustomObject__c' }"/> <force:outputField aura:id="accountLookupOutput" value="{!v.record.Account__c}" class="slds-hide"></force:outputField> <div class="slds"> <force:inputField aura:id="accountLookup" value="{!v.record.Account__c}"></force:inputField> </div> – jojopogi Mar 3 '17 at 0:54
1

I faced the issue of a lookup relationship not rendering when my force:inputField was inside a lightning tag (lightning:tab in my case). I was able to get around this by placing a div placeholder where I wanted my force:inputField to be and then placing the force:inputField inside another div outside of the lightning tags (at the bottom of the page works) and used jQuery to move it into the first div which was inside the lightning:tab.

// add the following div where you want the force:inputField to eventually display

<div id="salesforceUserToMirrorHolder"/>

// add the following div outside of any lightning tags (near the bottom of the page works

<div id="salesforceUserToMirrorRendered" style="display:none;">
   <force:inputField aura:id="salesforceUserToMirror" value="{!v.item.Salesforce_User_to_Mirror__c}"/>
</div>

// use jQuery (or native JavaScript) to move the element to the div1 location.

 $("#salesforceUserToMirrorRendered").appendTo("#salesforceUserToMirrorHolder");
$("#salesforceUserToMirrorRendered").show();

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.