0

I have a search bar which is showing the Users, Queues and Public Groups from the ORG, when you start typing on the search bar the different objects start to appear. I want to show the results with different avatars depending of what it is, so if the possible results are:

  • Queues-> show standard:queue
  • Public Groups-> show standard:groups
  • User-> show standard:avatar (or if it's possible show the avatar based on the user sex)
  • Have some space between results.

I can't find much documentation on how to use the LWC avatar, I think I should loop through the possible results in JS, but I am not sure how to call the LWC avatar there.

My HTML for the moment is like this:

       <!--search box, input box + -->
                                <lightning-input type="text" id="combobox-id-16" value={userName} 
                                    onchange={handleKeyChange} onkeydown={handleClick} onclick={handleClick}
                                    onblur={handleClick} aria-activedescendant="option1" label='Find User or Group'
                                    aria-autocomplete="list" aria-controls="listbox-id-12" role="textbox"
                                    placeholder="Search...">
                                </lightning-input>   
                                <template if:true={showSearchedValues}>
                                    <div class="slds-box" style="height: 130px; overflow-y: scroll;">
                                        <ul class="" role="">
                                            <template for:each={usersGroupList} for:item="userObj" >
                                                <li  class="slds-p-around_x-mall" key={userObj.id} data-value={userObj.id}
                                                data-label={userObj.name} style="cursor: pointer;" onclick={handleParentSelection}>
                                                
                                                <lightning-avatar key={userObj.id} src="/bad/image/url.jpg" 
                                                fallback-icon-name="standard:avatar"  
                                                alternative-text="User,Queue or Public Group"
                                                size="small" 
                                                class="slds-m-right_small"> 
                                                </lightning-avatar> {userObj.name}: {userObj.type} 
                                                </li>
                                            </template>
                                        </ul>
                                    </div>
                                </template>
                            
                            </div>
                            <!-- Start : Parent Search Result -->
                            <div if:true={messageResult}>
                                No Result Found!
                            </div>

JS code

//call data for SearchBar
import getAllUsersGroups from '@salesforce/apex/UserGroupsController.getAllUsersGroups';
//call data for Dual Listbox
import fetchQueuesPubGrps from '@salesforce/apex/UserGroupsController.fetchQueuesPubGrps';
import addRemove from '@salesforce/apex/UserGroupsController.addRemove';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
export default class SearchBar extends LightningElement {

    //declare properties search bar
    @track userName = '';
    @track userList = []; 
    @track usersGroupList=[];
    @track groupList=[];    
    @track objectApiName = 'User'
    @track userFound = false;
    @track messageResult=false; //not found message
    @track isShowResult = true;   
    @track showSearchedValues = false;  
    @track selectedUser;
 
    onLeave(event) {
        setTimeout(() => {
            this.userName = "";
            this.usersGroupList = null;
        }, 300);
    }

    //calling data to for the searchbar
    @wire(getAllUsersGroups, {uName:'$userName'})
    retrieveUsers ({error, data}) {
       this.messageResult=false;
       if (data) {
           console.log('dataForSearch::'+ JSON.stringify (data));
           if(data.length>0 && this.isShowResult){
               this.usersGroupList = data;                
               this.showSearchedValues = true; 
               this.messageResult=false;
           }            
           else if(data.length==0){
               this.usersGroupList = [];                
               this.showSearchedValues = false;
               if(this.userName!='')
                   this.messageResult=true;               
           }       
       } else if (error) {
           this.selectedUser =  '';
           this.userName =  '';
           this.userList=[];           
           this.showSearchedValues = false;
           this.messageResult=true;   
       }
   }
   
   handleClick(event){
       this.isShowResult = true;
       this.messageResult=false;
       this.userFound=false;
    }

    handleKeyChange(event){
        this.messageResult=false;
        this.userName = event.target.value;
        this.userFound=false;
    }
    
    handleParentSelection(event){
        console.log('parentEventID'+ (event.target.dataset.value));
        console.log('parentEvent'+ JSON.stringify(event.target.dataset));
        this.showSearchedValues = false;
        this.isShowResult = false; //to avoid overwritting groupList
        this.messageResult=false;
        this.userName =  event.target.dataset.label;      
        console.log('userName::'+this.userName); 
        this.selectedUser = event.target.dataset.value; 
        console.log('selectedUser:'+this.selectedUser);
        
        // Dispatches the event.
        const selectedEvent = new CustomEvent('selected', { detail: this.id });
        this.dispatchEvent(selectedEvent);
    }
    
    //showModal
    handleShowSelectedObject(event){
        const modal=  this.template.querySelectorAll(c-groups-modal);
        modal.show();
}

Thanks for your advice.

0

when you are retrieving the data and assigning it to a proerty this.usersGroupList = data; instead of directly assigning it, you can parse through the data to determine the type, and assign an icon type.

this.prop = data.map(item => { return {...item, icon : (item.type === 'some type ) ? 'icon#1' : 'icon#2' } }

the above example is just for reference purposes, basically, you use the map function to go through each data item, assign the values using a spread operator, and finally, add an icon property to the object based on the type. That way, wen you are iterating in your template, you can assign a different "avatar" or "icon" to the displayed item.

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.