Apex Code Development You need to sign in to do that
Don't have an account?
Need help show/hide quickaction button calling lightning component
Hi dev guru's,
I'm hoping on some help from one of you Lightning Guru's out there ;-)
First of all I'm mighty proud I created my first lightning component that is called by a quickaction and it works! Yeay me ;-)
But now I've got the following requirement and I don't know how to handle and move further with it.
Preferably and I think it would be a great idea for Salesforce to just make this possible OOTB, I would like to render my custom action conditionally on the page. In classic we would therefore create 2 recordtypes and page layouts, one with the button the other without and then use Worklfow rule to switch the recordtype based on some fieldcriteria right... The problem is that this switching in lightning doesn't happen very seemlessly for the user (it looks like there is sometimes a lag in updating the pageview), soo.....
I can think of 2 possible solutions (but I don't know how):
To give you insight, or hopefully so anybody could help me I'll post the code of my existing component that is called through a quickaction on the opportunity object:
CreateOrderFromOppty.cmp
it's controller:
it's Helper:
It uses other components for lookupfields, but that is not really relevant ;-)
Thanks for any advise or help!!
I'm hoping on some help from one of you Lightning Guru's out there ;-)
First of all I'm mighty proud I created my first lightning component that is called by a quickaction and it works! Yeay me ;-)
But now I've got the following requirement and I don't know how to handle and move further with it.
Preferably and I think it would be a great idea for Salesforce to just make this possible OOTB, I would like to render my custom action conditionally on the page. In classic we would therefore create 2 recordtypes and page layouts, one with the button the other without and then use Worklfow rule to switch the recordtype based on some fieldcriteria right... The problem is that this switching in lightning doesn't happen very seemlessly for the user (it looks like there is sometimes a lag in updating the pageview), soo.....
I can think of 2 possible solutions (but I don't know how):
- Create a simple lightning component which I would drag on the recordpage, that doesn't render anything, but would just change the style class to show or hide of a button with a name that I can set as an attribute and a second field in which I can set the condition to render it by entering field api name conditional statement (like in a formula) or something... for example:
2. Alternatively. Create a component that renders a button or not using aura:if, that when I click the button calls my quickaction component that already exists. But I would like not to have to modify this component too much, because it's called by quickaction it also has the force:hasRecordId of the opprtunity it's located on etc... So I would like total reusability. So only 1 new component rendering a button or not calling my existing quickaction component.
To give you insight, or hopefully so anybody could help me I'll post the code of my existing component that is called through a quickaction on the opportunity object:
CreateOrderFromOppty.cmp
<aura:component controller="CreateOrderFromOpptyCTRL"
implements="force:lightningQuickActionWithoutHeader,force:hasRecordId">
<aura:attribute name="opportunity" type="Opportunity" />
<aura:attribute name="newOrder" type="Order"
default="{ 'sobjectType': 'Order' }" /> <!-- default to empty record -->
<aura:attribute name="hasErrors" type="Boolean"
description="Indicate if there were failures when validating the order." />
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<!-- Display a header with details about the opportunity -->
<div class="slds-page-header" role="banner">
<p class="slds-text-heading--label">{!v.opportunity.Name}</p>
<h1 class="slds-page-header__title slds-m-right--small
slds-truncate slds-align-left">Create New Order</h1>
</div>
<!-- Display form validation errors, if any -->
<aura:if isTrue="{!v.hasErrors}">
<div class="recordSaveError">
<ui:message title="Error" severity="error" closable="true">
The new order can't be saved because it's not valid.
Please review and correct the errors in the form.
</ui:message>
</div>
</aura:if>
<!-- Display the new corder form -->
<div class="slds-form--stacked">
<div class="slds-form-element slds-required">
<label class="slds-form-element__label"
for="orderName">* Order Name: </label>
<div class="slds-form-element__control">
<ui:inputText class="slds-input" aura:id="orderName"
value="{!v.newOrder.Name}" required="true"/>
</div>
</div>
<c:strike_lookup class="slds-input slds-required"
aura:id="orderBillingAccount"
value="{!v.newOrder.blng__BillingAccount__c}"
label="Billing Account"
object="Account"
searchField="Name"
placeholder="Select a Billing Account"
iconName="standard:account"
subtitleField="Industry"
order="Name"
limit="5"
loadingMessage="Loading..."
errorMessage="Invalid input"
showRecentRecords="true"
required="true" />
<div class="slds-form-element">
<label class="slds-form-element__label" for="orderStartDate">* Start Date: </label>
<div class="slds-form-element__control">
<ui:inputDate class="slds-input" aura:id="orderStartDate"
value="{!v.newOrder.EffectiveDate}" displayDatePicker="true" />
</div>
</div>
<div class="slds-form-element">
<label class="slds-form-element__label"
for="orderPONumber">PO Number: </label>
<div class="slds-form-element__control">
<ui:inputText class="slds-input" aura:id="orderPONumber"
value="{!v.newOrder.PoNumber}" />
</div>
</div>
<div class="slds-form-element">
<label class="slds-form-element__label"
for="orderPODate">PO Date: </label>
<div class="slds-form-element__control">
<ui:inputDate class="slds-input" aura:id="orderPODate"
value="{!v.newOrder.PoDate}" displayDatePicker="true" />
</div>
</div>
<div class="slds-form-element">
<label class="slds-form-element__label"
for="orderOpportunity">Shipping Street: </label>
<div class="slds-form-element__control">
<ui:inputText class="slds-input" aura:id="orderOpportunity"
value="{!v.newOrder.ShippingStreet}" />
</div>
</div>
<div class="slds-form-element">
<label class="slds-form-element__label"
for="orderOpportunity">Shipping PostalCode: </label>
<div class="slds-form-element__control">
<ui:inputText class="slds-input" aura:id="orderOpportunity"
value="{!v.newOrder.ShippingPostalCode}" />
</div>
</div>
<div class="slds-form-element">
<label class="slds-form-element__label"
for="orderOpportunity">Shipping City: </label>
<div class="slds-form-element__control">
<ui:inputText class="slds-input" aura:id="orderOpportunity"
value="{!v.newOrder.ShippingCity}" />
</div>
</div>
<div class="slds-form-element">
<label class="slds-form-element__label"
for="orderOpportunity">Shipping Country: </label>
<div class="slds-form-element__control">
<ui:inputText class="slds-input" aura:id="orderOpportunity"
value="{!v.newOrder.ShippingCountry}" />
</div>
</div>
<div class="slds-form-element">
<ui:button label="Cancel" press="{!c.handleCancel}"
class="slds-button slds-button--neutral" />
<ui:button label="Save Order" press="{!c.handleSaveOrder}"
class="slds-button slds-button--brand" />
</div>
</div>
</aura:component>
it's controller:
({
doInit : function(component, event, helper) {
// Prepare the action to load opportunity record
var action = component.get("c.getOpportunity");
action.setParams({"opportunityId": component.get("v.recordId")});
// Configure response handler
action.setCallback(this, function(response) {
var state = response.getState();
if(component.isValid() && state === "SUCCESS") {
var opportunity = response.getReturnValue();
component.set("v.opportunity", opportunity);
var tempOrder = component.get("v.newOrder");
tempOrder.blng__BillingAccount__c = opportunity.AccountId;
tempOrder.ShippingStreet = opportunity.Account.ShippingStreet;
tempOrder.ShippingPostalCode = opportunity.Account.ShippingPostalCode;
tempOrder.ShippingCity = opportunity.Account.ShippingCity;
tempOrder.ShippingCountry = opportunity.Account.ShippingCountry;
component.set("v.newOrder", tempOrder);
} else {
console.log('Problem getting opportunity, response state: ' + state);
}
});
$A.enqueueAction(action);
},
handleSaveOrder: function(component, event, helper) {
if(helper.validateOrderForm(component)) {
component.set("v.hasErrors", false);
// Prepare the action to create the new order
var saveOrderAction = component.get("c.saveOrder");
saveOrderAction.setParams({
"order": component.get("v.newOrder"),
"opportunityId": component.get("v.recordId"),
"opportunity": component.get("v.opportunity")
});
// Configure the response handler for the action
saveOrderAction.setCallback(this, function(response) {
var state = response.getState();
if(component.isValid() && state === "SUCCESS") {
// Prepare a toast UI message
var resultsToast = $A.get("e.force:showToast");
resultsToast.setParams({
"title": "Order Saved",
"message": "The new order was created."
});
// Update the UI: close panel, show toast, refresh account page
$A.get("e.force:closeQuickAction").fire();
resultsToast.fire();
$A.get("e.force:refreshView").fire();
}
else if (state === "ERROR") {
console.log('Problem saving order, response state: ' + state);
}
else {
console.log('Unknown problem, response state: ' + state);
}
});
// Send the request to create the new order
$A.enqueueAction(saveOrderAction);
}
else {
// New order form failed validation, show a message to review errors
component.set("v.hasErrors", true);
}
},
handleCancel: function(component, event, helper) {
$A.get("e.force:closeQuickAction").fire();
}
})
it's Helper:
({
validateOrderForm: function(component) {
var validOrder = true;
// First and Last Name are required
var orderNameField = component.find("orderName");
if($A.util.isEmpty(orderNameField.get("v.value"))) {
validOrder = false;
orderNameField.set("v.errors", [{message:"Order Name can't be blank"}]);
}
else {
orderNameField.set("v.errors", null);
}
/*
var orderAccountField = component.find("orderAccount");
if($A.util.isEmpty(orderAccountField.get("v.value"))) {
validOrder = false;
orderAccountField.set("v.errors", [{message:"Account can't be blank"}]);
}
else {
orderAccountField.set("v.errors", null);
}
*/
// Verify we have an opportunity to attach it to
var opportunity = component.get("v.opportunity");
if($A.util.isEmpty(opportunity)) {
validOrder = false;
console.log("Quick action context doesn't have a valid opportunity.");
}
// TODO: (Maybe) Validate extra fields
return(validOrder);
}
})
It uses other components for lookupfields, but that is not really relevant ;-)
Thanks for any advise or help!!