-1

I would ask if it is possible to get the same Standard Lightning Experience Layout in a Lightnign Component.

For example I would replicate this Layout: enter image description here

but in Lightning Component I am using lightning:input component and the result is:

enter image description here

Thanks a lot!

2
  • 1
    Referring to SLDS library: You would need to use Expandable Section, in it use Form Layout. Layout in 1/2 columns can also be controlled by Sizing. Please try and let us know if you are stuck!
    – Raul
    Sep 12, 2017 at 10:47
  • 1
    To add to @RahulSharma - you are using lightning:input component which is an input field and in the standard layout you have a read only field only if you click on the pencil you get the edit mode. To achieve this behavior you can use a standard Related Record component that it's Update Action is an Update Action of the object Sep 13, 2017 at 9:09

1 Answer 1

7

You can use the lightning:layout and lightning:layoutItem to achieve the SLDS grid.

<lightning:layout >
    <lightning:layoutItem >
        <lightning:input name="input1" label="First Name"/>
    </lightning:layoutItem>
    <lightning:layoutItem >
        <lightning:input name="input2" label="Last Name"/>
    </lightning:layoutItem>
</lightning:layout>

If you're looking for a read-only record layout, Winter '18 comes with lightning:outputField, where you can do something like this.

<lightning:recordViewForm recordId="003R0000001b5x1IAA" objectApiName="Contact">
    <div class="slds-box slds-theme_default">
        <lightning:layout class="slds-p-around--large">
            <lightning:layoutItem >
                <lightning:outputField fieldName="Name" />
                <lightning:outputField fieldName="Phone"/>
                <lightning:outputField fieldName="Email" />
            </lightning:layoutItem>
            <lightning:layoutItem class="slds-p-around--large">
                <lightning:outputField fieldName="Birthdate" />
                <lightning:outputField fieldName="LeadSource" />
            </lightning:layoutItem>
        </lightning:layout>
    </div>
</lightning:recordViewForm>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.