Clone Opportunity with Products action on Opportunities ( Lightning Component )

I am following this idea since I needed this feature in one of my projects. Since Salesforce already has this in their future roadmap, I realized that It could be an addition to my #GivingBackToCommunity list. I managed to create a lightning component which can be used with lightning action on Opportunity records. This will allow users to clone an opportunity with the products.

IdeaExchange Idea

Here is the idea on the IdeaExchange

clone with products

Lightning Component for Clone with Products

Here is the link to the Lightning Component GitHub repository
clone with products

 

Steps to Install/Configure this component in your Org

For Sandbox/Dev Environment

First, you need to identify whether you want to install a managed or unmanaged package. This can be determined based on your purpose. If you want to amend existing functionality then the unmanaged package is what you are looking for. If that’s not the case and you just want to test it before installing it to the production then managed package is your best bet.

  1. Install the package in your Org. Following are the links to the package installation URL.
    Link to unmanaged package
    Link to managed package
  2. After installing package successfully, you need to configure it and you will have to switch to Salesforce classic view as you need to update the fieldsets ( fieldsets are not available in lightning experience till Winter ‘2018 release).
  3. You have 2 fieldsets first one on Opportunity object and the second one on the OpportunityProduct object. These fieldsets let you decide which field values you want to copy to new opportunity ( cloned opportunity ). By default, it will copy those fields only which are required to save the record.
  4. To modify the fieldset fields navigate to Setup | Customize | Opportunity | FieldSets and you will find the Clone Opportunity Field Set.
  5. You can add fields which you want to be copied in the new opportunity. See the below screenshot.
  6. After adding the fields in the fieldset, you need to add action to the page layout. So navigate to the page layout section and drag the “Clone with Products” action on the pane.
  7. Save everything and switch back to lightning experience view to use this feature.
Screenshot_9
Clone Opportunity Field Set

 

Screenshot_10
Lightning action in page layout

 

For Production Environment

  1. Install the package in your Org. Following are the links to the package installation URL.
    Link to managed package

Rest steps are same as explained for the sandbox environment.

Please let me know if you have any feedback on this.

 

Salesforce Cookies #7

Untitled

Calling a child lightning component method from the parent lightning component

When we have multiple nested components then we may run into a scenario in which our parent lightning component is supposed to call a method of its child component. This is a very common use case.


simplifies the code needed for a parent component to call a method on a child component that it contains

The lightning component framework has  which simplifies the code needed for a parent component to call a method on a child component that it contains. Following example states pretty everything you want to know about it.

Declare the method defination and it’s parameters in child component as explained below.

<aura:method name="handleShowHidePopupEvent" action="{!c.handleShowHidePopupEventAction}" description="Method to show or hide the popup from a button on the parent component">
    <aura:attribute name="showPopup" type="Boolean" default="true"/>
</aura:method>

Create a handler method in the client side controller of the same child component

({
   handleShowHidePopupEventAction : function(cmp, event) {
     var params = event.getParam('arguments');
     if (params) {
       var showPopup = params.showPopup;
       if(showPopup) {
         var cmpTarget = cmp.find('popupParentDiv');
         $A.util.removeClass(cmpTarget, 'slds-hide');
       } else {
         var cmpTarget = cmp.find('popupParentDiv');
         $A.util.addClass(cmpTarget, 'slds-hide');
       }
     }
   }
})

Above code snippet is toggling a parent div of the popup (model). You can also write any specific logic here which you just want to have in the child component only.

Calling method from the parent component – To close the popup after executing the save button logic or cancel button logic

<c:editRecordComponent aura:id="editRecordCmp"/>
<button class="slds-button" type="button" onclick="{!c.saveRecord}"> Save & Close </button>
<button class="slds-button" type="button" onclick="{!c.cancel}"> Cancel </button></pre>

Method in parent component controller

({
  cancel : function(cmp, helper, event){

    var editRecordCmp = component.find("editRecordCmp");
    editRecordCmp.handleShowHidePopupEvent( false );
  }
})

can also return a value once the execution has been completed.

To read more about, please check aura:method in Lightning Components Developer Guide.

Happy coding 🙂

Salesforce Cookies #6

Adding Loading Icon on the page for an AJAX Request ( ActionFunction, CommandButton)

It’s always good to add a loading icon on the page when you are processing something on the server side (calling an apex method ) so a user can understand that something is running in the background. Following code snippet can be used along with your apex:actionFunction or apex:commandButton.

In Classic

<apex:actionStatus id="actionStatus">
  <apex:facet name="start" >
    <img src="/img/loading.gif" />
  </apex:facet>
</apex:actionStatus>

In Lightning Experience

<apex:actionStatus id="actionStatus">
  <apex:facet name="start" >
    <div class="slds-spinner_container">
      <div class="slds-spinner--brand slds-spinner slds-spinner--small" aria-hidden="false" role="alert">
        <div class="slds-spinner__dot-a"></div>
        <div class="slds-spinner__dot-b"></div>
      </div>
    </div>
  </apex:facet>
</apex:actionStatus>

Using ActionStatus in CommandButton

<apex:commandButton value="Save" action="{!Save}" status="actionStatus"/>

Happy Coding 🙂