Tuesday, 20 March 2018

lightning - quick action on opportunity page to edit related list

Add a quick action associated with a lightning compoent on the opportunity mobile and salesforce1 actions list.


ProjectedRevenueRelatedList.cmp:
=========================

<aura:component implements="force:lightningQuickActionWithoutHeader,force:hasRecordId" controller="ProjectedRenevueRelatedListController">
    <aura:attribute name="prlist" type="Object[]"  access="global" />
    <aura:attribute name="recordId" type="Id" />
    <aura:attribute name="isOpen" type="boolean" default="true"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <ltng:require scripts=""
                  styles="{!join(',',
                          $Resource.projectRevenue)}" />
    <aura:if isTrue="{!v.isOpen}">
        <div style="height:500px">
            <div class="slds-modal__header">           
                <h2 id="header99" class="slds-text-heading--medium">Projected Revenues</h2>
                <p></p>
            </div>
            <aura:if isTrue="{!v.prlist.length > 0}">
                <div style="width:100%">
                    <table class="slds-table slds-table_bordered slds-max-medium-table_stacked-horizontal" style="margin-top:25px;width:100%">
                        <thead>
                            <tr class="slds-text-title_caps">
                                <th><div class="slds-truncate">Projected Revenue Name</div></th>
                                <th><div class="slds-truncate">Annual Projected Revenue</div></th>
                                <th><div class="slds-truncate">Fiscal Year</div></th>
                            </tr>
                        </thead>
                        <tbody>
                            <aura:iteration items="{!v.prlist}" var="pr">
                                <tr>
                                    <td class="slds-truncate">{!pr.Name}</td>
                                    <td class="slds-truncate"><ui:inputText value="{!pr.AnnualRevenue__c}"  placeholder="Initial"/></td>
                                    <td class="slds-truncate"><ui:inputText value="{!pr.Fiscal_Year__c}"  placeholder="Initial" change="{!c.validateFiscalYear}" />
                                        <aura:if isTrue="{!pr.Fiscal_Year__c.length!=4}">
                                            <p style="color:red">Fiscal Year must be of 4 digits</p>
                                        </aura:if>
                                    </td>       
                                </tr>
                            </aura:iteration>
                        </tbody>
                    </table>
                </div>
                <div class="slds-modal__footer">
                    <button class="slds-button slds-button--neutral" onclick="{!c.closeModel}" >Cancel</button>
                    <button class="slds-button slds-button--brand" id="savebtn" onclick="{!c.saveModel}">Save</button>
                </div>
                <aura:set  attribute="else">
                    No Projected Revenues Available to show.
                </aura:set>       
            </aura:if>
        </div>
    </aura:if>
</aura:component>





ProjectedRevenueRelatedListController.js
==============================

({
doInit : function(component, event, helper) {
console.log('doInit success');       
        var prlist=[];
        console.log('recordId: '+component.get("v.recordId"));
        var action = component.get("c.getProjectedRevenueList");
        action.setParams({ oppId : component.get("v.recordId") });       
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                component.set("v.prlist",JSON.parse( response.getReturnValue()));
                console.log('prlist: '+JSON.stringify(component.get('v.prlist')));
            }
        });
        $A.enqueueAction(action);
},
    closeModel: function(component, event, helper) {
      // for Hide/Close Model,set the "isOpen" attribute to "Fasle" 
        window.open('/'+component.get("v.recordId"),"_self");
   },
    saveModel: function(component, event, helper) {
        console.log('saving data to server');   
        console.log('data: '+JSON.stringify(component.get("v.prlist")));
        var action = component.get("c.saveProjectedRevenueList");
        action.setParams({ data : JSON.stringify(component.get("v.prlist")) });         
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                console.log('data saved.');
            }                           
        window.open('/'+component.get("v.recordId"),"_self");
        });
        $A.enqueueAction(action);     
   },
     validateFiscalYear: function(component,event,helper){
        var ele=event.getSource();
        var eleval=ele.get("v.value");
         console.log('eleval: '+eleval);
         console.log('eleval length: '+(eleval.length!=4));
        if(eleval.length!=4){
           document.getElementById("savebtn").disabled = true;
        }
        else{
           document.getElementById("savebtn").disabled = false;
        }
    }
})







projectedRevenue.css
================

h1 {
    color : red;
}

#myClass {
    color : blue;
}
.slds-modal__container{
       max-width: 60rem !important;
       width:60% !important;
}
.slds-modal__content {
    height: 400px !important;
    max-height: 400px !important; 
}




ProjectedRenevueRelatedListController.cls
===============================

public class ProjectedRenevueRelatedListController {
    @AuraEnabled
    public static String getProjectedRevenueList(String oppId){
        List<Projected_Revenue__c> prlist=new List<Projected_Revenue__c>();
        prlist=[SELECT Id, Name, AnnualRevenue__c, Fiscal_Year__c
              FROM Projected_Revenue__c
                WHERE Opportunity__c=:oppId];
        return JSON.serialize(prlist);
    }
   
    @AuraEnabled
    public static void saveProjectedRevenueList(String data){
        System.debug('saveProjectedRevenueList success');
        List<Projected_Revenue__c> prlist=new List<Projected_Revenue__c>();
        try{
        prlist=(List<Projected_Revenue__c>)JSON.deserialize(data, LIst<Projected_Revenue__c>.class);
        }catch(JSONException ex){
            System.debug('Deserialization Exception >>> '+ex);
        }
        update prlist;
    }
}



1 comment:

  1. excellent blog...
    Can you please explain how to add a picklist field ?

    ReplyDelete