Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
BobPBobP 

Lightning Component make form two columns

I have a previously created lightning component that is currenty a single column and i would like to make it two columns. I attempted adding slds-size_1-of-2 to the following but it just shrunk the form
<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                    <lightning:recordForm
                                          recordId="{!v.modalApptId}"
                                          objectApiName="ServiceAppointment"
                                          layoutType="Full"
                                          mode="edit"
                                          oncancel="{!c.closeModal}"
                                          onsuccess="{!c.toastToSave}"/>

What do i need to add to the below code to adjust it two a two column form? 
  
<aura:component controller="AcmeController" implements="flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes" access="global">
    <ltng:require styles="{!$Resource.AcmeEventCal + '/fullcalendar.min.css'}"/>
    <aura:attribute name="showModal" type="Boolean" default="false"/>
    <aura:attribute name="modalApptId" type="String" default=""/>
    <aura:attribute name="lastEdited" type="String" default=""/>
    
    
    <aura:attribute name="allEvents" type="Map"/>
    <aura:attribute name="objectLabel" type="String"/>
    <aura:attribute name="sObjectName" type="String"/>
    <aura:attribute name="titleField" type="String"/>
    <aura:attribute name="startDateTimeField" type="String"/>
    <aura:attribute name="endDateTimeField" type="String"/>
    <aura:attribute name="descriptionField" type="String"/>
    <aura:attribute name="userField" type="String"/>
    <aura:attribute name="calendarButtons" type="String"/>
    <aura:attribute name="weekends" type="Boolean"/>
    <aura:attribute name="eventBackgroundColor" type="String"/>
    <aura:attribute name="eventBorderColor" type="String"/>
    <aura:attribute name="eventTextColor" type="String"/>
    <aura:attribute name="idVal" type="String"/>
    <aura:attribute name="titleVal" type="String"/>
    <aura:attribute name="locationVal" type="String"/>
    <aura:attribute name="eventTypeVal" type="String"/>
    <aura:attribute name="descriptionVal" type="String"/>
    <aura:attribute name="startDateTimeVal" type="DateTime"/>
    <aura:attribute name="timeSlotNameVal" type="DateTime"/>
    <aura:attribute name="endDateTimeVal" type="DateTime"/>
    <aura:attribute name="newOrEdit" type="String" default="New"/>
    <aura:attribute name="calendar" type="Object"/>
    
    <aura:handler name="change" value="{!v.eventFilter}" action="{!c.renderCalendar}"/>
    <aura:handler name="change" value="{!v.allEvents}" action="{!c.renderCalendar}"/>
    
    <div id="calendar" class="anyCalendar"></div>
    
    
    <aura:if isTrue="{!v.showModal}">
        <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
            <div class="slds-modal__container">
                <header class="slds-modal__header">
           
                    <h2 id="modal-heading-01" class="slds-modal__title slds-hyphenate">Edit Service Appointment</h2>
                    <!--<p class="slds-m-top_x-small">
                        <a href="{!'../'+v.modalApptId}">View full record details</a>.</p>-->
                </header>
                <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                    <lightning:recordForm
                                          recordId="{!v.modalApptId}"
                                          objectApiName="ServiceAppointment"
                                          layoutType="Full"
                                          mode="edit"
                                          oncancel="{!c.closeModal}"
                                          onsuccess="{!c.toastToSave}"/>
                </div>

            </div>
        </section>
        <div class="slds-backdrop slds-backdrop_open"></div>
        
    </aura:if>
    
    

    
</aura:component>

 
Best Answer chosen by BobP
ShivankurShivankur (Salesforce Developers) 
Hi Bob,

You could use something like below to show 2 columns: 
<lightning:recordForm
        aura:id="myRecordForm"
        recordId="{!v.recordId}"
        objectApiName="Account"
        fields="{!v.fields}"
        columns="2"
        mode="edit"
        onsubmit="{!c.handleSubmit}" />
This is just an example given over official documentation around this tag:
https://developer.salesforce.com/docs/component-library/bundle/lightning:recordForm/documentation

Hope above information helps. Please mark as Best Answer so that it can help others in future.

Thanks.
 

All Answers

ShivankurShivankur (Salesforce Developers) 
Hi Bob,

You could use something like below to show 2 columns: 
<lightning:recordForm
        aura:id="myRecordForm"
        recordId="{!v.recordId}"
        objectApiName="Account"
        fields="{!v.fields}"
        columns="2"
        mode="edit"
        onsubmit="{!c.handleSubmit}" />
This is just an example given over official documentation around this tag:
https://developer.salesforce.com/docs/component-library/bundle/lightning:recordForm/documentation

Hope above information helps. Please mark as Best Answer so that it can help others in future.

Thanks.
 
This was selected as the best answer
BobPBobP
I will try this solution Shivankur. Thank you