Design attributes are set in the configuration file i.e. component.js-meta.xml
<?xml version=”1.0″ encoding=”UTF-8″?><Lightning Component Bundlexmlns =” http://soap.sforce.com /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>
- lightning__AppPage – To use in App pages
- lightningCommunity__Default – To use in community builder
- 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.
this.cartId
