0

I have an lwc component that is enable in App Page and Record Page. Whenever using this component, I want this component can identify which page is using it and which region on that page is it being located (For Example: Right/Left Side Bar, or Subheader, etc). Is there any possible solution to achieve this requirement? Please help. Thanks!

Improve this question
2
  • 1
    Never done it, but I would start here: salesforceben.com/lightning-web-components-enhancements or apexhours.com/…. Add the component to an app and record page. Inspect the DOM for both to see how the DOM got generated.. They may have something unique about them :). Then you could use that to help you identify its location based on the "parent" within the DOM. In case other logic is needed, you can also utilize the available lifecycle hooks.. Let me know if that works :) !!!!
    – Rodrigo
    Jul 27 at 3:14
  • Why? Feels like an XY Problem. Identifying the page should be possible via the URL, but determining where in the page - forget it. You could have a property the admin sets when dropping the component into the page in the Lightning App Builder (but they probably won't bother to be accurate unless this actually helps them somehow). If to select a different presentation style, let the admin choose that...
    – Phil W
    Jul 27 at 5:58

1 Answer 1

Reset to default
2

You cannot know where is the sidebar, left or right, but you can know whether a component is in a sidebar or in the header or in the main body exposing a @api flexipageRegionWidth property.
It will hold the following values:

  • SMALL - if the width is less than 50% - I.E. Left or Right sidebar region (region 3 of the screenshot)
  • MEDIUM - if the width greater or equal 50% and less than 100% - I.E. the body of Header and Left/Right Sidebar (region 2 of the screenshot) or both regions of Header and Two Equal Regions.
  • 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/Right Sidebar (region 1 of the screenshot).

You could have few getters to show/hide part of the component.
JS

@api flexipageRegionWidth;

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

get isMediumRegion() {
    return 'MEDIUM' === this.flexipageRegionWidth;
}

HTML

<template lwc:if={isSmallRegion}>
    <p>I'm in a sidebar</p>
</template>
<template lwc:elseif={isMediumRegion}>
     <p>I'm in a medium region, maybe there is a sidebar</p>
</template>
<template lwc:else>
     <p>I'm in a large region</p>
</template>

By the way, there is an undocumented value:

  • XLARGE - Header region Header and Two Equal Regions

To know whether the LWC is in a Record Page or in an App Page, you could rely on URL:

  • /lightning/n/ means that it's in an App Page
  • /lightning/r/ means that it's in a Record Page

Again you could define few getters:

get isAppPage() {
    return location.pathname.startsWith('/lightning/n/');
}

get isRecordPage() {
    return location.pathname.startsWith('/lightning/r/');
}

Then use them in the template:

<template lwc:if={isAppPage}>
    <p>This is an App Page</p>
</template>
<template lwc:elseif={isRecordPage}>
     <p>This is a Record Page</p>
</template>
Improve this answer
1

You must log in to answer this question.

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