Skip to main content

Opportunity Widget

  • Updated

The Pipeline Review User Interface can be configured to use a custom Opportunity Widget Lightning Component. The component is displayed in the List View records, and in the Opportunity Popover. You can create your own component to display or interact with data, launch additional functionality, call Pipeline Review Actions, or connect with other parts of Salesforce.

The Opportunity ID is passed into the Widget Component as the 'recordId' attribute. From there, anything is possible! Make sure to set access = "global" on your component so that is can be embedded within Akoonu. 

Example "Path to Win" Opportunity Widget:

 mceclip0.png

 mceclip1.png
 
 
 
 

Example Opportunity Widget Lightning Component

This example Opportunity Widget will indicate if there are Next Steps for the deal, and provide a link to edit the Opportunity using the standard Salesforce modal by way of the standard Akoonu Action.
 

example.cmp

<aura:component access="global" description="This is a custom component 
used in the Akoonu for Pipeline Reviews app to display on each opportunity 
record">

<aura:attribute access="global" name="recordId" type="String" />

<aura:attribute name="record" type="Object"/>
<aura:attribute name="recordLoadError" type="String"/>

<!-- register the Akoonu Action event to trigger actions from within the
component -->
<aura:registerEvent name="action" type="aknu:evtAction"/>
 
<!-- load the opportunity record -->
 <force:recordData aura:id="originLoader"
 recordId="{!v.recordId}"
 fields="Id,Name,NextStep"
 mode="VIEW" 
 targetFields="{!v.record}" 
 recordUpdated="{!c.recordUpdated}"
 />
 
 <div class="slds-truncate">
 <p class="slds-truncate"><lightning:icon size="xx-small" iconName="{! if(v.record.Description,'utility:success','utility:routing_offline')}"
 class="slds-m-right_xx-small" variant="{! if(v.record.Description,'success ','')}" />
 <span class="slds-text-title_caps">Deal Description:</span> {!v.record.NextStep} 
 <lightning:button variant="bare" label="edit" onclick="{!c.triggerAction}" value="aknu:Edit_Opportunity" 
 class="slds-m-left_small"/>
 </p>
 </div>
</aura:component>
 

exampleController.js

({
 triggerAction : function(component, event, helper) { 
  var actionName = event.getSource().get("v.value"); 
  var compEvent = component.getEvent("action");
  var recordId = component.get("v.recordId"); 
  compEvent.setParams({
   "actionName" : actionName,
   "recordId" : recordId,
  }); 
  compEvent.fire();
 },

 recordUpdated : function(component, event, helper) {
  var changeType = event.getParams().changeType;
  if (changeType === "ERROR") { 
   } else if (changeType === "LOADED") { 
   } else if (changeType === "REMOVED") {
   } else if (changeType === "CHANGED") { 
    component.find("originLoader").reloadRecord();
   }
  }
})
 

Related articles