How to Incorporate Form Into the Lightning Component
Work Relay form can be incorporated into the lightning component using WR_BPM:FormComponent component as form wrapper.
WR_BPM:FormComponent has following attributes:
formId - id of form that needs to be incorporated
recordId - id of form source object. Attribute can be left blank in case form is used to create new records.
formMode - 'edit' or 'view'
class - optional parameter to pass class name that should be applied to the form component
<WR_BPM:FormComponent formId="{!v.formId}" recordId="{!v.recordId}" formMode="edit" class="className"/>
Below is example of lightning component which uses Work Relay forms. It uses accordion aura component to switch between forms in the list: once user clicks accordionSection aura component corresponding form is expanded. formId attribute represents form id for the expanded accordionSection, selectionName attribute represents name of expanded accordionSection. Both forms are used to create new records which is the reason recordId attribute is blank.
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global">
<aura:attribute name="formId" type="String"/>
<aura:attribute name="selectionName" type="String"/>
<div>
<lightning:accordion aura:id="accordion" onsectiontoggle="{!c.handleSectionToggle}">
<lightning:accordionSection name="NewAccount" label="New Account">
<aura:if isTrue="{!v.selectionName == 'NewAccount'}">
<WR_BPM:FormComponent formId="{!v.formId}" recordId="" formMode="edit"/>
</aura:if>
</lightning:accordionSection>
<lightning:accordionSection name="NewCase" label="New Case">
<aura:if isTrue="{!v.selectionName == 'NewCase'}">
<WR_BPM:FormComponent formId="{!v.formId}" recordId="" formMode="edit"/>
</aura:if>
</lightning:accordionSection>
</lightning:accordion>
</div>
</aura:component>
Component controller:
({
handleSectionToggle: function (component, event) {
//define which section was expanded
if(component.find("accordion").get('v.activeSectionName') == 'NewAccount')
{
//logic to get New Account form id to update formId with
//...
//...
component.set("v.formId", 'new_account_form_id');
component.set("v.selectionName", 'NewAccount');
}
else
{
//logic to get New Case form id to update formId with
//...
//...
component.set("v.formId", 'new_case_form_id');
component.set("v.selectionName", 'NewCase');
}
}
})
0 Comments
Add your comment