How to display the return data of different types of objects separately in html.

This is Controller Class:
public with sharing class DataController {

    @AuraEnabled(cacheable=true)
    public static List<List<sObject>> getData(String keyword){
        String searchquery = 'FIND \'' + keyword + '*\' IN ALL FIELDS RETURNING Account(Id, Name), Contact(Id, Name)';
        List<List< SObject>> searchList = search.query(searchquery);
        system.debug('Search List is ' + searchList);
        Account[] searchAccounts = (Account[])searchList[0];
        System.debug('searchAccounts'+searchAccounts);
        Contact[] searchContacts = (Contact[])searchList[1];
        System.debug('searchContacts'+searchContacts);

        return searchList;
    }
}
Thanks.

August 10, 2021
·
Answer
·
Like
0
·
Follow
0

mukesh gupta
Hi Raghav,

Please follow below code:-

Apex class:- DataController
public with sharing class DataController { @AuraEnabled(cacheable=true) public static List<List<sObject>> getData(String keyword){ WraperForStorage wrperObj = new WraperForStorage(); String searchquery = 'FIND \'' + keyword + '*\' IN ALL FIELDS RETURNING Account(Id, Name), Contact(Id, Name)'; List<List< SObject>> searchList = search.query(searchquery); system.debug('Search List is ' + searchList); Account[] searchAccounts = (Account[])searchList[0]; System.debug('searchAccounts'+searchAccounts); Contact[] searchContacts = (Contact[])searchList[1]; System.debug('searchContacts'+searchContacts); wrperObj.acntsLst = searchAccounts; wrperObj.cntsLst = searchContacts; return wrperObj; } Public class WraperForStorage{ @AuraEnabled Public List<Account> acntsLst {get;set;} @AuraEnabled Public List<Contact> cntsLst {get;set;} Public WraperForStorage(){} } }

Controller.js
({ searchResult: function(component, event, helper) { var action = component.get("c.getData"); action.setParams({ "keyword": component.get("v.searchName") }); action.setCallback(this, function(response) { var state = response.getState(); if (state === "SUCCESS") { var res = response.getReturnValue(); component.set("v.wrapperList", res); } }); $A.enqueueAction(action); } })

Lightning component :-
<aura:component controller="DataController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" > <aura:attribute name="searchName" type="String" /> <aura:attribute name="acntsList" type="Account[]" /> <aura:attribute name="contsList" type="Contact[]" /> <aura:attribute name="wrapperList" type="object"/> <div class="slds-theme_default" > <div class="slds-card slds-p-around--large"> <lightning:input type="search" label="Please Enter Account Name" name="search" value="{!v.searchName}" required="true" placeholder="SearchInAll" onkeyup="{!c.searchResult}"/> </div> <aura:if isTrue="{!v.wrapperList.acntsLst.length > 0}"> <div class="slds-card"> <div class="slds-text-heading_medium"> <strong>Search Result Based On Acount Name</strong> </div> <lightning:accordion > <lightning:accordionSection name="Accounts" label="Accounts"> <aura:set attribute="body"> <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="Id">Id</div> </th> <th scope="col"> <div class="slds-truncate" title="Name">Name</div> </th> <th scope="col"> <div class="slds-truncate" title="Type">Type</div> </th> </tr> </thead> <tbody> <aura:iteration items="{!v.wrapperList.acntsLst}" var="con"> <tr> <th scope="row"> <div class="slds-truncate" title="{#con.Id}">{#con.Id}</div> </th> <th scope="row"> <div class="slds-truncate" title="{#con.Name}">{#con.Name}</div> </th> <th scope="row"> <div class="slds-truncate" title="{#con.Type}">{#con.Type}</div> </th> </tr> </aura:iteration> </tbody> </table> </aura:set> </lightning:accordionSection>  <lightning:accordionSection name="Contacts" label="Contacts"> <aura:set attribute="body"> <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="Id">Id</div> </th> <th scope="col"> <div class="slds-truncate" title="Name">Name</div> </th> <th scope="col"> <div class="slds-truncate" title="AccountName">AccountName</div> </th> </tr> </thead> <tbody> <aura:iteration items="{!v.wrapperList.cntsLst}" var="con"> <tr> <th scope="row"> <div class="slds-truncate" title="{#con.Id}">{#con.Id}</div> </th> <th scope="row"> <div class="slds-truncate" title="{#con.Name}">{#con.Name}</div> </th> <th scope="row"> <div class="slds-truncate" title="{#con.Account.Name}">{#con.Account.Name}</div> </th> </tr> </aura:iteration> </tbody> </table> </aura:set> </lightning:accordionSection> </lightning:accordion> </div> </aura:if> </div> </aura:component>

if you need any assistanse, Please let me know!!

Kindly mark my solution as the best answer if it helps you.

Thanks
Mukesh

August 10, 2021
·
Like
1
·
Dislike
0

Raghav T
can you help me out, how can i display this incoming Data in datatable.

August 10, 2021
·
Like
0
·
Dislike
0

mukesh gupta
Hi Rahghav,

Please follw below code:-

Component:-
<aura:attribute name="mycolumns" type="List"/> <aura:attribute name="acntsList" type="Account[]" /> <lightning:datatable data="{!v.acntsList}" columns="{!v.mycolumns}" keyField="id" hideCheckboxColumn="true"/>
Controller.js:-

component.set('v.mycolumns', [ {label: 'Account Name', fieldName: 'Name', type: 'text'}, {label: 'Industry', fieldName: 'Industry', type: 'text'}, {label: 'Type', fieldName: 'Type', type: 'Text'} ]);

if you need any assistanse, Please let me know!!

Kindly mark my solution as the best answer if it helps you.

Thanks
Mukesh

August 10, 2021
·
Like
0
·
Dislike
0

Raghav T
Hi Mukesh,
This is My DataController.cls:

public with sharing class DataController {

    @AuraEnabled(cacheable=true)
    public static List<List<sObject>> getData(String keyword){
        WraperForStorage wrperObj = new WraperForStorage();
        String searchquery = 'FIND \'' + keyword + '*\' IN ALL FIELDS RETURNING Account(Id, Name, Phone, Industry, Website), Contact(Id, Name, Phone, Email)';
        List<List< SObject>> searchList = search.query(searchquery);
        system.debug('Search List is ' + searchList);
        Account[] searchAccounts = (Account[])searchList[0];
        System.debug('searchAccounts'+searchAccounts);
        Contact[] searchContacts = (Contact[])searchList[1];
        System.debug('searchContacts'+searchContacts);
        wrperObj.acntsLst = searchAccounts;
        wrperObj.cntsLst = searchContacts;
        return wrperObj;
    }
    Public class WraperForStorage{
        @AuraEnabled Public List<Account> acntsLst {get;set;}
        @AuraEnabled Public List<Contact> cntsLst {get;set;}
        // Public WraperForStorage(){}
      }
}

And This is My soslComponenetSearch.js:

import { LightningElement, track } from 'lwc';
import getData from '@salesforce/apex/DataController.getData';
export default class SoslComponentSearch extends LightningElement {
    key;
    @track allData;
    @track error;
    searchVal(event) {
        this.key = event.target.value;
        console.log('The Key value : '+this.key);
    }
    Acc_cols = [
        { label: 'Account Name', fieldName: 'Name', type: 'text' },
        { label: 'Phone', fieldName: 'Phone', type: 'phone' },
        { label: 'Industry', fieldName: 'Industry', type: 'text' },
        { label: 'Website', fieldName: 'Website', type: 'URL' }
    ];
    Con_cols = [
        { label: 'Contact Name', fieldName: 'Name', type: 'text' },
        { label: 'Phone', fieldName: 'Phone', type: 'Phone' },
        { label: 'Email', fieldName: 'Email', type: 'Email' }
    ];
    handleSearch(event){
        if (this.key) {
            console.log('Key '+this.key);
            getData({keyword : this.key})
            .then(result => {
                console.log('inside out result...');
                this.allData = result;
                console.log('I am here',this.allData);
            })
            .catch(error => {
                console.log('Time for error...');
                this.error = error;
            });
        } else {
            console.log('Undefined data...');
            this.allData = undefined;
        }
    }
}

when i try to console.log(allData) it show Undefined in console.
And also in html i am unable to get results. Please help me out.

And This is My HTML code:

<template>
    <lightning-card title='Search Data'>
        <lightning-layout multiple-rows="true" vertical-align="end">
            <lightning-layout-item size="4" padding="around-small">
                <lightning-input type="search" label="Enter Account Name" value={key} onchange={searchVal} ></lightning-input>
            </lightning-layout-item>
            <lightning-layout-item size="3" padding="around-small">
                <lightning-button label="Search" onclick={handleSearch} variant="brand"></lightning-button>
            </lightning-layout-item>
        </lightning-layout>
    </lightning-card>
    <lightning-card>
        <lightning-layout>
            <lightning-layout-item size="12" padding="around-small">
                <lightning-datatable
                    key-field="id"
                    data={allData.acntsLst}
                    columns={Acc_cols}
                    hide-checkbox-column="true">
                </lightning-datatable>
            </lightning-layout-item>
        </lightning-layout>
        <lightning-layout>
            <lightning-layout-item size="12" padding="around-small">
                <lightning-datatable
                    key-field="id"
                    data={allData.cntsLst}
                    columns={Con_cols}
                    hide-checkbox-column="true">
                </lightning-datatable>
            </lightning-layout-item>
        </lightning-layout>
    </lightning-card>
</template>

Thanks.

August 10, 2021
·
Like
0
·
Dislike
0

Raghav T
so is there any way that i can define acnLst and cntsLst in .js and then use in the LWC datatable.

August 11, 2021
·
Like
0
·
Dislike
0

mukesh gupta
Hi Raghav,

You need use @track key;

and you can use
this.allAccData = result.acnLst ;
this.allConData = result.cntsLst;
<p>Displaying Contact Information</p> <template if:true={allConData }> <template for:each={allConData } for:item="item" for:index="index"> <p key={item.Id}> Name: {item.Name} </p> </template> </template> <template if:true={error}> Some error occured. </template>

<p>Displaying Account Information</p> <template if:true={allAccData }> <template for:each={allAccData} for:item="item" for:index="index"> <p key={item.Id}> Name: {item.Name} </p> </template> </template> <template if:true={error}> Some error occured. </template>

if you need any assistanse, Please let me know!!

Kindly mark my solution as the best answer if it helps you.

Thanks
Mukesh

August 11, 2021
·
Like
0
·
Dislike
0

You need to sign in to do that.

Need an account? Sign Up

Have an account? Sign In

Dismiss

Browse by Topic

Welcome to Support!

Show

sorted by

How to display the return data of different types of objects separately in html.

You need to sign in to do that.