+ Start a Discussion
SandrineSandrine 

Display popup on button click on record and send the values to backend for further operation s

Hello,

I want to display a custom button on a record. I use lighting. 
once the button  is clicked,  I want to display a popup which has a pickiest with value 1, 2. And a button tick, when the pick list is clicked  I want to send the value to apres class.

How can I implemeimplement case in lightning. 

Thanks for suggestions 
Best Answer chosen by Sandrine
akash_dev__cakash_dev__c
Hi Sandrine,

ListComponent.cmp

<aura:component controller="getPicklistValue" implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global" >
    <aura:attribute name="showMessage" type="String"/>
    <aura:attribute name="showpopup" type="Boolean" default="false"/>
    
    <div class="slds-m-left_x-small slds-m-top_small">
        <lightning:button label="Click Here" title="Neutral action" onclick="{!c.showPopup }"/>
        
        <aura:if isTrue="{!v.showpopup}">
            <div class="demo-only" style="height: 640px;">
                <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">
                        <header class="slds-modal__header">
                            <lightning:buttonIcon iconName="utility:close"
                                                  onclick="{! c.closeModal }"
                                                  alternativeText="close"
                                                  variant="bare-inverse"
                                                  class="slds-modal__close"/>
                            <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Select a value</h2>
                        </header>
                        <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                            <lightning:select aura:id ="select1" name="select1" label="Choose a Value" required="true">
                                <option value="">choose one...</option>
                                <option value="value 1">Value 1</option>
                                <option value="value 2">Value 2</option>
                                <option value="value 3">Value 3</option>
                            </lightning:select>
                        </div>
                        <footer class="slds-modal__footer">
                            <lightning:button variant="neutral"
                                              label="Cancel"
                                              title="Cancel"
                                              onclick="{!c.closeModal }"/>
                            <lightning:button variant="brand"
                                              label="Submit"
                                              title="Submit"
                                              onclick="{!c.sendData}"/>
                        </footer>
                    </div>
                </section>
                <div class="slds-backdrop slds-backdrop_open"></div>
            </div>
        </aura:if>
        <div class="slds-m-left_x-small">
            <p>{!v.showMessage}</p>
        </div>
    </div>
</aura:component>

ListComponent.Js

({
    showPopup : function (cmp, evt, helper) {
        cmp.set('v.showpopup', true);
    },

    sendData: function (cmp, evt, helper) {  
        var selectedValue = cmp.find('select1').get('v.value');
        console.log(selectedValue);
       
        var action = cmp.get("c.getReceivedValue");
        console.log(action);
        action.setParams({
            'receivedValue' : selectedValue
        });
        
        action.setCallback(this, function(response){
            var state = response.getState();
            console.log(state);
            var res = response.getReturnValue();
            console.log(res);
            if(state === "SUCCESS"){
                cmp.set('v.showpopup', false);
                cmp.set('v.showMessage', res);
                
            }
        });
         $A.enqueueAction(action);
    },
    
    closeModal : function (cmp, evt, helper) {
        cmp.set('v.showpopup', false);
    }
})

Controller Class:

public class getPicklistValue {
    
    @AuraEnabled
    public static String getReceivedValue(String receivedValue){
        String value = 'you have selected ' +receivedValue + ' from the picklist';
        return value;
    }
}

please try the above code and I hope you can take the reference from the code.

Do mark this answer as the best answer if it helped you so that others can have the reference too.

Regards,
Akash Garg