Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Michael Merino 1Michael Merino 1 

lightning actionsupport equivalent


In Salesforce Classic I have a visualforce page with the following code

                <apex:pageBlockSectionItem >
                    <apex:outputLabel value="Order Mode" for="orderMode" />
                    <apex:actionRegion >
                        <apex:inputField value="{!newCase.Order_Mode__c}" id="orderMode">
                            <apex:actionSupport event="onchange" action="{!changedOption}"
                                reRender="ordModeDetails" />
                        </apex:inputField>
                    </apex:actionRegion>
                </apex:pageBlockSectionItem>

                <apex:pageBlockSectionItem />
                
                <apex:outputPanel id="ordModeDetails">
                    <apex:pageBlockSection id="cati"
                        rendered="{!newCase.Order_Mode__c=='Catering'}">
                        <apex:inputField value="{!newCase.Catering_Number_of_People_Served__c}" />
                    </apex:pageBlockSection>
                    <apex:pageBlockSection id="catin"
                        rendered="{!newCase.Order_Mode__c=='Catering'}">
                        <apex:inputField value="{!newCase.Catering_Occasion__c}" />
                    </apex:pageBlockSection>
                    <apex:pageBlockSection id="om"
                        rendered="{!newCase.Order_Mode__c=='Delivery'}">
                        <apex:inputField value="{!newCase.Delivery_Provider__c}" />
                    </apex:pageBlockSection>
                </apex:outputPanel>
                
What this does is 
if a person selects Catering from an Order_Mode dropdown, 2 new fields will appear on the page, Catering_Number_of_People_Served__c AND Catering_Occasion__c
if a person selects Delivery from an Order_Mode dropdown, 1 new field will appear on the page, Delivery_Provider__c

HOW DO I DO THIS KIND OF CONDITIONAL RENDERING IN A CUSTOM LIGHTNING COMPONENT?  for both based on a picklist (as above) and based on a checkbox (not shown)

classic image
Raj VakatiRaj Vakati
You can do conditional rendering user a Using the <aura:if> tag 
  
<aura:if isTrue="{!v.isError}">
    <div>{!v.errorMessage}</div>
</aura:if>
<aura:if isTrue="{!v.selected == 'None'}">
  <aura:set attribute="else">
    <aura:if isTrue="{!v.selected == 'Phone'}">
      <lightning:input label="Phone" ... />
      <aura:set attribute="else">
        <lightning:input label="Email" ... />
      </aura:set>
    </aura:if>
  </aura:set>
</aura:if>


 

http://www.infallibletechie.com/2017/08/conditional-rendering-in-lightning.html
https://rajvakati.com/2019/01/27/lightning-web-component-conditional-rendering/
https://saramorgan.net/2017/05/30/lightning-best-practice-conditional-rendering/
http://sfdcmonkey.com/2018/01/06/workaround-for-contains-lightning-component/
Michael Merino 1Michael Merino 1
then why doesn't this work?  In the LOADED section, console.log('cc-load '+cc); says UNDEFINED.
ContactInternalEdit.cmp
===============
<aura:component implements="force:hasRecordId,flexipage:availableForRecordHome" access="global" >
    
    <aura:attribute name="simpleRecord" type="Object"/>
    <aura:attribute name="recordSaveError" type="Object"/>
    <aura:attribute name="ChronicComplainer" type="Boolean" default="false"/>

    <force:recordData aura:id="recordLoader"
                      recordId="{!v.recordId}"
                      targetFields="{!v.simpleRecord}"
                      targetError="{!v.recordSaveError}"
                      layoutType="FULL"
                      mode="EDIT" 
                      recordUpdated="{!c.handleRecordUpdated}" />  
    
    <div class="slds-clearfix">
        <div class="slds-float_right">
            <lightning:button variant="brand" type="submit" name="save" label="Save" onclick="{!c.saveContact}"/>
            <lightning:button variant="brand" type="cancel" name="cancel" label="Cancel" onclick="{!c.onCancel}"/>     
        </div>
    </div>
    
    <lightning:recordEditForm recordId="{!v.recordId}" objectApiName="Contact" aura:id="recordEditForm" >
        <div class="slds-box slds-theme_shade">
            <lightning:card title="Address Information">
                <lightning:messages />
                <div class="slds-grid">
                    <div class="slds-col slds-size_1-of-2"> 
                        <div class="slds-card__body slds-card__body_inner">
                            <div class="slds-border_bottom">
                                <lightning:inputField fieldName="Phone" />  
                            </div>
                        </div>
                    </div>
                    <div class="slds-col slds-size_1-of-2"> 
                        <div class="slds-card__body slds-card__body_inner">
                            <div class="slds-border_bottom">
                                <lightning:inputField fieldName="MobilePhone" />  
                            </div>                            
                            <div class="slds-border_bottom">
                                <lightning:inputField fieldName="Chronic_Complainer__c" />  
                            </div>
                            <aura:if isTrue="{!v.ChronicComplainer}">
                    <div>
                    <lightning:inputField fieldName="Facebook_ID__c" />
                    </div>
                   </aura:if> 
                        </div>
                    </div>
                </div>               
            </lightning:card> 
        </div>
    </lightning:recordEditForm>
   
    <!-- Display error message -->
    <aura:if isTrue="{!not(empty(v.recordSaveError))}">
        <div class="recordSaveError">
            {!v.recordSaveError}</div>
    </aura:if>     
</aura:component>

====================
ContactInternalEditController.js
({
    saveContact : function(cmp, event, helper) {
        cmp.find("recordLoader").saveRecord($A.getCallback(function(saveResult) {
            if (saveResult.state === "ERROR") {
                var errMsg = "";
                // saveResult.error is an array of errors, 
                // so collect all errors into one message
                for (var i = 0; i < saveResult.error.length; i++) {
                    errMsg += saveResult.error[i].message + "\n";
                }
                cmp.set("v.recordSaveError", errMsg);
            } else {
                cmp.set("v.recordSaveError", "");
                var cc = cmp.get("v.simpleRecord.Chronic_Complainer__c");
                cmp.set("v.ChronicComplainer","cc");
                console.log('cc-load '+cc); 
            }
        }));
        
    },
    onCancel : function(cmp, event, helper) { 
        // Navigate back to the record view
        var navigateEvent = $A.get("e.force:navigateToSObject");
        navigateEvent.setParams({ "recordId": cmp.get('v.recordId') });
        navigateEvent.fire();
    }  , 
    handleRecordUpdated: function(cmp, event, helper) {
        var eventParams = event.getParams();
        if(eventParams.changeType === "CHANGED") {
            
            var fields = event.getParam("fields");
            cmp.find('recordEditForm').submit(fields);
            // get the fields that are changed for this record
            
            var changedFields = eventParams.changedFields;
            console.log('Fields that are changed: ' + JSON.stringify(changedFields));
            // record is changed so refresh the component (or other component logic)
            var resultsToast = $A.get("e.force:showToast");
            resultsToast.setParams({
                title: "Success!",
                type: "success",
                message: "The record was saved."
            });
            resultsToast.fire();
            // Close the action panel
            var dismissActionPanel = $A.get("e.force:closeQuickAction");
            dismissActionPanel.fire();
        } else if(eventParams.changeType === "LOADED") {
            // record is loaded in the cache
            var cc = cmp.get("v.simpleRecord.Chronic_Complainer__c");
            cmp.set("v.ChronicComplainer","cc");
            console.log('cc-load '+cc);
        } else if(eventParams.changeType === "REMOVED") {
            // record is deleted and removed from the cache
        } else if(eventParams.changeType === "ERROR") {
            console.log('Error: ' + cmp.get("v.error"));
        }
    }
})
Michael Merino 1Michael Merino 1
OK I think I have a solution.

this works, note the initial value is handled by controller method: handleRecordUpdated,changeType="Loaded"  NOTE THIS ONLY WORKS BECAUSE Chronic_Complainer__c is a field on the View page, so load knows it exists and has a value.  Note also the difference in setting the attribute between loading and inputField onchange event.

what this does is, on load, the handleRecordUpdated method initializes the attribute to database value. Then if you change the value of the ChronicComplainer attribute on the edit page, the setCC method also updates ChronicComplainer attribute value,  Thus upon page load and page edit, the aura:if isTrue has correct values for the attribute.

COMPONENT
===========
<aura:component implements="force:hasRecordId,flexipage:availableForRecordHome" access="global" >
    
    <aura:attribute name="simpleRecord" type="Object"/>
    <aura:attribute name="recordSaveError" type="Object"/>
    <aura:attribute name="ChronicComplainer" type="Boolean" default="false"/>

    <force:recordData aura:id="recordLoader"
                      recordId="{!v.recordId}"
                      targetFields="{!v.simpleRecord}"
                      targetError="{!v.recordSaveError}"
                      layoutType="FULL"
                      mode="EDIT" 
                      recordUpdated="{!c.handleRecordUpdated}" />  
    
    <div class="slds-clearfix">
        <div class="slds-float_right">
            <lightning:button variant="brand" type="submit" name="save" label="Save" onclick="{!c.saveContact}"/>
            <lightning:button variant="brand" type="cancel" name="cancel" label="Cancel" onclick="{!c.onCancel}"/>     
        </div>
    </div>
    
    <lightning:recordEditForm recordId="{!v.recordId}" objectApiName="Contact" aura:id="recordEditForm" >
        <div class="slds-box slds-theme_shade">  
        <lightning:card title="Address Information">
    <lightning:messages />
    <div class="slds-grid">
        <div class="slds-col slds-size_1-of-2"> 
        <div class="slds-card__body slds-card__body_inner">
            <div class="slds-border_bottom">
            <lightning:inputField fieldName="Phone" />  
            </div>
        </div>
        </div>
        <div class="slds-col slds-size_1-of-2"> 
        <div class="slds-card__body slds-card__body_inner">
            <div class="slds-border_bottom">
            <lightning:inputField fieldName="MobilePhone" />  
            </div>

            <div class="slds-border_bottom">
            <lightning:inputField fieldName="Chronic_Complainer__c" aura:id="CC" onchange="{!c.setCC}" />  
            </div>
            
            <aura:if isTrue="{!v.ChronicComplainer}">
            <div>
            <lightning:inputField fieldName="Facebook_ID__c" />
            </div>
            </aura:if> 
        </div>
        </div>
    </div>
================================
CONTROLLER
    setCC : function(cmp, event, helper) { 
        var myVal= cmp.find("CC").get("v.value");
        console.log("chg myVal "+myVal);
        cmp.set("v.ChronicComplainer", myVal);
    }  , 

    handleRecordUpdated: function(cmp, event, helper) {
        var eventParams = event.getParams();
        if(eventParams.changeType === "CHANGED") {
            
            var fields = event.getParam("fields");
            cmp.find('recordEditForm').submit(fields);
            // get the fields that are changed for this record
            
            var changedFields = eventParams.changedFields;
            console.log('Fields that are changed: ' + JSON.stringify(changedFields));
            // record is changed so refresh the component (or other component logic)
            var resultsToast = $A.get("e.force:showToast");
            resultsToast.setParams({
                title: "Success!",
                type: "success",
                message: "The record was saved."
            });
            resultsToast.fire();
            // Close the action panel
            var dismissActionPanel = $A.get("e.force:closeQuickAction");
            dismissActionPanel.fire();
        } else if(eventParams.changeType === "LOADED") {
            // record is loaded in the cache
            var myVal = cmp.get("v.simpleRecord.Chronic_Complainer__c");
            console.log("loading myVal "+myVal);
            cmp.set("v.ChronicComplainer", myVal);
            console.log('loading ');
        } else if(eventParams.changeType === "REMOVED") {
            // record is deleted and removed from the cache
        } else if(eventParams.changeType === "ERROR") {
            console.log('Error: ' + cmp.get("v.error"));
        }
    }