+ Start a Discussion
sumit dsumit d 

lightning component to show users in a card manner

Hi All,
          I want to show users like below image. how can i do this in LWC? any suggestions?
 User-added image
Best Answer chosen by sumit d
Maharajan CMaharajan C
Hi Sumit,

I have done some changes and able to navigate like standard related list:

Please use by below components for your reference:

By default i will display only 5 records using this propert =====>   @api defaultrecords = 5;

HTML:
 
<template>
    <template if:true={users.data}>
    <lightning-card  title="Forum members"  icon-name="standard:groups">
        <div class = "slds-var-m-around_medium slds-box slds-p-around_none slds-m-top_x-small slds-m-bottom_medium slds-m-horizontal_none">
            <template if:true={users.data}>
                <lightning-layout multiple-rows>
                    <template for:each={users.data} for:item = "member" for:index="index">
                        <template if:true={ifChecker}>
                            <lightning-layout-item padding="around-small" key={member.id} size="4">
                                <div key={member.id}>
                                    <img src={member.SmallPhotoUrl} />
                                    <br/><br/>
                                    {member.Name}
                                </div>
                            </lightning-layout-item>
                        </template>
                    </template>
                </lightning-layout>
          </template>
        </div>
        <div slot="footer" class="slds-align_absolute-center">  
            <a id="viewall" href="javascript:void(0)" onclick={handleviewAll}>view All</a>
        </div>
   </lightning-card>
   </template>
</template>

JS:
 
import { LightningElement,track,wire,api } from 'lwc';
import getForumMember from '@salesforce/apex/GetForumMembers.getForumMember';
import { NavigationMixin } from 'lightning/navigation';


export default class CustomForumMembers extends NavigationMixin(LightningElement) {
    @track users;
    @api defaultrecords = 5;
    currentIndex = 0;
   
    @wire(getForumMember)
    users

    get ifChecker(){
        this.currentIndex++;
        return this.currentIndex<=this.defaultrecords;
    }

    handleviewAll(){
        let defRecord = this.users.data.length;
        this[NavigationMixin.Navigate]({
            type: "standard__component",
            attributes: {
                componentName: "c__NavigateToLWC"
            },
            state: {
                c__defaultrecords: defRecord
            }
        });
    }
}

Created one Aura Component for Navigation because LWC to LWC navigation won't work directly: 
https://salesforcediaries.com/2020/06/07/navigate-to-lightning-web-component-from-another-lightning-web-component/

Component Name :   NavigateToLWC
<aura:component implements="flexipage:availableForAllPageTypes,lightning:isUrlAddressable" access="global">
    <aura:attribute type="String" name="defaultrecords"/>
    <aura:handler name="init" value="{!this}" action="{!c.init}"/>    
    <div class="slds-card">
        <c:customForumMembers defaultrecords="{!v.defaultrecords}"/>
    </div>
</aura:component>
JS:
({
    init: function(cmp, evt, helper) {
        var myPageRef = cmp.get("v.pageReference");
        var propertyValue = myPageRef.state.c__defaultrecords;
        cmp.set("v.defaultrecords", propertyValue);
    }
})

My Apex Class:
public class GetForumMembers {
	@AuraEnabled(cacheable = true)
    public static List<user> getForumMember(){
        return [Select Id,Name,SmallPhotoUrl from user limit 12];
    }
}

Now you can use the view all functionalities from custom component.

Please close this thread by marking the best answer!!!

Thanks,
Maharajan.C

All Answers

mukesh guptamukesh gupta
Hi Sumit, 

Please follow below url:-

https://www.infallibletechie.com/2020/04/reusable-related-list-using-lwc-in.html

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

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

Thanks
Mukesh 
sumit dsumit d
Hi Mukesh,
                  Thanks for the reply. How can i show the profile picture like this and the users in side by side. Right now its showing like this 
User-added image


My component is given below:- 
<template>
    <lightning-card  title="Forum members"  icon-name="standard:record">
         <div class = "slds-var-m-around_medium">
             <template if:true={users.data}>
               <template for:each={users.data} for:item = "member">
                  <div key={member.id}>
                    <img src={member.SmallPhotoUrl} />
                    <br/><br/>
                       {member.Name}
                  </div>
                </template>
           </template>
         </div>
    </lightning-card>
</template>
Controller:- 
import { LightningElement, wire, api, track } from 'lwc';
import getForumMember from '@salesforce/apex/GetForumMembers.getForumMember';
export default class CustomForumMembers extends LightningElement {
    @track users;
   
    @wire(getForumMember)
    users
}
Maharajan CMaharajan C
Hi Sumit,

When i am trying your code with some small change am able to see the below result:

User-added image
 
<template>
    <lightning-card  title="Forum members"  icon-name="standard:groups">
        <div class = "slds-var-m-around_medium slds-box slds-p-around_none slds-m-top_x-small slds-m-bottom_medium slds-m-horizontal_none">
            <template if:true={users.data}>
                <lightning-layout multiple-rows>
                    <template for:each={users.data} for:item = "member">
                        <lightning-layout-item padding="around-small" key={member.id} size="3">
                            <div key={member.id}>
                                <img src={member.SmallPhotoUrl} />
                                <br/><br/>
                                {member.Name}
                            </div>
                        </lightning-layout-item>
                    </template>
                </lightning-layout>
          </template>
        </div>
   </lightning-card>
</template>

Thanks,
Maharajan.C
sumit dsumit d
Hi Maharajan,
                      Thanks for your reply, I have created it and it looks like this now
User-added image
How can we navigate it to the Forum members after clicking on View All like we do in standard related list?
sumit dsumit d
 I am trying to use recordid here but its not working. Can you tell me what am i missing?


My Js Controller :- 
import { LightningElement, wire, api, track } from 'lwc';
import getForumMember from '@salesforce/apex/GetForumMembers.getForumMember';
import { NavigationMixin } from 'lightning/navigation';
 
export default class CustomForumMembers extends NavigationMixin(LightningElement) {
    @track users;
    @api recordId;
    @wire(getForumMember,{forumId: `$recordId`})
    users  
}
Apex controller:- 
public without sharing class GetForumMembers {
    @AuraEnabled(cacheable=true)
    public static List<User> getForumMember(String forumId) {
       
        List<Forum_Members__c> forumMemberList = [Select id, Name,Member__c,Forum__c from Forum_Members__c Where Forum__c =: forumId ];
        Set<Id> contactIds = new Set<Id>();
        Map<Id,Id> mapOfUserIdToContactId = new Map<Id,Id>();
        List<User> forumUsersList = New List<User>();
        for( Forum_Members__c fm : forumMemberList ){
            if( fm.Member__c != null ){
                contactIds.add( fm.Member__c );
            }
        }
        System.debug('contactIds'+contactIds);
        for( User ur : [ SELECT Id, ContactId
                        FROM User
                        WHERE ContactId IN : contactIds ] ){
                            if(ur.ContactId!= null){
                                mapOfUserIdToContactId.put( ur.id, ur.ContactId );
                            }
                           
                        }
        System.debug('mapOfUserIdToContactId'+mapOfUserIdToContactId);
        forumUsersList = [SELECT Id, Name, SmallPhotoUrl from User where Id IN:mapOfUserIdToContactId.KeySet()];
        System.debug('forumUsersList'+forumUsersList);
       
        return forumUsersList;
       
    }
}
Maharajan CMaharajan C
Hi Sumit,

I have done some changes and able to navigate like standard related list:

Please use by below components for your reference:

By default i will display only 5 records using this propert =====>   @api defaultrecords = 5;

HTML:
 
<template>
    <template if:true={users.data}>
    <lightning-card  title="Forum members"  icon-name="standard:groups">
        <div class = "slds-var-m-around_medium slds-box slds-p-around_none slds-m-top_x-small slds-m-bottom_medium slds-m-horizontal_none">
            <template if:true={users.data}>
                <lightning-layout multiple-rows>
                    <template for:each={users.data} for:item = "member" for:index="index">
                        <template if:true={ifChecker}>
                            <lightning-layout-item padding="around-small" key={member.id} size="4">
                                <div key={member.id}>
                                    <img src={member.SmallPhotoUrl} />
                                    <br/><br/>
                                    {member.Name}
                                </div>
                            </lightning-layout-item>
                        </template>
                    </template>
                </lightning-layout>
          </template>
        </div>
        <div slot="footer" class="slds-align_absolute-center">  
            <a id="viewall" href="javascript:void(0)" onclick={handleviewAll}>view All</a>
        </div>
   </lightning-card>
   </template>
</template>

JS:
 
import { LightningElement,track,wire,api } from 'lwc';
import getForumMember from '@salesforce/apex/GetForumMembers.getForumMember';
import { NavigationMixin } from 'lightning/navigation';


export default class CustomForumMembers extends NavigationMixin(LightningElement) {
    @track users;
    @api defaultrecords = 5;
    currentIndex = 0;
   
    @wire(getForumMember)
    users

    get ifChecker(){
        this.currentIndex++;
        return this.currentIndex<=this.defaultrecords;
    }

    handleviewAll(){
        let defRecord = this.users.data.length;
        this[NavigationMixin.Navigate]({
            type: "standard__component",
            attributes: {
                componentName: "c__NavigateToLWC"
            },
            state: {
                c__defaultrecords: defRecord
            }
        });
    }
}

Created one Aura Component for Navigation because LWC to LWC navigation won't work directly: 
https://salesforcediaries.com/2020/06/07/navigate-to-lightning-web-component-from-another-lightning-web-component/

Component Name :   NavigateToLWC
<aura:component implements="flexipage:availableForAllPageTypes,lightning:isUrlAddressable" access="global">
    <aura:attribute type="String" name="defaultrecords"/>
    <aura:handler name="init" value="{!this}" action="{!c.init}"/>    
    <div class="slds-card">
        <c:customForumMembers defaultrecords="{!v.defaultrecords}"/>
    </div>
</aura:component>
JS:
({
    init: function(cmp, evt, helper) {
        var myPageRef = cmp.get("v.pageReference");
        var propertyValue = myPageRef.state.c__defaultrecords;
        cmp.set("v.defaultrecords", propertyValue);
    }
})

My Apex Class:
public class GetForumMembers {
	@AuraEnabled(cacheable = true)
    public static List<user> getForumMember(){
        return [Select Id,Name,SmallPhotoUrl from user limit 12];
    }
}

Now you can use the view all functionalities from custom component.

Please close this thread by marking the best answer!!!

Thanks,
Maharajan.C
This was selected as the best answer
Joany ReichertJoany Reichert
You would need to create a VisualForce page or SControl which would allow the user to select a file from the local machine. 2) Read the file through Javascript. There are functions avaiable. Pasco Connect Login (https://www.mypascoconnect.biz/)
dranand 220dranand 220
Hey, I am trying to create SControl (https://apkposh.com/cartoon-wars-3-mod-apk/) as per your instructions but it is not working properly. I tshows some error. Do you please guide me what type of error it is? Either a technical or systematic error? And how can I resolve this issue.
Regards.
yumona joeyumona joe

In the present issue, some of the representative papers which were discussed at that ... interrogations, etc., carried out by the members of the Commission. https://innoutsecretmenu.online/