function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
golugolu 

lightning button visibility

Hi ,
I have the below code
<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global">
    <aura:attribute name="scheduleDateTime" type="DateTime" />
    <aura:attribute name="selectedTemplateBody" type="String" />
    <article class="slds-card">
        <div class="slds-card__header slds-grid">
            <header class="slds-media slds-media_center slds-has-flexi-truncate">
                <div class="slds-media__figure">
                    <span class="slds-icon_container slds-icon-standard-account" title="SMS">
                        <span class="slds-icon_container" title="SMS">
                            <lightning:icon iconName="standard:sms" size="small" alternativeText="Indicates SMS" />
                            <span class="slds-assistive-text">SMS</span>
                        </span>
                        <span class="slds-assistive-text">SMS</span>
                    </span>
                </div>
                <div class="slds-media__body">
                    <h2 class="slds-card__header-title">
                        <a href="javascript:void(0);" class="slds-card__header-link slds-truncate" title="SMS">
                            <span>SMS</span>
                        </a>
                    </h2>
                </div>
            </header>
        </div>
        <div class="slds-card__body slds-card__body_inner">
            <c:messageBody fromNumber="{!v.fromNumber}" selectedTemplateBody="{!v.selectedTemplateBody}" scheduleDateTime="{!v.scheduleDateTime}"
                           aura:id="sendMessageBodyId" />
        </div >
        <div class="slds-align_absolute-center">
          	<lightning:button variant="brand" label="Send Now" title="Send Now" onclick="{! c.buttonAction}"/>
            <lightning:button variant="brand" label="Send Later" title="Send Later" onclick="{! c.handleClick }"/>
            <lightning:button variant="brand" label="Cancel" title="Cancel" onclick="{! c.handleClick }"/>
              
        </div>
        <footer class="slds-card__footer">
            <a class="slds-card__footer-action" href="javascript:void(0);">View All
                <span class="slds-assistive-text">Contacts</span>
            </a>
        </footer>
    </article>
</aura:component>

I want send now button to be visible only when v.scheduleDateTime is populated. Can anyone please help?
Best Answer chosen by golu
Khan AnasKhan Anas (Salesforce Developers) 
Hi,

Greetings to you!

You can use aura:if
It evaluates the isTrue expression on the server and instantiates components in either its body or else attribute. Only one branch is created and rendered. Switching condition unrenders and destroys the current branch and generates the other.

Try below code:
<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global">
    <aura:attribute name="scheduleDateTime" type="DateTime" />
    <aura:attribute name="selectedTemplateBody" type="String" />
    <article class="slds-card">
        <div class="slds-card__header slds-grid">
            <header class="slds-media slds-media_center slds-has-flexi-truncate">
                <div class="slds-media__figure">
                    <span class="slds-icon_container slds-icon-standard-account" title="SMS">
                        <span class="slds-icon_container" title="SMS">
                            <lightning:icon iconName="standard:sms" size="small" alternativeText="Indicates SMS" />
                            <span class="slds-assistive-text">SMS</span>
                        </span>
                        <span class="slds-assistive-text">SMS</span>
                    </span>
                </div>
                <div class="slds-media__body">
                    <h2 class="slds-card__header-title">
                        <a href="javascript:void(0);" class="slds-card__header-link slds-truncate" title="SMS">
                            <span>SMS</span>
                        </a>
                    </h2>
                </div>
            </header>
        </div>
        <div class="slds-card__body slds-card__body_inner">
            <c:messageBody fromNumber="{!v.fromNumber}" selectedTemplateBody="{!v.selectedTemplateBody}" scheduleDateTime="{!v.scheduleDateTime}"
                           aura:id="sendMessageBodyId" />
        </div >
        <div class="slds-align_absolute-center">
                <aura:if isTrue="{!v.scheduleDateTime != null}">
          	     <lightning:button variant="brand" label="Send Now" title="Send Now" onclick="{! c.buttonAction}"/>
            </aura:if>
            <lightning:button variant="brand" label="Send Later" title="Send Later" onclick="{! c.handleClick }"/>
            <lightning:button variant="brand" label="Cancel" title="Cancel" onclick="{! c.handleClick }"/>
              
        </div>
        <footer class="slds-card__footer">
            <a class="slds-card__footer-action" href="javascript:void(0);">View All
                <span class="slds-assistive-text">Contacts</span>
            </a>
        </footer>
    </article>
</aura:component>

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas

All Answers

Khan AnasKhan Anas (Salesforce Developers) 
Hi,

Greetings to you!

You can use aura:if
It evaluates the isTrue expression on the server and instantiates components in either its body or else attribute. Only one branch is created and rendered. Switching condition unrenders and destroys the current branch and generates the other.

Try below code:
<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global">
    <aura:attribute name="scheduleDateTime" type="DateTime" />
    <aura:attribute name="selectedTemplateBody" type="String" />
    <article class="slds-card">
        <div class="slds-card__header slds-grid">
            <header class="slds-media slds-media_center slds-has-flexi-truncate">
                <div class="slds-media__figure">
                    <span class="slds-icon_container slds-icon-standard-account" title="SMS">
                        <span class="slds-icon_container" title="SMS">
                            <lightning:icon iconName="standard:sms" size="small" alternativeText="Indicates SMS" />
                            <span class="slds-assistive-text">SMS</span>
                        </span>
                        <span class="slds-assistive-text">SMS</span>
                    </span>
                </div>
                <div class="slds-media__body">
                    <h2 class="slds-card__header-title">
                        <a href="javascript:void(0);" class="slds-card__header-link slds-truncate" title="SMS">
                            <span>SMS</span>
                        </a>
                    </h2>
                </div>
            </header>
        </div>
        <div class="slds-card__body slds-card__body_inner">
            <c:messageBody fromNumber="{!v.fromNumber}" selectedTemplateBody="{!v.selectedTemplateBody}" scheduleDateTime="{!v.scheduleDateTime}"
                           aura:id="sendMessageBodyId" />
        </div >
        <div class="slds-align_absolute-center">
                <aura:if isTrue="{!v.scheduleDateTime != null}">
          	     <lightning:button variant="brand" label="Send Now" title="Send Now" onclick="{! c.buttonAction}"/>
            </aura:if>
            <lightning:button variant="brand" label="Send Later" title="Send Later" onclick="{! c.handleClick }"/>
            <lightning:button variant="brand" label="Cancel" title="Cancel" onclick="{! c.handleClick }"/>
              
        </div>
        <footer class="slds-card__footer">
            <a class="slds-card__footer-action" href="javascript:void(0);">View All
                <span class="slds-assistive-text">Contacts</span>
            </a>
        </footer>
    </article>
</aura:component>

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas
This was selected as the best answer
Raj VakatiRaj Vakati
Another one think is the You can able to disable the button also .. 

Even You can hide by using aura:if .. my opinion disable button is good experience 
 
<lightning:button variant="brand" label="Send Now" disbale ="{if(not(v.scheduleDateTime)}"title="Send Now" onclick="{! c.buttonAction}"/>