Wednesday 9 January 2019

Design attributes in Lightning Web Components | CSS and SVG Files | Lightning Web Components | targetConfigs



In our last post we talk about How to create first lightning web components and How to invoke apex class from Lightning web components. In this post we will talk about how to create design attribute in lightning web components.

We know how to create Design Attribute in lightning component. For Design Attribute we used to create <design:attribute tag in design file. But for Lightning web components we need to define the design attribute in Component Configuration File (XML) with<targetConfigs> tag. The component author need to defines the property in the component’s JavaScript class using the @api decorator.


We can use Design Attribute to make lightning web components attribute available to System Admin to edit Lightning App Builder or Community. 

Here is Sample code.

HelloWorld.html
<template>
    <lightning-card title={strTitle} icon-name="custom:custom14">
        <div>
            <p>  Hello , {firstName} </p>
        </div>
        <div>
            <template if:true={showImage}>
                <img src={imgUrl} width="200" height="200"/>
            </template>
        </div>
    </lightning-card>
</template>


HelloWorld.js
import { LightningElement, api } from 'lwc';
export default class MyComponent extends LightningElement {
    @api firstName ='Amit';
    @api strTitle ='Welcome in Salesforce';
    @api showImage =false;
    @api imgUrl ='';
}

HelloWorld.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="MyComponent">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>

    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>

    <targetConfigs>  
        <targetConfig targets="lightning__HomePage,lightning__RecordPage">
            <property name="strTitle" type="String" default="Welcome in Salesforce" label="Enter the title"/>
            <property name="showImage" type="Boolean" default="true" label="Show Image ?"/>
            <property name="imgUrl" type="String" default="" label="Enter Image URL"/>
        </targetConfig>
    </targetConfigs>
   
</LightningComponentBundle>

Define the design Attribute in <property tag under <TargetConfig tag.

Please check our YouTube Channel Recording for same topic.

https://www.youtube.com/watch?v=oDj8R8QZdrg&t=1159s




 Please check our old post on Lightning Web Components:-
 
Feel free to post your feedback or question.

Thanks,
Amit Chaudhary

Capture.JPG  @amit_sfdc    #SalesforceApexHours    @ApexHours
  Salesforce Apex Hours


5 comments: