-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!

Improve this question
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
    – Itai Shmida
    Sep 13, 2017 at 9:09

1 Answer 1

Reset to default
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>
Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .