I have created few lightning web components and created a managed package.

The attributes are disabled when I use those components. How can I enable those @api properties as attributes when I use the component? Can anyone suggest an example like what should be added in meta.xml if I have a @api property in js like details , where details is array of objects????


You are probably missing the configuration file tags:

Each Lightning web component folder must include a configuration file named .js-meta.xml. The configuration file defines the metadata values for the component, including the design configuration for the Lightning App Builder and Community Builder.

  • Can you suggest an example!!! @Renato Oliveira Jan 28 '20 at 10:25

@Renato Oliveira is actually correct.

The @api decorator serves two purposes: 1. It allows the other components pass data and call methods to a child component 2. It allows the user in the Lightning Page Builder to define values for properties only IF the properties are exposed via the metadata of the LightningComponentBundle.

Here's the sample config for you:

<?xml version="1.0" encoding="UTF-8" ?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="ohILoveIt">
    <masterLabel>My Love Component</masterLabel>
        <targetConfig targets="lightning__RecordPage"> <!-- Note that you need a config for other targets if you use them -->
            <!-- property name should match what you have in @api -->
            <property name="loveItHow" type="String" default="Fast and Hard" label="How should we love it?" />

Look like, we need to define the all @api values in our meta XML file as well. Refer the below link for more details. https://www.salesforcecodecrack.com/2019/04/how-to-design-attributes-in-lightning.html

Supporting Objects: https://developer.salesforce.com/docs/atlas.en-us.uiapi.meta/uiapi/ui_api_get_started_supported_objects.htm#ui_api_get_started_supported_objects


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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