Hey guys, today 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.
Files we used in this post example
| approveRejectApp.app | Lightning Application | It is used for call the component to preview on browser. |
| approveRejectCmp.cmp | Lightning Component | It is used for create a table for display the Buttons and Table Row Data |
| approveRejectCmpController.js | JavaScript Controller File | It is hold Javascript Click Function to display Approve/Reject Status |
| approveRejectCmpHelper.js | JavaScript Controller Helper File | It is hold for Javascript Click Function to display Approve/Reject Status |
| approveRejectCmp.css | Component Style CSS | It is used for Alignment of Table and Buttons |
Live Demo
Other related post that would you like to learn in Salesforce
Create Lightning Application
Step 1:- Create Lightning Application : approveRejectApp.app
From Developer Console >> File >> New >> Lightning Application
approveRejectApp.app [Component Application File]
|
1 2 3 |
<aura:application extends="force:slds"> <c:approveRejectCmp/> </aura:application> |
Create Lightning Component
Step 2:- Create Lightning Component : approveRejectCmp.cmp
From Developer Console >> File >> New >> Lightning Component
approveRejectCmp.cmp [Lightning Component File]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 |
<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 & Approval</td> <td width="30%"><a href="/resource/SamplePDF">Sign Off & 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> <br/><br/> <!--Start RelatedTopics Section--> <div style="border:1px #ddd solid; padding:10px; background:#eee; margin:40px 0;"> <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> <!--End RelatedTopics Section--> </div> </aura:component> |
Create Component JavaScript Controller
Step 3:- Create Lightning Component : approveRejectCmpController.js
From Developer Console >> File >> New >> Lightning Component >> JavaScript Controller
approveRejectCmpController.js [JavaScript Controller]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
({ 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
From Developer Console >> File >> New >> Lightning Component >> JavaScript Helper
approveRejectCmpHelper.js [JavaScript Helper File]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
({ 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
From Developer Console >> File >> New >> Lightning Component >> Component Style CSS
approveRejectCmp.css [Style CSS]
|
1 2 3 4 5 6 7 8 |
.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;} |
Further post that would you like to learn in Salesforce
FAQ (Frequently Asked Questions)
What is a approval process in Salesforce?
An approval process is an automated process that approves records in Salesforce. When you build an approval process, you specify the steps necessary for approval. A given step can apply to all records or just records with certain attributes.
What are two final approval actions in an approval process Salesforce?
Final approval actions occur when all required approvals were obtained. A final rejection action occurs when an approver rejects the request and it moves to the final rejection state. An outbound message sends information to a designated endpoint, like an external service.
How many steps are in approval process?
The approval process ensures that all the necessary steps take place to complete any approval, while rules govern how the request is handled at various stages of the process. The following figure illustrates the five stages of any approval process.
Related Topics | You May Also Like
How to Retrieve all Information About the Current User Details Like User Id, Profile Name, UserRole Name, FirstName, LastName, Email, etc.. Using Apex Class in Lightning Component Salesforce | how to get current user id in lightning component Salesforce
How to retrieve data from multiple object and delete cross object records of selected row using apex wrapper class lightning component in Salesforce | how to delete cross object records of selected row
How to Show/Hide a Custom Loading Spinner Image in Salesforce Lightning Component | how to add a spinner to the lightning component Salesforce
Retrieve data of Cross-object(Lookup/Master-Detail) from child to parent for custom objects and navigate to record detail page in lightning component Salesforce | How to fetch data of Cross object using SOQL query in salesforce
Using SObjectAccessDecision Class to Call one apex method from another method with two different controller and Passing multiple parameters value from one function to another and displaying cross object related record in lightning component Salesforce | calling multiple apex method and showing data from inner (Nested) soql query in lightning component Salesforce
Editing row, Saving row and Removing rows Dynamically in Lightning component Salesforce | how to edit/save row dynamically in Salesforce lightning component
How to wrapper class retrieve all the values in Salesforce Lightning Component | how to pass wrapper class instance to fetch record from custom object in Salesforce lightning component
Create visualforce page to retrieve data from multiple custom objects using custom controller wrapper class and display data in a table of VF page in Salesforce | how to fetch data from multiple different object in visualforce page
- Your reaction of the article ▾
Author of w3web.net
Hi, I am a senior software developer and working in MNC company from more than 8 years. I am great fan of technology, configuration, customization & development. Apart of this, I love to write about Blogging in spare time, Working on Mobile & Web application development, Salesforce lightning, Salesforce LWC and Salesforce Integration development in full time. [Read full bio] | | The Sitemap where you can find all published post on w3web.net
Best Blog
For More information
PassFab for RAR This is a very helpful site for anyone, each and every man can easily operate this site and can get benefistss
I am a regular visitor, and this post posted on this web page is truly pleasant.
purchasing a fridge water filter
VERY GOOD INFO
nice information…
Helpful.Thank you
thanks for your information