lightning:pillContainer and dialog(openModel or openPopup)

lightning:pillContainer and dialog(openModel or openPopup)

AddAttendees.cmp

<aura:component controller="AddAttendeesController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global" >
    <aura:attribute name="items" type="List" default="[
                                                      {
                                                      type: 'avatar',
                                                      href: '',
                                                      id: 'XX001',
                                                      label: 'Avatar Pill',
                                                      src: '/docs/component-library/app/images/examples/avatar2.jpg',
                                                      fallbackIconName: 'standard:user',
                                                      variant: 'circle',
                                                      alternativeText: 'User avatar',
                                                      },
                                                      {
                                                      type: 'icon',
                                                      href: '',
                                                      id: 'XX002',
                                                      label: 'Icon Pill',
                                                      iconName: 'standard:account',
                                                      alternativeText: 'Account',
                                                      },
                                                      ]"/>
    <aura:attribute name="isOpen" type="boolean" default="false"/>
    <aura:attribute name="issearching"    type="Boolean" default="false"/>
    <aura:attribute name="AttendeesList" type="List" />
    <aura:attribute name="Message" type="string" />
    <div class="slds-container_center slds-theme_shade">
        <lightning:card footer="Card Footer" title="Add Attendees">
            <aura:set attribute="actions">
                <lightning:button label="Add Attendees" onclick="{! c.openModel }" variant="brand"/>
            </aura:set>
            <p class="slds-p-horizontal_small">
                Attendees List
                <lightning:pillContainer items="{!v.items}" onitemremove="{!c.onRemovePill}"></lightning:pillContainer>
            </p>
        </lightning:card>
        <aura:if isTrue="{!v.isOpen}">
           
            <!--###### MODAL BOX Start######-->
            <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
                <div class="slds-modal__container">
                    <!-- ###### MODAL BOX HEADER Start ######-->
                    <header class="slds-modal__header">
                        <lightning:buttonIcon iconName="utility:close"
                                              onclick="{! c.closeModel }"
                                              alternativeText="close"
                                              variant="bare-inverse"
                                              class="slds-modal__close"/>
                        <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Search Attendees</h2>
                    </header>
                    <!--###### MODAL BOX BODY Part Start######-->
                    <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                        <p><div onkeyup="{! c.handleKeyUp }">
                            <lightning:input
                                             aura:id="enter-search"
                                             name="enter-search"
                                             label="Search when user hits the 'enter' key"
                                             isLoading="{! v.issearching }"
                                             type="search"
                                             />
                            </div>
                        </p>
                        <div class="c-container">
                            <aura:iteration items="{!v.AttendeesList}" var="item" indexVar="count">
                               
                                <lightning:card title="{!item.RecordName}" iconName="{!item.IconName}">
                                    <aura:set attribute="actions">
                                        <lightning:button title="{!item.IconName}" name="{!item.RecordName}" onclick="{! c.AddRecordItem}" value="{!item.RecordId}" label="Add" iconName="action:new" iconPosition="left"  variant="brand" />
                                    </aura:set>
                                </lightning:card>
                               
                                <!--<lightning:card title="Hello" iconName="standard:avatar">
                            <aura:set attribute="actions">
                                 <lightning:button name="name1" value="value1" title="title1" label="Add" aura:Id="myId" iconName="action:new" iconPosition="left"  variant="brand" />
                            </aura:set>
                         </lightning:card>
                       
                        <lightning:card title="Hello" iconName="standard:groups">
                            <aura:set attribute="actions">
                                 <lightning:button label="Add" iconName="action:new" iconPosition="left"  variant="brand" />
                            </aura:set>
                         </lightning:card>-->
                            </aura:iteration>
                        </div>
                    </div>
                    <!--###### MODAL BOX FOOTER Part Start ######-->
                    <footer class="slds-modal__footer">
                        <lightning:button variant="neutral"
                                          label="Close"
                                          title="Close"
                                          onclick="{! c.closeModel }"/>
                       
                    </footer>
                </div>
            </section>
            <div class="slds-backdrop slds-backdrop_open"></div>
            <!--###### MODAL BOX Part END Here ######-->
           
        </aura:if>
        <div class="row">
            <lightning:textarea aura:id="TextMessage" class="slds-container_center slds-theme_shade slds-border_top slds-border_bottom slds-border_left slds-border_right" label="Message" placeholder="Message" variant="standard"></lightning:textarea>
        </div>
        <br></br>
        <lightning:button class="slds-m-bottom_small slds-theme_brand slds-size_1-of-1" variant="brand" label="Save" onclick="{!c.SaveEvent}"></lightning:button>
    </div>
</aura:component>

=======================================================================


AddAttendees.js



({
    openModel: function(component, event, helper) {
        // for Display Model,set the "isOpen" attribute to "true"
        component.set("v.isOpen", true);
    },
   
    closeModel: function(component, event, helper) {
        // for Hide/Close Model,set the "isOpen" attribute to "Fasle" 
        component.set("v.isOpen", false);
    },
   
    likenClose: function(component, event, helper) {
        // Display alert message on the click on the "Like and Close" button from Model Footer
        // and set set the "isOpen" attribute to "False for close the model Box.
        alert('thanks for like Us :)');
        component.set("v.isOpen", false);
       
       
       
    },
   
    onRemovePill:function(component,event,helper){
        var pillId = event.getParam('item').id;
        var myJSON = JSON.stringify(pillId);
        var pills = component.get('v.items');
        //alert(pillId);
        for (var i = 0; i < pills.length; i++) {
           
            if (pillId === pills[i].id) {
                pills.splice(i, 1);
                break;
           }
        }
       
        component.set('v.items', pills);
    },
    AddRecordItem: function(component,event,helper){
        //items
        //event.
        var btn=event.getSource();
        var recordname=btn.get('v.name');
        var recordId=btn.get('v.value');
        var varIconName=btn.get('v.title');
       
        //alert(recordname);
        var pills = component.get('v.items');
       
        var AlreadyAdded='';
        for (var i = 0; i < pills.length; i++) {
            if (recordId === pills[i].id) {
                AlreadyAdded='true';
                break;
            }
        }
       
        if(AlreadyAdded==''){
            pills.push({
                type: 'icon',
                id: recordId,
                label: recordname,
                iconName: varIconName
            });
           
            component.set('v.items', pills);
           
            var toastEvent = $A.get("e.force:showToast");
            toastEvent.setParams({
                title : 'Success Message',
                message:'Item added successfully.',
                messageTemplate: 'Item added successfully.',
                duration:' 5000',
                key: 'info_alt',
                type: 'success',
                mode: 'pester'
            });
            toastEvent.fire();
        }else if(AlreadyAdded=='true'){
            var toastEvent = $A.get("e.force:showToast");
            toastEvent.setParams({
                title : 'Error Message',
                message:'Item already added.',
                messageTemplate: 'Item already added.',
                duration:' 1000',
                key: 'info_alt',
                type: 'error',
                mode: 'pester'
            });
            toastEvent.fire();
        }       
       
       
    },
    SaveEvent: function(component,event,helper){
       
        var varMessage=component.find('TextMessage').get('v.value');
        var action= component.get("c.SaveRecord");
        var pills = component.get('v.items');
       
        action.setParams({
            'strMessage':varMessage
        });
       
        action.setCallback(this,function(response){
            var state = response.getState();
                if (state === "SUCCESS") {
                    var storeResponse = response.getReturnValue();
                        var varIsSuccess=storeResponse.bIsSuccess;
                        var varMessage=storeResponse.Message;
                        var varRecordId=storeResponse.RecordId;
                        if(varIsSuccess==true){
                            helper.helperToastMessage(varMessage,'success');
                        }else{
                            helper.helperToastMessage(varMessage,'error');
                        }
                 }else if (state === "INCOMPLETE") {
                    alert('Response is Incompleted');
                }else if (state === "ERROR") {
                    var errors = response.getError();
                    if (errors) {
                        if (errors[0] && errors[0].message) {
                            alert("Error message: " +
                                  errors[0].message);
                        }
                    } else {
                        alert("Unknown error");
                    }
                }
        });
        $A.enqueueAction(action);
    },
    handleKeyUp: function (component, event) {
        var isEnterKey = event.keyCode === 13;
        var queryTerm = component.find('enter-search').get('v.value');
        if (isEnterKey) {
           
            component.set('v.issearching', true);
            var action = component.get("c.fetchData");
            action.setParams({
                'searchKeyWord':queryTerm
            });
            action.setCallback(this, function(response) {
               
                var state = response.getState();
               
                if (state === "SUCCESS") {
                    var storeResponse = response.getReturnValue();
                   
                    // if storeResponse size is 0 ,display no record found message on screen.
                    if (storeResponse.length == 0) {
                        component.set("v.Message", true);
                    } else {
                        component.set("v.Message", false);
                    }
                   
                   
                   
                    // set searchResult list with return value from server.
                    component.set("v.AttendeesList", storeResponse);
                   
                   
                }else if (state === "INCOMPLETE") {
                    alert('Response is Incompleted');
                }else if (state === "ERROR") {
                    var errors = response.getError();
                    if (errors) {
                        if (errors[0] && errors[0].message) {
                            alert("Error message: " +
                                  errors[0].message);
                        }
                    } else {
                        alert("Unknown error");
                    }
                }
            });
            $A.enqueueAction(action);
            setTimeout(function() {
                //alert('Searched for "' + queryTerm + '"!');
                component.set('v.issearching', false);
            }, 1000);
           
        }
    }
})


========================================================================

AddAttendeesHelper.js



({
helperToastMessage : function(strmessage,strtype) {
var toastEvent = $A.get("e.force:showToast");
            toastEvent.setParams({
                title : 'Error Message',
                message:strmessage,
                messageTemplate: 'Item already added.',
                duration:' 1000',
                key: 'info_alt',
                type: strtype,
                mode: 'pester'
            });
            toastEvent.fire();
}
})



========================================================================
Apex class: AddAttendeesController 

public class AddAttendeesController {
   
    @AuraEnabled
    public static List <WrapperResult> fetchData(String searchKeyWord) {
       
        List <WrapperResult> LstWrapperResult=new List <WrapperResult>();
        string groupType='Regular';
        String newSearchText = '%'+searchKeyWord+'%';
       
       
        string SOQLUser='Select id, Name from User';
        SOQLUser=SOQLUser +' WHERE NAME LIKE:newSearchText';
        SOQLUser=SOQLUser +' LIMIT 5' ;
       
        string SOQLContact='Select id, Name from Contact';
        SOQLContact=SOQLContact +' WHERE NAME LIKE:newSearchText';
        SOQLContact=SOQLContact +' LIMIT 5' ;
       
        string SOQLPublicGroup='SELECT Id, Name FROM Group where Type=:groupType';
        SOQLPublicGroup=SOQLPublicGroup +' AND  NAME LIKE:newSearchText';
        SOQLPublicGroup=SOQLPublicGroup +' LIMIT 5' ;
       
       
       
        List<sObject> sobjListUser = Database.query(SOQLUser);
        List<sObject> sobjListContact = Database.query(SOQLContact);
        List<sObject> sobjListGroup = Database.query(SOQLPublicGroup);
       
        for(Object objUser:sobjListUser){
            WrapperResult WrpObj=new WrapperResult();
            User usr=(User)objUser;
           
            WrpObj.RecordId=usr.id;
            WrpObj.RecordName=usr.Name;
            WrpObj.IconName='standard:avatar';
           
            LstWrapperResult.add(WrpObj);
        }
        for(Object objContact:sobjListContact){
            WrapperResult WrpObj=new WrapperResult();
           
            Contact cont=(Contact)objContact;
           
            WrpObj.RecordId=cont.id;
            WrpObj.RecordName=cont.Name;
            WrpObj.IconName='standard:contact';
            LstWrapperResult.add(WrpObj);
        }
        for(Object ObjGroup:sobjListGroup){
            WrapperResult WrpObj=new WrapperResult();
           
            Group grp=(Group)ObjGroup;
           
            WrpObj.RecordId=grp.id;
            WrpObj.RecordName=grp.Name;
            WrpObj.IconName='standard:groups';
            LstWrapperResult.add(WrpObj);
        }
        return LstWrapperResult;
       
    }
   
    @AuraEnabled
    public static WrapperDataSaveResult SaveRecord(string strMessage){
        WrapperDataSaveResult SaveResult=new WrapperDataSaveResult();
        try{
           
            Event eve=new Event();
            eve.StartDateTime=system.now();
            eve.EndDateTime=system.now();
            eve.Subject='TEST 1223';
            eve.Description=strMessage;
            eve.WhatId='0010o00002MsOOSAA3';
           
            insert eve;
            SaveResult.RecordId=eve.Id;
               
            SaveResult.bIsSuccess=true;
            SaveResult.Message='Record created successfully.';
           
        }catch(exception ex){
            SaveResult.bIsSuccess=false;
            SaveResult.Message=ex.getMessage();
        }
       
        return SaveResult;
       
       
    }
   
   
    public class WrapperDataSaveResult{
        @AuraEnabled
        public string RecordId{get;set;}
        @AuraEnabled
        public string Message{get;set;}
        @AuraEnabled
        public boolean bIsSuccess{get;set;}
    }
   
    Public Class WrapperResult{
       
        @AuraEnabled
        public string RecordId{get;set;}
        @AuraEnabled
        public string RecordName{get;set;}
        @AuraEnabled
        public string IconName{get;set;}
       
       
    }
}