సేల్స్‌ఫోర్స్‌లో LWC కాంపోనెంట్‌ని జోడిస్తోంది

Sels Phors Lo Lwc Kamponent Ni Jodistondi



ఈ గైడ్‌లో, సేల్స్‌ఫోర్స్ రికార్డ్/హోమ్/యాప్ పేజీకి లైట్నింగ్ వెబ్ కాంపోనెంట్‌ను ఎలా జోడించాలో మేము చర్చిస్తాము. మనకు తెలిసినట్లుగా, LWC అంటే లైట్నింగ్ వెబ్ కాంపోనెంట్, ఇది ఆకర్షణీయమైన వెబ్ పేజీలను రూపొందించడానికి ఉపయోగించే సేల్స్‌ఫోర్స్ యొక్క హృదయ అనుకూలీకరణ. అలాగే, మేము LWC స్క్రిప్ట్‌లను సృష్టించడానికి మరియు అమలు చేయడానికి Lightning Studio ప్లాట్‌ఫారమ్‌ని ఉపయోగిస్తాము.

లైట్నింగ్ స్టూడియో ఎక్స్‌టెన్షన్‌ని పరిచయం చేస్తున్నాము

లైట్నింగ్ స్టూడియో సేల్స్‌ఫోర్స్ LWC డెవలప్‌మెంట్‌ను సులభంగా మరియు వేగంగా నిర్మిస్తుంది. ఈ ఎడిటర్‌లో, మేము నేరుగా అపెక్స్/మెసేజ్ ఛానెల్‌లు మరియు LWC స్క్రిప్ట్‌లను సృష్టించవచ్చు. అలాగే, మేము నేరుగా LWC (కస్టమ్) భాగాలను ఒకేసారి అమలు చేయవచ్చు. దీన్ని మన వెబ్‌సైట్‌కి ఎలా జోడించాలో మరియు దానిని ఎలా తెరవాలో చూద్దాం.

వెబ్‌సైట్‌కి వెళ్లి, 'లైట్నింగ్ స్టూడియో - యాడ్ క్రోమ్' (మీరు క్రోమ్‌ని ఉపయోగిస్తుంటే) కోసం శోధించండి. 'Chromeకి జోడించు' బటన్‌పై క్లిక్ చేయండి.









ఇది Chromeకి జోడించబడిందని మనం చూడవచ్చు. ఇప్పుడు, ఇది నిలిపివేయబడింది. సేల్స్‌ఫోర్స్ ఆర్గ్ తెరవబడితేనే ఇది ఎనేబుల్ అవుతుంది.







సేల్స్‌ఫోర్స్ ఆర్గ్‌లోకి లాగిన్ అయిన తర్వాత ఇది ప్రారంభించబడుతుంది.



పొడిగింపుపై క్లిక్ చేయండి.

ఎడమవైపుకు వెళ్లి, కొత్త LWC కాంపోనెంట్‌ని సృష్టించడానికి ఉపయోగించే మూడవ చిహ్నాన్ని ఎంచుకోండి.

  • మొదట, మేము భాగం యొక్క పేరును పేర్కొనాలి.
  • సేల్స్‌ఫోర్స్‌లో కాంపోనెంట్ విజిబిలిటీని సెట్ చేయడానికి “isExposed” ఉపయోగించబడుతుంది. ఇది తప్పక నిజమైనదిగా సెట్ చేయబడాలి.
  • కాంపోనెంట్ ఎక్కడ ఉంచాలో లక్ష్యాన్ని పేర్కొనడం ముఖ్యం. అనేక లక్ష్యాలను ఎంచుకోవచ్చు.
  • కాంపోనెంట్‌ను అమలు చేయడం చివరి దశ ('డిప్లాయ్' పై క్లిక్ చేయండి).

ఉదాహరణ 1: రికార్డ్ పేజీకి జోడించడం

ఈ దృష్టాంతంలో, మేము 'రికార్డ్ పేజీకి జోడించబడింది' టెక్స్ట్‌ను ప్రదర్శించే 'ఫస్ట్ కాంపొనెంట్' LWC స్క్రిప్ట్‌ను సృష్టిస్తాము మరియు ఈ భాగాన్ని 'ఖాతా రికార్డ్' పేజీకి జోడిస్తాము. “firstComponent.js-meta.xml” ఫైల్‌లో, మేము లక్ష్యాన్ని lightning__RecordPageగా పేర్కొనాలి.

కోడ్ నిర్మాణం:

firstComponent.html

< టెంప్లేట్ >
< మెరుపు కార్డు రూపాంతరం = 'ఇరుకైన' శీర్షిక = 'Linux' >
< p >> రికార్డ్ పేజీకి జోడించబడింది p >
మెరుపు కార్డు >
టెంప్లేట్ >

firstComponent.js

దిగుమతి { మెరుపు మూలకం } నుండి 'అదృష్టం' ;
ఎగుమతి డిఫాల్ట్ క్లాస్ ఫస్ట్‌కాంపోనెంట్ లైట్నింగ్ ఎలిమెంట్‌ను విస్తరిస్తుంది {
}

firstComponent.js-meta.xml

< ?xml సంస్కరణ: Telugu = '1.0' ? >
< LightningComponentBundle xmlns = 'http://soap.sforce.com/2006/04/metadata' >
< apiVersion > 57.0 apiVersion >
< బహిర్గతమైంది > నిజం బహిర్గతమైంది >
< లక్ష్యాలు >
< లక్ష్యం > మెరుపు__రికార్డ్‌పేజీ లక్ష్యం >
లక్ష్యాలు >
LightningComponentBundle >

ఒక భాగాన్ని జోడించడం:

సేల్స్‌ఫోర్స్ ఆర్గ్‌కి వెళ్లి, యాప్ లాంచర్ కింద 'సేల్స్' యాప్ కోసం వెతకండి.

'ఖాతాలు' ట్యాబ్‌కు నావిగేట్ చేయడం ద్వారా ఏదైనా ఖాతా రికార్డును తెరవండి. గేర్ చిహ్నానికి వెళ్లి, 'పేజీని సవరించు' ఎంచుకోండి.

ఇప్పుడు, ఎడమవైపుకి వెళ్లి, మీ భాగం కోసం శోధించండి.

కాంపోనెంట్‌ని లాగండి మరియు దానిని 'హైలైట్స్ ప్యానెల్' క్రింద ఉంచండి.

'సక్రియం చేయి'పై క్లిక్ చేసి, దానిని Org డిఫాల్ట్‌గా కేటాయించండి. చివరగా, రికార్డ్ పేజీని సేవ్ చేయండి.

అది ఐపోయింది. ఇప్పుడు, 'సేల్స్' యాప్ పేజీకి తిరిగి వెళ్లి, 'ఖాతా రికార్డ్' (ఏదైనా రికార్డ్)కి వెళ్లండి. అనుకూల భాగం జోడించబడిందని మీరు చూడవచ్చు.

ఉదాహరణ 2: హోమ్ పేజీకి జోడించడం

'మొదటి భాగం'ని ఉపయోగించుకుందాం. HTML ఫైల్‌లో పేరా టెక్స్ట్‌ని 'హోమ్ పేజీకి జోడించబడింది'గా సవరించండి. 'firstComponent.js-meta.xml' ఫైల్‌లో లక్ష్యాన్ని 'lightning__HomePage'గా పేర్కొనండి.

firstComponent.html

<టెంప్లేట్>
= 'ఇరుకైన' శీర్షిక = 'Linux' >

< p > హోమ్ పేజీకి జోడించబడింది < / p >
< / lightning-card>
< / టెంప్లేట్>

firstComponent.js-meta.xml

సంస్కరణ: Telugu
= '1.0' ?>
=
'http://soap.sforce.com/2006/04/metadata' >
57.0 < / apiVersion>
<బహిర్గతం>నిజం< / బహిర్గతమైంది>
<లక్ష్యాలు>
<టార్గెట్>మెరుపు__హోమ్‌పేజీ< / లక్ష్యం>
< / లక్ష్యాలు>
< / LightningComponentBundle>

ఒక భాగాన్ని జోడించడం:

'సేల్స్' యాప్‌కి వెళ్లి, 'హోమ్' ట్యాబ్‌పై క్లిక్ చేయండి.

గేర్ చిహ్నం క్రింద అందుబాటులో ఉన్న సవరణ పేజీపై క్లిక్ చేయండి. భాగం కోసం శోధించండి మరియు దానిని 'పనితీరు' భాగం పైన ఉంచండి. పేజీని సేవ్ చేయండి.

'సేల్స్ హోమ్' ట్యాబ్‌ను రిఫ్రెష్ చేయండి.

మన భాగం హోమ్ పేజీకి జోడించబడిందని మనం చూడవచ్చు.

ఉదాహరణ 3: యాప్ పేజీకి జోడించడం

'మొదటి భాగం'ని ఉపయోగించుకుందాం. HTML ఫైల్‌లో పేరా టెక్స్ట్‌ని “యాప్ పేజీకి జోడించబడింది”గా సవరించండి. 'firstComponent.js-meta.xml' ఫైల్‌లో లక్ష్యాన్ని 'lightning__AppPage'గా పేర్కొనండి.

firstComponent.html

< టెంప్లేట్ >
< మెరుపు కార్డు రూపాంతరం = 'ఇరుకైన' శీర్షిక = 'Linux' >
< p > యాప్ పేజీకి జోడించబడింది p >
మెరుపు కార్డు >
టెంప్లేట్ >

firstComponent.js-meta.xml

సంస్కరణ: Telugu = '1.0' ?>

= 'http://soap.sforce.com/2006/04/metadata' >

57.0 < / apiVersion>
<బహిర్గతం> నిజం < / బహిర్గతమైంది>
<లక్ష్యాలు>
<లక్ష్యం> మెరుపు__AppPage < / లక్ష్యం>
< / లక్ష్యాలు>
< / LightningComponentBundle>

ఒక భాగాన్ని జోడించడం:

ముందుగా, మనం లైట్నింగ్ యాప్ బిల్డర్‌ని ఉపయోగించి సేల్స్‌ఫోర్స్‌లో యాప్ పేజీని సృష్టించాలి. కొత్త మెరుపు పేజీని సృష్టించడానికి 'త్వరిత శోధన'లో 'మెరుపు యాప్ బిల్డర్' కోసం శోధించండి మరియు 'కొత్తది'పై క్లిక్ చేయండి.

యాప్ పేజీని ఎంచుకుని, 'తదుపరి'కి వెళ్లండి.

లేబుల్‌ను “Linuxhint App”గా ఇచ్చి, “తదుపరి”కి వెళ్లండి.

ప్రస్తుతానికి, కాంపోనెంట్‌ను ఉంచడానికి మాకు ఒక ప్రాంతం మాత్రమే అవసరం. కాబట్టి, 'ఒక ప్రాంతం' ఎంచుకోండి మరియు 'పూర్తయింది' క్లిక్ చేయండి.

ఇప్పుడు, 'ఫస్ట్ కాంపోనెంట్' ను పేజీకి లాగి, పేజీని సేవ్ చేయండి.

పేజీని యాక్టివేట్ చేయాల్సిన పాప్అప్ వస్తుంది. 'సక్రియం చేయి' పై క్లిక్ చేయండి.

ఆ తర్వాత, మీరు యాప్‌కి పేజీని జోడించాలి. 'లైట్నింగ్ ఎక్స్‌పీరియన్స్' ట్యాబ్‌కి వెళ్లి దీన్ని చేయండి. ఈ యాక్టివేషన్‌ను సేవ్ చేయండి.

ఇప్పుడు, యాప్ లాంచర్‌కి వెళ్లి, “Linuxhint App” కోసం శోధించండి. యాప్ పేజీకి మా భాగం జోడించబడిందని మీరు చూడవచ్చు.

ముగింపు

ఇప్పుడు, యాప్ పేజీ, హోమ్ పేజీ మరియు రికార్డ్ పేజీకి LWCని ఎలా జోడించాలో మనం అర్థం చేసుకోగలుగుతున్నాము. అన్ని దృష్టాంతాలలో, మంచి ఆలోచన పొందడానికి మేము అదే ఉదాహరణలను ఉపయోగించాము. “ఇస్‌ఎక్స్‌పోజ్డ్” నిజమని నిర్ధారించుకోండి. లేకపోతే, సేల్స్‌ఫోర్స్ ఆర్గ్‌లో భాగం కనిపించదు. ఈ మొత్తం గైడ్‌లో, కోడ్‌ను అభివృద్ధి చేయడానికి మేము లైట్నింగ్ స్టూడియో (బీటా) ఎడిటర్‌ని ఉపయోగించాము. ఈ గైడ్ ప్రారంభంలో ఈ ఎడిటర్‌ని ఎలా డౌన్‌లోడ్ చేసి, ఎలా ఉపయోగించాలో అన్ని దశలు వివరించబడ్డాయి.