1.Metadata (XML)
2.javascript
3.HTML
4.Optional CSS and more javascript
HTML Provides the structure for your component.
In LWC, the camel case name of the components are rendered as kebab-case(words separated by hypen) and that component must have a closing tag.
ex : <template>
<c-my-component></c-my-component>
</template>
HTML attributes are in kebab case and its used in LWC for component rendering,calling from one component to another component,Set value attribute name to other component LWC.
Javascript defines the core business logic and event handling.
Js files in LWC are ES6 modules where everything declared in a module is local to the module.
CSS provides the look,feel and animation for your component.
ex :
<!-- myComponent.html -->
<template>
<!-- your markup here -->
</template>
//myComponent.js
import { LightningElement, api} from 'lwc';
export default class myComponent extends LightningElement{
@api prop1;
@api prop2=false;
}
//myComponent.js-meta.xml
?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>45.0</apiVersion>
<isExposed> true </isExposed>
<masterLabel> LWC Demo </masterLabel>
<description> This is Lightning web component Demo </description>
<targets>
<target>lightning__AppPage</target>
<target>lightning__HomePage</target>
<target>lightning__RecordPage</target>
<target>lightningCommunity__Default</target>
<target>lightningCommunity__Page</target>
<target>lightning__UtilityBar</target>
<target>lightning__Tab</target>
<target>lightning__FlowScreen</target>
<target>lighting__Inbox</target>
<target>lightning__ChatMessage</target>
</targets>
<targetCongfigs>
<targetConfig targets="lightning__AppPage, lightning_HomePage">
<property name="prop2" type="Boolean" />
</targetConfig>
<targetConfig targets="lightning__RecordPage">
<property name="prop1" type="String" />
<objects>
<object>Account</object>
<object>Opportunity</object>
<object>Warehouse__c</object>
</objects>
</targetConfig>
</targetConfigs>
</LightningComponentBundle>
The configuration file defines the metatdata values for the component,including the design configuration for the Lightning App Builder and Community Builder.
Configuration file tags :
=================
apiversion :
=========
A double value that binds the component to a salesforce API version.
description :
=========
A short description of the component, usually a single sentence.Appears in list views, like the list of Lightning Componnets in Setup,and as a tooltip in the Lightning App Builder and in Community Builder.
isExposed :
=========
A Boolean value. Expose the component in all orgs, and in Lightning App Builder and Community Builder.
To Make a component usable in a managed package, set isExposed to true.
To Make a component usable in Lightning App Builder and Community Builder set isExposed to true.
masterLabel :
=============
The title of the component .Appears in list views,like the list of Lightning Components in
Setup, and in the Lightning App Builder and in Community Builder.
Note : If you do not use masterLabel tag in the configuration file, your component name will
default as the label of the component.
targets :
=======
Specifies which type of lightning page the component
can be added to . If you want your component to appear in the
Lightning App Builder or in Community Builder, specify at least
one Lightning Page Type
ex :
<targets>
<target>lightning__AppPage</target>
</targets>
lightning__AppPage
Enables a component to be used on the Lightning Page of type App Page.
lightning__HomePage
Enables a component to be used on the Lightning Experience Home Page.
lighting__RecordPage
Enables a component to be used on a Lightning record Page.
lighningCommunity__Page
Enables a component to be used on a Lightning community page in community builder.
lightningCommunity__Default
Used together with lightningCommunity__Page.
Enable a component that includes configurable properties to be used on a Lightning community page in community builder.When the component is selected on the page , the properties appear.
targetConfigs :
===============
Configure the component for different page types and define component properties.
Note : A component could have different properties on a record home page than
on the Salesforce Home page or an app page.
targetConfig :
==============
It is subtag of targetConfigs and used for different page type configuration.
Property :
===========
Specifies a public property of a component that can be set in Lightning App Builder App Manager,Lightning Flow Builder or
Community Builder. The component author defines the property in the component's javascript
class using the @api decorator.
ex :
<property name="picklistValue" type="String" datasource="Option One, Option Two, Option Three" />
<property name="stringValue" type="String" placeholder="Type something here..." />
<property name="numberValue" type="Integer" min="0" max="100" default="10" />
property tag supports different attributes such as datasource,default,description,label,max,min etc
name :
Reuired if you're setting properties for your component.The attribute name.This value must match the property name in the component's javascript class.
type : The attribute data type
label : Display as a label for the attribute in the tool.
deafult : The default value for the attribute.
description : Displays as an i-bubble for the attribute in the tool.
datasource : Renders a field as a picklist, with static values.Supported only if the type attribute is String.
objects :
=======
A set of one or more objects the component is supported for.
This tag set works only inside a parent targetConfig that's configured for lightning__RecordPage.
Specify the objects tag set only once inside a targetConfig set.
supports the object subtag.
object :
======
Define which objects the component is supported for.
Use one object tag for each supported object.
You can't use '*' to denote all objects.
Note :
targetConfigs is an optional tag, if you want to restrict the component
to be used for some particular object record page.
2.javascript
3.HTML
4.Optional CSS and more javascript
HTML Provides the structure for your component.
In LWC, the camel case name of the components are rendered as kebab-case(words separated by hypen) and that component must have a closing tag.
ex : <template>
<c-my-component></c-my-component>
</template>
HTML attributes are in kebab case and its used in LWC for component rendering,calling from one component to another component,Set value attribute name to other component LWC.
Javascript defines the core business logic and event handling.
Js files in LWC are ES6 modules where everything declared in a module is local to the module.
CSS provides the look,feel and animation for your component.
ex :
<!-- myComponent.html -->
<template>
<!-- your markup here -->
</template>
//myComponent.js
import { LightningElement, api} from 'lwc';
export default class myComponent extends LightningElement{
@api prop1;
@api prop2=false;
}
//myComponent.js-meta.xml
?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>45.0</apiVersion>
<isExposed> true </isExposed>
<masterLabel> LWC Demo </masterLabel>
<description> This is Lightning web component Demo </description>
<targets>
<target>lightning__AppPage</target>
<target>lightning__HomePage</target>
<target>lightning__RecordPage</target>
<target>lightningCommunity__Default</target>
<target>lightningCommunity__Page</target>
<target>lightning__UtilityBar</target>
<target>lightning__Tab</target>
<target>lightning__FlowScreen</target>
<target>lighting__Inbox</target>
<target>lightning__ChatMessage</target>
</targets>
<targetCongfigs>
<targetConfig targets="lightning__AppPage, lightning_HomePage">
<property name="prop2" type="Boolean" />
</targetConfig>
<targetConfig targets="lightning__RecordPage">
<property name="prop1" type="String" />
<objects>
<object>Account</object>
<object>Opportunity</object>
<object>Warehouse__c</object>
</objects>
</targetConfig>
</targetConfigs>
</LightningComponentBundle>
The configuration file defines the metatdata values for the component,including the design configuration for the Lightning App Builder and Community Builder.
Configuration file tags :
=================
apiversion :
=========
A double value that binds the component to a salesforce API version.
description :
=========
A short description of the component, usually a single sentence.Appears in list views, like the list of Lightning Componnets in Setup,and as a tooltip in the Lightning App Builder and in Community Builder.
isExposed :
=========
A Boolean value. Expose the component in all orgs, and in Lightning App Builder and Community Builder.
To Make a component usable in a managed package, set isExposed to true.
To Make a component usable in Lightning App Builder and Community Builder set isExposed to true.
masterLabel :
=============
The title of the component .Appears in list views,like the list of Lightning Components in
Setup, and in the Lightning App Builder and in Community Builder.
Note : If you do not use masterLabel tag in the configuration file, your component name will
default as the label of the component.
targets :
=======
Specifies which type of lightning page the component
can be added to . If you want your component to appear in the
Lightning App Builder or in Community Builder, specify at least
one Lightning Page Type
ex :
<targets>
<target>lightning__AppPage</target>
</targets>
lightning__AppPage
Enables a component to be used on the Lightning Page of type App Page.
lightning__HomePage
Enables a component to be used on the Lightning Experience Home Page.
lighting__RecordPage
Enables a component to be used on a Lightning record Page.
lighningCommunity__Page
Enables a component to be used on a Lightning community page in community builder.
lightningCommunity__Default
Used together with lightningCommunity__Page.
Enable a component that includes configurable properties to be used on a Lightning community page in community builder.When the component is selected on the page , the properties appear.
targetConfigs :
===============
Configure the component for different page types and define component properties.
Note : A component could have different properties on a record home page than
on the Salesforce Home page or an app page.
targetConfig :
==============
It is subtag of targetConfigs and used for different page type configuration.
Property :
===========
Specifies a public property of a component that can be set in Lightning App Builder App Manager,Lightning Flow Builder or
Community Builder. The component author defines the property in the component's javascript
class using the @api decorator.
ex :
<property name="picklistValue" type="String" datasource="Option One, Option Two, Option Three" />
<property name="stringValue" type="String" placeholder="Type something here..." />
<property name="numberValue" type="Integer" min="0" max="100" default="10" />
property tag supports different attributes such as datasource,default,description,label,max,min etc
name :
Reuired if you're setting properties for your component.The attribute name.This value must match the property name in the component's javascript class.
type : The attribute data type
label : Display as a label for the attribute in the tool.
deafult : The default value for the attribute.
description : Displays as an i-bubble for the attribute in the tool.
datasource : Renders a field as a picklist, with static values.Supported only if the type attribute is String.
objects :
=======
A set of one or more objects the component is supported for.
This tag set works only inside a parent targetConfig that's configured for lightning__RecordPage.
Specify the objects tag set only once inside a targetConfig set.
supports the object subtag.
object :
======
Define which objects the component is supported for.
Use one object tag for each supported object.
You can't use '*' to denote all objects.
Note :
targetConfigs is an optional tag, if you want to restrict the component
to be used for some particular object record page.
No comments:
Post a Comment