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>
  • I quickly tried your code in playground, and it works as expected. developer.salesforce.com/docs/component-library/tools/… – Pranay Jaiswal Aug 19 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. – user2015 Aug 19 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. – Pranay Jaiswal Aug 19 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). – user2015 Aug 19 at 13:45
  • 1
    just use the component? No need to import it? <c-component1 /> – Pranay Jaiswal Aug 19 at 13:46
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

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.