How to add design attributes in LWC

Concentrated entrepreneur or manager sitting by desk in front of computer monitor while working at night

Design attributes are set in the configuration file i.e. component.js-meta.xml

<?xml version=”1.0″ encoding=”UTF-8″?><Lightning Component Bundlexmlns =” /2006/04/metadata”> <apiVersion>48.0 </apiVersion><isExposed>true </isExposed><targets><target> lightning__AppPage </target> <target>lightning Community__Default</target><target>lightning__ FlowScreen</target> </targets><targetConfigs><targetConfig targets= “lightning__ FlowScreen” ><property name=”cartId” type=”String” default= “Salesforce Code Crack” label= “Enter the Employee Name “/ > </targetConfig> </targetConfigs></Lightning Component Bundle>

  1. lightning__AppPage – To use in App pages
  2. lightningCommunity__Default – To use in community builder
  3. lightning__FlowScreen – To use in flow

If you want to access the property in componet.js then use the decorator @api.

import { LightningElement, wire } from ‘lwc’; import NAME_FIELD from ‘@salesforce/schema/Account.Name’; import REVENUE_FIELD from ‘@salesforce/schema/Account.AnnualRevenue’; import INDUSTRY_FIELD from ‘@salesforce/schema/Account.Industry’; import getAccounts from ‘@salesforce/apex/AccountController.getAccounts’; import { reduceErrors } from ‘c/ldsUtils’; const COLUMNS = [ { label: ‘Account Name’, fieldName: NAME_FIELD.fieldApiName, type: ‘text’ }, { label: ‘Annual Revenue’, fieldName: REVENUE_FIELD.fieldApiName, type: ‘currency’ }, { label: ‘Industry’, fieldName: INDUSTRY_FIELD.fieldApiName, type: ‘text’ } ];

export default class AccountList extends LightningElement{ @api cartId; column = COLUMNS; @wire(getAccounts) accounts; get errors() { return (this.accounts.error) ? reduceErrors(this.accounts.error) : []; } } If you want to set default value use the assignment operator.

@apicartId = ‘test value’;

If you want to access this variable in function then use “this” operator.


Share on

Share on facebook
Share on twitter
Share on linkedin

Related Posts

LWC vs Aura

LWC LWC uses core Web Components standards (Native browser APIs) and provides only what’s necessary to perform well in browsers supported by Salesforce. Because it’s

Marketing Cloud Basics

It enables you to know your customer, personalize with intelligence, and engage across the entire journey. It’s the only integrated customer engagement platform that enables


Prerequisite: Enable “Dev Hub” in your Production Org. 1. Log in to the Dev Hub To authorize the Dev Hub, use the web login flow

Platform Events

Platform event is based on Event-driven architecture. Unlike request-response communication models, software architecture built on an event-driven model decouples event producers from event consumers, thereby