0

I have created a activity timeline custom component also added a collapsible section in my component but when i am clicking on one section it is opening all the section same is happening at the time of closing... I am not able to fix this issue please help me to expand only one section at the time of clicking also for closing using lightning collapsible icon.

Apex Class -

public class ActivityTimeLineForEmailMessage {

      @AuraEnabled
        public static List < EmailMessage > getMessageDetail(String emailMessageId) {
         //     System.debug('emailMessageId' + emailMessageId);
            List<EmailMessage> MessageDetail = new List<EmailMessage>([select id, Subject, TextBody, FromAddress, ToAddress, RelatedToId, ParentId from EmailMessage where ParentId = :emailMessageId ]);
              return MessageDetail;
    }

}

Application :-

  < aura:application extends="force:slds">
    < qwerty:ActivityTimeLineGrazitti /> 
  < /aura:application>

Component :

< aura:component implements="flexipage:availableForRecordHome,force:hasRecordId,lightning:actionOverride" access="global" controller="ActivityTimeLineForEmailMessage">

      <aura:attribute name="EmailMsgs" type="EmailMessage[]" />
    <aura:attribute name="recordId" type="String" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <div class="demo-only" style="width:400px">     
       <ul class="slds-timeline">
           <aura:iteration var="oneMsg" items="{!v.EmailMsgs}">
         <li>
             <div class="slds-timeline__item_expandable slds-timeline__item_email slds-is-open">
                <span class="slds-assistive-text">email</span>
                  <div class="slds-media">
                    <div class="slds-media__figure">
                      <button class="slds-button slds-button_icon" title="Toggle details for Re: Mobile conversation on Monday with the new global team" aria-controls="email-item-narrow" aria-expanded="true" onclick="{!c.emailsection}">
                        <section class="slds-clearfix">
                            <div class="slds-float--left ">
                                <lightning:icon class="slds-show" aura:id="emaildetail" iconName="utility:add" size="x-small" alternativeText="Indicates add"/>
                                <lightning:icon class="slds-hide" aura:id="emaildetail" iconName="utility:dash" size="x-small" alternativeText="Indicates dash"/>
                            </div>
                        </section>
                      <span class="slds-assistive-text">Toggle details for Re: Mobile conversation on Monday with the new global team</span>
                      </button>
                    <div class="slds-icon_container slds-icon-standard-email slds-timeline__icon" title="email">
                        <lightning:icon iconName="action:email" size="x-small" alternativeText="Indicates mail sign"/>
                    </div>
                   </div>
          <div class="slds-media__body">
            <div class="slds-grid slds-grid_align-spread slds-timeline__trigger">
              <div class="slds-grid slds-grid_vertical-align-center slds-truncate_container_75 slds-no-space">
                  <h3 class="slds-truncate" title="Subject of Send/Receive mail">
                       <a href="javascript:void(0);">
                           <strong> {!oneMsg.Subject} </strong>
                       </a>
                  </h3>
                  <div class="slds-no-flex">
                     <span class="slds-icon_container slds-icon-utility-groups" title="Group email">
                        <lightning:icon class="icongreen" iconName="utility:arrowup"/>
                        <span class="slds-assistive-text">Group email</span>
                     </span>

                  </div>
              </div>
              <div class="slds-timeline__actions slds-timeline__actions_inline">
                      <p class="slds-timeline__date">
                            <lightning:formattedDateTime value="{!oneMsg.MessageDate}" year="numeric" month="numeric" day="numeric" hour="2-digit" minute="2-digit" timeZoneName="short" />
                      </p>
              </div>
           </div>
            <p class="slds-m-horizontal_xx-small">
              <a href="javascript:void(0);">You</a> emailed
              <a href="javascript:void(0);">{!oneMsg.ToAddress}</a>
            </p>
            <article class="slds-box slds-timeline__item_details slds-theme_shade slds-m-top_x-small slds-m-horizontal_xx-small slds-p-around_medium" aura:id="emaildetail" id="email-item-narrow" aria-hidden="false">
              <ul class="slds-list_horizontal slds-wrap">
                <li class="slds-grid slds-grid_vertical slds-size_1-of-2 slds-p-bottom_small">
                  <span class="slds-text-title slds-p-bottom_x-small">From Address</span>
                  <span class="slds-text-body_medium slds-truncate" title="Jackie Dewar">
                    <a href="javascript:void(0);">{!oneMsg.FromAddress}</a>
                  </span>
                </li>
                <li class="slds-grid slds-grid_vertical slds-size_1-of-2 slds-p-bottom_small">
                  <span class="slds-text-title slds-p-bottom_x-small">To Address</span>
                  <span class="slds-text-body_medium slds-truncate" title="Lea Chan">
                    <a href="javascript:void(0);">{!oneMsg.ToAddress}</a>
                  </span>
                </li>
              </ul>
              <div>
                <span class="slds-text-title">Text Body</span>
                    <p class="slds-p-top_x-small">
                      <!--  <aura:unescapedHtml value="{!oneMsg.HtmlBody}"/>  -->
                     <p class="linewidth"> {!oneMsg.TextBody} </p>  
                  </p>
              </div>
                <lightning:button name="modal" label="Reply" aura:id="{!oneMsg.Id}" value="{!oneMsg.Id}" onclick="{!c.replyEmailmsg}" />
            </article>
          </div>
        </div>
      </div>
    </li>
           </aura:iteration>
   < /ul>
 < /div>
< /aura:component>

Controller:-

({
    doInit : function(component, event, helper) {
        var currentRec = component.get("v.recordId");
        console.log('>>>>>>'+currentRec);
        helper.getEmailMessages(component,event,currentRec);        
    },

    emailsection : function(component, event, helper) {

      var acc = component.find('emaildetail');
     $A.util.toggleClass(acc, 'slds-show');  
        helper.helperFun(component,event,'emaildetail');
    },
})

Helper:-

({
    helperFun : function(component,event,secId) {
      var acc = component.find(secId);
            for(var cmp in acc) {
            $A.util.toggleClass(acc[cmp], 'slds-show');  
            $A.util.toggleClass(acc[cmp], 'slds-hide');  
            }
},

    getEmailMessages : function(component,event,currentRec) {
        console.log('###helper record id##'+currentRec);        
        var action = component.get("c.getMessageDetail");
        action.setParams({
            "emailMessageId": currentRec             
        });

        action.setCallback(this, function (response) {
            var state = response.getState();
            if (state === "SUCCESS") {                
                component.set("v.EmailMsgs", response.getReturnValue());

            }  else if (state === "INCOMPLETE") {
                console.log("No response from server or client is offline.")
                var myErrMsg='No response from server or client is offline.';

            } else if (state === "ERROR") {                
                console.log("Error: ");
            }
        });
        $A.enqueueAction(action);        
    },
0

All the sections are opening and closing at the same time as the email message sections have the same localId "emaildetail". you should ideally have a way to identify which record you are clicking to show or hide the detail.

I have made few changes to the code.

Added "sectionId" attribute to capture the recordId of emailmessage we want to show. and aura:if to hide or show the details and buttons.

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId,lightning:actionOverride" access="global" controller="ActivityTimeLineForEmailMessage">
<aura:attribute name="EmailMsgs" type="EmailMessage[]" />
<aura:attribute name="recordId" type="String"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:attribute name="sectionId" type="String" default=""/>
<div class="demo-only" style="width:400px">     
    <ul class="slds-timeline">
        <aura:iteration var="oneMsg" items="{!v.EmailMsgs}">
            <li>
                <div class="slds-timeline__item_expandable slds-timeline__item_email slds-is-open">
                    <span class="slds-assistive-text">email</span>
                    <div class="slds-media">
                        <div class="slds-media__figure">
                            <button class="slds-button slds-button_icon" id="{!oneMsg.Id}" name="{!oneMsg.Id}" title="Toggle details for Re: Mobile conversation on Monday with the new global team" aria-controls="email-item-narrow" aria-expanded="true" onclick="{!c.emailsection}">
                                <section class="slds-clearfix">
                                    <div class="slds-float--left ">
                                        <aura:if isTrue="{!v.sectionId != oneMsg.Id}">
                                            <lightning:icon class="slds-show" aura:id="emaildetail"  iconName="utility:add" size="x-small" alternativeText="Indicates add"/>
                                            <aura:set attribute="else">
                                                <lightning:icon class="slds-show" aura:id="emaildetail"  iconName="utility:dash" size="x-small" alternativeText="Indicates dash"/>
                                            </aura:set>
                                        </aura:if>
                                    </div>
                                </section>
                                <span class="slds-assistive-text">Toggle details for Re: Mobile conversation on Monday with the new global team</span>
                            </button>
                            <div class="slds-icon_container slds-icon-standard-email slds-timeline__icon" title="email">
                                <lightning:icon iconName="action:email" size="x-small" alternativeText="Indicates mail sign"/>
                            </div>
                        </div>
                        <div class="slds-media__body">
                            <div class="slds-grid slds-grid_align-spread slds-timeline__trigger">
                                <div class="slds-grid slds-grid_vertical-align-center slds-truncate_container_75 slds-no-space">
                                    <h3 class="slds-truncate" title="Subject of Send/Receive mail">
                                        <a href="javascript:void(0);">
                                            <strong> {!oneMsg.Subject} </strong>
                                        </a>
                                    </h3>
                                    <div class="slds-no-flex">
                                        <span class="slds-icon_container slds-icon-utility-groups" title="Group email">
                                            <lightning:icon class="icongreen" iconName="utility:arrowup"/>
                                            <span class="slds-assistive-text">Group email</span>
                                        </span>

                                    </div>
                                </div>
                                <div class="slds-timeline__actions slds-timeline__actions_inline">
                                    <p class="slds-timeline__date">
                                        <lightning:formattedDateTime value="{!oneMsg.MessageDate}" year="numeric" month="numeric" day="numeric" hour="2-digit" minute="2-digit" timeZoneName="short" />
                                    </p>
                                </div>
                            </div>
                            <p class="slds-m-horizontal_xx-small">
                                <a href="javascript:void(0);">You</a> emailed
                                <a href="javascript:void(0);">{!oneMsg.ToAddress}</a>
                            </p>
                            <aura:if isTrue="{!v.sectionId == oneMsg.Id}">
                                <article class="slds-box slds-timeline__item_details slds-theme_shade slds-m-top_x-small slds-m-horizontal_xx-small slds-p-around_medium" aura:id="emaildetail" id="{!oneMsg.Id}" aria-hidden="false">
                                    <ul class="slds-list_horizontal slds-wrap">
                                        <li class="slds-grid slds-grid_vertical slds-size_1-of-2 slds-p-bottom_small">
                                            <span class="slds-text-title slds-p-bottom_x-small">From Address</span>
                                            <span class="slds-text-body_medium slds-truncate" title="Jackie Dewar">
                                                <a href="javascript:void(0);">{!oneMsg.FromAddress}</a>
                                            </span>
                                        </li>
                                        <li class="slds-grid slds-grid_vertical slds-size_1-of-2 slds-p-bottom_small">
                                            <span class="slds-text-title slds-p-bottom_x-small">To Address</span>
                                            <span class="slds-text-body_medium slds-truncate" title="Lea Chan">
                                                <a href="javascript:void(0);">{!oneMsg.ToAddress}</a>
                                            </span>
                                        </li>
                                    </ul>
                                    <div>
                                        <span class="slds-text-title">Text Body</span>
                                        <p class="slds-p-top_x-small">
                                            <!--  <aura:unescapedHtml value="{!oneMsg.HtmlBody}"/>  -->
                                            <p class="linewidth"> {!oneMsg.TextBody} </p>  
                                        </p>
                                    </div>
                                    <lightning:button name="modal" label="Reply" aura:id="{!oneMsg.Id}" value="{!oneMsg.Id}" onclick="{!c.replyEmailmsg}" />
                                </article>
                            </aura:if>
                        </div>
                    </div>
                </div>
            </li>
        </aura:iteration>

    </ul> </div> 

controller:

    ({ 
    doInit : function(component, event, helper) { 
        var currentRec = component.get("v.recordId"); 
        console.log('>>>>>>'+currentRec); 
        helper.getEmailMessages(component,event,currentRec);
    },

    emailsection : function(component, event, helper) {

        //var acc = component.find('emaildetail');
        //$A.util.toggleClass(acc, 'slds-show');  
        //helper.helperFun(component,event,'emaildetail');
        var emailMessageId = event.currentTarget.id;
        var currentSectionId = component.get("v.sectionId");

        if ($A.util.isEmpty(currentSectionId) || currentSectionId != emailMessageId) {
            component.set("v.sectionId", emailMessageId);
        } else {
            component.set("v.sectionId", ''); 
        }
    },
})

try and let me know if it works..

1
  • Hi @veera, This Solution is absolutely working as i wanted, thanks for your help. – user76397 Dec 2 '19 at 10:30

Your Answer

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