0

I have a component and I want to show a message and grey out the button if some fields are not filled, how to do this?

Component:

<aura:component controller="purchaseOrderComponentController"
            implements="force:lightningQuickAction,force:appHostable,flexipage:availableForAllPageTypes,force:hasRecordId">
<!--<aura:handler name="init" value="{!this}" action="{!c.doInit}" />-->

<lightning:button label="Receive PO" onclick="{!c.doInit}" aura:id="disablebuttonid"/>

<aura:attribute name="recordId" type="Id" default="a0e2000000X2I9AAAV"/>
<aura:attribute name="purchaseOrder" type="PBSI__PBSI_Purchase_Order__c"/>  

<aura:if isTrue="{!v.isError}">
    <div>{!v.errorMessage}</div>
</aura:if>

<!-- <aura:if isTrue="{empty(v.error)}">
    <lightning:textarea name="errorMessage" value="{!v.error}" label="Error: " rendered = "true"/>
</aura:if>-->

Java Script Controller:

({
doInit : function (component, event) {
    var purchaseOrderId  = component.get("v.recordId");
    var action = component.get("c.getPurchaseOrder");
    action.setParams({
        "purchaseOrderId": purchaseOrderId
    });

    action.setCallback(this,function (response){
        var state = response.getState(),
            purchaseOrder = response.getReturnValue();
        component.set('v.purchaseOrder',purchaseOrder);
        if (state === "SUCCESS") {
            if(purchaseOrder.Order_Confirmation_Number__c != null && purchaseOrder.PBSI__Delivery_Location__c != null && purchaseOrder.Has_Misc_Item__c != true) {

                var url = 'https://environment.visual.force.com/apex/ReceivePO?id=' + purchaseOrderId;
                var urlEvent = $A.get("e.force:navigateToURL");
                urlEvent.setParams({
                    "url": url
                });
                urlEvent.fire();



            } else {
                var errorMsg = 'Please fill in delivery location and order confirmatio number, and make sure (has MISC item) is not checked';
                console.log(errorMsg);  
                var toastEvent = $A.get("e.force:showToast");
                toastEvent.setParams({
                    title: 'Error',
                    type: 'error',
                    message: errorMsg
                });
                toastEvent.fire();
            }
        } 
    });

    $A.enqueueAction(action);
}})

Apex Controller:

public class purchaseOrderComponentController{
@AuraEnabled
public static  PBSI__PBSI_Purchase_Order__c getPurchaseOrder(Id purchaseOrderId){
        return [SELECT Id, PBSI__Delivery_Location__c, Order_Confirmation_Number__c, Has_Misc_Item__c FROM PBSI__PBSI_Purchase_Order__c where Id=:purchaseOrderId limit 1];
}
} 
  • 1
    Your question does not clearly specify the details here. When do you want the button to be disabled? When the form is initially rendered or only when it has been clicked once? Enabling a button only when certain attributes have been filled can be definitely achieved but it will require much more client side validations with every say onchange event of the attributes. What is your exact use case and that what have you tried so far? – Jayant Das Jan 21 '19 at 17:51
  • @Roody - were you able to make this work? – glls Feb 4 '19 at 17:00
  • Yes, the code below in my answer explains it. – Roody Feb 5 '19 at 10:30
2

You probably what to add an onchange event to your input fields (for example). when those fileds change, they can invoke some kind of validation method:

In my example below, all my requried fields have an aura:id equals to field-required

Ex:

isFormValid: function (cmp, evt, helper) {
        const requiredFields = cmp.find('field-required') || [];
        let isValid = true;
        requiredFields.forEach(e => {
            if (e.get('v.value')=='' || e.get('v.value').trim().length==0 ) {
                isValid = false;
            }
        });

        return isValid;
    },

then, all I do is simply set the button to disabled based on what the isFormValid returns -

cmp.set('v.buttonAttribute', isFormValid)'

as per the message, there are many ways of handling this, I would recommend using the lightning:notificationsLibrary component.

0

I solved it as follows: Component:

<aura:component controller="purchaseOrderComponentController"
            implements="force:lightningQuickAction,force:appHostable,flexipage:availableForAllPageTypes,force:hasRecordId">
<aura:handler name="init" value="{!this}" action="{!c.disableButton}" />
<lightning:button label="Receive PO" onclick="{!c.doInit}" aura:id="disablebuttonid" variant="brand" title="This button is available when Delivery Location and Order Confirmation Number are filled, and Has MISC Item is not checked."/>

<!--<textarea id="textarea-id-01" class="slds-textarea" placeholder="Placeholder Text">Hello</textarea>
<lightning:outputField fieldName="Auto_Number__c" value="Hello Roody"/>-->
<lightning:formattedRichText value=" "></lightning:formattedRichText>
<lightning:helptext
    content="This button is available when Delivery Location and Order Confirmation Number are filled, and Has MISC Item is not checked."
id = "disablehelpText"/>

<aura:attribute name="recordId" type="Id"/>
<aura:attribute name="purchaseOrder" type="PBSI__PBSI_Purchase_Order__c"/>  
<aura:if isTrue="{!v.isError}">
    <div>{!v.errorMessage}</div>
</aura:if>

<!-- <aura:if isTrue="{empty(v.error)}">
    <lightning:textarea name="errorMessage" value="{!v.error}" label="Error: " rendered = "true"/>
</aura:if>-->

Java Script Controller:

({
doInit : function (component, event) {
    var purchaseOrderId  = component.get("v.recordId");
    var action = component.get("c.getPurchaseOrder");
    action.setParams({
        "purchaseOrderId": purchaseOrderId
    });

    action.setCallback(this,function (response){
        var state = response.getState(),
            purchaseOrder = response.getReturnValue();
        component.set('v.purchaseOrder',purchaseOrder);
        if (state === "SUCCESS") {
            if(purchaseOrder.Order_Confirmation_Number__c != null && purchaseOrder.PBSI__Delivery_Location__c != null && purchaseOrder.Has_Misc_Item__c != true) {

                var url = 'myenvironment.visual.force.com/apex/ReceivePO?id=' + purchaseOrderId;
                var urlEvent = $A.get("e.force:navigateToURL");
                urlEvent.setParams({
                    "url": url
                });
                urlEvent.fire();


            } else {
                let button = component.find('disablebuttonid');
                button.set('v.disabled',true);
                var errorMsg = 'Hej Please fill in delivery location and order confirmation number, and make sure (has MISC item) is not checked';
                console.log(errorMsg);  
                var toastEvent = $A.get("e.force:showToast");
                toastEvent.setParams({
                    title: 'Error',
                    type: 'error',
                    message: errorMsg
                });
                toastEvent.fire();
            }
        } 
    });

    $A.enqueueAction(action);
},
disableButton : function (component, event){
    var purchaseOrderId  = component.get("v.recordId");
    var action = component.get("c.getPurchaseOrder");
    action.setParams({
        "purchaseOrderId": purchaseOrderId
    });
    action.setCallback(this,function (response){
        var state = response.getState(),
            purchaseOrder = response.getReturnValue();
        component.set('v.purchaseOrder',purchaseOrder);
        if (state === "SUCCESS") {
            if(purchaseOrder.Order_Confirmation_Number__c == null || purchaseOrder.PBSI__Delivery_Location__c == null || purchaseOrder.Has_Misc_Item__c == true) {
                let button = component.find('disablebuttonid');
                button.set('v.disabled',true);
               /* var errorMsg = 'From second method Please fill in delivery location and order confirmation number, and make sure (has MISC item) is not checked';
                console.log(errorMsg);  
                var toastEvent = $A.get("e.force:showToast");
                toastEvent.setParams({
                    title: 'Error',
                    type: 'error',
                    message: errorMsg
                });
                toastEvent.fire();*/
            }
        } 
    });
    $A.enqueueAction(action);
}})

Apex Controller:

public class purchaseOrderComponentController{
@AuraEnabled
public static  PBSI__PBSI_Purchase_Order__c getPurchaseOrder(Id purchaseOrderId){
        return [SELECT Id, PBSI__Delivery_Location__c, Order_Confirmation_Number__c, Has_Misc_Item__c FROM PBSI__PBSI_Purchase_Order__c where Id=:purchaseOrderId limit 1];
}}

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.