6

I'm developing a lightning web component with org based development and I'm finding that the component isn't available in the app builder, despite (as far as I can tell) making it available in the component definition. I've attempted this with a my own component and also directly copying the "HelloWorld" Lightning component in this trailhead:

Create a Hello World Lightning Web Component

My component is pretty simple, and I'd like it to be available on the Contact record page. Here is the config on that component:

    <?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="contact_CRSProfileLayout">
    <apiVersion>45.0</apiVersion>
    <description>Use this component to display the fields from this person's related CRS Profile</description>
    <masterLabel>CRS Profile</masterLabel>
    <isExposed>true</isExposed>  
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <objects>
                <object>Contact</object>
            </objects> 
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

I've deployed the components into my sandbox from Visual Studio Code using the "SFDX: Deploy Source to Org" command and I can see that the lighting web components are in the sandbox when I navigate to them in the admin interface (I can't confirm that they exactly match what I'm seeing in Source, but I can see the timestamp of their update is correct).

Successful deployment

However, neither of them are appearing in the ap builder. I would expect both to appear on a record page app builder and the hellowWorld component only to appear on a home page Lightning Page.

enter image description here

Are there general troubleshooting steps I should be taking?

11

You currently have the isExposed attribute set to false, it needs to be set to true for the component to be available on the targeted pages and app builder.

<isExposed>true</isExposed> 

By definition:

isExposed

A Boolean value. Exposes the component in all orgs, and in Lightning App Builder and Community Builder

  • Unfortunately, I'd already tried that (and the helloWorld component was set to Exposed = true. Unfortunately, this hasn't made any difference. I've made the change in the original question so it's clearer. – Bigears Mar 25 at 12:46
  • Did you redeploy the configuration file after making the change? – Jayant Das Mar 25 at 12:49
  • Thank you for checking, but yes - I'm clicking "SFDX: deploy Source to Org" after every change, just to see. – Bigears Mar 25 at 12:53
  • You have few different components mentioned in your question and that your original question was updated. I will recommend to start with one of the components say hello world and try to update the attribute and see if that works. There’s no other attribute which makes the component available in app builder. – Jayant Das Mar 25 at 12:59
  • Additionally just to make sure that the deployment was successful, check for message ended with exit code 0 to make sure the deployment was indeed successful. – Jayant Das Mar 25 at 13:04
3

Add targets in .js-meta.xml file of the component.

<targets>
    <target>lightning__AppPage</target>
    <target>lightning__RecordPage</target>
    <target>lightning__HomePage</target>
</targets>
  • He already has "lightning__RecordPage" as a target in there. Can you elaborate? – Matt Lacey Jul 11 at 1:59
  • This is a good answer - fixed it for me. – Ryan Cocuzzo Jul 30 at 1:08
2

The issue wasn't the deploy, it was me - I'm inexperienced with Visual Studio Code.

I wasn't following the correct order of actions. The local save wasn't happening, so I was repeatedly deploying a "blank" component to the server.

I've ensured that the local save is happening and the components are now showing up as expected.

1

Go to componentname.meta.xml file under lwc in VS Check true attribute set to true.

If isExposed is false, the component is not exposed to Lightning App Builder or Community Builder. To allow the component to be used in Lightning App Builder or Community Builder, set isExposed to true and define at least one , which is a type of Lightning page.

  • 1
    Please provide a reference for material that's copied from the documentation so that others can benefit from the context. This answer is really the same as that already posted by Jayant Das, but we have lots of unsolved questions that could benefit from your knowledge of LWC. – David Reed May 9 at 13:34

protected by Community Sep 11 at 16:40

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.