2

I have a simple LWC banner component that displays a banner in an Experience Builder page, based on certain conditions.

banner.html

<template>
    <template if:true={bannerUrl}>
        <lightning-card>
            <div class="slds-align_absolute-center">
                <img src={bannerUrl}/>
            </div>
        </lightning-card>
    </template>
</template>

banner.js

import { LightningElement, track } from 'lwc';

export default class Banner extends LightningElement {

    @track bannerUrl;

    /**
     *  Constructor
     */
    constructor() {
        super();
        // Set banner URL
        this.bannerUrl = 'https://www.fotor.com/blog/wp-content/uploads/2017/09/1.jpg';
    }

}

Note: For testing purposes, I am using a static URL. This will eventually read data from a custom sObject and determine whether to display the banner or not.

banner.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="banner">
    <apiVersion>51.0</apiVersion>
    <description>Banner Lightning Web Component</description>
    <isExposed>true</isExposed>
    <masterLabel>Banner</masterLabel>
    <targets>
        <target>lightningCommunity__Page</target>
        <target>lightningCommunity__Default</target>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>  
    <targetConfigs>
        <targetConfig targets="lightningCommunity__Page,lightningCommunity__Default"/>
    </targetConfigs>    
</LightningComponentBundle>

I've Googled far and wide and set properties like isExposed, target etc. based on recommendations elsewhere.

I am able to view the component, in a test Lightning App I created using developer console.

BannerTest.app

<aura:application extends="force:slds">
    <c:banner/>
</aura:application>

However, the component refuses to turn up in Lightning App Builder pages and Experience Builder.

Looking for suggestion on where I'm going wrong.

Thank you.

5
  • I came across the same issue yesterday and what I did was opened after deploying the component to the org, I did browser refresh which is empty cache and hard refresh. Try this and let me know if this worked for you. Mar 24, 2021 at 5:39
  • Thanks for your reply. Tried this already - but no luck. Any other thoughts? Mar 24, 2021 at 5:52
  • 1
    Have you tried after deactivating and activating community?
    – Raul
    Mar 24, 2021 at 7:36
  • 1
    have you tried moving that bannerUrl initialization into the connectedCallback() method rather than the constructor? Also, make another Experience exposed component and put the banner in that - see if that shows up in the builder. Mar 24, 2021 at 13:21
  • Raul / Caspar - not sure what did the trick. I tried both of your suggestions (deactivating / reactivating and connectedCallback) and it miraculously appeared :D Thank you both. Mar 24, 2021 at 14:28

0

You must log in to answer this question.