0

I am trying to hide/show text depending on other field value.

Here's the code.

Component

<aura:component controller="updateCheckBoxPlan"
                implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
  <aura:handler event="force:refreshView" action="{!c.isRefreshed}" name="buttonLabel"/>
    <div class="slds-align_absolute-center" style="color:red">
        <p><b>Test</b></p>
        </div>
    <div class="slds-align_absolute-center" style="height:8rem">

<lightning:button
    label="Confirm Submission"
    variant="brand"
    onclick="{!c.updateCheck }"/>
    </div>
</aura:component>

Controller

({
    updateCheck : function(component, event, helper) {
        var rid = component.get("v.recordId");
        var action = component.get("c.updateChk");
        action.setParams({key : rid});
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                $A.get('e.force:refreshView').fire();              
            }
            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.enqueueAction(action);
    },

    isRefreshed: function(component, event, helper) {
        location.reload();
    },
})

Helper

({
    updateCheck11_helper : function(c,e,h) {
        alert('Success!');
        var save_action = c.get("c.updateCheck");
        save_action.setParams({
            });
        $A.enqueueAction(save_action);
    }
})

The text Test should be hidden when for example Family__c is equal to "" OR blank.

enter image description here

Any kind of help is much appreciated

0

e.force:refreshView is an application event. It will refresh all the components which are rendered and implement handler for it. This should be used ONLY when there are no other options left. However, for your use case, you 2 options - slds-hide and aura:if.

Option-1: Using slds-hide. You can use this when you need the element to be rendered in DOM but hidden from view.

.cmp:

<aura:component controller="updateCheckBoxPlan"
                implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >

    <div aura:id="myDiv" class="slds-align_absolute-center" style="color:red">
        <p><b>Test</b></p>
    </div>

    <div class="slds-align_absolute-center" style="height:8rem">        
        <lightning:button label="Confirm Submission"
                          variant="brand"
                          onclick="{!c.updateCheck }"/>
    </div>
</aura:component>

You should identify the target element with aura:ids as shown above.

Now in .js file:

updateCheck : function(component, event, helper) {
    var rid = component.get("v.recordId");
    var action = component.get("c.updateChk");
    action.setParams({key : rid});
    action.setCallback(this, function(response) {
        var state = response.getState();
        if (state === "SUCCESS") {
            // if( -- conditions -- )
            $A.util.addClass(component.find("myDiv","slds-hide")); // to hide
            // $A.util.removeClass(component.find("myDiv","slds-hide")); // to show 
        }
        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.enqueueAction(action);
},

addClass, removeClass & toggleClass are used for adding/removing/toggling the classes on target elements.

Option-2: Using aura:if. You can use this when you dont want the elements to be even rendered in DOM. When they are not rendered, you cannot get the elements using component.find and aura:id. Below is how you can implement.

.cmp:

<aura:component controller="updateCheckBoxPlan"
                implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >

    <aura:attribute name="show" type="Boolean" default="false" />

    <aura:if isTrue="{!v.show}">
        <div aura:id="myDiv" class="slds-align_absolute-center" style="color:red">
            <p><b>Test</b></p>
        </div>
    </aura:if>

    <div class="slds-align_absolute-center" style="height:8rem">        
        <lightning:button label="Confirm Submission"
                          variant="brand"
                          onclick="{!c.updateCheck }"/>
    </div>
</aura:component>

.js file:

updateCheck : function(component, event, helper) {
    var rid = component.get("v.recordId");
    var action = component.get("c.updateChk");
    action.setParams({key : rid});
    action.setCallback(this, function(response) {
        var state = response.getState();
        if (state === "SUCCESS") {
            // if( -- conditions -- )
            component.set("v.show",true); // to hide
            // component.set("v.show",false); // to show 
        }
        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.enqueueAction(action);
},
| improve this answer | |
  • Thank you! I can now modify the IF statement in my Controller, but I have a question sorry because I'm new to coding. I would like to know on how can I get the value of the field? Assuming that the API of the field is family__c? Thanks again – Naofumi Kun Aug 19 '19 at 5:56
  • It depends and actually a very broad perspective of what you are asking. There are different ways like recordEditForm or from Apex. You will be implementing in different ways. Its not clear from this question of how you are planning to implement. However, I would suggest to try these and post separate question on that. – salesforce-sas Aug 19 '19 at 5:59
  • Family__c field is just a formula field in Salesforce. I already tried your code and it's running without any errors. The field is hiding depending on the component.set value. My only concern now is getting the value of the formula field. Thanks again! – Naofumi Kun Aug 19 '19 at 6:09
0

You can use the aura:if tag to conditionally render the parts of the view in a lightning component.

So in your case, you can create a String type aura attribute and set it to Family__c value on component load (init handler) and then use that String attribute in the aura:if tag to conditionally render the text "Test"

For instance,

<aura:component>
  <aura:attribute name="strTest" type="String"/>

  <aura:if isTrue="{!not(empty(v.strTest))}">
    //TRUE - show your component here
    <div class="slds-align_absolute-center" style="color:red">
     <p><b>Test</b></p>
    </div>
 </aura:if> 

</aura:component> 
| improve this answer | |
  • Sorry I'm quite new to coding can you please elaborate on how would I declare an Aura:Attribute then make it value the record field value, for example: Family__c Appreciate your help here! – Naofumi Kun Aug 19 '19 at 5:47
0

You should try putting div in <aura:if>
You can use the [aura:if][1] and [aura:set] to toggle

[1]: https://www.codeinsalesforce.com/post/Aura-If-else/ - Example

Below is the reference code

<aura:attribute name="IsSuccessful" type="Boolean" default="true" />
<aura:if isTrue="{!(v.IsSuccessful == 'true')}"> 'Success' <aura:set attribute="else"> 'Unsuccessful' </aura:set> </aura:if>

| improve this answer | |

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.