Hot Posts

Basic Aura scenarios

myStartlearning November 15, 2023
Basic Aura scenarios

how to Display a List Of Records as Picklist Values Based on the RecordTypes. By selecting record type, related data will be displayed as picklist values.

Apex Controller

   public class DisplayRecordTypeRecords {
    public static Map<Id, String> recordtypemap {get;set;}
    
    @AuraEnabled
    public static List<String> fetchRecordType(){
        List<Schema.RecordTypeInfo> recordtypes = Account.SObjectType.getDescribe().getRecordTypeInfos();    
        recordtypemap = new Map<Id, String>();
        for(RecordTypeInfo rt : recordtypes){
            if(rt.getName() != 'Master')
                recordtypemap.put(rt.getRecordTypeId(), rt.getName());
        }        
        return recordtypemap.values();
    }
    
    @AuraEnabled 
    public static List<Account> fetchRecords(string AcctId){
        return [select id,Name from Account where RecordType.Name =: AcctId];  
    }
}

Lightning Component : DisplayRecordTypeRecords

<aura:component controller="DisplayRecordTypeRecords" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:attribute name="openmodel" type="boolean"/>
    <aura:handler name="init" value="{!this}" action="{!c.fetchListOfRecordTypes}"/>
    <aura:attribute name="lstOfRecordType" type="String[]" />
    <aura:attribute name="lstOfRecordType1" type="String[]" />
    <aura:attribute name="selectedRecordvalue" type="String[]" />
    <aura:attribute name="selectedLookUpRecord" type="sObject" default="{}"/>
    
    <lightning:button label="share Record" variant="neutral" onclick="{!c.PerformAction}" />
    
    
    <div aura:id="editDialog" role="dialog" tabindex="-1" aria-labelledby="header43" class="slds-modal slds-fade-in-open slds-modal_small slds-backdrop ">
        <div class="slds-modal__container ">
            <div class="slds-modal__header">
                <h2 class="slds-text-heading--medium">Sharing Records Using Salesforce Lightning</h2>
                <button class="slds-button slds-modal__close slds-button--icon" title="Close" onclick="{!c.closeModal}">
                    <lightning:icon iconName="utility:close" size="medium" />
                    <span class="slds-assistive-text">Close</span>
                </button>
            </div>
            <div class="slds-modal__content slds-p-around--medium slds-grid slds-wrap " style="height:400px;" >
                <!--    <force:recordView aura:id="view" recordId="{!v.viewAccId}"/>-->
                <div class="slds-size--1-of-2 slds-large-size--1-of-2 ">
                    <Lightning:select aura:id="selectid" label="Select Record Type" onchange="{!c.selectedvalue}">
                        <aura:iteration items="{!v.lstOfRecordType}" var="account">                            
                            <ui:inputSelectOption text="{!account}"  label="{!account}" />
                        </aura:iteration>
                    </Lightning:select><br/>
                </div>
                <Lightning:select aura:id="selectid1" label="Select Record " onchange="{!c.ShowContacts}">
                    <aura:iteration items="{!v.lstOfRecordType1}" var="acc">                            
                        <ui:inputSelectOption text="{!acc}" label="{!acc.Name}"  />
                    </aura:iteration>
                </Lightning:select>                
            </div>
        </div>
    </div>    
</aura:component>

js Controller

({
    PerformAction : function(component, event, helper) {
        component.set("v.openmodel",true);
    },
    closeModal:function(component,event,helper){    
        var cmpTarget = component.find('editDialog');
        var cmpBack = component.find('overlay');
        $A.util.removeClass(cmpBack,'slds-backdrop--open');
        $A.util.removeClass(cmpTarget, 'slds-fade-in-open');
        component.set('v.openmodel',false);
        
    },
    fetchListOfRecordTypes: function(component, event, helper) {
        var action = component.get("c.fetchRecordType");
        action.setCallback(this, function(response) {
            component.set("v.lstOfRecordType", response.getReturnValue());
        });
        $A.enqueueAction(action);
    },
    selectedvalue: function(component, event, helper) {
        var a = event.getSource().get("v.value");   
        alert(a);  
        var action = component.get("c.fetchRecords");
        action.setParams({"AcctId":a});
        action.setCallback(this, function(response) {
            component.set("v.lstOfRecordType1", response.getReturnValue());
        });
        $A.enqueueAction(action);
    }
    
})

Output

Key Heighlights :

  1. You can search the picklist values
  2. In multiselect we create pills so you can remove easily on pills.
  3. this component is reusable
  4. There are 2 components so child is main and parent where we get selected options.
  5. Multi Select Combobox component is advance then dual-listbox because this cover small space and dual cover big space.

MultiSelectCombobox.cmp :

<aura:component>
    
    <!-- Attributes that can be set while component calling-->
    <aura:attribute name="options" type="string" default="" required="true" />
    <aura:attribute name="value" type="String" default="" description="Selected value in single Select" />
    <aura:attribute name="values" type="List"   default="" description="Selected value in Multi Select" />
    <aura:attribute name="label" type="string" default="" description="Label will be displayed above input Box" />
    <aura:attribute name="minChar" type="Integer" default="1" description="Minimum character to type for search" />
    <aura:attribute name="disabled" type="Boolean" default="false" description="Disable the combobox" />
    <aura:attribute name="multiSelect" type="Boolean" default="false" description="Switch between single and multiSelect" />
    
    <!-- Internal Use Attributes -->
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="searchString"   type="string" default="" description="String to search"/>
    <aura:attribute name="message"   type="String" default="" />
    
    <!-- Component Markup -->
    <div>
        <aura:if isTrue="{!!empty(v.label)}">
            <label class="slds-form-element__label">{!v.label}</label>
        </aura:if>
        <div class="slds-combobox_container">
            <div class="slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open" aura:id="resultsDiv" aria-expanded="true" aria-haspopup="listbox" role="combobox">
                <div class="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right" role="none">
                    <lightning:input disabled="{!v.disabled}" aura:id="inputLookup" class="inputBox" placeholder="Select an Option" onblur="{!c.handleBlur}" onclick="{!c.showOptions}" onkeyup="{!c.filterOptions}" value="{!v.searchString}" autoComplete="off" variant="label-hidden" id="combobox-id-1" />
                    <lightning:icon class="slds-input__icon" iconName="utility:down" size="x-small" alternativeText="search"/>
                </div>
                <!-- Dropdown List -->
                <div id="listbox-id-1" class="slds-dropdown slds-dropdown_length-5 slds-dropdown_fluid" style="{! 'max-height:' + (8 + (v.recordCount * 40)) + 'px' }">
                    <ul class="slds-listbox slds-listbox_vertical recordListBox" role="presentation">
                        <aura:if isTrue="{!empty(v.message)}" >
                            <!-- To display Drop down List -->
                            <aura:iteration items="{!v.options}" var="option" >
                                <aura:if isTrue="{!option.disabled}">
                                    <li class="{!'slds-listbox__item disabledItem' + if(option.isVisible,'',' slds-hide')}">
                                        <span class="slds-media slds-listbox__option_entity verticalAlign slds-truncate">{!option.label}</span>
                                    </li>
                                    <aura:set attribute="else">
                                        <li id="{!option.value}" class="{!'slds-listbox__item eachItem' + if(option.isVisible,'',' slds-hide')}" onmousedown="{!c.selectItem}">
                                            <lightning:icon class="{!if(option.selected,'','slds-hide')}" iconName="utility:check" size="x-small" alternativeText="icon" />
                                            <span class="slds-media slds-listbox__option_entity verticalAlign slds-truncate">{!option.label}</span>
                                        </li>
                                    </aura:set>
                                </aura:if>
                            </aura:iteration>
                            <!-- To display Error Message -->
                            <aura:set attribute="else">
                                <li class="slds-listbox__item">
                                    <span class="slds-media slds-listbox__option_entity verticalAlign slds-truncate">{!v.message}</span>
                                </li>
                            </aura:set>
                        </aura:if>
                    </ul>
                </div>
            </div>
        </div>
        
        <aura:iteration items="{!v.options}" var="option">
            <aura:if isTrue="{!option.selected}">
                <lightning:pill class="slds-m-around_xx-small" name="{!option.value}" label="{!option.label}" onremove="{!c.closePill}"/>
            </aura:if>
        </aura:iteration>
    </div>
</aura:component>

MultiSelectCombboxController.Js :

({
    doInit : function( component, event, helper ) {
        helper.doInitStartHelper(component);
    },
    
    //search option in picklist
    filterOptions : function( component, event, helper ) {
        if( !$A.util.isEmpty(component.get('v.searchString')) ) {
            helper.filterOptionsDataHelper(component);
        } else {
            $A.util.removeClass(component.find('resultsDiv'),'slds-is-open');
        }
    },
    
    // option selected
    selectItem : function( component, event, helper ) {
        if(!$A.util.isEmpty(event.currentTarget.id)) {
            helper.selectOptionHelper(component, event);
        }
    },
    
    showOptions : function( component, event, helper ) {
        var disabled = component.get("v.disabled");
        if(!disabled) {
            component.set("v.message", '');
            component.set('v.searchString', '');
            var options = component.get("v.options");
            options.forEach( function(element,index) {
                element.isVisible = true;
            });
            component.set("v.options", options);
            if(!$A.util.isEmpty(component.get('v.options'))) {
                $A.util.addClass(component.find('resultsDiv'),'slds-is-open');
            } 
        }
    },
    
    // To remove the selected item.
    closePill : function( component, event, helper ){
        helper.removeOptionPillHelper(component, event);
    },
    
    // To close the dropdown if clicked outside the dropdown.
    handleBlur : function( component, event, helper ){
        helper.handleBlurHelper(component, event);
    },
})

MultiSelectCombboxHelper.Js : 

({
    doInitStartHelper : function(component) {
        $A.util.toggleClass(component.find('resultsDiv'),'slds-is-open');
        var value = component.get('v.value');
        var values = component.get('v.values');
        if( !$A.util.isEmpty(value) || !$A.util.isEmpty(values) ) {
            var searchString;
            var count = 0;
            var multiSelect = component.get('v.multiSelect');
            var options = component.get('v.options');
            options.forEach( function(element, index) {
                if(multiSelect) {
                    if(values.includes(element.value)) {
                        element.selected = true;
                        count++;
                    }  
                } else {
                    if(element.value == value) {
                        searchString = element.label;
                    }
                }
            });
            if(multiSelect)
                component.set('v.searchString', count + ' options selected');
            else
                component.set('v.searchString', searchString);
            component.set('v.options', options);
        }
    },
    
    filterOptionsDataHelper : function(component) {
        component.set("v.message", '');
        var searchText = component.get('v.searchString');
        var options = component.get("v.options");
        var minChar = component.get('v.minChar');
        if(searchText.length >= minChar) {
            var flag = true;
            options.forEach( function(element,index) {
                if(element.label.toLowerCase().trim().startsWith(searchText.toLowerCase().trim())) {
                    element.isVisible = true;
                    flag = false;
                } else {
                    element.isVisible = false;
                }
            });
            component.set("v.options",options);
            if(flag) {
                component.set("v.message", "No results found for '" + searchText + "'");
            }
        }
        $A.util.addClass(component.find('resultsDiv'),'slds-is-open');
    },
    
    selectOptionHelper : function(component, event) {
        var options = component.get('v.options');
        var multiSelect = component.get('v.multiSelect');
        var searchString = component.get('v.searchString');
        var values = component.get('v.values') || [];
        var value;
        var count = 0;
        options.forEach( function(element, index) {
            if(element.value === event.currentTarget.id) {
                if(multiSelect) {
                    if(values.includes(element.value)) {
                        values.splice(values.indexOf(element.value), 1);
                    } else {
                        values.push(element.value);
                    }
                    element.selected = element.selected ? false : true;   
                } else {
                    value = element.value;
                    searchString = element.label;
                }
            }
            if(element.selected) {
                count++;
            }
        });
        component.set('v.value', value);
        component.set('v.values', values);
        component.set('v.options', options);
        if(multiSelect)
            component.set('v.searchString', count + ' options selected');
        else
            component.set('v.searchString', searchString);
        if(multiSelect)
            event.preventDefault();
        else
            $A.util.removeClass(component.find('resultsDiv'),'slds-is-open');
    },
    
    removeOptionPillHelper : function(component, event) {
        var value = event.getSource().get('v.name');
        var multiSelect = component.get('v.multiSelect');
        var count = 0;
        var options = component.get("v.options");
        var values = component.get('v.values') || [];
        options.forEach( function(element, index) {
            if(element.value === value) {
                element.selected = false;
                values.splice(values.indexOf(element.value), 1);
            }
            if(element.selected) {
                count++;
            }
        });
        if(multiSelect)
            component.set('v.searchString', count + ' options selected');
        component.set('v.values', values)
        component.set("v.options", options);
    },
    
    handleBlurHelper : function(component, event) {
        var selectedValue = component.get('v.value');
        var multiSelect = component.get('v.multiSelect');
        var previousLabel;
        var count = 0;
        var options = component.get("v.options");
        options.forEach( function(element, index) {
            if(element.value === selectedValue) {
                previousLabel = element.label;
            }
            if(element.selected) {
                count++;
            }
        });
        if(multiSelect)
            component.set('v.searchString', count + ' options selected');
        else
            component.set('v.searchString', previousLabel);
        
        if(multiSelect)
            $A.util.removeClass(component.find('resultsDiv'),'slds-is-open');
    }
})

MultiSelectCombobox.css :

.THIS .verticalAlign {
    cursor: pointer;
    padding: 0px 5px !important;
}
.THIS .slds-dropdown {
    padding:0px !important;
}
.THIS .fullWidth {
    width: 100% !important;
}
.THIS .disabledItem {
    color: #bbb;
    cursor: no-drop; 
}
.THIS .recordListBox {
    margin-top:0px !important;
    overflow-y: scroll;
}
.THIS .slds-listbox li {
    padding: .45rem 0.7rem !important;
    display: flex;
}
.THIS .inputBox input {
    padding-left: 10px;
}
.THIS .eachItem:hover {
    background-color: #F1F1F1;
    cursor: pointer;
}
.THIS .inputIcon {
    z-index: 99;
    padding: 2px 0;
}

/* For Scrolling */
.THIS ::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}
.THIS ::-webkit-scrollbar-track {
    display: none !important;
}
.THIS ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0,0,0,0.4);
}

We will put this on Parent component

MultiSelectComboboxParent.cmp :

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global">
    <aura:attribute name="options" type="List" default="[{'label':'Mango','value':'Mango'},
                                                        {'label':'Apple','value':'Apple'},
                                                        {'label':'Grapes','value':'Grapes'},
                                                        {'label':'Banana','value':'Banana'}]" />
    
    <aura:attribute name="options2" type="List" default="[{'label':'India','value':'India'},
                                                        {'label':'Usa','value':'Usa'},
                                                        {'label':'China','value':'China'},
                                                        {'label':'Japan','value':'Japan'}]" />
    
    <aura:attribute name="selectedValue" type="String" default="" description="Selected value in single Select" />
    <aura:attribute name="selectedValues" type="List" default="" description="Selected value in Multi Select" />

    
    <div class="slds-tabs_card">
        <div class="slds-page-header">
            <div class="slds-page-header__row">
                <div class="slds-page-header__col-title">
                    <div class="slds-media">
                        <div class="slds-media__figure">
                            <span class="slds-icon_container slds-icon-standard-opportunity">
                                <lightning:icon iconName="standard:event" alternativeText="Event" title="Event" />
                            </span>
                        </div>
                        <div class="slds-media__body">
                            <div class="slds-page-header__name">
                                <div class="slds-page-header__name-title">
                                    <h1>
                                        <span>Lightning Component Combobox</span>
                                        <span class="slds-page-header__title slds-truncate" title="TechDicer">TechDicer</span>
                                    </h1>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div> <br/>
    
    <lightning:card variant="Narrow" title="ComboBox">
        <div class="slds-p-horizontal_small">
            <c:MultiSelectCombobox options="{!v.options}" value="{!v.selectedValue}" label="Single Select Combobox"/>
            <br/>
            <c:MultiSelectCombobox options="{!v.options2}" values="{!v.selectedValues}" multiSelect="true" label="Multi Select Combobox"/>
        </div>
    </lightning:card>
</aura:component>
myStartlearning

Posted by myStartlearning

Welcome to "My Start Learning," your gateway to an exciting journey of knowledge acquisition and coding mastery in our ever-evolving digital landscape. In today's fast-paced lifestyle, continuous learning is not just a choice but a necessity. We're here to make it easy, engaging, and enriching. At "My Start Learning," we're passionate about fueling your thirst for knowledge and equipping you with coding skills that will shape the future. Our mission is to empower you with the tools and insights needed to thrive in this digital era while keeping the learning process enjoyable and accessible.

Post a Comment

0 Comments