Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Create a Custom Lightning Component for Show Approve/Reject Status of Selected Records through Modal Popup in Salesforce Lightning Component #31

Open
vijayk3327 opened this issue Aug 19, 2023 · 0 comments
Open

Create a Custom Lightning Component for Show Approve/Reject Status of Selected Records through Modal Popup in Salesforce Lightning Component #31

vijayk3327 opened this issue Aug 19, 2023 · 0 comments
Assignees
@vijayk3327
Labels
documentation Improvements or additions to documentation question Further information is requested

Comments

@vijayk3327
Copy link
Owner

In this post we are going to learn about how toCreate a Custom Lightning Component for Show Approve/Reject Status of Selected Records through Modal Popup in Salesforce Lightning Component.

👉 To get source code live demo link, Click Here.

Create Lightning Application
Step 1:- Create Lightning Application : approveRejectApp.app

<aura:application extends="force:slds"> <c:approveRejectCmp/> </aura:application>

Create Lightning Component
Step 2:- Create Lightning Component : approveRejectCmp.cmp

`<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<aura:attribute name="rejectDocumentMsg0" type="String"/>
<aura:attribute name="rejectDocumentMsg1" type="String"/>
<aura:attribute name="rejectDocumentMsg2" type="String"/>
<aura:attribute name="rejectDocumentMsg3" type="String"/>
<aura:attribute name="rejectDocumentMsg4" type="String"/>

<aura:attribute name="dataRowModal" type="String" default="dataRowModal"/>
<div class="slds slds-p-horizontal--medium">
   <div class="test-id__section slds-m-vertical_none slds-section has-header slds-p-bottom_medium"> 
       <h3 class="test-id__section-header-container slds-section__title">Approve/Reject Status</h3>
    </div>   
    <table width="100%" class="slds-table slds-table_bordered  slds-table_cell-buffer" border="0" style="border:1px #ddd solid;">
        <tbody> 
            <tr class="dataRowIcon" id="dataRowIcon0">
                <td><div style="width:35px;"><span class="approvalIcon"><lightning:icon iconName="action:approval" size="xx-small" alternativeText="approval"/></span> <span class="rejectIcon"><lightning:icon iconName="action:close" size="xx-small" alternativeText="Reject"/></span></div></td>
                <td width="20%">Content Approval  </td>
                <td width="30%"><a href="#" target="_blank" rel="noopener noreferrer">Approval Documents</a></td>
                <td width="30%"><div class="slds-truncate" style="max-width:200px;">{!v.rejectDocumentMsg0}</div></td>
                <td width="20%">

                    <button class="slds-button slds-button--success" id="approve" name="dataRowIcon0" onclick="{!c.approveAction}">Approve</button>
                    <button class="slds-button slds-button--destructive" name="dataRowIcon0" onclick="{!c.rejectAction}">Reject</button>
                </td>
                <td colspan="5">

                </td> 
            </tr>

            <tr class="dataRowIcon" id="dataRowIcon1">
                <td><div style="width:35px;"><span class="approvalIcon"><lightning:icon iconName="action:approval" size="xx-small" alternativeText="approval"/></span> <span class="rejectIcon"><lightning:icon iconName="action:close" size="xx-small" alternativeText="Reject"/></span></div></td>
                <td width="20%">SharePoint Content approval </td>
                <td width="30%"><a href="#">SharePoint Documents</a></td>
                <td width="30%">{!v.rejectDocumentMsg1}</td>
                <td width="20%">
                    <button class="slds-button slds-button--success" id="approve" name="dataRowIcon1" onclick="{!c.approveAction}">Approve</button>
                    <button class="slds-button slds-button--destructive" name="dataRowIcon1" onclick="{!c.rejectAction}">Reject</button>
                </td>
                <td colspan="5"></td> 
            </tr>

            <tr class="dataRowIcon" id="dataRowIcon2">
                 <td><div style="width:35px;"><span class="approvalIcon"><lightning:icon iconName="action:approval" size="xx-small" alternativeText="approval"/></span> <span class="rejectIcon"><lightning:icon iconName="action:close" size="xx-small" alternativeText="Reject"/></span></div></td>
                <td width="20%">Request sign off and Approval</td>
                <td width="30%"><a href="/resource/SamplePDF">Sign Off and Approval Documents</a></td>
                <td width="30%">{!v.rejectDocumentMsg2}</td>
                <td width="20%">
                    <button class="slds-button slds-button--success" name="dataRowIcon2" onclick="{!c.approveAction}">Approve</button>
                    <button class="slds-button slds-button--destructive" name="dataRowIcon2" onclick="{!c.rejectAction}">Reject</button>
                </td>
                <td colspan="5"></td> 
            </tr>

            <tr class="dataRowIcon" id="dataRowIcon3">
                <td><div style="width:35px;"><span class="approvalIcon"><lightning:icon iconName="action:approval" size="xx-small" alternativeText="approval"/></span> <span class="rejectIcon"><lightning:icon iconName="action:close" size="xx-small" alternativeText="Reject"/></span></div></td>
                <td width="20%">Travel Document</td>
                <td width="30%"><a href="#">Travel Approval Document</a></td>
                <td width="30%">{!v.rejectDocumentMsg3}</td>
                <td width="20%">
                    <button class="slds-button slds-button--success" name="dataRowIcon3" onclick="{!c.approveAction}">Approve</button>
                    <button class="slds-button slds-button--destructive" name="dataRowIcon3" onclick="{!c.rejectAction}">Reject</button>
                </td>
                <td colspan="5"></td> 
            </tr>  

            <tr class="dataRowIcon" id="dataRowIcon4">
                <td><div style="width:35px;"><span class="approvalIcon"><lightning:icon iconName="action:approval" size="xx-small" alternativeText="approval"/></span> <span class="rejectIcon"><lightning:icon iconName="action:close" size="xx-small" alternativeText="Reject"/></span></div></td>
                <td width="20%">Travel Insurance Agreements</td>
                <td width="30%"><a href="#">Travel Insurance Approval</a></td>
                <td width="30%">{!v.rejectDocumentMsg4}</td>
                <td width="20%">
                    <button class="slds-button slds-button--success" name="dataRowIcon4" onclick="{!c.approveAction}">Approve</button>
                    <button class="slds-button slds-button--destructive" name="dataRowIcon4" onclick="{!c.rejectAction}">Reject</button>
                </td>
                <td colspan="5"></td> 
            </tr>   

        </tbody>    
    </table>

    <section id="modalFade" class="slds-modal" >
        <div class="slds-modal__container">
            <header class="slds-modal__header">
                <button class="slds-button slds-modal__close slds-button--icon-inverse" name="dataRowIcon0" title="Close" onclick="{!c.closePopup}">
                    <lightning:icon iconName="utility:close" variant="bare"  icon-class="slds-m-around_medium" size="small" alternativeText="close"/>
                </button>

                <h2 class="slds-text-heading_medium slds-hyphenate">Approve/Reject Status</h2>
            </header>
            <div class="slds-modal__content slds-p-around_medium">         
                <div  class="slds-form-element">
                    <label class="slds-form-element__label">Comment</label>
                    <div class="slds-form-element__controller">
                        <ui:inputTextArea aura:id="rejectFeedback" class="slds-textarea" value="" rows="3"/>
                    </div>                                         
                </div>

            </div>
            <footer class="slds-modal__footer">
                <button class="slds-button slds-button--destructive" name="dataRowIcon0" onclick="{!c.closePopup}">Cancel</button>
                <button class="slds-button slds-button_brand" id="reject" name="{!v.dataRowModal}" onclick="{!c.saveFeedAction}">Save</button>
            </footer>
        </div>
    </section>
   <div id="modalBackdrop" class="slds-backdrop"></div>




        <p data-aura-rendered-by="435:0"><img src="https://www.w3web.net/wp-content/uploads/2021/05/thumbsUpLike.png" width="25" height="25" style="vertical-align:top; margin-right:10px;" data-aura-rendered-by="436:0"><strong data-aura-rendered-by="437:0"><span style="font-size:16px; font-style:italic; display:inline-block; margin-right:5px;">Don't forget to check out:-</span><a href="https://www.w3web.net/" target="_blank" rel="noopener noreferrer" style="text-decoration:none;" data-aura-rendered-by="440:0">An easy way to learn step-by-step online free Salesforce tutorial, To know more Click  <span style="color:#ff8000; font-size:18px;" data-aura-rendered-by="442:0">Here..</span></a></strong></p>

        <br/><br/>
        <p data-aura-rendered-by="435:0"><img src="https://www.w3web.net/wp-content/uploads/2021/07/tickMarkIcon.png" width="25" height="25" style="vertical-align:top; margin-right:10px;" data-aura-rendered-by="436:0"><strong data-aura-rendered-by="437:0"><span style="font-size:17px; font-style:italic; display:inline-block; margin-right:5px; color:rgb(255 128 0);">You May Also Like →</span> </strong></p>
        <div style="display:block; overflow:hidden;"> 
            <div style="width: 50%; float:left; display:inline-block">
                <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;"> 
                    <li><a href="https://www.w3web.net/lwc-get-set-lightning-checkbox-value/" target="_blank" rel="noopener noreferrer">How to get selected checkbox value in lwc</a></li>
                    <li><a href="https://www.w3web.net/display-account-related-contacts-in-lwc/" target="_blank" rel="noopener noreferrer">how to display account related contacts based on AccountId in lwc</a></li>
                    <li><a href="https://www.w3web.net/create-lightning-datatable-row-actions-in-lwc/" target="_blank" rel="noopener noreferrer">how to create lightning datatable row actions in lwc</a></li>
                    <li><a href="https://www.w3web.net/if-and-else-condition-in-lwc/" target="_blank" rel="noopener noreferrer">how to use if and else condition in lwc</a></li>
                    <li><a href="https://www.w3web.net/get-selected-radio-button-value-and-checked-default-in-lwc/" target="_blank" rel="noopener noreferrer">how to display selected radio button value in lwc</a></li>
                </ul>
        </div>

        <div style="width: 50%; float:left; display:inline-block">
                <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;"> 
                    <li><a href="https://www.w3web.net/display-account-related-contacts-lwc/" target="_blank" rel="noopener noreferrer">display account related contacts based on account name in lwc</a></li>
                    <li><a href="https://www.w3web.net/create-lightning-datatable-row-actions-in-lwc/" target="_blank" rel="noopener noreferrer">how to insert a record of account Using apex class in LWC</a></li>
                    <li><a href="https://www.w3web.net/fetch-picklist-values-dynamic-in-lwc/" target="_blank" rel="noopener noreferrer">how to get picklist values dynamically in lwc</a></li>
                    <li><a href="https://www.w3web.net/edit-save-and-remove-rows-dynamically-in-lightning-component/" target="_blank" rel="noopener noreferrer">how to edit/save row dynamically in lightning component</a></li>
                    <li><a href="https://www.w3web.net/update-parent-object-from-child/" target="_blank" rel="noopener noreferrer">update parent field from child using apex trigger</a></li>
                </ul>
            </div>
           <div style="clear:both;"></div> 
           <br/>
            <div class="youtubeIcon">
                <a href="https://www.youtube.com/channel/UCW62gTen2zniILj9xE6LmOg" target="_blank" rel="noopener noreferrer"><img src="https://www.w3web.net/wp-content/uploads/2021/11/youtubeIcon.png" width="25" height="25" style="vertical-align:top; margin-right:10px;"/> <strong>TechW3web:-</strong> To know more, Use this <span style="color: #ff8000; font-weight: bold;">Link</span> </a>
            </div>
</div>

</div>

</aura:component>`

Create Component JavaScript Controller
Step 3:- Create Lightning Component : approveRejectCmpController.js

`({

approveAction : function(component, event, helper) {
	var thisObj = event.target.name;      
    document.getElementById(thisObj).classList.remove("reject");
    document.getElementById(thisObj).classList.add("approve");
   //alert('thisObj ' + thisObj);
},

rejectAction:function(component, event, helper){
     var thisObj = event.target.name;           
    component.set('v.dataRowModal', thisObj);
    document.getElementById('modalFade').classList.add("slds-fade-in-open");
    document.getElementById('modalBackdrop').classList.add("slds-backdrop_open");
},

closePopup:function(component, event, helper){

     document.getElementById('modalFade').classList.remove("slds-fade-in-open");
     document.getElementById('modalBackdrop').classList.remove("slds-backdrop_open");
},    

saveFeedAction:function(component, event, helper){
     var thisObj = event.target.name;

    var rejectFeedback = component.find('rejectFeedback').get('v.value');        
    if(thisObj == 'dataRowIcon0'){           
        document.getElementById(thisObj).classList.remove("approve");        
        document.getElementById(thisObj).classList.add("reject");
        component.set('v.rejectDocumentMsg0',rejectFeedback);
    }
    if(thisObj == 'dataRowIcon1'){
        document.getElementById(thisObj).classList.remove("approve");        
        document.getElementById(thisObj).classList.add("reject");
        component.set('v.rejectDocumentMsg1',rejectFeedback);
    }

    if(thisObj == 'dataRowIcon2'){
        document.getElementById(thisObj).classList.remove("approve");        
        document.getElementById(thisObj).classList.add("reject");
        component.set('v.rejectDocumentMsg2',rejectFeedback);
    }
    if(thisObj == 'dataRowIcon3'){
        document.getElementById(thisObj).classList.remove("approve");        
        document.getElementById(thisObj).classList.add("reject");
        component.set('v.rejectDocumentMsg3',rejectFeedback);
    }
    if(thisObj == 'dataRowIcon4'){
        document.getElementById(thisObj).classList.remove("approve");        
        document.getElementById(thisObj).classList.add("reject");
        component.set('v.rejectDocumentMsg4',rejectFeedback);
    }

    document.getElementById('modalFade').classList.remove("slds-fade-in-open");
    document.getElementById('modalBackdrop').classList.remove("slds-backdrop_open");       
},

approveAction:function(component, event, helper){
    helper.approveActionHelper(component, event, helper);
},

})`

Create Component JavaScript Helper
Step 4:- Create Lightning Component : approveRejectCmpHelper.js

`({
approveActionHelper:function(component, event, helper){
var thisObj = event.target.name;
if(thisObj == 'dataRowIcon0'){
component.set('v.rejectDocumentMsg0','Approved');
}
if(thisObj == 'dataRowIcon1'){

        component.set('v.rejectDocumentMsg1','Approved');
    }

    if(thisObj == 'dataRowIcon2'){            
        component.set('v.rejectDocumentMsg2','Approved');
    }
    if(thisObj == 'dataRowIcon3'){            
        component.set('v.rejectDocumentMsg3','Approved');
    }
    if(thisObj == 'dataRowIcon4'){            
        component.set('v.rejectDocumentMsg4','Approved');
    }
    document.getElementById(thisObj).classList.remove("reject");
    document.getElementById(thisObj).classList.add("approve");
},

})`

Create Component Style CSS
Step 5:- Create Lightning Component Style: approveRejectCmp.css

.THIS { } .THIS .dataRowIcon .approvalIcon, .THIS .dataRowIcon .rejectIcon{display:none;} .THIS .dataRowIcon .slds-fade-in-open{display:none;} .THIS .dataRowIcon .slds-backdrop_open{display:none;} .THIS .dataRowIcon.showModal .slds-fade-in-open, .THIS .dataRowIcon.showModal .slds-backdrop_open{display:block;} .THIS .dataRowIcon.approve .approvalIcon{display:inline-block;} .THIS .dataRowIcon.reject .rejectIcon{display:inline-block;}

👉 To get source code live demo link, Click Here.
@vijayk3327 vijayk3327 added documentation Improvements or additions to documentation question Further information is requested labels Aug 19, 2023
@vijayk3327 vijayk3327 self-assigned this Aug 19, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@vijayk3327 vijayk3327

Labels
documentation Improvements or additions to documentation question Further information is requested
Projects
Lightning Aura Component
Status: No status
Milestone
No milestone
Development

No branches or pull requests
1 participant
@vijayk3327