0

We have implemented one lightning component that fetch the data from third party and display in the Lead record page as a card.

We have collapsible(single selection)sections in this component.While clicking the the section ,Spinner loads and fetch the data from API.

The above implemented functionality is working fine.But while viewing the record in first time,the section is not expendable and spinner also not load.If we reload the page it's working as expected.

This problem existed firefox and chrome as well.

Below is the our code sample .please suggest what the issues here.

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:avail 
ableForRecordHome,force:hasRecordId">
<aura:attribute name="one" type="boolean" default="false"/>
<aura:attribute name="two" type="boolean" default="false"/>
<aura:attribute name="three" type="boolean" default="false"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<div class="slds-m-around--medium">
    <section id="accordion">
    <div>   
        <input type="radio" checked="checked" name="accordion-role" 
        id="colorId"/>
        <label for="colorId">Color Names</label>
           <article>
              <div class="slds-p-around--medium">
                  <div style="position:relative">
                  <lightning:spinner aura:id="spinner1" variant="brand" 
                    size="small" class="slds=hide"/>
           </div> 
                  <aura:if isTrue="{!v.one}">
                <ol>
                   <li>Red</li>
                   <li>Blue</li>
                   <li>Green</li>
                </ol></aura:if>
               </div>     
            </article>
        </div>
        <div>
            <input type="radio" name="accordion-role" id="animalId" 
               onclick="{!c.auditinfo}"/>
            <label for="animalId">Animals Name</label>
            <article>
              <div class="slds-p-around--medium">
                  <div style="position:relative">
                  <lightning:spinner aura:id="spinner2" variant="brand" 
                size="small" class="slds=hide"/>
           </div>
                  <aura:if isTrue="{!v.two}">
                <ol>
                   <li>Tiger</li>
                   <li>Dog</li>
                   <li>cat</li>
                </ol></aura:if>
              </div>    
            </article>
        </div>
        <div>
            <input type="radio" name="accordion-role" id="fruitsId" 
               onclick="{!c.auditinfo}"/>
            <label for="fruitsId">Fruits Name</label>
            <article>
              <div class="slds-p-around--medium"> 
                  <div style="position:relative">
                  <lightning:spinner aura:id="spinner3" variant="brand" 
                size="small" class="slds=hide"/>
           </div>  
                  <aura:if isTrue="{!v.three}">
                <ol>
                   <li>Apple</li>
                   <li>Banana</li>
                   <li>Mango</li>
                </ol></aura:if>
              </div>
             </article>
           </div>
        </section>
      </div> 
    </aura:component>

===========cmp.js=============================

({
    doInit : function(component, event, helper) {
     /* settimeout function just for spinner loading purpose.In our component,we have replace with server side action*/   
    window.setTimeout(
    $A.getCallback(function() {
      $A.util.addClass(component.find("spinner1"), "slds-hide");  
        component.set("v.one",true);
    }), 5000
);


    },
 auditinfo : function(component, event, helper) {
  var whichOne = event.currentTarget.id;
     //alert('====='+whichOne);


     if(whichOne=='animalId'){
     window.setTimeout(
    $A.getCallback(function() {
      $A.util.addClass(component.find("spinner2"), "slds-hide");   
         component.set("v.two",true);
    }), 5000
);

     }
      else if(whichOne=='fruitsId'){
        window.setTimeout(
    $A.getCallback(function() {
      $A.util.addClass(component.find("spinner3"), "slds-hide"); 
         component.set("v.three",true);
    }), 5000
);       
     }

 }

})

===============CSS========================

.THIS #accordion input {
    display: none;
}
.THIS #accordion label {
    background: #f7f9fb;
    border-radius: 4px;
    cursor: pointer;
    display: block;
    margin-bottom: 2px;
    padding: 4px 16px;
    z-index: 20;
    border:1px solid #eef2f6;
}

.THIS #accordion label:hover {
    background: #eef2f6;
}

.THIS #accordion input:checked + label {
    background: #eef2f6;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    color: black;
    margin-bottom: 0;
}
.THIS #accordion article {
    background: white;
    height:0px;
    overflow:hidden;
    z-index:10;
}
.THIS #accordion input:checked ~ article {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    height: auto;
    margin-bottom: 2px;
}
  • why do you use the window.setTimeout all the time - this is not needed – Itai Shmida Jun 7 '18 at 12:10
  • In actual code ,window.setTimeout is not there.I have called server action in place of window.setTimeout.I have used this window.setTimeout just spinner showing purpose. – Madhu Nayaki Jun 8 '18 at 13:57
  • For really looking at your code -please post here the real one so we can help – Itai Shmida Jun 10 '18 at 6:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.