function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
edukondalu thodetiedukondalu thodeti 

how to use toggle functionalities for a custom button in lightning component

i need to hide and show the result when i click on the same button twice using toggle functionalities.i need to show the result when i click on the button first time and when i click on the same button second time i need to hide the result. pls anyone help me i am new to the lightning 
Abhishek BansalAbhishek Bansal
Hi Edukondalu,

You can follow the below steps:
  1. Add your result component under the aura:if condition. Like this
  2. <aura:if isTrue="{!v.showResult}">
..........
..........
..........
</aura:if>
  3. When you click on the button call a method from javascript controller and just reverse the value of this showResult property. Like this:
  4. changeValue : function(component) {
    var val = component.get("v.showResult");
    if(val == true) 
        val = false;
    else
        val = true;
    component.set("v.showResult", val);
}
Let me know if you need any other help on this.

Thanks,
Abhishek Bansal. 
edukondalu thodetiedukondalu thodeti
Hi Abhishek Bansal
i wrote the code as below 
component1
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global" controller="objfield">
	<aura:attribute name="objList" type="List"  />
    <aura:handler name="init" value="{!this}" action="{!c.doinit}"/>
    
    <aura:if isTrue="{!v.objList.length > 0}">
        <table class="slds-table slds-table_bordered slds-table_cell-buffer">
        <thead>
            <tr class="slds-text-title_caps">
                <th scope="col">
                    <div class="slds-truncate" title="Objects">List Of Objects</div>
                </th>
              </tr>
        </thead>
        <tbody>
         	 <aura:iteration items="{!v.objList}" var="a" >
             <tr >
                  <td>
                      <c:objectSelection objName="{!a}" />
                  </td>
			</tr>
            </aura:iteration> 
        </tbody>
    </table>
    </aura:if>
</aura:component>

component2
<!-- objectSelection -->
<aura:component controller="objfield">
	<aura:attribute name="objName" type="String"  />
    <aura:attribute name="fieldsList" type="List" />
    
   <lightning:button variant="base" label="{!v.objName}" onclick="{!c.handleObjName}" onfocus="changeValue" ></lightning:button>
    
    <aura:if isTrue="{!v.fieldsList.length > 0}">
         <aura:iteration items="{!v.fieldsList}" var="a" >
            <tr >
                <td>
                  <div  class="slds-hide"> {!a}</div>
                </td>
            </tr>
          </aura:iteration> 
      </aura:if>
    
</aura:component>

controller1
({
	doinit : function(component, event, helper) {
        var action = component.get("c.getAllObjects");
        action.setCallback(this,function(response){
             var status = response.getState();
            if(status === "SUCCESS"){
                component.set("v.objList", response.getReturnValue());
            }
       
        });
        $A.enqueueAction(action);
    },
    
})
controller2
({
	handleObjName :function(component, event, helper) { 
         console.log(event.getSource().get("v.label")); 
		var action = component.get("c.getAllFields");
        
        action.setParams({"fld": event.getSource().get("v.label")});
        action.setCallback(this, function(response) {
            var state = response.getState();
            console.log(response.getReturnValue());
            if (state == "SUCCESS") {
                //alert("fld"+response.getReturnValue())
                component.set("v.fieldsList", response.getReturnValue());
            }
            
        });
        $A.enqueueAction(action);
        		
	},
  
})

the result should like these when i click on the button first time 

User-added image
and again when i click on the same button second time the result should look like these
User-added image
pls help how to do these task
Abhishek BansalAbhishek Bansal
Hi ,

Since you need to bind this functionality with all the rows so you need to create a wrapper class for this. Please add a wrapper class in your controller class and bind one boolean variable with this button. 
Make this boolean true/false based on its value.

Let me know if you need any further help on this. For any immediate assisstance, please contact me directly.

Thanks,
Abhishek Bansal.
Gmail: abhibansal2790@gmail.com
Skype: abhishek.bansal2790
Phone: +917357512102