Interface flexipage:availableForRecordHome make the component available for record pages only.
Sample example:
<aura:component implements="flexipage:availableForRecordHome" access="global">
</aura:component>
Scenario: Make the component available at account detail page to insert contact.
Solution:
1) Component:(We have implemented interface force:hasRecordId to obtain accountid using recordId attribute from account detail page and to make our component available for record page only, we need to implement the interface flexipage:availableForRecordHome.
<aura:component controller="ContactInsertClass" implements="force:hasRecordId,flexipage:availableForRecordHome">
<aura:attribute name="firstName" type="string"/>
<aura:attribute name="lastName" type="string"/>
<lightning:input label="Enter First Name" value="{!v.firstName}"/>
<lightning:input label="Enter Last Name" value="{!v.lastName}"/>
<lightning:button label="Add contact" onclick="{!c.addContact}"/>
</aura:component>
2) Javascript controller:
({
addContact : function(component, event, helper) {
var fName=component.get("v.firstName");
var lName=component.get("v.lastName");
var action=component.get('c.insertContact'); // Calling Apex Controller method
action.setParams({
parentAccountId:component.get("v.recordId"), // Passing parameter
firstName1:component.get("v.firstName"),
lastName1:component.get("v.lastName")
});
action.setCallback(this,function(response){
var state=response.getState();
if(state==="SUCCESS")
{
alert('Contact inserted successfully');
}
});
$A.enqueueAction(action);
}
})
3) Apex controller:
public class ContactInsertClass {
@AuraEnabled
public static contact insertContact(string parentAccountId,string firstName1,string lastName1)
{
system.debug('Test');
contact con=new contact();
con.firstName=firstName1;
con.lastName=lastName1;
con.accountid=parentAccountId;
insert con;
return con;
}
}
Screen Image from Account record page:
Sample example:
<aura:component implements="flexipage:availableForRecordHome" access="global">
</aura:component>
Scenario: Make the component available at account detail page to insert contact.
Solution:
1) Component:(We have implemented interface force:hasRecordId to obtain accountid using recordId attribute from account detail page and to make our component available for record page only, we need to implement the interface flexipage:availableForRecordHome.
<aura:component controller="ContactInsertClass" implements="force:hasRecordId,flexipage:availableForRecordHome">
<aura:attribute name="firstName" type="string"/>
<aura:attribute name="lastName" type="string"/>
<lightning:input label="Enter First Name" value="{!v.firstName}"/>
<lightning:input label="Enter Last Name" value="{!v.lastName}"/>
<lightning:button label="Add contact" onclick="{!c.addContact}"/>
</aura:component>
2) Javascript controller:
({
addContact : function(component, event, helper) {
var fName=component.get("v.firstName");
var lName=component.get("v.lastName");
var action=component.get('c.insertContact'); // Calling Apex Controller method
action.setParams({
parentAccountId:component.get("v.recordId"), // Passing parameter
firstName1:component.get("v.firstName"),
lastName1:component.get("v.lastName")
});
action.setCallback(this,function(response){
var state=response.getState();
if(state==="SUCCESS")
{
alert('Contact inserted successfully');
}
});
$A.enqueueAction(action);
}
})
3) Apex controller:
public class ContactInsertClass {
@AuraEnabled
public static contact insertContact(string parentAccountId,string firstName1,string lastName1)
{
system.debug('Test');
contact con=new contact();
con.firstName=firstName1;
con.lastName=lastName1;
con.accountid=parentAccountId;
insert con;
return con;
}
}
Screen Image from Account record page:
No comments:
Post a Comment