0

I have two Lightning Web Components (LWC). I want to combine them into one using lightning-layout (Layout items with horizontal align (Spread)). I want to know whether it is possible to do something like:

<template>
<div class="c-container">
    <lightning-layout horizontal-align="spread">
        <lightning-layout-item padding="around-small">
            (My 1st LWC)
        </lightning-layout-item>
        <lightning-layout-item padding="around-small">
            (My 2nd LWC)
        </lightning-layout-item>
    </lightning-layout>
</div>
</template>

The reason is I want to create a custom layout for my page, like creating a 50/50 space for my LWCs. On the Lightning App Builder, AFAIK, you cannot do so. It will split the space about 70/30 between the components.

How do I achieve this?

EDIT:

LWC1 is not displayed correctly

Combined.html

<template>
<div class="c-container">
    <lightning-layout horizontal-align="spread">
        <lightning-layout-item padding="around-small">
            <c-LWC1 >
            </c-LWC1 >
        </lightning-layout-item>
        <lightning-layout-item padding="around-small">
            <c-LWC2 >
            </c-LWC2 >
        </lightning-layout-item>
    </lightning-layout>
</div>
</template>

LWC1.js:

import { LightningElement, api, track, wire } from 'lwc';
import { getRecord, getFieldValue  } from 'lightning/uiRecordApi';
import Product_Family from '@salesforce/schema/Product__c.Family__c';

export default class LWC1 extends LightningElement {
@api recordId;
@track name;
@track language_value = 'english';

//default data
currentDate = new Date().toLocaleDateString('de-DE', {
    day: 'numeric',
    month: 'long',
    year: 'numeric'
});

price = "$5";
pictureURL = "https://www.lightningdesignsystem.com/assets/images/carousel/carousel-01.jpg";

//functions
get cardTitle() {
    return (this.name) ? `${this.name} description` : 'Product description';
}
get productFamily() {
    return getFieldValue(this.product.data, Product_Family);
}

get language_options() {
    return [
        { label: 'English', value: 'english' },
        { label: 'Italian', value: 'italian' }
    ];
}

@wire(getRecord, { recordId: '$recordId', fields })
product;
@wire(getRecord, { recordId: '$recordId', fields })
loadProduct({ error, data }) {
    if (error) {
        // TODO: handle error
    } else if (data) {
        // Get Product data
        this.name = data.fields.Name.value;
        this.code = data.fields.Code__c.value;
    }
  }
}

LWC1.html

<template>
<lightning-card title={cardTitle} icon-name="standard:display_text">
    <div class="slds-m-around_medium">
        <p>Date: {currentDate}</p>
        <br/>
        <!-- Show data when product is loaded -->
        <template if:true={product.data}>
            <div id="description">
                <div class="slds-size_2-of-4 slds-form-element">
                    <label class="slds-form-element__label" for="textarea-id-01">Image:</label>
                    <div class="slds-form-element__control">
                        <lightning-carousel>
                                <lightning-carousel-image
                                    src = {pictureUrl}
                                    header = "First Card"
                                    description = "First card description."
                                    alternative-text = "First card accessible description."
                                    href = "https://www.salesforce.com">
                                </lightning-carousel-image>
                                <lightning-carousel-image
                                    src = {pictureUrl}
                                    header = "Second Card"
                                    description = "Second card description."
                                    alternative-text = "Second card accessible description."
                                    href = "https://www.salesforce.com">
                                </lightning-carousel-image>
                            </lightning-carousel>
                    </div>
                </div>
                <div class="c-container">
                    <lightning-layout horizontal-align="spread">
                        <lightning-layout-item padding="around-small">
                            <div id="basic">
                                <span class="header">Basic Info</span> <br/>
                                Name: {name} <br/>
                                Price: {price}
                            </div>
                        </lightning-layout-item>
                        <lightning-layout-item padding="around-small">
                            <lightning-combobox
                            name="language"
                            label="Language"
                            value={language_value}
                            placeholder="Select Language"
                            options={language_options}
                            ></lightning-combobox>
                        </lightning-layout-item>
                    </lightning-layout>   
                </div>
                <br/>
                <div id="attribute">
                    <span class="header">Attributes</span><br/>
                    <div class="slds-form-element">
                        <div class="slds-form-element__control">
                            <lightning-textarea name="textarea1" label="Description" placeholder="Write description here..."></lightning-textarea>
                        </div>
                    </div>
                    <div class="slds-grid slds-gutters">
                        <div class="slds-col slds-large-size_3-of-12">
                            <div class="slds-form-element">
                                <lightning-input type="number" name="input_price" label="Price" value="0" formatter="currency" step="0.01"></lightning-input>
                            </div>
                        </div>
                        <div class="slds-col slds-large-size_3-of-12">
                            <div class="slds-form-element">
                                <label class="slds-form-element__label" for="select-size">Size:</label>
                                <div class="slds-form-element__control">
                                    <select class="slds-select" id="select-size">
                                        <option value="">Please select</option>
                                        <option>S</option>
                                        <option>M</option>
                                        <option>L</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="slds-col slds-large-size_3-of-12">
                            <div class="slds-form-element">
                                <lightning-input type="datetime" name="input_date" value="2019-08-17T18:13:41Z"></lightning-input>
                            </div>
                        </div>
                        <div class="slds-col slds-large-size_3-of-12">
                            <div class="slds-form-element">
                                <div class="slds-form-element__control slds-input-has-fixed-addon">
                                    <lightning-input type="number" name="input_length" label="Length" placeholder="Length"></lightning-input>
                                    <span class="slds-form-element__addon" style="margin-top:20px;margin-left:5px;">meter</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <br/>
            </div>
            <div class="header">Related info</div>
            <lightning-record-form
                object-api-name="Family__c"
                record-id={productFamily}
                layout-type="Compact">
            </lightning-record-form>
        </template>
        <!-- Data failed to load -->
        <template if:true={product.error}>
            <div class="slds-text-color_error">
                An error occurred while loading the product record
            </div>
        </template>
    </div>
</lightning-card>

LWC2.js

import { LightningElement} from 'lwc';

export default class LWC2 extends LightningElement {
get versionTree() {
    var versions = [];
    var versionCount = 65;
    var i;
    for (i = 1 ; i <= versionCount ; i++) {
        versions.push({
            label: 'Version ' + i,
            name: i,
            href: ''
        });
    }
    return versions;
}
}

LWC2.html

<template>
<div class="slds-m-top_medium slds-m-bottom_x-large">
        <h2 class="slds-text-heading_medium slds-m-bottom_medium">
            Product Version. Click a version to change.
        </h2>

        <!-- Simple -->
        <div class="slds-p-around_medium lgc-bg">
            <lightning-tree items={versionTree} header="Links"></lightning-tree>
        </div>
    </div>
 </template>
8
  • I quickly tried your code in playground, and it works as expected. developer.salesforce.com/docs/component-library/tools/… Commented Aug 19, 2019 at 13:21
  • @PranayJaiswal Thank you for your comment. Maybe I wasn't clear. "My 1st LWC" and "My 2nd LWC" are both a complete LWC which consists of JS, HTML, Meta.XML, and CSS. The code is just an example how I want to use it on another new LWC. I want to know if it is possible to "import" these two LWCs into a new LWC.
    – user2018
    Commented Aug 19, 2019 at 13:28
  • Should be fine, whatever lightning-* components you use are also imported one. I dont see a problem doing so :) Because of Shadow DOM and CSS containment of locker services, I dont see any issues with JS cros referecning and CSS side effects. Commented Aug 19, 2019 at 13:30
  • @PranayJaiswal Then maybe it is a JS problem for me. If you don't mind, could you please show me how to do that? (import the existing LWCs and use it on the new LWC).
    – user2018
    Commented Aug 19, 2019 at 13:45
  • 1
    just use the component? No need to import it? <c-component1 /> Commented Aug 19, 2019 at 13:46

1 Answer 1

1

When you dont mention size on layout-item, it will become flexible in terms of width and each item occupy width according to its content.

Total horizontal size is divided into 12 parts. Size should be 6 for 50:50. Also use multiple-rows to arrange vertically.

<div class="c-container">
    <lightning-layout horizontal-align="spread" multiple-rows>
        <lightning-layout-item padding="around-small" size="6">
            (My 1st LWC)
        </lightning-layout-item>
        <lightning-layout-item padding="around-small" size="6">
            (My 2nd LWC)
        </lightning-layout-item>
    </lightning-layout>
</div>

For more info, check Grid System

You must log in to answer this question.

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