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

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.