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
kiran raju 19kiran raju 19 

Display the related contact in the opportunity

Hi all,

I want to display the contact in the Opportunity which are related to the same account in the salesforce lighting.

Can anyone help over here.

Thanks in advance,
raju.
mukesh guptamukesh gupta
Hi Kran,

you can follow below code:-
  
<aura:attribute name="Accounts" type="Account[]"/> 
<aura:attribute name="page" type="integer" description="using for store page Number"/>
<aura:attribute name="pages" type="integer" description="using for store All Pages page Number"/>
<aura:attribute name="total" type="integer" description="total records count store "/>

    <p class="slds-text-title_caps">
        Account
    </p>
    <div class="slds-p-around--large"   >
        <aura:iteration items="{!v.Accounts}" var="account" aura:id="accID"  >

            <div class="slds-page-header" style="cursor: pointer;"  data-record="{!idx}" onclick="{!c.sectionOne}" >

                <section class="slds-clearfix" >

                    <div class="slds-float--left ">
                        <lightning:icon class="slds-show" aura:id="articleOne" iconName="utility:add" size="x-small" alternativeText="Indicates add"/>
                        <lightning:icon class="slds-hide" aura:id="articleOne" iconName="utility:dash" size="x-small" alternativeText="Indicates dash"/>
                    </div>
                    <div class="slds-m-left--large" ><ui:outputText aura:id="Id" value="{!account.Name}"  />
                        </div>

                </section>
            </div>


            <div class="slds-hide slds-p-around--medium" aura:id="articleOne"  >
                <table class="slds-table slds-table--bordered slds-table--cell-buffer slds-table--striped slds-max-medium-table--stacked-horizontal"
                       role="grid">  
                    <thead >
                        <tr>
                            <th class="slds-is-sortable slds-cell-wrap" scope="col">
                                Account name
                            </th>
                           <th class="slds-is-sortable slds-cell-wrap" scope="col">
                                Contact Name
                            </th>
                            <th class="slds-is-sortable slds-cell-wrap" scope="col">
                                Phone
                            </th>
                            <th class="slds-is-sortable slds-cell-wrap" scope="col">
                                Mailing City
                            </th>
                            <th class="slds-is-sortable slds-cell-wrap" scope="col">
                                Mailing Country
                            </th>
                            <th class="slds-is-sortable slds-cell-wrap" scope="col">
                                Contact ID
                            </th>
                        </tr>
                    </thead>     
                    <tbody>
                        <aura:iteration items="{!account.Contacts}" var="con"  >

                           <tr class="slds-hint-parent">
                                <td role="gridcell" class="slds-cell-wrap" data-label="Name">
                                    {!account.Name}
                                </td>
                                <td role="gridcell" class="slds-cell-wrap" data-label="accName">
                                    {!con.Name}
                                </td>
                                <td role="gridcell" class="slds-cell-wrap" data-label="prName">
                                    {!con.Phone}
                                </td>
                                <td role="gridcell" class="slds-cell-wrap" data-label="manuName">
                                    {!con.MailingCity}
                                </td>   
                                <td role="gridcell" class="slds-cell-wrap" data-label="manuName">
                                    {!con.MailingCountry }
                                </td> 
                                <td role="gridcell" class="slds-cell-wrap" data-label="manuName">
                                    {!con.Id}
                                </td> 

                            </tr>
                         </aura:iteration>           
                    </tbody>              
                </table>      
            </div> 
            <div class="slds-hide slds-p-around--medium" aura:id="articleOne">
                <table class="slds-table slds-table--bordered slds-table--cell-buffer slds-table--striped slds-max-medium-table--stacked-horizontal"
                       role="grid">  
                    <thead >
                        <tr>
                            <th class="slds-is-sortable slds-cell-wrap" scope="col">
                                Account name
                            </th>
                           <th class="slds-is-sortable slds-cell-wrap" scope="col">
                                Opportunity Name
                            </th>
                            <th class="slds-is-sortable slds-cell-wrap" scope="col">
                                StageName
                            </th>
                            <th class="slds-is-sortable slds-cell-wrap" scope="col">
                                CloseDate
                            </th>
                            <th class="slds-is-sortable slds-cell-wrap" scope="col">
                                Probability 
                            </th>
                            <th class="slds-is-sortable slds-cell-wrap" scope="col">
                                Opportunity ID
                            </th>
                        </tr>
                    </thead>     
                    <tbody>
                        <aura:iteration items="{!account.Opportunities}" var="opp">

                           <tr class="slds-hint-parent">
                                <td role="gridcell" class="slds-cell-wrap" data-label="Name">
                                    {!account.Name}
                                </td>
                                <td role="gridcell" class="slds-cell-wrap" data-label="accName">
                                    {!opp.Name}
                                </td>
                                <td role="gridcell" class="slds-cell-wrap" data-label="prName">
                                    {!opp.StageName}
                                </td>
                                <td role="gridcell" class="slds-cell-wrap" data-label="manuName">
                                    {!opp.CloseDate}
                                </td>   
                                <td role="gridcell" class="slds-cell-wrap" data-label="manuName">
                                    {!opp.Probability}
                                </td> 
                                <td role="gridcell" class="slds-cell-wrap" data-label="manuName">
                                    {!opp.Id}
                                </td> 

                            </tr>
                         </aura:iteration>           
                    </tbody>              
                </table>      
            </div>
        </aura:iteration>            
    </div>
    <!-- FOOTER -->
    <footer class="slds-card__footer">

        <!-- LAYOUT GRID -->
        <div class="slds-grid slds-grid_align-spread">
        <lightning:button disabled="{!v.page == 1}" variant="brand" label="Previous Page" onclick="{! c.navigate }" />            
            <lightning:button disabled="{!v.page == v.pages}" aura:id="previousPage" variant="brand" label="Next Page" onclick="{! c.navigate }" />
        </div>

        <p class="slds-align_absolute-center">{!v.total} Accounts • page {!v.page} / {!v.pages}</p>
        <ui:inputSelect aura:id="recordSize" label="Display Record Per Page: " change="{!c.onSelectChange}">
            <ui:inputSelectOption text="10" label="10" value="true"/>
            <ui:inputSelectOption text="20" label="20"/>
            <ui:inputSelectOption text="40" label="40"/>
            <ui:inputSelectOption text="60" label="60"/>
            <ui:inputSelectOption text="80" label="80"/>
            <ui:inputSelectOption text="100" label="100"/>
            <ui:inputSelectOption text="120" label="120"/>
            <ui:inputSelectOption text="140" label="140"/>
            <ui:inputSelectOption text="160" label="160"/>

        </ui:inputSelect>

      <!-- / LAYOUT GRID -->
    </footer>
    <!-- / FOOTER -->
  
({
   doInit: function(component, event, helper) {
      // this function call on the component load first time     
      // get the page Number if it's not define, take 1 as default
      var page = component.get("v.page") || 1;
      // get the select option (drop-down) values.   
      var recordToDisply = component.find("recordSize").get("v.value");
      // call the helper function   
      helper.getAccounts(component, page, recordToDisply);

   },

   navigate: function(component, event, helper) {
      // this function call on click on the previous page button  
      var page = component.get("v.page") || 1;
      // get the previous button label  
      var direction = event.getSource().get("v.label");
      // get the select option (drop-down) values.  
      var recordToDisply = component.find("recordSize").get("v.value");
      // set the current page,(using ternary operator.)  
      page = direction === "Previous Page" ? (page - 1) : (page + 1);
      // call the helper function
      helper.getAccounts(component, page, recordToDisply);

   },

   onSelectChange: function(component, event, helper) {
      // this function call on the select option change,   
      var page = 1
      var recordToDisply = component.find("recordSize").get("v.value");
      helper.getAccounts(component, page, recordToDisply);
   },



    sectionOne: function(component, event, helper) {
       helper.helperFun(component,event,'articleOne');
    },


})
  
({ 
   getAccounts: function(component, page, recordToDisply) {

      var action = component.get("c.fetchAccount");
      action.setParams({
         "pageNumber": page,
         "recordToDisply": recordToDisply


      });
      action.setCallback(this, function(a) {
         var result = a.getReturnValue();
         console.log('result ---->' + JSON.stringify(result));
         component.set("v.Accounts", result.accounts);
         component.set("v.page", result.page);
         component.set("v.total", result.total);
         component.set("v.pages", Math.ceil(result.total / recordToDisply));


      });
      $A.enqueueAction(action);
   },

    helperFun : function(component,event,articleOne) {

      //var accValue = component.find("accID").get("v.value");
        //console.log(component.find("accID").get("v.value"));
      var acc = component.find(articleOne);
            for(var cmp in acc) {
            $A.util.toggleClass(acc[cmp], 'slds-hide');  
            $A.util.toggleClass(acc[cmp], 'slds-show');  
        } 
    },
})
  
public with sharing class samplePagerCtrl {
    @AuraEnabled
    public static AccountPagerWrapper fetchAccount(Decimal pageNumber ,Integer recordToDisply) {
        Integer pageSize = recordToDisply;
        Integer offset = ((Integer)pageNumber - 1) * pageSize;

        // create a instance of wrapper class.
        AccountPagerWrapper obj =  new AccountPagerWrapper();
        // set the pageSize,Page(Number), total records and accounts List(using OFFSET)   
        obj.pageSize = pageSize;
        obj.page = (Integer) pageNumber;
        obj.total = [SELECT count() FROM account];
        obj.accounts = [SELECT id, AccountNumber, Name, Industry, Type,
                       (SELECT Id,Account.name, Name, Phone,MailingCity,MailingCountry FROM Contacts),
                       (SELECT Id,Account.name,Name,StageName,CloseDate,Probability FROM Opportunities)  
                        FROM Account ORDER BY Name LIMIT :recordToDisply OFFSET :offset];
        //obj.contacts = [SELECT Id, Name FROM Contact where Account.Id = '' ORDER BY Name LIMIT:5  ];
        // return the wrapper class instance .
        return obj;
    }

    // create a wrapper class with @AuraEnabled Properties    
    public class AccountPagerWrapper {
        @AuraEnabled public Integer pageSize {get;set;}
        @AuraEnabled public Integer page {get;set;}
        @AuraEnabled public Integer total {get;set;}
        @AuraEnabled public List<Account> accounts{get;set;}
      //@AuraEnabled public List<Contact> contacts{get;set;}

    }
}


if you fond this useful then, PLEASE MARK AS A BEST ANSWER!!


Regards
Mukesh
Deepali KulshresthaDeepali Kulshrestha
Hi Kiran,

In order to do this, you can create an inline VF page and attach that page to the opportunity.
Here I have created a page that will display the Account,Contact and its related opportunities.
Please refer to the sample code
<apex:page controller="AccContact">
  <apex:form >
  <apex:pageBlock >
  <apex:pageBlockTable value="{!acclst}" var="a">
  
 <apex:column headerValue="Name">
  <apex:commandLink action="{!selacc}">
  <apex:param name="conlst" value="{!a.id}"/>
  <apex:outputText value="{!a.name}"/>
  </apex:commandlink>
  </apex:column>
  <!--accounts-->
   </apex:pageBlockTable>
    <apex:pageBlockTable value="{!accconts1}" var="a">
    <apex:column headerValue="AccountName" value="{!a.Name}"/>
    <!--contacts-->
    <apex:column headerValue="list contacts">
   <apex:pageBlockTable value="{!a.contacts}" var="c">
  <apex:column headerValue="ContactName">
  <apex:outputText value="{!c.lastname}"></apex:outputText>
  </apex:column>
  <!--opportunities-->
  <apex:column headerValue="Opportunity list">
  <apex:pageBlockTable value="{!a.opportunities}" var="p">
  <apex:column headerValue="Opportunity Name">
  <apex:outputText value="{!p.name}">
  </apex:outputText>
  </apex:column>
  </apex:pageBlockTable><!-- End opportunity-->
  </apex:column>
 </apex:pageBlockTable><!-- End contact-->
 </apex:column>
 </apex:pageBlockTable><!--end account-->
  </apex:pageBlock>
  </apex:form>
</apex:page>

Controller:
public with sharing class AccContact {

    public list<contact> conlst { get; set; }

   // public contact c { get; set; }
   /* public  void getSelacc() {
    }*/

    public list<account> accconts1 { get; set; }

    public PageReference selacc() {
    string getid=apexpages.currentpage().getparameters().get('conlst');
         accconts1=[select id,name,(select id,lastname from contacts) ,(select name from Opportunities ) from account 

where id=:getid ];
            system.debug(accconts1);
      return null;
    }


    public List<Account> acclst { get; set; }
   public  AccContact (){
     acclst=[select id,name  from account ];
     system.debug(acclst);
   
   }
}

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Deepali Kulshrestha