1

Problem: I want to use my custom lwc component which shows the list of related records similar to standard related list.

why custom related list - because my custom lwc related list show the business related records only

now I want to identify that where my custom component is dropped on related list UI so I can display UI based on that.

Like I want to get the width of parent component that it's 33%, 50%, 67% or 100% so I can show my custom component UI based on that. enter image description here

Improve this question
4
  • Are using the SLDS grid system? If so, you should be able to specify when the UI is on a small, medium, or large screen. I know this isn't exact your requirement of knowing the width of the parent component, but I think it can achieve the same outcome. developer.salesforce.com/docs/component-library/bundle/…
    – Bryan Anderson
    Nov 29, 2022 at 13:43
  • If that sort of thing isn't enough, consider allowing the admin to explicitly choose the presentation style via a target property on your component.
    – Phil W
    Nov 29, 2022 at 13:49
  • @BryanAnderson no it's a custom component having vanilla CSS.
    – Gopal
    Nov 29, 2022 at 13:58
  • @PhilW yeah but I don't want that user manually select that property. How related list identify and show the table according to width?
    – Gopal
    Nov 29, 2022 at 13:58

1 Answer 1

Reset to default
5

You can't get exactly the width of the parent component, but you can know the region's width exposing a @api flexipageRegionWidth property, that will hold the following values:

  • SMALL - if the width is less than 50% - I.E. Left or Right sidebar region (region 2 of your screenshot)
  • MEDIUM - if the width greater or equal 50% and less than 100% - I.E. both regions of Header and Two Equal Regions (region 1 of your screenshot)
  • LARGE - if the width is 100% - I.E. any region of Header and One Region and One Region template or header region of Header and Left (or Right) Sidebar or Header. (region 3 of your screenshot)
  • XLARGE - Header region Header and Two Equal Regions

The latter isn't listed in the documentation, so I wouldn't rely on it.

You could use that value as CSS class of the main container in your HTML template, then define multiple styles in the CSS file, or you could expose several getters to show/hide part of the component, i.e.

get smallRegion() {
    return 'SMALL' === this.flexipageRegionWidth;
}

<template if:false={smallRegion}>
<!-- something -->
</template>
Improve this answer
1
  • Nice. It would be sensible to ensure the component handles not having this property set (e.g. because it is being used in a flow screen or digital experience page).
    – Phil W
    Nov 29, 2022 at 15:45

You must log in to answer this question.

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