BUSINESS CHALLENGES

We have a long 'Opportunity Sales Process' with multiple Approval stages — One at Bid Assessment to approve working on the request for proposal (RFP) and another at the submission of the proposal. Depending on the Proposal value and risk associated the approval is routed to various departments and Senior Leadership.

When multiple approval processes for the same opportunity are routed to the same set of people, the Approval Layout does not clearly and boldly spell out what is being approved.

This issue is resolved by having a prominent banner on the Approval Layout as highlighted below.

APPROVAL PROCESS

There are 2 approval processes.

1. Bid Approval Process is to approve if it is worthwhile spending time on the Bid.

   

2. Proposal Approval Process is to approve the pricing, Period performance etc of the Proposal.

   

More information on how to create an Approval process is here.

STEPS TO CREATE AN APPROVAL BANNER

Creating a banner involves three steps:

1. Create a Lightning Component
2. Create an Apex Controller 
3. Add component to the approval page

1. CREATE A LIGHTNING COMPONENT

1. Click on Setup and then Open Developer Console into New Window.

   

2. Click on File → New → Lightning Component → Name it ApprovalProcessBanner and Click Submit.

   

3. On creation, the lightning component includes an tag.

4. Now between these tags add a handler in the component. Next, use a handler in the component. Here provide a name, value and action for the handler. The action in the handler will be performed by the controller.

5. Now, add two string attributes: recordId (input) and stageName (output).

   ApprovalProcessBanner.cmp

   <aura:component implements="force:appHostable,flexipage:availableForAllPageType,flexipage:availableForRecordHome,force:hasRecordId" controller="ApprovalProcessBannerController" access="global">       
   <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>   
   <aura:attribute name="recordId" type="String" /> 
   <aura:attribute name="stageName" type="String"/> 
   <div class="banner"> 	
   <span class="span-text">
   <b>{!v.stageName}</b></span> 
   </div> 	 
   </aura:component>

6. Add the functionality to the doInit function in the javascript controller.

   ApprovalProcessBannerController.js

   ({ 	
      doInit : function(component, event, helper) { 		
        var action = component.get("c.getOpportunity"); 	
        action.setParams({"recordId": component.get("v.recordId")}); 	
        action.setCallback(this, function(response) {
          var state = response.getState();
          if (state === "SUCCESS") { 
           component.set("v.stageName", response.getReturnValue()); console.log(response.getReturnValue()); 
          }
        }); 
      $A.enqueueAction(action); 	
      }
   })

7. Once the component and javascript is ready, style the approval process banner for formatting.

   ApprovalProcessBanner.css

   .THIS.banner {
       font-size: 20px; 
       font-weight : bold;
       color: orange;
       text-align: center;
       background-color: white;
   }

2. ADD AN APEX CONTROLLER

1. Create an Apex class by selecting File → New → Apex Class and name it as ApprovalProcessBannerController.

   

2. Retrieve the approval process Instance from the object ProcessInstanceWorkItem for the specific recordId.

3. Get the pending process node from the object ProcessInstanceNode for the current process instance.

4. Determine the stageName to be displayed from the approval process node name.

   ApprovalProcessBannerController.apxc

   public class ApprovalProcessBannerController{
     @AuraEnabled
     public static String getOpportunity(String recordId){
       List<ProcessInstanceWorkitem> piwiList = [Select Id,ProcessInstanceId from ProcessInstanceWorkitem where Id =:recordId];
         String stageName = '';
         if(piwiList != null && !piwiList.isEmpty()) {
             ProcessInstanceNode pin = [Select Id,ProcessNodeName from ProcessInstanceNode where ProcessInstanceId =:piwiList.get(0).ProcessInstanceId and NodeStatus = 'Pending'];
             stageName = pin.ProcessNodeName;
             if(pin.ProcessNodeName.contains('Proposal Approval')){
                 stageName = 'PROPOSAL APPROVAL';
              }else{
                 stageName = 'BID ASSESSMENT';
              }
          }
          return stageName;
     }
   }

3. EMBEDDING AURA COMPONENT TO THE PAGE 

The next step is, embedding the Aura component on the Approval Page where we would like to distinguish approval processes for the pending approvals.

1. Navigate to the approval process page
2. Select the gear icon and then click on the Edit Page.
3. Next, in the Components toolbox, select the created Aura component → Drag & Drop it in the required location → Save the page once the component is added.

WRAPPING IT UP

In this blog post we have covered how to create an Approval Process Banner on an Approval Layout Page that Approver can be used to distinguish from multiple approval processes.