Skip to content

Width-Aware Lighting Web Component with Object and Record Binding

Hello Ohana!

This blog considers some basic concepts of using Lightning Web Components in the Salesforce Experience. For Example – Using Lightning web Component on the lightning pages.

  • When you add a component to a region on a page in the Lightning App Builder, use @api flexipageRegionWidth to pass the region’s width to the component so that you can change the appearance of the component according to the width available.
  • If a component is used on a Lightning record page, you can pass the component the ID of the current record. In the component’s JavaScript class, use the @api decorator to create a public recordId property.
  • If a component is used on a Lightning record page, you can pass the component the API name of the current object. In the component’s JavaScript class, use the @api decorator to create a public objectApiName property. freexxx4u.com tu kif

demo.js

import { LightningElement,api } from 'lwc';

export default class RecordContext extends LightningElement {
    @api recordId;
    @api objectApiName;
    @api flexipageRegionWidth;
}

demo.html

<template>
    <lightning-card title="Demo">
        <div class={flexipageRegionWidth}>
            <H1 class="slds-m-around_small">{flexipageRegionWidth}</H1>
            <H1 class="slds-m-around_small">{recordId}</H1>
            <H1 class="slds-m-around_small">{objectApiName}</H1>
        </div>
    </lightning-card>
</template>

demo.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="RecordContext">
    <apiVersion>46.0</apiVersion>
     <isExposed>true</isExposed>
     <description>This is a demo component.</description>
     <targets>
      <target>lightning__RecordPage</target>
      <target>lightning__AppPage</target>
      <target>lightning__HomePage</target>
  </targets>
</LightningComponentBundle>

demo.css

div.LARGE {
    background:yellow;
}
div.SMALL {
    background:lightpink;
}
div.MEDIUM {
    background:lightgreen;
}

In this video, I have changed the background color based on the region’s width and displayed the Object API name and record Id.

Thank you and stay tuned for more amazing content!

Published inCoding Mania

One Comment

  1. Raghav Raghav

    Helps me lot in basic

Leave a Reply

Your email address will not be published. Required fields are marked *