tag:blogger.com,1999:blog-29636512177532511642024-03-24T00:09:57.768-07:00MASTER CLASSPeople throw stones at you and you convert them into milestones
Master Class http://www.blogger.com/profile/01852672912613116009noreply@blogger.comBlogger118125tag:blogger.com,1999:blog-2963651217753251164.post-43020658579497527032023-02-08T08:53:00.001-08:002023-02-08T08:57:17.658-08:00<h1 style="text-align: left;"> <span style="color: #cc0000;">Lazy Data Loading</span><b> </b></h1><p></p><ul style="text-align: left;"><li> <span style="color: red;">Lazy loading</span> helps with loading only the necessary piece and delaying the loading of the remaining until the user needs it, as opposed to bulk loading, which loads all of the data and renders it to the user at once.</li><li><span style="color: #cc0000;">Attributes</span><span style="color: red;">:</span></li><ul><li>Using the <b>enable-infinite-loading option</b>, you can load a portion of the data and then display more as viewers scroll to the table's finish. To retrieve extra data, use the onloadmore event handler.</li><li><b>load-more-offset</b>: Calculates the number of pixels the table's scroll position is from the bottom of the table to determine when to start infinite loading. 20 is the default.</li></ul><li><span style="color: #cc0000;">Visit Salesforce Document Link to understand more about Lightning data Table </span> <a href="https://developer.salesforce.com/docs/component-library/bundle/lightning-datatable/documentation">https://developer.salesforce.com/docs/component-library/bundle/lightning-datatable/documentation</a></li></ul><div>Implementing Lazy Data Load for contact</div><div><br /></div><div><div style="background-color: #272822; color: #f8f8f2; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #f92672;">public</span> with sharing <span style="color: #f92672;">class</span> <span style="color: #a6e22e; text-decoration-line: underline;">LazyLoadingController</span> {</div><div> <span style="color: #66d9ef; font-style: italic;">@AuraEnabled</span>(cacheable<span style="color: #f92672;">=</span><span style="color: #ae81ff;">true</span>)</div><div> <span style="color: #f92672;">public</span> <span style="color: #f92672;">static</span> <span style="color: #66d9ef; font-style: italic;">List</span><<span style="color: #66d9ef; font-style: italic;">Contact</span>> <span style="color: #a6e22e;">getContact</span>(<span style="color: #f92672;">Integer</span> limitSize, <span style="color: #f92672;">Integer</span> offset){</div><div> <span style="color: #66d9ef; font-style: italic;">List</span><<span style="color: #66d9ef; font-style: italic;">Contact</span>> contactList <span style="color: #f92672;">=</span> [<span style="color: #f92672;">SELECT</span> <span style="color: #f92672;">Id</span>,<span style="color: #f92672;">Name</span></div><div> <span style="color: #f92672;">FROM</span> <span style="color: #66d9ef; font-style: italic;">Contact</span></div><div> <span style="color: #f92672;">ORDER BY</span> <span style="color: #f92672;">CreatedDate</span></div><div> <span style="color: #f92672;">LIMIT</span> <span style="color: #f92672;">:</span>limitSize</div><div> <span style="color: #f92672;">OFFSET</span> <span style="color: #f92672;">:</span>offset</div><div> ];</div><div> <span style="color: #f92672;">return</span> contactList;</div><div> }</div><div>}</div></div></div><div><br /></div><div>lazyLoadingLWCDemo</div><div><br /></div><div><div style="background-color: #272822; color: #f8f8f2; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><<span style="color: #f92672;">template</span>></div><div> <<span style="color: #f92672;">div</span> <span style="color: #a6e22e;">style</span>=<span style="color: #e6db74;">"height:500px"</span>></div><div> <<span style="color: #f92672;">lightning-datatable</span> <span style="color: #a6e22e;">key-field</span>=<span style="color: #e6db74;">"Id"</span></div><div> <span style="color: #a6e22e;">data</span>=<span style="color: #e6db74;">{contacts}</span></div><div> <span style="color: #a6e22e;">columns</span>=<span style="color: #e6db74;">{columns}</span></div><div> <span style="color: #a6e22e;">enable-infinite-loading</span></div><div> <span style="color: #a6e22e;">onloadmore</span>=<span style="color: #e6db74;">{loadMoreData}</span></div><div> <span style="color: #a6e22e;">hide-checkbox-column</span>=<span style="color: #e6db74;">"true"</span></div><div> <span style="color: #a6e22e;">show-row-number-column</span>=<span style="color: #e6db74;">"true"</span>></div><div> </<span style="color: #f92672;">lightning-datatable</span>> </div><div></<span style="color: #f92672;">div</span>></div><div></<span style="color: #f92672;">template</span>></div></div></div><div><br /></div><div>lazyLoadingLWCDemo,js</div><div><div><br /></div><div><div style="background-color: #272822; color: #f8f8f2; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #f92672;">import</span> { LightningElement} <span style="color: #f92672;">from</span> <span style="color: #e6db74;">'lwc'</span>;</div><div><span style="color: #f92672;">import</span> getContact <span style="color: #f92672;">from</span> <span style="color: #e6db74;">'@salesforce/apex/LazyLoadingController.getContact'</span>;</div><br /><div><span style="color: #66d9ef; font-style: italic;">const</span> columns <span style="color: #f92672;">=</span> [</div><div> { label: <span style="color: #e6db74;">'Id'</span>, fieldName: <span style="color: #e6db74;">'Id'</span>, type: <span style="color: #e6db74;">'text'</span> },</div><div> { label: <span style="color: #e6db74;">'Name'</span>, fieldName: <span style="color: #e6db74;">'Name'</span>, type: <span style="color: #e6db74;">'text'</span>} </div><div>];</div><br /><div><span style="color: #f92672;">export</span> <span style="color: #f92672;">default</span> <span style="color: #66d9ef; font-style: italic;">class</span> <span style="color: #a6e22e; text-decoration-line: underline;">LazyLoadingLWCDemo</span> <span style="color: #f92672;">extends</span> <span style="color: #a6e22e; text-decoration-line: underline;">LightningElement</span> {</div><div> contacts<span style="color: #f92672;">=</span>[];</div><div> error;</div><div> columns <span style="color: #f92672;">=</span> columns;</div><div> rowLimit <span style="color: #f92672;">=</span><span style="color: #ae81ff;">25</span>;</div><div> rowOffSet<span style="color: #f92672;">=</span><span style="color: #ae81ff;">0</span>;</div><div> </div><div> <span style="color: #a6e22e;">connectedCallback</span>() {</div><div> <span style="color: #fd971f;">this</span>.<span style="color: #a6e22e;">loadData</span>();</div><div> }</div><br /><div> <span style="color: #a6e22e;">loadData</span>(){</div><div> <span style="color: #f92672;">return</span> <span style="color: #a6e22e;">getContact</span>({ limitSize: <span style="color: #fd971f;">this</span>.rowLimit , offset : <span style="color: #fd971f;">this</span>.rowOffSet })</div><div> .<span style="color: #a6e22e;">then</span>(<span style="color: #fd971f; font-style: italic;">result</span> <span style="color: #66d9ef; font-style: italic;">=></span> {</div><div> <span style="color: #66d9ef; font-style: italic;">let</span> updatedRecords <span style="color: #f92672;">=</span> [<span style="color: #f92672;">...</span><span style="color: #fd971f;">this</span>.contacts, <span style="color: #f92672;">...</span><span style="color: #fd971f; font-style: italic;">result</span>];</div><div> <span style="color: #fd971f;">this</span>.contacts <span style="color: #f92672;">=</span> updatedRecords;</div><div> <span style="color: #fd971f;">this</span>.error <span style="color: #f92672;">=</span> <span style="color: #ae81ff;">undefined</span>;</div><div> })</div><div> .<span style="color: #a6e22e;">catch</span>(<span style="color: #fd971f; font-style: italic;">error</span> <span style="color: #66d9ef; font-style: italic;">=></span> {</div><div> <span style="color: #fd971f;">this</span>.error <span style="color: #f92672;">=</span> <span style="color: #fd971f; font-style: italic;">error</span>;</div><div> <span style="color: #fd971f;">this</span>.contacts <span style="color: #f92672;">=</span> <span style="color: #ae81ff;">undefined</span>;</div><div> });</div><div> }</div><br /><div> <span style="color: #a6e22e;">loadMoreData</span>(<span style="color: #fd971f; font-style: italic;">event</span>) {</div><div> <span style="color: #66d9ef; font-style: italic;">const</span> currentRecord <span style="color: #f92672;">=</span> <span style="color: #fd971f;">this</span>.contacts;</div><div> <span style="color: #66d9ef; font-style: italic;">const</span> { target } <span style="color: #f92672;">=</span> <span style="color: #fd971f; font-style: italic;">event</span>;</div><div> target.isLoading <span style="color: #f92672;">=</span> <span style="color: #ae81ff;">true</span>;</div><br /><div> <span style="color: #fd971f;">this</span>.rowOffSet <span style="color: #f92672;">=</span> <span style="color: #fd971f;">this</span>.rowOffSet <span style="color: #f92672;">+</span> <span style="color: #fd971f;">this</span>.rowLimit;</div><div> <span style="color: #fd971f;">this</span>.<span style="color: #a6e22e;">loadData</span>()</div><div> .<span style="color: #a6e22e;">then</span>(()<span style="color: #66d9ef; font-style: italic;">=></span> {</div><div> target.isLoading <span style="color: #f92672;">=</span> <span style="color: #ae81ff;">false</span>;</div><div> }); </div><div> }</div><br /><br /><div>}</div></div></div><div><br /></div><div>XML</div><div><br /></div><div><div style="background-color: #272822; color: #f8f8f2; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><?<span style="color: #f92672;">xml</span><span style="color: #a6e22e;"> version</span>=<span style="color: #e6db74;">"1.0"</span><span style="color: #a6e22e;"> encoding</span>=<span style="color: #e6db74;">"UTF-8"</span>?></div><div><<span style="color: #f92672;">LightningComponentBundle</span> <span style="color: #a6e22e;">xmlns</span>=<span style="color: #e6db74;">"http://soap.sforce.com/2006/04/metadata"</span>></div><div> <<span style="color: #f92672;">apiVersion</span>>48.0</<span style="color: #f92672;">apiVersion</span>></div><div> <<span style="color: #f92672;">isExposed</span>>true</<span style="color: #f92672;">isExposed</span>></div><div> <<span style="color: #f92672;">targets</span>></div><div> <<span style="color: #f92672;">target</span>>lightning__AppPage</<span style="color: #f92672;">target</span>></div><div> <<span style="color: #f92672;">target</span>>lightning__RecordPage</<span style="color: #f92672;">target</span>></div><div> <<span style="color: #f92672;">target</span>>lightning__HomePage</<span style="color: #f92672;">target</span>></div><div> </<span style="color: #f92672;">targets</span>> </div><div></<span style="color: #f92672;">LightningComponentBundle</span>></div></div></div></div><div><br /></div><div><br /></div><div><br /></div>Master Class http://www.blogger.com/profile/01852672912613116009noreply@blogger.com0tag:blogger.com,1999:blog-2963651217753251164.post-2514829719020333672022-06-19T05:58:00.007-07:002022-06-19T05:58:38.717-07:00<p><span style="color: #cc0000;"><u> <b style="text-align: justify;"><span style="font-family: "Bahnschrift Light SemiCondensed",sans-serif; font-size: 14.0pt; line-height: 107%; mso-bidi-font-family: Arial;">getRelatedListsInfo</span></b></u></span></p><p class="MsoNormal" style="text-align: justify;"><span style="font-family: "Bahnschrift Light SemiCondensed",sans-serif; font-size: 14.0pt; line-height: 107%; mso-bidi-font-family: Arial;">Use this wire adapter to get the metadata for RelatedLists in
an object’s default layout.<o:p></o:p></span></p><p class="MsoNormal" style="text-align: justify;"><span style="font-family: "Bahnschrift Light SemiCondensed",sans-serif; font-size: 14.0pt; line-height: 107%; mso-bidi-font-family: Arial;">Parameters<o:p></o:p></span></p><ul style="margin-top: 0cm;" type="disc">
<li class="MsoNormal" style="mso-list: l0 level1 lfo1; tab-stops: list 36.0pt; text-align: justify;"><span style="font-family: "Bahnschrift Light SemiCondensed",sans-serif; font-size: 14.0pt; line-height: 107%; mso-bidi-font-family: Arial;">parentObjectApiName—(Required) The API name of a parent object that
you want to get related lists for, like an Account.<o:p></o:p></span></li>
<li class="MsoNormal" style="mso-list: l0 level1 lfo1; tab-stops: list 36.0pt; text-align: justify;"><span style="font-family: "Bahnschrift Light SemiCondensed",sans-serif; font-size: 14.0pt; line-height: 107%; mso-bidi-font-family: Arial;">recordTypeId—(Optional) The ID of the parent record type.<o:p></o:p></span></li>
</ul><p class="MsoNormal" style="background: #FAFAF9; line-height: normal; margin-bottom: 0cm;"><span style="color: #080707; font-family: "Bahnschrift Light SemiCondensed",sans-serif; font-size: 14.0pt; mso-bidi-font-family: Arial; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-IN;">Usage<o:p></o:p></span></p><p>
</p><p class="MsoNormal" style="background: #FAFAF9; line-height: normal; margin-bottom: 0cm; margin-left: 36.0pt; margin-right: 0cm; margin-top: 0cm;"><span style="color: #080707; font-family: "Bahnschrift Light SemiCondensed",sans-serif; font-size: 14.0pt; mso-bidi-font-family: Arial; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-IN;">This code example fetches the related
lists info by API name of the parent object, then iterates through the related
lists.<o:p></o:p></span></p><p>HTML</p><div style="background-color: #272822; color: #f8f8f2; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><<span style="color: #f92672;">template</span>></div><div> <<span style="color: #f92672;">lightning-card</span> <span style="color: #a6e22e;">title</span>=<span style="color: #e6db74;">"Related List of Account"</span>></div><div> <<span style="color: #f92672;">template</span> <span style="color: #a6e22e;">if:true</span>=<span style="color: #e6db74;">{relatedLists}</span>></div><div> <<span style="color: #f92672;">div</span> <span style="color: #a6e22e;">class</span>=<span style="color: #e6db74;">"slds-m-around_medium"</span>></div><div> <<span style="color: #f92672;">template</span> <span style="color: #a6e22e;">for:each</span>=<span style="color: #e6db74;">{relatedLists}</span> <span style="color: #a6e22e;">for:item</span>=<span style="color: #e6db74;">"relatedList"</span>></div><div> <<span style="color: #f92672;">p</span> <span style="color: #a6e22e;">key</span>=<span style="color: #e6db74;">{relatedList.label}</span>></div><div> {relatedList.label}</div><div> </<span style="color: #f92672;">p</span>></div><div> </<span style="color: #f92672;">template</span>></div><div> </<span style="color: #f92672;">div</span>></div><div> </<span style="color: #f92672;">template</span>></div><div> </<span style="color: #f92672;">lightning-card</span>></div><div></<span style="color: #f92672;">template</span>></div></div><p><br /></p><p>JS</p><div style="background-color: #272822; color: #f8f8f2; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #f92672;">import</span> { LightningElement,wire} <span style="color: #f92672;">from</span> <span style="color: #e6db74;">'lwc'</span>;</div><div><span style="color: #f92672;">import</span> { getRelatedListsInfo } <span style="color: #f92672;">from</span> <span style="color: #e6db74;">'lightning/uiRelatedListApi'</span>;</div><div><span style="color: #f92672;">export</span> <span style="color: #f92672;">default</span> <span style="color: #66d9ef; font-style: italic;">class</span> <span style="color: #a6e22e; text-decoration-line: underline;">GetRelatedListDetails</span> <span style="color: #f92672;">extends</span> <span style="color: #a6e22e; text-decoration-line: underline;">LightningElement</span> {</div><div> error;</div><div> relatedLists;</div><div> @<span style="color: #a6e22e;">wire</span>(<span style="color: #a6e22e;">getRelatedListsInfo</span>, {</div><div> parentObjectApiName: <span style="color: #e6db74;">'Account'</span>,</div><div> </div><div> })<span style="color: #a6e22e;">listInfo</span>({ <span style="color: #fd971f; font-style: italic;">error</span>, <span style="color: #fd971f; font-style: italic;">data</span> }) {</div><div> <span style="color: #f92672;">if</span> (<span style="color: #fd971f; font-style: italic;">data</span>) {</div><div> <span style="color: #fd971f;">this</span>.relatedLists <span style="color: #f92672;">=</span> <span style="color: #fd971f; font-style: italic;">data</span>.relatedLists;</div><div> <span style="color: #fd971f;">this</span>.error <span style="color: #f92672;">=</span> <span style="color: #ae81ff;">undefined</span>;</div><div> } <span style="color: #f92672;">else</span> <span style="color: #f92672;">if</span> (<span style="color: #fd971f; font-style: italic;">error</span>) {</div><div> <span style="color: #fd971f;">this</span>.error <span style="color: #f92672;">=</span> <span style="color: #fd971f; font-style: italic;">error</span>;</div><div> <span style="color: #fd971f;">this</span>.relatedLists <span style="color: #f92672;">=</span> <span style="color: #ae81ff;">undefined</span>;</div><div> }</div><div> }</div><div>}</div></div><p>XML</p><div style="background-color: #272822; color: #f8f8f2; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><?<span style="color: #f92672;">xml</span><span style="color: #a6e22e;"> version</span>=<span style="color: #e6db74;">"1.0"</span><span style="color: #a6e22e;"> encoding</span>=<span style="color: #e6db74;">"UTF-8"</span>?></div><div><<span style="color: #f92672;">LightningComponentBundle</span> <span style="color: #a6e22e;">xmlns</span>=<span style="color: #e6db74;">"http://soap.sforce.com/2006/04/metadata"</span>></div><div> <<span style="color: #f92672;">apiVersion</span>>54.0</<span style="color: #f92672;">apiVersion</span>></div><div> <<span style="color: #f92672;">isExposed</span>>true</<span style="color: #f92672;">isExposed</span>></div><div> <<span style="color: #f92672;">targets</span>></div><div> <<span style="color: #f92672;">target</span>>lightning__RecordPage</<span style="color: #f92672;">target</span>></div><div> </<span style="color: #f92672;">targets</span>></div><br /><div></<span style="color: #f92672;">LightningComponentBundle</span>></div></div><p>RESULT:</p><p><br /></p><p><br /></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfumDijfRTyjDaqyYjGTNWnkMia7UZO4OJ2oqeS-4-IFaLCa09meqXzCFClGKLmOslVvTw6-knGUkgGKrSb3FO7glVrL3HVnECr59cQE1CEOENLknrEofItIWQay2hLE2-gMqaRyw9qpR9vRB59Q9uu_TJDiORdiu9xPRrCovFOHzWa88EduwbyJT8/s1882/RelatedListOfAccount.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="409" data-original-width="1882" height="186" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfumDijfRTyjDaqyYjGTNWnkMia7UZO4OJ2oqeS-4-IFaLCa09meqXzCFClGKLmOslVvTw6-knGUkgGKrSb3FO7glVrL3HVnECr59cQE1CEOENLknrEofItIWQay2hLE2-gMqaRyw9qpR9vRB59Q9uu_TJDiORdiu9xPRrCovFOHzWa88EduwbyJT8/w462-h186/RelatedListOfAccount.png" width="462" /></a></div><br /><p><br /></p>Master Class http://www.blogger.com/profile/01852672912613116009noreply@blogger.com0tag:blogger.com,1999:blog-2963651217753251164.post-77183604215333836342022-06-19T05:44:00.005-07:002022-06-19T05:46:58.082-07:00<p><b><span style="color: #cc0000;"> <span style="text-align: justify;"><span face=""Arial",sans-serif" style="font-size: 12pt; line-height: 107%;">getRelatedListRecords</span></span></span></b></p>
<p class="MsoNormal" style="text-align: justify;"><b><span face=""Arial",sans-serif" style="font-size: 12pt; line-height: 107%;">Use this wire adapter to
get RelatedList records.<o:p></o:p></span></b></p>
<p class="MsoNormal" style="text-align: justify;"><b><span face=""Arial",sans-serif">Parameters<o:p></o:p></span></b></p>
<ul style="margin-top: 0cm;" type="disc">
<li class="MsoNormal" style="mso-list: l0 level1 lfo1; tab-stops: list 36.0pt; text-align: justify;"><span face=""Arial",sans-serif">parentRecordId—(Required)
The ID of the parent record that you want to get related lists for, like
an Account ID.<o:p></o:p></span></li>
<li class="MsoNormal" style="mso-list: l0 level1 lfo1; tab-stops: list 36.0pt; text-align: justify;"><span face=""Arial",sans-serif">relatedListId—(Required)
The API name of a related list object, like Contacts, Opportunities, or
Cases.<o:p></o:p></span></li>
<li class="MsoNormal" style="mso-list: l0 level1 lfo1; tab-stops: list 36.0pt; text-align: justify;"><span face=""Arial",sans-serif">fields—(Optional)
The API names of the related list’s column fields.<o:p></o:p></span></li>
<li class="MsoNormal" style="mso-list: l0 level1 lfo1; tab-stops: list 36.0pt; text-align: justify;"><span face=""Arial",sans-serif">optionalFields—(Optional)
The API names of additional fields in the related list.<o:p></o:p></span></li>
<li class="MsoNormal" style="mso-list: l0 level1 lfo1; tab-stops: list 36.0pt; text-align: justify;"><span face=""Arial",sans-serif">pageSize—(Optional)
The number of list records to return per page.<o:p></o:p></span></li>
<li class="MsoNormal" style="mso-list: l0 level1 lfo1; tab-stops: list 36.0pt; text-align: justify;"><span face=""Arial",sans-serif">sortBy—(Optional)
An array of field API names to sort the related list by. Accepts only one
value per request.<o:p></o:p></span></li>
<li class="MsoNormal" style="mso-list: l0 level1 lfo1; tab-stops: list 36.0pt; text-align: justify;"><span face=""Arial",sans-serif">where—(Optional)
The filter to apply to related list records, in GraphQL syntax.<o:p></o:p></span></li>
</ul><div style="text-align: justify;"><span style="background-color: white; font-family: "Bahnschrift Light", sans-serif; font-size: 16px; text-align: start;">This code example fetches the record for the Opportunity-related list in the Account object, then iterates the opportunity to display the Id and Name.</span></div><div style="text-align: justify;"><span style="background-color: white; font-family: "Bahnschrift Light", sans-serif; font-size: 16px; text-align: start;"><br /></span></div><div style="text-align: justify;"><span style="background-color: white; font-family: "Bahnschrift Light", sans-serif; font-size: 16px; text-align: start;"><br /></span></div><div style="text-align: justify;"><span face="Arial, sans-serif">HTML</span></div><div style="text-align: justify;"><span face="Arial, sans-serif"><br /></span></div><div style="text-align: justify;"><div style="background-color: #272822; color: #f8f8f2; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><<span style="color: #f92672;">template</span>></div><div> <<span style="color: #f92672;">lightning-card</span> <span style="color: #a6e22e;">title</span>=<span style="color: #e6db74;">"Opportunity Related List Records"</span>></div><div> <<span style="color: #f92672;">template</span> <span style="color: #a6e22e;">if:true</span>=<span style="color: #e6db74;">{records}</span>></div><div> <<span style="color: #f92672;">div</span> <span style="color: #a6e22e;">class</span>=<span style="color: #e6db74;">"slds-m-around_medium"</span>></div><div> <<span style="color: #f92672;">template</span> <span style="color: #a6e22e;">for:each</span>=<span style="color: #e6db74;">{records}</span> <span style="color: #a6e22e;">for:item</span>=<span style="color: #e6db74;">"rec"</span>></div><div> <<span style="color: #f92672;">p</span> <span style="color: #a6e22e;">key</span>=<span style="color: #e6db74;">{rec.fields.Id.value}</span>></div><div> {rec.fields.Id.value} - {rec.fields.Name.value}</div><div> </<span style="color: #f92672;">p</span>></div><div> </<span style="color: #f92672;">template</span>></div><div> </<span style="color: #f92672;">div</span>></div><div> </<span style="color: #f92672;">template</span>></div><div> </<span style="color: #f92672;">lightning-card</span>></div><br /><div></<span style="color: #f92672;">template</span>></div></div></div><div style="text-align: justify;"><span face="Arial, sans-serif"><br /></span></div><div style="text-align: justify;"><span face="Arial, sans-serif">JS</span></div><div style="text-align: justify;"><div style="background-color: #272822; color: #f8f8f2; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #f92672;">import</span> { LightningElement,wire} <span style="color: #f92672;">from</span> <span style="color: #e6db74;">'lwc'</span>;</div><div><span style="color: #f92672;">import</span> { getRelatedListRecords } <span style="color: #f92672;">from</span> <span style="color: #e6db74;">'lightning/uiRelatedListApi'</span>;</div><div><span style="color: #f92672;">export</span> <span style="color: #f92672;">default</span> <span style="color: #66d9ef; font-style: italic;">class</span> <span style="color: #a6e22e; text-decoration-line: underline;">GetRelatedListRecords</span> <span style="color: #f92672;">extends</span> <span style="color: #a6e22e; text-decoration-line: underline;">LightningElement</span> {</div><div> error;</div><div> records;</div><div> @<span style="color: #a6e22e;">wire</span>(<span style="color: #a6e22e;">getRelatedListRecords</span>, {</div><div> parentRecordId: <span style="color: #e6db74;">'0010I00002Zq6IMQAZ'</span>,</div><div> relatedListId: <span style="color: #e6db74;">'Opportunities'</span>,</div><div> fields: [<span style="color: #e6db74;">'Opportunity.Id'</span>,<span style="color: #e6db74;">'Opportunity.Name'</span>]</div><div> })<span style="color: #a6e22e;">listInfo</span>({ <span style="color: #fd971f; font-style: italic;">error</span>, <span style="color: #fd971f; font-style: italic;">data</span> }) {</div><div> <span style="color: #f92672;">if</span> (<span style="color: #fd971f; font-style: italic;">data</span>) {</div><div> <span style="color: #fd971f;">this</span>.records <span style="color: #f92672;">=</span> <span style="color: #fd971f; font-style: italic;">data</span>.records;</div><div> <span style="color: #fd971f;">this</span>.error <span style="color: #f92672;">=</span> <span style="color: #ae81ff;">undefined</span>;</div><div> } <span style="color: #f92672;">else</span> <span style="color: #f92672;">if</span> (<span style="color: #fd971f; font-style: italic;">error</span>) {</div><div> <span style="color: #fd971f;">this</span>.error <span style="color: #f92672;">=</span> <span style="color: #fd971f; font-style: italic;">error</span>;</div><div> <span style="color: #fd971f;">this</span>.records <span style="color: #f92672;">=</span> <span style="color: #ae81ff;">undefined</span>;</div><div> }</div><div> }</div><div>}</div></div></div><div style="text-align: justify;"><span face="Arial, sans-serif"><br /></span></div><div style="text-align: justify;"><span face="Arial, sans-serif">XML</span></div><div style="text-align: justify;"><div style="background-color: #272822; color: #f8f8f2; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><?<span style="color: #f92672;">xml</span><span style="color: #a6e22e;"> version</span>=<span style="color: #e6db74;">"1.0"</span><span style="color: #a6e22e;"> encoding</span>=<span style="color: #e6db74;">"UTF-8"</span>?></div><div><<span style="color: #f92672;">LightningComponentBundle</span> <span style="color: #a6e22e;">xmlns</span>=<span style="color: #e6db74;">"http://soap.sforce.com/2006/04/metadata"</span>></div><div> <<span style="color: #f92672;">apiVersion</span>>54.0</<span style="color: #f92672;">apiVersion</span>></div><div> <<span style="color: #f92672;">isExposed</span>>true</<span style="color: #f92672;">isExposed</span>></div><div> <<span style="color: #f92672;">targets</span>></div><div> <<span style="color: #f92672;">target</span>>lightning__RecordPage</<span style="color: #f92672;">target</span>></div><div> </<span style="color: #f92672;">targets</span>></div><br /><div></<span style="color: #f92672;">LightningComponentBundle</span>></div></div></div><div style="text-align: justify;"><span face="Arial, sans-serif"><br /></span></div><div style="text-align: justify;"><span face="Arial, sans-serif"><br /></span></div><div style="text-align: justify;"><span face="Arial, sans-serif">RESULT</span></div><div style="text-align: justify;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifEpewe6SguWNcG0z32rUQRCL-ee0dX5Z148oDDLcGy18DZA8p7eBxQat1tp7j1m4CMiwKP-tLHOI1epiCzTo0zSQiWWRjO3_0IC13H1OYPzDC6fGE5QXWY0SufEJrPrMA0hkXg_30kpyDOetO8f5h6popmFZUzHNLO0oORARCnm49_IFZVQL8xYgc/s1885/ListOfRecords.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="561" data-original-width="1885" height="153" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifEpewe6SguWNcG0z32rUQRCL-ee0dX5Z148oDDLcGy18DZA8p7eBxQat1tp7j1m4CMiwKP-tLHOI1epiCzTo0zSQiWWRjO3_0IC13H1OYPzDC6fGE5QXWY0SufEJrPrMA0hkXg_30kpyDOetO8f5h6popmFZUzHNLO0oORARCnm49_IFZVQL8xYgc/w578-h153/ListOfRecords.png" width="578" /></a></div><br /><span face="Arial, sans-serif"><br /></span></div><div style="text-align: justify;"><span face="Arial, sans-serif"><br /></span></div><div style="text-align: justify;"><span face="Arial, sans-serif"><br /></span></div>Master Class http://www.blogger.com/profile/01852672912613116009noreply@blogger.com0tag:blogger.com,1999:blog-2963651217753251164.post-45250698043082537642022-06-19T05:23:00.000-07:002022-06-19T05:23:16.145-07:00<p><b><span style="color: #cc0000;"> <span style="font-family: "Bahnschrift Light", sans-serif; font-size: 12pt; line-height: 107%;">getRelatedListInfo</span></span></b></p>
<p class="MsoNormal"><b><span style="font-family: "Bahnschrift Light",sans-serif; font-size: 12.0pt; line-height: 107%; mso-bidi-font-family: Calibri; mso-bidi-theme-font: minor-latin;">Use this wire adapter to get the metadata
for RelatedList.<o:p></o:p></span></b></p>
<ul style="margin-top: 0cm;" type="disc">
<li class="MsoNormal"><span style="font-family: "Bahnschrift Light",sans-serif; font-size: 12.0pt; line-height: 107%;">parentObjectApiName—(Required)
The API name of a parent object that you want to get related lists for,
like an Account.<o:p></o:p></span></li>
<li class="MsoNormal"><span style="font-family: "Bahnschrift Light",sans-serif; font-size: 12.0pt; line-height: 107%;">relatedListId—(Required)
The API name of a related list object such as Contacts, Opportunities, or
Cases.<o:p></o:p></span></li>
<li class="MsoNormal"><span style="font-family: "Bahnschrift Light",sans-serif; font-size: 12.0pt; line-height: 107%;">recordTypeId—(Optional)
The ID of the parent record type. If not provided, the default record type
is used.<o:p></o:p></span></li>
</ul>
<p class="MsoNormal"><span style="font-family: "Bahnschrift Light",sans-serif; font-size: 12.0pt; line-height: 107%;">This code example fetches the metadata for the Opportunity-related list in the Account object, then
iterates through the list of display columns.<o:p></o:p></span></p><p class="MsoNormal"><span style="font-family: "Bahnschrift Light",sans-serif; font-size: 12.0pt; line-height: 107%;"><br /></span></p><p class="MsoNormal"><span style="font-family: "Bahnschrift Light",sans-serif; font-size: 12.0pt; line-height: 107%;"><b>HTML</b></span></p><p class="MsoNormal"><span style="font-family: "Bahnschrift Light",sans-serif; font-size: 12.0pt; line-height: 107%;"></span></p><div style="background-color: #272822; color: #f8f8f2; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><<span style="color: #f92672;">template</span>></div><div> <<span style="color: #f92672;">lightning-card</span> <span style="color: #a6e22e;">title</span>=<span style="color: #e6db74;">"Get Opportunity Related List Information"</span>></div><div> <<span style="color: #f92672;">template</span> <span style="color: #a6e22e;">if:true</span>=<span style="color: #e6db74;">{displayColumns}</span>></div><div> <<span style="color: #f92672;">div</span> <span style="color: #a6e22e;">class</span>=<span style="color: #e6db74;">"slds-m-around_medium"</span>></div><div> <<span style="color: #f92672;">template</span> <span style="color: #a6e22e;">for:each</span>=<span style="color: #e6db74;">{displayColumns}</span> <span style="color: #a6e22e;">for:item</span>=<span style="color: #e6db74;">"info"</span>></div><div> <<span style="color: #f92672;">p</span> <span style="color: #a6e22e;">key</span>=<span style="color: #e6db74;">{info.fieldApiName}</span>></div><div> {info.label}</div><div> </<span style="color: #f92672;">p</span>></div><div> </<span style="color: #f92672;">template</span>></div><div> </<span style="color: #f92672;">div</span>></div><div> </<span style="color: #f92672;">template</span>></div><div> </<span style="color: #f92672;">lightning-card</span>></div><div></<span style="color: #f92672;">template</span>></div></div><p class="MsoNormal"><b style="font-family: "Bahnschrift Light", sans-serif;">JS</b></p><div style="background-color: #272822; color: #f8f8f2; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #f92672;">import</span> { LightningElement,wire } <span style="color: #f92672;">from</span> <span style="color: #e6db74;">'lwc'</span>;</div><div><span style="color: #f92672;">import</span> { getRelatedListInfo } <span style="color: #f92672;">from</span> <span style="color: #e6db74;">'lightning/uiRelatedListApi'</span>;</div><div><span style="color: #f92672;">export</span> <span style="color: #f92672;">default</span> <span style="color: #66d9ef; font-style: italic;">class</span> <span style="color: #a6e22e; text-decoration-line: underline;">GetRelatedListInfo</span> <span style="color: #f92672;">extends</span> <span style="color: #a6e22e; text-decoration-line: underline;">LightningElement</span> {</div><div> error;</div><div> displayColumns;</div><div> @<span style="color: #a6e22e;">wire</span>(<span style="color: #a6e22e;">getRelatedListInfo</span>, {</div><div> parentObjectApiName: <span style="color: #e6db74;">'Account'</span>,</div><div> relatedListId: <span style="color: #e6db74;">'Opportunities'</span>,</div><div> })<span style="color: #a6e22e;">listInfo</span>({ <span style="color: #fd971f; font-style: italic;">error</span>, <span style="color: #fd971f; font-style: italic;">data</span> }) {</div><div> <span style="color: #f92672;">if</span> (<span style="color: #fd971f; font-style: italic;">data</span>) {</div><div> console.<span style="color: #a6e22e;">log</span>(<span style="color: #e6db74;">'data'</span>,JSON.<span style="color: #a6e22e;">stringify</span>(<span style="color: #fd971f; font-style: italic;">data</span>))</div><div> <span style="color: #fd971f;">this</span>.displayColumns <span style="color: #f92672;">=</span> <span style="color: #fd971f; font-style: italic;">data</span>.displayColumns;</div><div> <span style="color: #fd971f;">this</span>.error <span style="color: #f92672;">=</span> <span style="color: #ae81ff;">undefined</span>;</div><div> } <span style="color: #f92672;">else</span> <span style="color: #f92672;">if</span> (<span style="color: #fd971f; font-style: italic;">error</span>) {</div><div> <span style="color: #fd971f;">this</span>.error <span style="color: #f92672;">=</span> <span style="color: #fd971f; font-style: italic;">error</span>;</div><div> <span style="color: #fd971f;">this</span>.displayColumns <span style="color: #f92672;">=</span> <span style="color: #ae81ff;">undefined</span>;</div><div> }</div><div> }</div><div>}</div></div><p class="MsoNormal"><span style="font-family: "Bahnschrift Light", sans-serif;"><b>XML</b></span></p><div style="background-color: #272822; color: #f8f8f2; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><?<span style="color: #f92672;">xml</span><span style="color: #a6e22e;"> version</span>=<span style="color: #e6db74;">"1.0"</span><span style="color: #a6e22e;"> encoding</span>=<span style="color: #e6db74;">"UTF-8"</span>?></div><div><<span style="color: #f92672;">LightningComponentBundle</span> <span style="color: #a6e22e;">xmlns</span>=<span style="color: #e6db74;">"http://soap.sforce.com/2006/04/metadata"</span>></div><div> <<span style="color: #f92672;">apiVersion</span>>54.0</<span style="color: #f92672;">apiVersion</span>></div><div> <<span style="color: #f92672;">isExposed</span>>true</<span style="color: #f92672;">isExposed</span>></div><div> <<span style="color: #f92672;">targets</span>></div><div> <<span style="color: #f92672;">target</span>>lightning__RecordPage</<span style="color: #f92672;">target</span>></div><div> </<span style="color: #f92672;">targets</span>></div><div></<span style="color: #f92672;">LightningComponentBundle</span>></div></div><p class="MsoNormal"><span style="font-family: "Bahnschrift Light", sans-serif;"><b>RESULT</b></span></p><p class="MsoNormal"></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik2et1WGCizIrNJJiYZqQIghY-ispX6FQIYjYZ3c8BKeSSq5sb0GE49v8Xy45PwfzNwyxYDNs9QLZFZBTY__kvbVKEV4ug8SNftkMTF_P4S1Pdr9p888kHtv86Mx5MReIWeM-VFE1Yr3UmmaHavSRzfANlgKevfOOtsOEsbFbXFluqUObXHu-13Bpo/s1903/RLINFO.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="712" data-original-width="1903" height="208" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik2et1WGCizIrNJJiYZqQIghY-ispX6FQIYjYZ3c8BKeSSq5sb0GE49v8Xy45PwfzNwyxYDNs9QLZFZBTY__kvbVKEV4ug8SNftkMTF_P4S1Pdr9p888kHtv86Mx5MReIWeM-VFE1Yr3UmmaHavSRzfANlgKevfOOtsOEsbFbXFluqUObXHu-13Bpo/w606-h208/RLINFO.png" width="606" /></a></div><br /><span style="font-family: "Bahnschrift Light",sans-serif; font-size: 12.0pt; line-height: 107%;"><br /></span><p></p><p class="MsoNormal"><span style="font-family: "Bahnschrift Light",sans-serif; font-size: 12.0pt; line-height: 107%;"><br /></span></p><p class="MsoNormal"><span style="font-family: "Bahnschrift Light",sans-serif; font-size: 12.0pt; line-height: 107%;"><br /></span></p><p class="MsoNormal"><span style="font-family: "Bahnschrift Light",sans-serif; font-size: 12.0pt; line-height: 107%;"><br /></span></p><p class="MsoNormal"><span style="font-family: "Bahnschrift Light",sans-serif; font-size: 12.0pt; line-height: 107%;"><br /></span></p><p class="MsoNormal"><span style="font-family: "Bahnschrift Light",sans-serif; font-size: 12.0pt; line-height: 107%;"><br /></span></p>Master Class http://www.blogger.com/profile/01852672912613116009noreply@blogger.com0tag:blogger.com,1999:blog-2963651217753251164.post-23957741373792876452022-06-19T05:00:00.004-07:002022-06-19T05:00:52.887-07:00<p class="MsoNormal"><span style="font-size: 12pt; line-height: 107%;"><span style="color: red;"><b><u>Get Related List
Record Count</u></b></span><b><o:p></o:p></b></span></p>
<p class="MsoNormal"><b><span style="font-family: "Bahnschrift Light",sans-serif; font-size: 12.0pt; line-height: 107%; mso-bidi-font-family: Calibri; mso-bidi-theme-font: minor-latin;">Use this wire adapter to get the RelatedList record
count.</span></b></p>
<p class="MsoNormal"><b><span style="font-family: "Bahnschrift Light",sans-serif; font-size: 12.0pt; line-height: 107%; mso-bidi-font-family: Calibri; mso-bidi-theme-font: minor-latin;"> </span></b><span style="background-color: #fafaf9; color: #080707; font-family: "Bahnschrift Light", sans-serif; font-size: 12pt;">This code example fetches the record count for a related
list.</span></p><p class="MsoNormal"><o:p></o:p></p>
<ul style="margin-top: 0cm;" type="disc">
<li class="MsoNormal"><span style="font-family: "Bahnschrift Light",sans-serif; font-size: 12.0pt; line-height: 107%;">parentRecordId—(Required)
The ID of the parent record that you want to get related lists for, like
an Account ID.<o:p></o:p></span></li>
<li class="MsoNormal"><span style="font-family: "Bahnschrift Light",sans-serif; font-size: 12.0pt; line-height: 107%;">relatedListId—(Required)
The API name of a related list object such as Contacts, Opportunities, or
Cases.<o:p></o:p></span></li>
</ul><p><b>HTML</b></p><div style="background-color: #272822; color: #f8f8f2; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><<span style="color: #f92672;">template</span>></div><div> <<span style="color: #f92672;">lightning-card</span> <span style="color: #a6e22e;">title</span>=<span style="color: #e6db74;">"getRelatedListCount"</span>></div><div> <<span style="color: #f92672;">div</span> <span style="color: #a6e22e;">class</span>=<span style="color: #e6db74;">"slds-var-p-around_medium"</span>></div><div> <<span style="color: #f92672;">template</span> <span style="color: #a6e22e;">if:true</span>=<span style="color: #e6db74;">{responseData}</span>></div><div> <<span style="color: #f92672;">div</span>>No of opportunities in account related list - {responseData.count}</<span style="color: #f92672;">div</span>></div><div> </<span style="color: #f92672;">template</span>></div><div> </<span style="color: #f92672;">div</span>></div><div> </<span style="color: #f92672;">lightning-card</span>></div><div></<span style="color: #f92672;">template</span>></div></div><p><b>JS</b></p><div style="background-color: #272822; color: #f8f8f2; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #f92672;">import</span> { LightningElement,wire} <span style="color: #f92672;">from</span> <span style="color: #e6db74;">'lwc'</span>;</div><div><span style="color: #f92672;">import</span> {getRelatedListCount} <span style="color: #f92672;">from</span> <span style="color: #e6db74;">'lightning/uiRelatedListApi'</span>;</div><div><span style="color: #f92672;">export</span> <span style="color: #f92672;">default</span> <span style="color: #66d9ef; font-style: italic;">class</span> <span style="color: #a6e22e; text-decoration-line: underline;">GetReleatedListCount</span> <span style="color: #f92672;">extends</span> <span style="color: #a6e22e; text-decoration-line: underline;">LightningElement</span> {</div><div> responseData;</div><div> error;</div><div> @<span style="color: #a6e22e;">wire</span>(<span style="color: #a6e22e;">getRelatedListCount</span>, {</div><div> parentRecordId:<span style="color: #e6db74;">'0010I00002Zq6IMQAZ'</span>, // AccountId </div><div> relatedListId:<span style="color: #e6db74;">'Opportunities'</span> //RelatedList object Name </div><div> })<span style="color: #a6e22e;">listInfo</span>({<span style="color: #fd971f; font-style: italic;">error</span>, <span style="color: #fd971f; font-style: italic;">data</span>}){</div><div> <span style="color: #a6e22e;">if</span>(<span style="color: #fd971f; font-style: italic;">data</span>){</div><div> <span style="color: #fd971f;">this</span>.responseData <span style="color: #f92672;">=</span> <span style="color: #fd971f; font-style: italic;">data</span>;</div><div> <span style="color: #fd971f;">this</span>.error <span style="color: #f92672;">=</span> <span style="color: #ae81ff;">undefined</span>;</div><div> }</div><div> <span style="color: #a6e22e;">if</span>(<span style="color: #fd971f; font-style: italic;">error</span>){</div><div> <span style="color: #fd971f;">this</span>.error <span style="color: #f92672;">=</span> <span style="color: #fd971f; font-style: italic;">error</span>;</div><div> <span style="color: #fd971f;">this</span>.responseData <span style="color: #f92672;">=</span> <span style="color: #ae81ff;">undefined</span>;</div><div> }</div><div> }</div><div> }</div><div> </div></div><p><b>XML</b></p><div style="background-color: #272822; color: #f8f8f2; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><?<span style="color: #f92672;">xml</span><span style="color: #a6e22e;"> version</span>=<span style="color: #e6db74;">"1.0"</span><span style="color: #a6e22e;"> encoding</span>=<span style="color: #e6db74;">"UTF-8"</span>?></div><div><<span style="color: #f92672;">LightningComponentBundle</span> <span style="color: #a6e22e;">xmlns</span>=<span style="color: #e6db74;">"http://soap.sforce.com/2006/04/metadata"</span>></div><div> <<span style="color: #f92672;">apiVersion</span>>54.0</<span style="color: #f92672;">apiVersion</span>></div><div> <<span style="color: #f92672;">isExposed</span>>true</<span style="color: #f92672;">isExposed</span>></div><div> <<span style="color: #f92672;">targets</span>></div><div> <<span style="color: #f92672;">target</span>>lightning__RecordPage</<span style="color: #f92672;">target</span>></div><div> </<span style="color: #f92672;">targets</span>></div><br /><div></<span style="color: #f92672;">LightningComponentBundle</span>></div></div><p><b>RESULT</b></p><p><br /></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjvFg1_9W2fbnASy83GUvrHbDMu6fwx4JMOtd8zFYUo4wYSsZHNME-zFCjLBq1nN_oe7o74vmls3CeuYOE_dtvKlkdyYaFdA0xyA3HaI0EfmW4GU_mfBhrKz2G5C7zf9KRaT_3keDzyP2pJG-qQG5LRRiPAAza59ZJA699By2NyTmfwV-Eva9d2W0C/s1857/RLCOUNT.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="550" data-original-width="1857" height="197" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjvFg1_9W2fbnASy83GUvrHbDMu6fwx4JMOtd8zFYUo4wYSsZHNME-zFCjLBq1nN_oe7o74vmls3CeuYOE_dtvKlkdyYaFdA0xyA3HaI0EfmW4GU_mfBhrKz2G5C7zf9KRaT_3keDzyP2pJG-qQG5LRRiPAAza59ZJA699By2NyTmfwV-Eva9d2W0C/w609-h197/RLCOUNT.png" width="609" /></a></div><br /><p><br /></p>Master Class http://www.blogger.com/profile/01852672912613116009noreply@blogger.com0tag:blogger.com,1999:blog-2963651217753251164.post-71312198311268626582022-03-06T00:33:00.012-08:002022-03-06T00:41:00.248-08:00<p> <span style="color: #e06666;"><b> ONLOAD IN AURA VS LIGHTNING WEB COMPONENT</b></span></p><p class="MsoNormal"><o:p></o:p></p>
<p class="MsoNormal">If we embedded LWC component inside the aura component which onload method will call first (doinit/connectCallback)?. For understanding this we are going to create two Lightning components.</p><p class="MsoNormal"><o:p></o:p></p>
<p class="MsoNormal"></p><ol style="text-align: left;"><li><b>customAuraComponent </b>– Aura Component </li><li><b>customLwc </b>– LWC Component.</li></ol><div><br /></div><div>Step 1: Create customAuraComponent (Developer console -> New -> LightningComponent)</div><div><br /></div><div><b><span style="color: #e06666;">customAuraComponent </span></b></div><div><br /></div><div><div style="color: #d4d4d4; font-family: Consolas, "Courier New", monospace; font-size: 14px; white-space: pre;"><span style="color: grey;"><</span><span style="color: #569cd6;">aura:component</span> <span style="color: #9cdcfe;">implements</span>=<span style="color: #ce9178;">"force:appHostable,flexipage:availableForAllPageTypes,</span></div><div style="color: #d4d4d4; font-family: Consolas, "Courier New", monospace; font-size: 14px; white-space: pre;"><span style="color: #ce9178;">flexipage:availableForRecordHome,force:hasRecordId,</span></div><div style="color: #d4d4d4; font-family: Consolas, "Courier New", monospace; font-size: 14px; white-space: pre;"><span style="color: #ce9178;">forceCommunity:availableForAllPageTypes,force:lightningQuickAction"</span> <span style="color: #9cdcfe;">access</span>=<span style="color: #ce9178;">"global"</span> <span style="color: grey;">></span></div><div style="color: #d4d4d4; font-family: Consolas, "Courier New", monospace; font-size: 14px; white-space: pre;"> <span style="color: grey;"><</span><span style="color: #569cd6;">aura:handler</span> <span style="color: #9cdcfe;">name</span>=<span style="color: #ce9178;">"init"</span> <span style="color: #9cdcfe;">value</span>=<span style="color: #ce9178;">"{!this}"</span> <span style="color: #9cdcfe;">action</span>=<span style="color: #ce9178;">"{!c.doinit}"</span><span style="color: grey;">></</span><span style="color: #569cd6;">aura:handler</span><span style="color: grey;">></span></div><div style="color: #d4d4d4; font-family: Consolas, "Courier New", monospace; font-size: 14px; white-space: pre;"> <span style="color: grey;"><</span><span style="color: #569cd6;">lightning:card</span> <span style="color: #9cdcfe;">title</span>=<span style="color: #ce9178;">"Cutsom Aura Component"</span><span style="color: grey;">></</span><span style="color: #569cd6;">lightning:card</span><span style="color: grey;">></span></div><div style="color: #d4d4d4; font-family: Consolas, "Courier New", monospace; font-size: 14px; white-space: pre;"> <span style="color: #6a9955;"><!-- LWC Component --></span></div><div style="color: #d4d4d4; font-family: Consolas, "Courier New", monospace; font-size: 14px; white-space: pre;"> <span style="color: grey;"><</span><span style="color: #569cd6;">c:customLwc</span><span style="color: grey;">/></span></div><div style="color: #d4d4d4; font-family: Consolas, "Courier New", monospace; font-size: 14px; white-space: pre;"><span style="color: grey;"></</span><span style="color: #569cd6;">aura:component</span><span style="color: grey;">></span></div></div><div style="color: #d4d4d4; font-family: Consolas, "Courier New", monospace; font-size: 14px; white-space: pre;"><span style="color: grey;"><br /></span></div><div><br /></div><div><b><span style="color: #e06666;">Javascript</span></b></div><div><br /></div><div><span style="color: grey; font-family: Consolas, "Courier New", monospace; font-size: 14px; white-space: pre;"> </span><span style="color: #e69138;"><span style="font-family: Consolas, "Courier New", monospace; font-size: 14px; white-space: pre;"> doinit:</span><span style="font-family: Consolas, Courier New, monospace;"><span style="font-size: 14px; white-space: pre;">function(component, event, helper) {
</span> <span style="font-size: 14px; white-space: pre;">console.log('onload:aura component')
}</span></span></span></div><div><br /></div><div><br /></div><div><b><span style="color: #e06666;">Step 2: Create LWC component </span></b></div><div><br /></div><div><b>customLwc</b></div><div><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: grey;"><</span><span style="color: #569cd6;">template</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">p</span><span style="color: grey;">></span> LWC Component<span style="color: grey;"></</span><span style="color: #569cd6;">p</span><span style="color: grey;">></span></div><div><span style="color: grey;"></</span><span style="color: #569cd6;">template</span><span style="color: grey;">></span></div><br /></div></div><div><b><span style="color: #e06666;">Javascript</span></b></div><div><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #c586c0;">import</span> { <span style="color: #9cdcfe;">LightningElement</span> } <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'lwc'</span>;</div><br /><div><span style="color: #c586c0;">export</span> <span style="color: #c586c0;">default</span> <span style="color: #569cd6;">class</span> <span style="color: #4ec9b0;">CustomLwc</span> <span style="color: #569cd6;">extends</span> <span style="color: #4ec9b0;">LightningElement</span> {</div><div> <span style="color: #dcdcaa;">connectedCallback</span>(){</div><div> <span style="color: #9cdcfe;">console</span>.<span style="color: #dcdcaa;">log</span>(<span style="color: #ce9178;">"onload:LWC Component"</span>);</div><div> }</div><div>}</div><br /></div></div><div><br /></div><div><span style="color: #e06666;">XML:</span></div><div><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: grey;"><?</span><span style="color: #569cd6;">xml</span><span style="color: #9cdcfe;"> version</span>=<span style="color: #ce9178;">"1.0"</span><span style="color: #9cdcfe;"> encoding</span>=<span style="color: #ce9178;">"UTF-8"</span><span style="color: grey;">?></span></div><div><span style="color: grey;"><</span><span style="color: #569cd6;">LightningComponentBundle</span> <span style="color: #9cdcfe;">xmlns</span>=<span style="color: #ce9178;">"http://soap.sforce.com/2006/04/metadata"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">apiVersion</span><span style="color: grey;">></span>52.0<span style="color: grey;"></</span><span style="color: #569cd6;">apiVersion</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">isExposed</span><span style="color: grey;">></span>true<span style="color: grey;"></</span><span style="color: #569cd6;">isExposed</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">targets</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">target</span><span style="color: grey;">></span>lightning__HomePage<span style="color: grey;"></</span><span style="color: #569cd6;">target</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">targets</span><span style="color: grey;">></span></div><div><span style="color: grey;"></</span><span style="color: #569cd6;">LightningComponentBundle</span><span style="color: grey;">></span></div></div></div><div><br /></div><div><br /></div><div><b>Result :</b></div><div><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEja3a9uFtzkMY5t35DQGp_SgoNN26q-3t7IaEBaAxkJYkyccI2N2_KhcrW64y9_1z4qXNanO7Dg0FbFpcaCChZJeZodinKUeH7yEejJfU_thAxav4X-BZ7IJ9rOcLwMvrtQeHC4UeZG2p03YnwpEdb0gYpRhGIM0JnWGgX_GFtcfJUUlvHIbtuyT083=s613" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="178" data-original-width="613" height="189" src="https://blogger.googleusercontent.com/img/a/AVvXsEja3a9uFtzkMY5t35DQGp_SgoNN26q-3t7IaEBaAxkJYkyccI2N2_KhcrW64y9_1z4qXNanO7Dg0FbFpcaCChZJeZodinKUeH7yEejJfU_thAxav4X-BZ7IJ9rOcLwMvrtQeHC4UeZG2p03YnwpEdb0gYpRhGIM0JnWGgX_GFtcfJUUlvHIbtuyT083=w603-h189" width="603" /></a></div><div class="separator" style="clear: both; text-align: center;"><h3><b><span style="color: #e06666;"><i><span style="box-sizing: inherit; text-align: left;"><span face=""Open Sans",sans-serif"><span style="background-color: white; font-size: 17.3333px;">The </span>init handler</span></span><span style="text-align: left;"> in Aura gets fired first then </span><span style="box-sizing: inherit; text-align: left;"><span face=""Open Sans",sans-serif">connectedCallback </span></span><span style="text-align: left;">in Lightning Web Component</span></i></span></b></h3></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #ea9999; text-align: left;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div><br /></div><div><br /></div><p></p><p class="MsoNormal"><o:p></o:p></p>Master Class http://www.blogger.com/profile/01852672912613116009noreply@blogger.com0tag:blogger.com,1999:blog-2963651217753251164.post-56163041147956688112022-03-05T19:57:00.005-08:002022-03-05T20:02:59.952-08:00<p> <span style="font-family: Symbol;"> <span style="color: #e06666;"><b> </b></span></span><span face=""Open Sans", sans-serif" style="font-size: 10pt; text-align: justify; text-indent: -18pt;"><span style="color: #e06666;"><b><u>DYNAMIC
CSS IN LIGHTNING WEB COMPONENT</u></b></span></span></p><p><span face=""Open Sans", sans-serif" style="background-color: white; font-size: 10pt; text-align: justify;">This post explains how to create CSS in
lightning web components and also how to use the dynamic CSS in web components
using the getter property</span></p><p style="background: white; margin-bottom: 18pt; text-align: justify;"><span face=""Open Sans", sans-serif" style="font-size: 10pt; text-align: left; text-indent: -18pt;">Let’s see an example. I have created a
Lightning web component named </span><b style="font-family: "Open Sans", sans-serif; font-size: 10pt; text-align: left; text-indent: -18pt;">dynamic style</b><span face=""Open Sans", sans-serif" style="font-size: 10pt; text-align: left; text-indent: -18pt;">. It has a div and a checkbox.
Our aim is to change the CSS class of div whenever the checkbox is checked.</span></p><p style="background: white; margin-bottom: 18pt; text-align: justify;"><span face=""Open Sans", sans-serif" style="font-size: 10pt; text-align: left; text-indent: -18pt;"><span style="color: #e06666;"><b>dynamicStyle.html</b></span></span></p><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: grey;"><</span><span style="color: #569cd6;">template</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">lightning-card</span> <span style="color: #9cdcfe;">title</span>=<span style="color: #ce9178;">"Dynamic CSS using Getter"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">{dynamicColorChange}</span><span style="color: grey;">></span></div><div> Dynamic Style</div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">lightning-input</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"checkbox"</span> <span style="color: #9cdcfe;">label</span>=<span style="color: #ce9178;">"ChangeStyle"</span> <span style="color: #9cdcfe;">value</span>=<span style="color: #ce9178;">{changeColor}</span> <span style="color: #9cdcfe;">onchange</span>=<span style="color: #ce9178;">{handleChange}</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">lightning-input</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">lightning-card</span><span style="color: grey;">></span></div><div><span style="color: grey;"></</span><span style="color: #569cd6;">template</span><span style="color: grey;">></span></div></div><p style="background: white; margin-bottom: 18pt; text-align: justify;"><span face=""Open Sans", sans-serif" style="font-size: 10pt; text-align: left; text-indent: -18pt;"><span style="color: #ea9999;"><b>Javascript</b></span></span></p><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #c586c0;">import</span> { <span style="color: #9cdcfe;">LightningElement</span> } <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'lwc'</span>;</div><br /><div><span style="color: #c586c0;">export</span> <span style="color: #c586c0;">default</span> <span style="color: #569cd6;">class</span> <span style="color: #4ec9b0;">DynamicStyle</span> <span style="color: #569cd6;">extends</span> <span style="color: #4ec9b0;">LightningElement</span> {</div><div> <span style="color: #9cdcfe;">changeColor</span>;</div><div> <span style="color: #dcdcaa;">handleChange</span>(<span style="color: #9cdcfe;">event</span>){</div><div> <span style="color: #569cd6;">this</span>.<span style="color: #9cdcfe;">changeColor</span>=<span style="color: #9cdcfe;">event</span>.<span style="color: #9cdcfe;">target</span>.<span style="color: #9cdcfe;">checked</span>; </div><div> }</div><br /><div> <span style="color: #6a9955;">//If change color is true: using getter will return class 1 else class 2</span></div><div> <span style="color: #569cd6;">get</span> <span style="color: #9cdcfe;">dynamicColorChange</span>(){</div><div> <span style="color: #c586c0;">return</span> <span style="color: #569cd6;">this</span>.<span style="color: #9cdcfe;">changeColor</span>?<span style="color: #ce9178;">'class1'</span>:<span style="color: #ce9178;">'class2'</span>;</div><div> }</div><div>}</div></div><p class="MsoListParagraph" style="mso-list: l0 level1 lfo1; text-align: justify; text-indent: -18pt;"><span style="font-family: Symbol; font-size: 10pt; line-height: 107%; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;"><span style="font-family: "Times New Roman"; font-size: 7pt; font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: normal;"></span></span><!--[endif]--><span face=""Open Sans", sans-serif" style="background: white; font-size: 10pt; line-height: 107%;"> <span style="color: #ea9999;"><b> CSS:</b></span> The same name as an LWC component and add .css in the file name for this example: <b>dynamicStyle.css</b></span></p><p class="MsoListParagraph" style="mso-list: l0 level1 lfo1; text-align: justify; text-indent: -18pt;"><span face=""Open Sans", sans-serif" style="background: white; font-size: 10pt; line-height: 107%;"></span></p><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #d7ba7d;">.class1</span>{</div><div> <span style="color: #9cdcfe;">height</span>: <span style="color: #b5cea8;">30px</span>;</div><div> <span style="color: #9cdcfe;">background-color</span>: <span style="color: #ce9178;">aqua</span>;</div><div>}</div><br /><div><span style="color: #d7ba7d;">.class2</span>{</div><div> <span style="color: #9cdcfe;">height</span>:<span style="color: #b5cea8;">30px</span>;</div><div> <span style="color: #9cdcfe;">background-color</span>: <span style="color: #ce9178;">chartreuse</span>;</div><div>}</div></div><p class="MsoListParagraph" style="mso-list: l0 level1 lfo1; text-align: justify; text-indent: -18pt;"><span face=""Open Sans", sans-serif" style="background: white; font-size: 10pt; line-height: 107%;"><b><br /></b></span></p><p class="MsoListParagraph" style="mso-list: l0 level1 lfo1; text-align: justify; text-indent: -18pt;"><span face=""Open Sans", sans-serif" style="background: white; font-size: 10pt; line-height: 107%; text-indent: -18pt;"> The onchange handler is defined in the </span><b style="text-indent: -18pt;"><span face=""Open Sans",sans-serif" style="font-size: 10pt; line-height: 107%;">dynamicStyle</span></b><span face=""Open Sans", sans-serif" style="background: white; font-size: 10pt; line-height: 107%; text-indent: -18pt;">.js file of the
component. It is updating the value of the checkbox to a property defined.
Along with it, the js file also has a </span><span face=""Open Sans", sans-serif" style="font-size: 10pt; line-height: 107%; text-indent: -18pt;"><span style="background: white;">getter </span><span style="background: white;"><span style="text-align: start;">to compute dynamically the CSS class of the div block defined
in HTML.</span></span></span></p><p style="margin-left: 36pt; mso-list: l0 level1 lfo1; text-align: justify; text-indent: -18pt;"><span face=""Open Sans",sans-serif" style="font-size: 10pt;"><o:p></o:p></span></p>Master Class http://www.blogger.com/profile/01852672912613116009noreply@blogger.com0tag:blogger.com,1999:blog-2963651217753251164.post-56477441320745795912022-03-05T09:05:00.008-08:002022-03-05T20:03:47.745-08:00<h2 style="text-align: left;"> <span><span style="color: #e06666;">How to find who created the lightning web component </span></span></h2><div><span face=""Open Sans", sans-serif" style="font-size: 10pt;"><br /></span></div><div><span face=""Open Sans", sans-serif" style="font-size: 10pt;"> We can find aura and LWC in</span><b style="font-family: "Open Sans", sans-serif; font-size: 10pt;"> Setup > Quick find
> Lightning Components. </b><span face=""Open Sans", sans-serif" style="font-size: 10pt; line-height: 107%;">The <b>Type</b> column gives information
on Aura/LWC. I</span><span face=""Open Sans", sans-serif" style="font-size: 10pt;">t provides </span><b style="font-family: "Open Sans", sans-serif; font-size: 10pt;">CreatedBy, CreatedDate, and the
LastModifiedDate</b><span face=""Open Sans", sans-serif" style="font-size: 10pt;"> of LWC and Aura.</span></div><div><p class="MsoNormal"><span face=""Open Sans",sans-serif" style="font-size: 10pt; line-height: 107%;"><br /></span></p><p class="MsoNormal"></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEjJZ2lvxG_-sOotUUS8Bwm3zvbx1YEFtmoLIouIAjXCeOn2fAZ45wdvj4vDgHcRQac2QonIPobfv1FuPfkcxTofBEEv8Bexe8wJ6D3_Cxsgl5weahqfvsvTmebb-RRKni-Av4RyCIO8BfXJeQM91cOPOhZjUA_Qy2o5sY5YWa4R6YbCz3EcRHUgW8ND=s1875" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="799" data-original-width="1875" height="181" src="https://blogger.googleusercontent.com/img/a/AVvXsEjJZ2lvxG_-sOotUUS8Bwm3zvbx1YEFtmoLIouIAjXCeOn2fAZ45wdvj4vDgHcRQac2QonIPobfv1FuPfkcxTofBEEv8Bexe8wJ6D3_Cxsgl5weahqfvsvTmebb-RRKni-Av4RyCIO8BfXJeQM91cOPOhZjUA_Qy2o5sY5YWa4R6YbCz3EcRHUgW8ND=w541-h181" width="541" /></a></div> <br /><span face=""Open Sans",sans-serif" style="font-size: 10pt; line-height: 107%;"><br /></span><p></p></div>Master Class http://www.blogger.com/profile/01852672912613116009noreply@blogger.com0tag:blogger.com,1999:blog-2963651217753251164.post-54452165709997930912022-02-21T08:29:00.008-08:002022-02-21T09:08:46.622-08:00<p class="MsoNormal" style="line-height: normal; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; text-align: justify;"><span face="Arial, sans-serif" style="font-size: 10pt;"> <b><u>Field History Tracking</u></b><o:p></o:p></span></p><ul type="disc">
<li class="MsoNormal" style="line-height: normal; text-align: justify;"><span face=""Arial",sans-serif" style="font-size: 10pt; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-IN;">You
can select certain fields to track and display the field history in the
History related list of an object. <o:p></o:p></span></li>
<li class="MsoNormal" style="line-height: normal; text-align: justify;"><span face=""Arial",sans-serif" style="font-size: 10pt; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-IN;">Field
history data is retained for up to 18 months through your org and up to 24
months via the API. <o:p></o:p></span></li>
<li class="MsoNormal" style="line-height: normal; text-align: justify;"><span face=""Arial",sans-serif" style="font-size: 10pt; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-IN;">Field
history tracking data doesn’t count against your Salesforce org’s data
storage limits.<o:p></o:p></span></li>
</ul><p class="MsoNormal" style="line-height: normal; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; text-align: justify;"><span face="Arial, sans-serif" style="font-size: 10pt;"><br /></span><a href="https://blogger.googleusercontent.com/img/a/AVvXsEh3dnTa33cjK47DbUTwpQ5uzlq7o09hTjZx82bqsi2ZBIYBuGM3mCq2P9VZFo3GTWU7paUFCVyfVGS5g_aBC0fzqzAlQKbHg-8SsmjdxivtUr73NFURYoq-FQYLLsd8KcMFf4UYTQ_ERcuxPuHlM-2IUPFIwsug2_fdG-rFKtZZbATYa6k4liyuGYk2=s349" style="font-family: Arial, sans-serif; font-size: 13.3333px; margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="255" data-original-width="349" height="76" src="https://blogger.googleusercontent.com/img/a/AVvXsEh3dnTa33cjK47DbUTwpQ5uzlq7o09hTjZx82bqsi2ZBIYBuGM3mCq2P9VZFo3GTWU7paUFCVyfVGS5g_aBC0fzqzAlQKbHg-8SsmjdxivtUr73NFURYoq-FQYLLsd8KcMFf4UYTQ_ERcuxPuHlM-2IUPFIwsug2_fdG-rFKtZZbATYa6k4liyuGYk2=w103-h76" width="103" /></a><span face="Arial, sans-serif" style="font-size: 10pt;"> </span><span face="Arial, sans-serif" style="font-size: 10pt;">Salesforce stores an object’s tracked field history in an associated
object called StandardObjectNameHistory or CustomObjectName__History.</span></p><p class="MsoNormal" style="line-height: normal; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; text-align: justify;"><b><span face="Arial, sans-serif" style="font-size: 10pt;"> <u>For example:</u></span></b><span face="Arial, sans-serif" style="font-size: 10pt;"><o:p></o:p></span></p><ul type="disc">
<li class="MsoNormal" style="line-height: normal; text-align: justify;"><span face=""Arial",sans-serif" style="font-size: 10pt; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-IN;">AccountHistory represents the history of changes to
the values of an Account record’s fields.<o:p></o:p></span></li>
<li class="MsoNormal" style="line-height: normal; text-align: justify;"><span face=""Arial",sans-serif" style="font-size: 10pt; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-IN;">MyCustomObject__History tracks field history for the
MyCustomObject__c custom object.<o:p></o:p></span></li>
</ul><p class="MsoNormal" style="line-height: normal; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; text-align: justify;"><span face="Arial, sans-serif" style="font-size: 10pt;"> </span><b><u><span face=""Arial",sans-serif" style="color: #080707; font-size: 10pt; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-IN;">General
Considerations</span></u></b><span face="Arial, sans-serif" style="font-size: 10pt;"><o:p></o:p></span></p><ul style="text-align: left;"><li><span style="background-color: white; color: #080707; font-family: "Salesforce Sans"; font-size: 14px;">Salesforce starts tracking field history from the date and time that you enable it on a field. Changes made before this date and time aren’t included and didn’t create an entry in the History related list.</span></li><li><span style="background-color: white; color: #080707; font-family: "Salesforce Sans"; font-size: 14px;">Use Data Loader or the </span><code c-hcdocumentationarticle_hcdocumentationarticle="" style="background-color: white; box-sizing: border-box; color: #080707; font-family: monospace, monospace; font-size: 1em;">queryAll()</code><span style="background-color: white; color: #080707; font-family: "Salesforce Sans"; font-size: 14px;"> API to retrieve field history that‘s 18–24 months old. </span></li><li><span style="background-color: white; color: #080707; font-family: "Salesforce Sans"; font-size: 14px;">The Field History Tracking timestamp is precise to a second in time. In other words, </span><span style="background-color: white; color: #cc0000; font-family: "Salesforce Sans"; font-size: 14px;">if two users update the same tracked field on the same record in the same second, both updates have the same timestamp. Salesforce can’t guarantee the commit order of these changes to the database</span><span style="background-color: white; color: #080707; font-family: "Salesforce Sans"; font-size: 14px;">. As a result, the display values can look out of order.</span></li></ul><p class="MsoNormal" style="line-height: normal; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; text-align: justify;"><span face="Arial, sans-serif" style="font-size: 10pt;"> </span><b><u><span face=""Arial",sans-serif" style="color: #080707; font-size: 10pt; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-IN;">Field Audit Trail</span></u></b><span face="Arial, sans-serif" style="font-size: 10pt;"><o:p></o:p></span></p><ul type="disc">
<li class="MsoNormal" style="line-height: normal; text-align: justify;"><span face=""Arial",sans-serif" style="color: #080707; font-size: 10pt; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-IN;">Field Audit Trail lets you define a policy to retain archived field
history data up to 10 years from the time the data was archived. </span><span face=""Arial",sans-serif" style="font-size: 10pt; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-IN;"><o:p></o:p></span></li>
<li class="MsoNormal" style="line-height: normal; text-align: justify;"><span face=""Arial",sans-serif" style="color: #080707; font-size: 10pt; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-IN;">Field history tracking data and Field Audit Trail data don’t count
against your Salesforce org’s data storage limits.</span><span face=""Arial",sans-serif" style="font-size: 10pt; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-IN;"><o:p></o:p></span></li>
<li class="MsoNormal" style="line-height: normal; text-align: justify;"><span face=""Arial",sans-serif" style="color: #080707; font-size: 10pt; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-IN;">Field history is copied from the History-related list into
the </span><b><span face="Arial, sans-serif" style="background: white; font-size: 10pt;">F</span><span face="Arial, sans-serif" style="background: white; font-size: 10pt;">ieldHistoryArchive big
object</span><span face="Arial, sans-serif" style="background: white; font-size: 10pt;">.</span></b><span face=""Arial",sans-serif" style="font-size: 10pt; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-IN;"><o:p></o:p></span></li>
<li class="MsoNormal" style="line-height: normal; text-align: justify;"><span face=""Arial",sans-serif" style="background: white; color: #080707; font-size: 10pt; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-IN;"> </span><span face=""Arial",sans-serif" style="background: white; color: #cc0000; font-size: 10pt; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-IN;">With Field
Audit Trail</span><span face=""Arial",sans-serif" style="background: white; color: #080707; font-size: 10pt; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-IN;">, you can track up to </span><span face=""Arial",sans-serif" style="background: white; color: #cc0000; font-size: 10pt; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-IN;">60 fields per object</span><span face=""Arial",sans-serif" style="background: white; color: #080707; font-size: 10pt; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-IN;">. </span><span face=""Arial",sans-serif" style="background: white; color: #cc0000; font-size: 10pt; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-IN;">Without it</span><span face=""Arial",sans-serif" style="background: white; color: #080707; font-size: 10pt; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-IN;">, you can track only </span><span face=""Arial",sans-serif" style="background: white; color: #cc0000; font-size: 10pt; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-IN;">20 fields per object</span><span face=""Arial",sans-serif" style="font-size: 10pt; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-IN;"><o:p></o:p></span></li>
</ul><p class="MsoNormal" style="background: white; line-height: 15pt; mso-margin-bottom-alt: auto; text-align: justify;"><span face="Arial, sans-serif" style="font-size: 10pt;"><b>The following fields can’t be
tracked.</b></span><span face="Arial, sans-serif" style="font-size: 10pt;"><o:p></o:p></span></p><ul type="disc">
<li class="MsoNormal" style="background: white; color: #080707; line-height: normal; mso-list: l4 level1 lfo5; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; tab-stops: list 36.0pt; text-align: justify;"><span face=""Arial",sans-serif" style="font-size: 10pt; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-IN;">Formula, roll-up summary, or auto-number
fields<o:p></o:p></span></li>
<li class="MsoNormal" style="background: white; color: #080707; line-height: normal; mso-list: l4 level1 lfo5; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; tab-stops: list 36.0pt; text-align: justify;"><span face=""Arial",sans-serif" style="font-size: 10pt; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-IN;">Created By and Last Modified By<o:p></o:p></span></li>
<li class="MsoNormal" style="background: white; color: #080707; line-height: normal; mso-list: l4 level1 lfo5; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; tab-stops: list 36.0pt; text-align: justify;"><span face=""Arial",sans-serif" style="font-size: 10pt; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-IN;">Expected Revenue field on opportunities<o:p></o:p></span></li>
<li class="MsoNormal" style="background: white; color: #080707; line-height: normal; mso-list: l4 level1 lfo5; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; tab-stops: list 36.0pt; text-align: justify;"><span face=""Arial",sans-serif" style="font-size: 10pt; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-IN;">Master Solution Title or the Master Solution
Details fields on solutions<o:p></o:p></span></li>
<li class="MsoNormal" style="background: white; color: #080707; line-height: normal; mso-list: l4 level1 lfo5; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; tab-stops: list 36.0pt; text-align: justify;"><span face=""Arial",sans-serif" style="font-size: 10pt; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-IN;">Long text fields<o:p></o:p></span></li>
<li class="MsoNormal" style="background: white; color: #080707; line-height: normal; mso-list: l4 level1 lfo5; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; tab-stops: list 36.0pt; text-align: justify;"><span face=""Arial",sans-serif" style="font-size: 10pt; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-IN;">Multi-select fields<o:p></o:p></span></li>
</ul><p class="MsoNormal" style="line-height: normal; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
</p><p class="MsoNormal" style="text-align: justify;"><span face=""Arial",sans-serif" style="font-size: 10pt; line-height: 107%;"> </span></p><a name="overview_p1"></a><p></p>Master Class http://www.blogger.com/profile/01852672912613116009noreply@blogger.com0tag:blogger.com,1999:blog-2963651217753251164.post-79426330683435009642022-02-20T08:57:00.002-08:002022-02-20T08:57:42.239-08:00<p> </p><h2><span style="color: red;"><u><b><span>Unable to see the Reset Security Token option</span></b></u> </span> </h2><p></p><p>There are a few different reasons the Reset Security Token feature may not be available. </p><p></p><ol><li><span style="color: #ff00fe;">IP Restrictions in the Login IP Ranges</span></li><li><span style="color: #ff00fe;">Network Access missing from Security Controls</span></li><li><span style="color: #ff00fe;">User Profile is Corrupted</span></li></ol><div><ul><li><b><span style="color: red;">IP Restrictions in the Login IP Ranges</span></b></li></ul></div><p></p><div><div> In order for the Reset My Security Token option to appear, you will need to remove the Login IP Ranges or change the User to a profile that does not have Login IP Ranges listed.</div><div><b> </b></div><div><ul><li><span style="color: red;"><b>Network Access missing from Security Controls</b></span></li></ul></div><div> System administrators can confirm if Network Access is missing by following these steps:</div><div><ol><li>Go to Setup</li><li>On the Quick Find box, enter Network Access.</li><li>If you don't see the 'Network Access' link above, the system administrator can log a Case with Support to request the following features enabled for the organization:</li><li>Login Challenge Enabled</li><li>Login with API Token</li></ol></div><div><ul><li><span style="color: red;"><b>User Profile is Corrupted</b></span></li></ul></div><div> If none of the previous scenarios are true try editing the User profile that's missing the security token and save it without making any modifications. This will reset the profile and might result in the token option being available.</div><div><br /></div><div>If the information provided does not resolve the issue open a case with Salesforce Support for assistance.</div></div>Master Class http://www.blogger.com/profile/01852672912613116009noreply@blogger.com0tag:blogger.com,1999:blog-2963651217753251164.post-49598866502073161592021-01-30T20:38:00.002-08:002021-01-30T20:38:33.313-08:00<p><b><span style="color: red;"> <span style="font-family: "Noto Serif", serif; font-size: 14px;">@wire with dynamic </span><span style="font-family: Noto Serif, serif;"><span style="font-size: 14px;">parameters</span></span></span></b></p><p style="background-color: white; color: #666666; font-family: "Noto Serif", serif; font-size: 14px; margin: 0px 0px 15px;">Call to apex method using @wire is executed at the time component loads. But suppose we want to make server call when a particular parameter changes.</p><p style="background-color: white; color: #666666; font-family: "Noto Serif", serif; font-size: 14px; margin: 0px 0px 15px;">So for that we can @wire an apex method with a dynamic parameter. We need to pass a parameter with “$” appended to it while making call to apex method. So, once the value of this property changes, call to apex is made at that time.</p><p>Apex class</p><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #569cd6;">public</span> with sharing <span style="color: #569cd6;">class</span> ContactController {</div><div><span style="color: #569cd6;">@AuraEnabled</span>(cacheable=<span style="color: #569cd6;">true</span>)</div><div><span style="color: #569cd6;">public</span> <span style="color: #569cd6;">static</span> <span style="color: #569cd6;">List</span><<span style="color: #569cd6;">Contact</span>> getContactList(){</div><div> <span style="color: #569cd6;">List</span><<span style="color: #569cd6;">Contact</span>> contactList = [SELECT <span style="color: #569cd6;">id</span>,<span style="color: #569cd6;">lastName</span> <span style="color: #569cd6;">from</span> <span style="color: #569cd6;">contact</span> LIMIT <span style="color: #b5cea8;">10</span>];</div><div> <span style="color: #569cd6;">return</span> contactList;</div><div>}</div><div>}</div><br /></div><p>html</p><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: grey;"><</span><span style="color: #569cd6;">template</span><span style="color: grey;">></span></div><div><span style="color: grey;"><</span><span style="color: #569cd6;">lightning-card</span> <span style="color: #9cdcfe;">title</span>=<span style="color: #ce9178;">"wire with dynamic paramters"</span> <span style="color: #9cdcfe;">icon-name</span>=<span style="color: #ce9178;">"custom:custom19"</span><span style="color: grey;">></span></div><div><span style="color: #6a9955;"><!-- Show contact if end--></span></div><div><span style="color: grey;"><</span><span style="color: #569cd6;">lightning-input</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"checkbox"</span> <span style="color: #9cdcfe;">label</span>=<span style="color: #ce9178;">"Show Contacts Details"</span> <span style="color: #9cdcfe;">checked</span>=<span style="color: #ce9178;">{showContacts}</span> <span style="color: #9cdcfe;">onchange</span>=<span style="color: #ce9178;">{handleFlag}</span><span style="color: grey;">></span></div><div><span style="color: grey;"></</span><span style="color: #569cd6;">lightning-input</span><span style="color: grey;">></span></div><br /><div><span style="color: #6a9955;"><!-- Show contact if check--></span></div><div><span style="color: grey;"><</span><span style="color: #569cd6;">template</span> <span style="color: #9cdcfe;">if:true</span> = <span style="color: #ce9178;">{showContacts}</span> <span style="color: #9cdcfe;">icon-name</span>=<span style="color: #ce9178;">"standard:contact"</span><span style="color: grey;">></span></div><div><span style="color: grey;"><</span><span style="color: #569cd6;">template</span> <span style="color: #9cdcfe;">for:each</span>=<span style="color: #ce9178;">{conList}</span> <span style="color: #9cdcfe;">for:item</span>=<span style="color: #ce9178;">"contact"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">p</span> <span style="color: #9cdcfe;">key</span> = <span style="color: #ce9178;">{contact.LastName}</span> <span style="color: grey;">></span></div><div> contact name : {contact.LastName}</div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">p</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">template</span><span style="color: grey;">></span></div><div><span style="color: grey;"></</span><span style="color: #569cd6;">template</span><span style="color: grey;">></span></div><div><span style="color: grey;"></</span><span style="color: #569cd6;">lightning-card</span><span style="color: grey;">></span></div><div><span style="color: grey;"></</span><span style="color: #569cd6;">template</span><span style="color: grey;">></span></div><br /></div><p>js</p><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #569cd6;">import</span> { LightningElement,wire } <span style="color: #569cd6;">from</span> <span style="color: #ce9178;">'lwc'</span>;</div><div><span style="color: #569cd6;">import</span> getContactList <span style="color: #569cd6;">from</span> <span style="color: #ce9178;">'@salesforce/apex/ContactController.getContactList'</span></div><div><span style="color: #569cd6;">export</span> <span style="color: #569cd6;">default</span> <span style="color: #569cd6;">class</span> DynamicProperty <span style="color: #569cd6;">extends</span> LightningElement {</div><div> conList ;</div><div>showContacts = <span style="color: #569cd6;">false</span>;</div><br /><div>handleFlag(event){</div><div> <span style="color: #569cd6;">this</span>.showContacts = event.target.checked;</div><br /><div>}</div><div>@wire (getContactList,{flag : <span style="color: #ce9178;">'$showContacts'</span>})</div><div>contactList({error,data}){</div><div> <span style="color: #569cd6;">if</span>(error){</div><div> console.log(<span style="color: #ce9178;">'error is-->'</span>+error);</div><br /><div> }</div><div> <span style="color: #569cd6;">else</span> <span style="color: #569cd6;">if</span>(data){</div><div> <span style="color: #569cd6;">this</span>.conList = data;</div><div> }</div><br /><div>} </div><div>}</div><br /></div><p>xml</p><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: grey;"><?</span><span style="color: #569cd6;">xml</span><span style="color: #9cdcfe;"> version</span>=<span style="color: #ce9178;">"1.0"</span><span style="color: #9cdcfe;"> encoding</span>=<span style="color: #ce9178;">"UTF-8"</span><span style="color: grey;">?></span></div><div><span style="color: grey;"><</span><span style="color: #569cd6;">LightningComponentBundle</span> <span style="color: #9cdcfe;">xmlns</span>=<span style="color: #ce9178;">"http://soap.sforce.com/2006/04/metadata"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">apiVersion</span><span style="color: grey;">></span>50.0<span style="color: grey;"></</span><span style="color: #569cd6;">apiVersion</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">isExposed</span><span style="color: grey;">></span>true<span style="color: grey;"></</span><span style="color: #569cd6;">isExposed</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">targets</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">target</span><span style="color: grey;">></span>lightning__AppPage<span style="color: grey;"></</span><span style="color: #569cd6;">target</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">target</span><span style="color: grey;">></span>lightning__RecordPage<span style="color: grey;"></</span><span style="color: #569cd6;">target</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">target</span><span style="color: grey;">></span>lightning__HomePage<span style="color: grey;"></</span><span style="color: #569cd6;">target</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">targets</span><span style="color: grey;">></span></div><div><span style="color: grey;"></</span><span style="color: #569cd6;">LightningComponentBundle</span><span style="color: grey;">></span></div></div>Master Class http://www.blogger.com/profile/01852672912613116009noreply@blogger.com1tag:blogger.com,1999:blog-2963651217753251164.post-68400901891142243912021-01-16T03:23:00.001-08:002021-01-16T03:23:08.429-08:00<p><br /></p><p class="MsoNormal" style="background: #FAFAF9; line-height: normal; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; mso-outline-level: 1;"><b style="mso-bidi-font-weight: normal;"><span style="font-family: Arial, sans-serif; font-size: 10pt;"><span style="color: #2b00fe;">Access
Client Form Factor</span><span style="color: #080707;"><o:p></o:p></span></span></b></p>
<p class="MsoNormal" style="background: #FAFAF9; line-height: normal; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;"><span style="color: #080707; font-family: "Arial",sans-serif; font-size: 10.0pt; mso-fareast-font-family: "Times New Roman";">To access the form factor of the hardware the browser is running
on, import the </span><span style="background: #F8F8F8; border: solid #DDDDDD 1.0pt; color: #000814; font-family: "Arial",sans-serif; font-size: 10.0pt; mso-border-alt: solid #DDDDDD .75pt; mso-fareast-font-family: "Times New Roman"; padding: 1.0pt;">@salesforce/client/formFactor</span><span style="color: #080707; font-family: "Arial",sans-serif; font-size: 10.0pt; mso-fareast-font-family: "Times New Roman";"> scoped module.<o:p></o:p></span></p>
<div style="background: white; border: solid #DDDDDD 1.0pt; mso-border-alt: solid #DDDDDD .75pt; mso-element: para-border-div; padding: 12.0pt 12.0pt 12.0pt 12.0pt;">
<p class="MsoNormal" style="background: white; border: none; line-height: 14.4pt; margin-bottom: 6.0pt; margin-left: 0in; margin-right: 0in; margin-top: 6.0pt; mso-border-alt: solid #DDDDDD .75pt; mso-padding-alt: 12.0pt 12.0pt 12.0pt 12.0pt; padding: 0in; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt;"><span style="color: #00674d; font-family: "Arial",sans-serif; font-size: 10.0pt; mso-fareast-font-family: "Times New Roman";">import</span><span style="color: #000814; font-family: "Arial",sans-serif; font-size: 10.0pt; mso-fareast-font-family: "Times New Roman";"> <i>formFactorPropertyName</i>
</span><span style="color: #00674d; font-family: "Arial",sans-serif; font-size: 10.0pt; mso-fareast-font-family: "Times New Roman";">from</span><span style="color: #000814; font-family: "Arial",sans-serif; font-size: 10.0pt; mso-fareast-font-family: "Times New Roman";"> </span><span style="color: #a31515; font-family: "Arial",sans-serif; font-size: 10.0pt; mso-fareast-font-family: "Times New Roman";">'@salesforce/client/formFactor'</span><span style="color: #000814; font-family: "Arial",sans-serif; font-size: 10.0pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></p>
</div>
<ul type="disc">
<li class="MsoNormal" style="background: #FAFAF9; color: #080707; line-height: normal; mso-list: l0 level1 lfo1; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; tab-stops: list .5in;"><a name="create_client_form_factor.xml__props"></a><i><span style="background: #F8F8F8; border: solid #DDDDDD 1.0pt; color: #000814; font-family: "Arial",sans-serif; font-size: 10.0pt; mso-border-alt: solid #DDDDDD .75pt; mso-fareast-font-family: "Times New Roman"; padding: 1.0pt;">formFactorPropertyName</span></i><span style="font-family: "Arial",sans-serif; font-size: 10.0pt; mso-fareast-font-family: "Times New Roman";">—A name that refers to the form factor of the hardware
running the browser. Possible values are:<o:p></o:p></span></li>
<ul type="circle">
<li class="MsoNormal" style="background: #FAFAF9; color: #080707; line-height: normal; mso-list: l0 level2 lfo1; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; tab-stops: list 1.0in;"><span style="background: #F8F8F8; border: solid #DDDDDD 1.0pt; color: #000814; font-family: "Arial",sans-serif; font-size: 10.0pt; mso-border-alt: solid #DDDDDD .75pt; mso-fareast-font-family: "Times New Roman"; padding: 1.0pt;">Large</span><span style="font-family: "Arial",sans-serif; font-size: 10.0pt; mso-fareast-font-family: "Times New Roman";">—A desktop client.<o:p></o:p></span></li>
<li class="MsoNormal" style="background: #FAFAF9; color: #080707; line-height: normal; mso-list: l0 level2 lfo1; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; tab-stops: list 1.0in;"><span style="background: #F8F8F8; border: solid #DDDDDD 1.0pt; color: #000814; font-family: "Arial",sans-serif; font-size: 10.0pt; mso-border-alt: solid #DDDDDD .75pt; mso-fareast-font-family: "Times New Roman"; padding: 1.0pt;">Medium</span><span style="font-family: "Arial",sans-serif; font-size: 10.0pt; mso-fareast-font-family: "Times New Roman";">—A tablet client.<o:p></o:p></span></li>
<li class="MsoNormal" style="background: #FAFAF9; color: #080707; line-height: normal; mso-list: l0 level2 lfo1; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; tab-stops: list 1.0in;"><span style="background: #F8F8F8; border: solid #DDDDDD 1.0pt; color: #000814; font-family: "Arial",sans-serif; font-size: 10.0pt; mso-border-alt: solid #DDDDDD .75pt; mso-fareast-font-family: "Times New Roman"; padding: 1.0pt;">Small</span><span style="font-family: "Arial",sans-serif; font-size: 10.0pt; mso-fareast-font-family: "Times New Roman";">—A phone client.<o:p></o:p></span></li>
</ul>
</ul><div><span style="color: #080707; font-family: Arial, sans-serif;"><span style="font-size: 13.3333px;"><b>html</b></span></span></div><div><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: grey;"><</span><span style="color: #569cd6;">template</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">lightning-card</span> <span style="color: #9cdcfe;">title</span>=<span style="color: #ce9178;">"formfactorName"</span> <span style="color: #9cdcfe;">icon-name</span>=<span style="color: #ce9178;">"custom:custom19"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"slds-m-around_medium"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">p</span><span style="color: grey;">></span>FormFactor:<span style="color: grey;"></</span><span style="color: #569cd6;">p</span><span style="color: grey;">></span></div><div> {formFactor}</div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">lightning-card</span><span style="color: grey;">></span></div><div><span style="color: grey;"></</span><span style="color: #569cd6;">template</span><span style="color: grey;">></span></div></div></div><div><span style="color: #080707; font-family: Arial, sans-serif;"><span style="font-size: 13.3333px;"><b><br /></b></span></span></div><div><span style="color: #080707; font-family: Arial, sans-serif;"><span style="font-size: 13.3333px;"><b>js</b></span></span></div><div><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #c586c0;">import</span> { <span style="color: #9cdcfe;">LightningElement</span> } <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'lwc'</span>;</div><div><span style="color: #c586c0;">import</span> <span style="color: #9cdcfe;">FORM_FACTOR</span> <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'@salesforce/client/formFactor'</span></div><div><span style="color: #c586c0;">export</span> <span style="color: #c586c0;">default</span> <span style="color: #569cd6;">class</span> <span style="color: #4ec9b0;">ClientFormFactor</span> <span style="color: #569cd6;">extends</span> <span style="color: #4ec9b0;">LightningElement</span> {</div><br /><div> <span style="color: #9cdcfe;">formFactor</span> = <span style="color: #4fc1ff;">FORM_FACTOR</span>;</div><div><b>}</b></div></div></div><div><span style="color: #080707; font-family: Arial, sans-serif;"><span style="font-size: 13.3333px;"><b><br /></b></span></span></div><div><span style="color: #080707; font-family: Arial, sans-serif;"><span style="font-size: 13.3333px;"><b>xml</b></span></span></div><div><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: grey;"><?</span><span style="color: #569cd6;">xml</span><span style="color: #9cdcfe;"> version</span>=<span style="color: #ce9178;">"1.0"</span><span style="color: #9cdcfe;"> encoding</span>=<span style="color: #ce9178;">"UTF-8"</span><span style="color: grey;">?></span></div><div><span style="color: grey;"><</span><span style="color: #569cd6;">LightningComponentBundle</span> <span style="color: #9cdcfe;">xmlns</span>=<span style="color: #ce9178;">"http://soap.sforce.com/2006/04/metadata"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">apiVersion</span><span style="color: grey;">></span>50.0<span style="color: grey;"></</span><span style="color: #569cd6;">apiVersion</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">isExposed</span><span style="color: grey;">></span>true<span style="color: grey;"></</span><span style="color: #569cd6;">isExposed</span><span style="color: grey;">></span> </div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">targets</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">target</span><span style="color: grey;">></span>lightning__AppPage<span style="color: grey;"></</span><span style="color: #569cd6;">target</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">target</span><span style="color: grey;">></span>lightning__RecordPage<span style="color: grey;"></</span><span style="color: #569cd6;">target</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">target</span><span style="color: grey;">></span>lightning__HomePage<span style="color: grey;"></</span><span style="color: #569cd6;">target</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">targets</span><span style="color: grey;">></span></div><div><span style="color: grey;"></</span><span style="color: #569cd6;">LightningComponentBundle</span><span style="color: grey;">></span></div></div></div>Master Class http://www.blogger.com/profile/01852672912613116009noreply@blogger.com0tag:blogger.com,1999:blog-2963651217753251164.post-15709962329936449162021-01-16T03:10:00.006-08:002021-01-16T03:10:46.457-08:00<p class="MsoNormal" style="background: #FAFAF9; line-height: normal; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; mso-outline-level: 1;"><b><span style="color: #080707; font-family: "Arial",sans-serif; font-size: 10.0pt; mso-fareast-font-family: "Times New Roman"; mso-font-kerning: 18.0pt;">Get
Information About the Current User<o:p></o:p></span></b></p>
<p class="MsoNormal" style="background: #FAFAF9; line-height: normal; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;"><span style="color: #080707; font-family: "Arial",sans-serif; font-size: 10.0pt; mso-fareast-font-family: "Times New Roman";">To get information about the current user, use the </span><span style="background: #F8F8F8; border: solid #DDDDDD 1.0pt; color: #000814; font-family: "Arial",sans-serif; font-size: 10.0pt; mso-border-alt: solid #DDDDDD .75pt; mso-fareast-font-family: "Times New Roman"; padding: 1.0pt;">@salesforce/user</span><span style="color: #080707; font-family: "Arial",sans-serif; font-size: 10.0pt; mso-fareast-font-family: "Times New Roman";"> scoped module.<o:p></o:p></span></p>
<div style="background: white; border: solid #DDDDDD 1.0pt; mso-border-alt: solid #DDDDDD .75pt; mso-element: para-border-div; padding: 12.0pt 12.0pt 12.0pt 12.0pt;">
<p class="MsoNormal" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: none; line-height: 14.4pt; margin: 6pt 0in; padding: 0in;"><span style="color: #00674d; font-family: "Arial",sans-serif; font-size: 10.0pt; mso-fareast-font-family: "Times New Roman";">import</span><span style="color: #000814; font-family: "Arial",sans-serif; font-size: 10.0pt; mso-fareast-font-family: "Times New Roman";"> <i>property</i> </span><span style="color: #00674d; font-family: "Arial",sans-serif; font-size: 10.0pt; mso-fareast-font-family: "Times New Roman";">from</span><span style="color: #000814; font-family: "Arial",sans-serif; font-size: 10.0pt; mso-fareast-font-family: "Times New Roman";"> </span><span style="color: #a31515; font-family: "Arial",sans-serif; font-size: 10.0pt; mso-fareast-font-family: "Times New Roman";">'@salesforce/user/<i>property</i>'</span><span style="color: #000814; font-family: "Arial",sans-serif; font-size: 10.0pt; mso-fareast-font-family: "Times New Roman";">;<o:p></o:p></span></p>
</div>
<ul type="disc">
<li class="MsoNormal" style="background: #FAFAF9; color: #080707; line-height: normal; mso-list: l0 level1 lfo1; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; tab-stops: list .5in;"><a name="get_current_user__props"></a><i><span style="background: #F8F8F8; border: solid #DDDDDD 1.0pt; color: #000814; font-family: "Arial",sans-serif; font-size: 10.0pt; mso-border-alt: solid #DDDDDD .75pt; mso-fareast-font-family: "Times New Roman"; padding: 1.0pt;">property</span></i><span style="font-family: "Arial",sans-serif; font-size: 10.0pt; mso-fareast-font-family: "Times New Roman";">—The supported properties are </span><span style="background: #F8F8F8; border: solid #DDDDDD 1.0pt; color: #000814; font-family: "Arial",sans-serif; font-size: 10.0pt; mso-border-alt: solid #DDDDDD .75pt; mso-fareast-font-family: "Times New Roman"; padding: 1.0pt;">Id</span><span style="font-family: "Arial",sans-serif; font-size: 10.0pt; mso-fareast-font-family: "Times New Roman";">, which is the user’s ID, and </span><span style="background: #F8F8F8; border: solid #DDDDDD 1.0pt; color: #000814; font-family: "Arial",sans-serif; font-size: 10.0pt; mso-border-alt: solid #DDDDDD .75pt; mso-fareast-font-family: "Times New Roman"; padding: 1.0pt;">isGuest</span><span style="font-family: "Arial",sans-serif; font-size: 10.0pt; mso-fareast-font-family: "Times New Roman";">, which is a boolean value indicating whether the user
is a community guest user. Use the </span><span style="background: #F8F8F8; border: solid #DDDDDD 1.0pt; color: #000814; font-family: "Arial",sans-serif; font-size: 10.0pt; mso-border-alt: solid #DDDDDD .75pt; mso-fareast-font-family: "Times New Roman"; padding: 1.0pt;">isGuest</span><span style="font-family: "Arial",sans-serif; font-size: 10.0pt; mso-fareast-font-family: "Times New Roman";"> property
to check whether or not the user is authenticated.<o:p></o:p></span></li>
</ul>
<p><span style="color: #080707; font-family: Arial, sans-serif; font-size: 10pt;">This sample code imports the current user ID and assigns it to
the </span><span style="background: rgb(248, 248, 248); border: 1pt solid rgb(221, 221, 221); color: #000814; font-family: Arial, sans-serif; font-size: 10pt; padding: 1pt;">userId</span><span style="color: #080707; font-family: Arial, sans-serif; font-size: 10pt;"> property to provide access in the HTML
template.</span></p><p><b>html</b></p><div style="background-color: #1e1e1e; color: #c5c8c6; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #6089b4;"><template></span></div><div> <span style="color: #6089b4;"><lightning-card</span><span style="color: #d0b344;"> title=</span><span style="color: #9aa83a;">"currentuserId"</span><span style="color: #d0b344;"> icon-name=</span><span style="color: #9aa83a;">"custom:custom19"</span><span style="color: #6089b4;">></span></div><div> <span style="color: #6089b4;"><div</span><span style="color: #d0b344;"> class=</span><span style="color: #9aa83a;">"slds-m-around_medium"</span><span style="color: #6089b4;">></span></div><div> <span style="color: #6089b4;"><p></span>User Id:<span style="color: #6089b4;"></p></span></div><div> {userId}</div><div> <span style="color: #6089b4;"></div></span></div><div> <span style="color: #6089b4;"></lightning-card></span></div><div><span style="color: #6089b4;"></template></span></div></div><p><b>js</b></p><div style="background-color: #1e1e1e; color: #c5c8c6; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #9872a2;">import</span> { <span style="color: #6089b4;">LightningElement</span> } <span style="color: #9872a2;">from</span> <span style="color: #9aa83a;">'lwc'</span>;</div><div><span style="color: #9872a2;">import</span> <span style="color: #6089b4;">Id</span> <span style="color: #9872a2;">from</span> <span style="color: #9aa83a;">'@salesforce/user/Id'</span>;</div><div><span style="color: #9872a2;">export</span> <span style="color: #9872a2;">default</span> <span style="color: #9872a2;">class</span> <span style="color: #9b0000;">CurrentUser</span> <span style="color: #9872a2;">extends</span> <span style="color: #c7444a;">LightningElement</span> {</div><div> <span style="color: #9a9b99;">// Assign to variable</span></div><div> <span style="color: #9872a2;">userId</span> <span style="color: #676867;">=</span> <span style="color: #6089b4;">Id</span>;</div><div>}</div></div><p>xml</p><div style="background-color: #1e1e1e; color: #c5c8c6; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><div style="line-height: 19px;"><span style="color: #d0b344;"><?</span><span style="color: #6089b4;">xml</span><span style="color: #d0b344;"> version=</span><span style="color: #d0b344;">"</span><span style="color: #9aa83a;">1.0</span><span style="color: #d0b344;">"</span><span style="color: #d0b344;"> encoding=</span><span style="color: #d0b344;">"</span><span style="color: #9aa83a;">UTF-8</span><span style="color: #d0b344;">"</span><span style="color: #d0b344;">?></span></div></div><div><span style="color: #d0b344;"><</span><span style="color: #6089b4;">LightningComponentBundle</span><span style="color: #d0b344;"> xmlns=</span><span style="color: #d0b344;">"</span><span style="color: #9aa83a;">http://soap.sforce.com/2006/04/metadata</span><span style="color: #d0b344;">"</span><span style="color: #d0b344;">></span></div><div> <span style="color: #d0b344;"><</span><span style="color: #6089b4;">apiVersion</span><span style="color: #d0b344;">></span>50.0<span style="color: #d0b344;"></</span><span style="color: #6089b4;">apiVersion</span><span style="color: #d0b344;">></span></div><div> <span style="color: #d0b344;"><</span><span style="color: #6089b4;">isExposed</span><span style="color: #d0b344;">></span>true<span style="color: #d0b344;"></</span><span style="color: #6089b4;">isExposed</span><span style="color: #d0b344;">></span> </div><div> <span style="color: #d0b344;"><</span><span style="color: #6089b4;">targets</span><span style="color: #d0b344;">></span></div><div> <span style="color: #d0b344;"><</span><span style="color: #6089b4;">target</span><span style="color: #d0b344;">></span>lightning__AppPage<span style="color: #d0b344;"></</span><span style="color: #6089b4;">target</span><span style="color: #d0b344;">></span></div><div> <span style="color: #d0b344;"><</span><span style="color: #6089b4;">target</span><span style="color: #d0b344;">></span>lightning__RecordPage<span style="color: #d0b344;"></</span><span style="color: #6089b4;">target</span><span style="color: #d0b344;">></span></div><div> <span style="color: #d0b344;"><</span><span style="color: #6089b4;">target</span><span style="color: #d0b344;">></span>lightning__HomePage<span style="color: #d0b344;"></</span><span style="color: #6089b4;">target</span><span style="color: #d0b344;">></span></div><div> <span style="color: #d0b344;"></</span><span style="color: #6089b4;">targets</span><span style="color: #d0b344;">></span></div><br /><div><span style="color: #d0b344;"></</span><span style="color: #6089b4;">LightningComponentBundle</span><span style="color: #d0b344;">></span></div></div>Master Class http://www.blogger.com/profile/01852672912613116009noreply@blogger.com0tag:blogger.com,1999:blog-2963651217753251164.post-12851556568861793822021-01-12T19:30:00.006-08:002021-01-12T19:42:29.155-08:00<p><span style="color: #2b00fe;"> <i><span face="Arial, sans-serif" style="font-size: 12pt;"><b><u><span>Access Static Resources in LWC</span></u></b></span></i></span></p>
<p class="MsoNormal" style="background: rgb(250, 250, 249); line-height: normal; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; text-align: justify;"><span face=""Arial",sans-serif" style="color: #080707; font-size: 12pt; mso-fareast-font-family: "Times New Roman";">Import static resources from the </span><span style="background: rgb(248, 248, 248); border: 1pt solid rgb(221, 221, 221); color: #000814; font-family: Consolas; font-size: 10pt; mso-bidi-font-family: "Courier New"; mso-border-alt: solid #DDDDDD .75pt; mso-fareast-font-family: "Times New Roman"; padding: 1pt;">@salesforce</span><span style="background: rgb(248, 248, 248); border: 1pt solid rgb(221, 221, 221); color: #000814; font-family: Consolas; font-size: 12pt; mso-bidi-font-family: "Courier New"; mso-border-alt: solid #DDDDDD .75pt; mso-fareast-font-family: "Times New Roman"; padding: 1pt;">/</span><span style="background: rgb(248, 248, 248); border: 1pt solid rgb(221, 221, 221); color: #000814; font-family: Consolas; font-size: 10pt; mso-bidi-font-family: "Courier New"; mso-border-alt: solid #DDDDDD .75pt; mso-fareast-font-family: "Times New Roman"; padding: 1pt;">resourceUrl</span><span face=""Arial",sans-serif" style="color: #080707; font-size: 12pt; mso-fareast-font-family: "Times New Roman";"> scoped module. Static resources can be
archives (such as .zip and .jar files), images, style sheets, JavaScript, and
other files.<o:p></o:p></span></p>
<div style="background: white; border: 1pt solid rgb(221, 221, 221); mso-border-alt: solid #DDDDDD .75pt; mso-element: para-border-div; padding: 12pt;">
<p class="MsoNormal" style="background: white; border: none; line-height: 14.4pt; margin-bottom: 6.0pt; margin-left: 0in; margin-right: 0in; margin-top: 6.0pt; margin: 6pt 0in; mso-border-alt: solid #DDDDDD .75pt; mso-padding-alt: 12.0pt 12.0pt 12.0pt 12.0pt; padding: 0in; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt;"><span style="color: #00674d; font-family: Consolas; font-size: 12pt; mso-bidi-font-family: "Courier New"; mso-fareast-font-family: "Times New Roman";">import</span><span style="color: #000814; font-family: Consolas; font-size: 12pt; mso-bidi-font-family: "Courier New"; mso-fareast-font-family: "Times New Roman";"> <i>myResource</i> </span><span style="color: #00674d; font-family: Consolas; font-size: 12pt; mso-bidi-font-family: "Courier New"; mso-fareast-font-family: "Times New Roman";">from</span><span style="color: #000814; font-family: Consolas; font-size: 12pt; mso-bidi-font-family: "Courier New"; mso-fareast-font-family: "Times New Roman";"> </span><span style="color: #a31515; font-family: Consolas; font-size: 12pt; mso-bidi-font-family: "Courier New"; mso-fareast-font-family: "Times New Roman";">'@salesforce/resourceUrl/<i>resourceReference</i>'</span><span style="color: #000814; font-family: Consolas; font-size: 12pt; mso-bidi-font-family: "Courier New"; mso-fareast-font-family: "Times New Roman";">;</span></p></div>
<div style="background: white; border: 1pt solid rgb(221, 221, 221); mso-border-alt: solid #DDDDDD .75pt; mso-element: para-border-div; padding: 12pt;"><pre style="background: white; border: none; line-height: 14.4pt; margin-bottom: 6.0pt; margin-left: 0in; margin-right: 0in; margin-top: 6.0pt; margin: 6pt 0in; mso-border-alt: solid #DDDDDD .75pt; mso-padding-alt: 12.0pt 12.0pt 12.0pt 12.0pt; padding: 0in;"><span class="token"><span style="color: #00674d; font-family: Consolas; font-size: 12pt;">import</span></span><code><span style="color: #000814; font-family: Consolas; font-size: 12pt;"> </span></code><var componentreference-codehighlighter_codehighlighter="" componentreference-externaldocumentationcontent_externaldocumentationcontent="" style="box-sizing: border-box;"><span style="color: #000814; font-family: Consolas; font-size: 12pt; mso-bidi-font-family: "Courier New";">myResource</span></var><code><span style="color: #000814; font-family: Consolas; font-size: 12pt;"> </span><span componentreference-codehighlighter_codehighlighter="" componentreference-externaldocumentationcontent_externaldocumentationcontent="" style="box-sizing: border-box;"></span></code><span class="token"><span style="color: #00674d; font-family: Consolas; font-size: 12pt;">from</span></span><code><span style="color: #000814; font-family: Consolas; font-size: 12pt;"> </span><span componentreference-codehighlighter_codehighlighter="" componentreference-externaldocumentationcontent_externaldocumentationcontent="" style="box-sizing: border-box;"></span></code><span class="token"><span style="color: #a31515; font-family: Consolas; font-size: 12pt;">'@salesforce/resourceUrl/</span></span><var componentreference-codehighlighter_codehighlighter="" componentreference-externaldocumentationcontent_externaldocumentationcontent="" style="box-sizing: border-box;"><span style="color: #a31515; font-family: Consolas; font-size: 12pt; mso-bidi-font-family: "Courier New";">namespace</span></var><span class="token"><span style="color: #a31515; font-family: Consolas; font-size: 12pt;">__</span></span><var componentreference-codehighlighter_codehighlighter="" componentreference-externaldocumentationcontent_externaldocumentationcontent="" style="box-sizing: border-box;"><span style="color: #a31515; font-family: Consolas; font-size: 12pt; mso-bidi-font-family: "Courier New";">resourceReference</span></var><span class="token"><span style="color: #a31515; font-family: Consolas; font-size: 12pt;">'</span></span><span class="token"><span style="color: #000814; font-family: Consolas; font-size: 12pt;"><span componentreference-codehighlighter_codehighlighter="" componentreference-externaldocumentationcontent_externaldocumentationcontent="" style="box-sizing: border-box;">;</span></span></span></pre></div>
<ul type="disc">
<li class="MsoNormal" style="background: rgb(250, 250, 249); color: #080707; line-height: normal; mso-list: l0 level1 lfo1; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; tab-stops: list .5in; text-align: justify;"><i><span style="background: rgb(248, 248, 248); border: 1pt solid rgb(221, 221, 221); color: #000814; font-family: Consolas; font-size: 12pt; mso-bidi-font-family: "Courier New"; mso-border-alt: solid #DDDDDD .75pt; mso-fareast-font-family: "Times New Roman"; padding: 1pt;">myResource</span></i><span face=""Arial",sans-serif" style="font-size: 12pt; mso-fareast-font-family: "Times New Roman";">—A name that refers to the static resource.<o:p></o:p></span></li>
<li class="MsoNormal" style="background: rgb(250, 250, 249); color: #080707; line-height: normal; mso-list: l0 level1 lfo1; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; tab-stops: list .5in; text-align: justify;"><i><span style="background: rgb(248, 248, 248); border: 1pt solid rgb(221, 221, 221); color: #000814; font-family: Consolas; font-size: 12pt; mso-bidi-font-family: "Courier New"; mso-border-alt: solid #DDDDDD .75pt; mso-fareast-font-family: "Times New Roman"; padding: 1pt;">resourceReference</span></i><span face=""Arial",sans-serif" style="font-size: 12pt; mso-fareast-font-family: "Times New Roman";">—The name of the static resource.<o:p></o:p></span></li>
</ul>
<p class="MsoNormal" style="background: rgb(250, 250, 249); line-height: normal; margin-left: 0.5in; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; text-align: justify;"><span face=""Arial",sans-serif" style="color: #080707; font-size: 12pt; mso-fareast-font-family: "Times New Roman";">A static resource name can contain only
underscores and alphanumeric characters, and must be unique in your org. It must
begin with a letter, not include spaces, not end with an underscore, and not
contain two consecutive underscores.<o:p></o:p></span></p>
<ul type="disc">
<li class="MsoNormal" style="background: rgb(250, 250, 249); color: #080707; line-height: normal; mso-list: l0 level1 lfo1; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; tab-stops: list .5in; text-align: justify;"><i><span style="background: rgb(248, 248, 248); border: 1pt solid rgb(221, 221, 221); color: #000814; font-family: Consolas; font-size: 12pt; mso-bidi-font-family: "Courier New"; mso-border-alt: solid #DDDDDD .75pt; mso-fareast-font-family: "Times New Roman"; padding: 1pt;">namespace</span></i><span face=""Arial",sans-serif" style="font-size: 12pt; mso-fareast-font-family: "Times New Roman";">—If the static resource is in a managed package, this
value is the namespace of the managed package.</span></li></ul>
<p class="MsoNormal"><span face=""Arial",sans-serif" style="background: rgb(250, 250, 249); color: #080707;"><i>Let’s look at some sample code.</i></span></p><p class="MsoNormal"><span face=""Arial",sans-serif" style="background: rgb(250, 250, 249);"><i>Explanation</i></span></p><p class="MsoNormal"></p><ul style="text-align: left;"><li><span face=""Arial",sans-serif" style="background: rgb(250, 250, 249); color: #080707;"><i> Created static resource named 'Testphoto' .</i></span></li><li><span face=""Arial",sans-serif" style="background: rgb(250, 250, 249); color: #080707;"><i>Referred static resource in Javascript : </i></span><span style="color: #080707;"><i>@salesforce/resourceUrl/Testphoto</i></span></li></ul><p></p>
<p class="MsoNormal"><span face=""Arial",sans-serif" style="background: rgb(250, 250, 249); color: #080707;">html</span></p><p class="MsoNormal"><span face=""Arial",sans-serif" style="background: rgb(250, 250, 249); color: #080707;"></span></p><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: grey;"><</span><span style="color: #569cd6;">template</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">lightning-card</span> <span style="color: #9cdcfe;">title</span>=<span style="color: #ce9178;">"My image"</span> <span style="color: #9cdcfe;">icon-name</span>=<span style="color: #ce9178;">"custom:custom19"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"slds-m-around_medium"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">img</span> <span style="color: #9cdcfe;">src</span>=<span style="color: #ce9178;">{dispPhoto}</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">lightning-card</span><span style="color: grey;">></span></div><div><span style="color: grey;"></</span><span style="color: #569cd6;">template</span><span style="color: grey;">></span></div></div><p class="MsoNormal"><span face=""Arial",sans-serif" style="background: rgb(250, 250, 249); color: #080707;">Javascript</span></p><p class="MsoNormal"><span face=""Arial",sans-serif" style="background: rgb(250, 250, 249); color: #080707;"></span></p><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #c586c0;">import</span> { <span style="color: #9cdcfe;">LightningElement</span> } <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'lwc'</span>;</div><div><span style="color: #c586c0;">import</span> <span style="color: #9cdcfe;">Testphoto</span> <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'@salesforce/resourceUrl/Testphoto'</span></div><div><span style="color: #c586c0;">export</span> <span style="color: #c586c0;">default</span> <span style="color: #569cd6;">class</span> <span style="color: #4ec9b0;">StaticResourceAccess</span> <span style="color: #569cd6;">extends</span> <span style="color: #4ec9b0;">LightningElement</span> {</div><div> <span style="color: #9cdcfe;">dispPhoto</span> = <span style="color: #9cdcfe;">Testphoto</span>;</div><div>}</div></div><p class="MsoNormal"><span face="Arial, sans-serif" style="color: #080707;"><span style="background-color: #fafaf9;">xml</span></span></p><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: grey;"><?</span><span style="color: #569cd6;">xml</span><span style="color: #9cdcfe;"> version</span>=<span style="color: #ce9178;">"1.0"</span><span style="color: #9cdcfe;"> encoding</span>=<span style="color: #ce9178;">"UTF-8"</span><span style="color: grey;">?></span></div><div><span style="color: grey;"><</span><span style="color: #569cd6;">LightningComponentBundle</span> <span style="color: #9cdcfe;">xmlns</span>=<span style="color: #ce9178;">"http://soap.sforce.com/2006/04/metadata"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">apiVersion</span><span style="color: grey;">></span>50.0<span style="color: grey;"></</span><span style="color: #569cd6;">apiVersion</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">isExposed</span><span style="color: grey;">></span>true<span style="color: grey;"></</span><span style="color: #569cd6;">isExposed</span><span style="color: grey;">></span> </div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">targets</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">target</span><span style="color: grey;">></span>lightning__AppPage<span style="color: grey;"></</span><span style="color: #569cd6;">target</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">target</span><span style="color: grey;">></span>lightning__RecordPage<span style="color: grey;"></</span><span style="color: #569cd6;">target</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">target</span><span style="color: grey;">></span>lightning__HomePage<span style="color: grey;"></</span><span style="color: #569cd6;">target</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">targets</span><span style="color: grey;">></span></div><div><span style="color: grey;"></</span><span style="color: #569cd6;">LightningComponentBundle</span><span style="color: grey;">></span></div></div>Master Class http://www.blogger.com/profile/01852672912613116009noreply@blogger.com1tag:blogger.com,1999:blog-2963651217753251164.post-87663979358218276792021-01-10T03:05:00.003-08:002021-01-10T03:05:25.684-08:00<p><b><u><span style="color: red;">Usage of utility classes in Lightning web component:</span></u></b></p><p>In this demo, explaining about the usage of utility classes in Lwc. I have created utility class inside the component folder. Utility class name is "Utilityhelper".</p><p><b>Utility helper is referred in component of JavaScript Like below :</b></p><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><span style="color: #c586c0;">import</span> {<span style="color: #9cdcfe;">add</span>,<span style="color: #9cdcfe;">sub</span>} <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'./utilityhelper.js'</span>;</div><p>Complete code Snippet:</p><p><b>shareCode.html</b></p><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: grey;"><</span><span style="color: #569cd6;">template</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">lightning-card</span> <span style="color: #9cdcfe;">title</span>=<span style="color: #ce9178;">"Usage of Javascript Utility Classes"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">p</span><span style="color: grey;">></span> add : {resultFromHelper} <span style="color: grey;"></</span><span style="color: #569cd6;">p</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">p</span><span style="color: grey;">></span> sub : {substractVal} <span style="color: grey;"></</span><span style="color: #569cd6;">p</span><span style="color: grey;">></span></div><div><span style="color: grey;"></</span><span style="color: #569cd6;">lightning-card</span><span style="color: grey;">></span></div><div><span style="color: grey;"></</span><span style="color: #569cd6;">template</span><span style="color: grey;">></span></div></div><p><b>Javascript</b></p><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #c586c0;">import</span> { <span style="color: #9cdcfe;">LightningElement</span> } <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'lwc'</span>;</div><div><span style="color: #c586c0;">import</span> {<span style="color: #9cdcfe;">add</span>,<span style="color: #9cdcfe;">sub</span>} <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'./utilityhelper.js'</span>;</div><div><span style="color: #c586c0;">export</span> <span style="color: #c586c0;">default</span> <span style="color: #569cd6;">class</span> <span style="color: #4ec9b0;">UtilityComponent</span> <span style="color: #569cd6;">extends</span> <span style="color: #4ec9b0;">LightningElement</span> {</div><div> <span style="color: #9cdcfe;">resultFromHelper</span>;</div><div> <span style="color: #9cdcfe;">substractVal</span> ;</div><div> <span style="color: #569cd6;">constructor</span>(){</div><div> <span style="color: #569cd6;">super</span>();</div><div> <span style="color: #569cd6;">const</span> <span style="color: #4fc1ff;">result</span> = <span style="color: #dcdcaa;">add</span>(<span style="color: #b5cea8;">1</span>,<span style="color: #b5cea8;">9</span>);</div><div> <span style="color: #569cd6;">this</span>.<span style="color: #9cdcfe;">resultFromHelper</span>=<span style="color: #4fc1ff;">result</span>;</div><div> <span style="color: #569cd6;">this</span>.<span style="color: #9cdcfe;">substractVal</span>=<span style="color: #dcdcaa;">sub</span>();</div><div> }</div><div>}</div></div><p><b>xml</b></p><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: grey;"><?</span><span style="color: #569cd6;">xml</span><span style="color: #9cdcfe;"> version</span>=<span style="color: #ce9178;">"1.0"</span><span style="color: #9cdcfe;"> encoding</span>=<span style="color: #ce9178;">"UTF-8"</span><span style="color: grey;">?></span></div><div><span style="color: grey;"><</span><span style="color: #569cd6;">LightningComponentBundle</span> <span style="color: #9cdcfe;">xmlns</span>=<span style="color: #ce9178;">"http://soap.sforce.com/2006/04/metadata"</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">apiVersion</span><span style="color: grey;">></span>50.0<span style="color: grey;"></</span><span style="color: #569cd6;">apiVersion</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">isExposed</span><span style="color: grey;">></span>true<span style="color: grey;"></</span><span style="color: #569cd6;">isExposed</span><span style="color: grey;">></span> </div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">targets</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">target</span><span style="color: grey;">></span>lightning__AppPage<span style="color: grey;"></</span><span style="color: #569cd6;">target</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">target</span><span style="color: grey;">></span>lightning__RecordPage<span style="color: grey;"></</span><span style="color: #569cd6;">target</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">target</span><span style="color: grey;">></span>lightning__HomePage<span style="color: grey;"></</span><span style="color: #569cd6;">target</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">targets</span><span style="color: grey;">></span></div><div><span style="color: grey;"></</span><span style="color: #569cd6;">LightningComponentBundle</span><span style="color: grey;">></span></div></div><p><b>utilityhelper</b></p><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #6a9955;">/** helper class */</span></div><div><span style="color: #569cd6;">function</span> <span style="color: #dcdcaa;">add</span>(<span style="color: #9cdcfe;">a</span>,<span style="color: #9cdcfe;">b</span>){</div><div> <span style="color: #c586c0;">return</span> <span style="color: #9cdcfe;">a</span>+<span style="color: #9cdcfe;">b</span>;</div><br /><div>}</div><br /><div><span style="color: #569cd6;">function</span> <span style="color: #dcdcaa;">sub</span>(<span style="color: #9cdcfe;">a</span>,<span style="color: #9cdcfe;">b</span>){</div><div> <span style="color: #c586c0;">return</span> <span style="color: #b5cea8;">5</span>-<span style="color: #b5cea8;">3</span>; <span style="color: #6a9955;">//Hardcoded </span></div><div>}</div><div><span style="color: #c586c0;">export</span>{<span style="color: #dcdcaa;">add</span>,<span style="color: #dcdcaa;">sub</span>};</div></div>Master Class http://www.blogger.com/profile/01852672912613116009noreply@blogger.com0tag:blogger.com,1999:blog-2963651217753251164.post-36088052654944648272021-01-09T22:03:00.005-08:002021-01-09T22:05:59.543-08:00<p> <b><i><u><span style="color: red;">Calling Child Component Method Using Parent :</span></u></i></b></p><p>Example shows how to call child component method from parent using template.querySelector.</p><p></p><ul style="text-align: left;"><li><span style="background-color: white; font-family: Consolas, "Courier New", monospace; font-size: 14px; white-space: pre;">findLegend -> Method in childComponent</span></li><li><span style="background-color: white;"><span style="font-family: Consolas, Courier New, monospace;"><span style="font-size: 14px; white-space: pre;">Master Blaster Sachin Tendulkar -> Its parameters passing to findLegend Method</span></span></span></li><li><span style="background-color: white;"><span style="font-family: Consolas, Courier New, monospace;"><span style="font-size: 14px; white-space: pre;">In this child component method, findLegend method exposed as api method property.</span></span></span></li></ul><p></p><p><b>ParentComponent4.html</b></p><div style="background-color: white; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: maroon;"><template></span></div><div> <span style="color: maroon;"><lightning-card</span> <span style="color: red;">title</span>=<span style="color: blue;">"Calling child comp from Parent method"</span> <span style="color: red;">icon-name</span>=<span style="color: blue;">"custom:custom14"</span><span style="color: maroon;">></span></div><div> <span style="color: maroon;"><c-child-component4</span> <span style="color: maroon;">></c-child-component4></span></div><div> <span style="color: maroon;"><lightning-button</span> <span style="color: red;">label</span>=<span style="color: blue;">"Find Cricket Legend Name"</span></div><div> <span style="color: red;">onclick</span>=<span style="color: blue;">{fireEvent}</span></div><div> <span style="color: maroon;">></span></div><div> <span style="color: maroon;"></lightning-button></span></div><div><span style="color: maroon;"></lightning-card></span></div><div><span style="color: maroon;"></template></span></div></div><p><b>Js</b></p><div style="background-color: white; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: blue;">import</span> { LightningElement } <span style="color: blue;">from</span> <span style="color: #a31515;">'lwc'</span>;</div><br /><div><span style="color: blue;">export</span> <span style="color: blue;">default</span> <span style="color: blue;">class</span> ParentComponent4 <span style="color: blue;">extends</span> LightningElement {</div><div> <span style="color: green;">//Calling child method </span></div><div> fireEvent(){</div><div> <span style="color: green;">//Calling child method from parent</span></div><div> <span style="color: blue;">this</span>.template.querySelector(<span style="color: #a31515;">"c-child-component4 "</span>).findLegend(<span style="color: #a31515;">'Master Blaster Sachin Tendulkar'</span>);</div><br /><div> }</div><div>}</div></div><p><b>xml:</b></p><div style="background-color: white; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: maroon;"><?xml</span><span style="color: red;"> version</span>=<span style="color: blue;">"1.0"</span><span style="color: red;"> encoding</span>=<span style="color: blue;">"UTF-8"</span><span style="color: maroon;">?></span></div><div><span style="color: maroon;"><LightningComponentBundle</span> <span style="color: red;">xmlns</span>=<span style="color: blue;">"http://soap.sforce.com/2006/04/metadata"</span><span style="color: maroon;">></span></div><div> <span style="color: maroon;"><apiVersion></span>50.0<span style="color: maroon;"></apiVersion></span></div><div> <span style="color: maroon;"><isExposed></span>true<span style="color: maroon;"></isExposed></span> </div><div> <span style="color: maroon;"><targets></span></div><div> <span style="color: maroon;"><target></span>lightning__AppPage<span style="color: maroon;"></target></span></div><div> <span style="color: maroon;"><target></span>lightning__RecordPage<span style="color: maroon;"></target></span></div><div> <span style="color: maroon;"><target></span>lightning__HomePage<span style="color: maroon;"></target></span></div><div> <span style="color: maroon;"></targets></span></div><div><span style="color: maroon;"></LightningComponentBundle></span></div></div><p><b>childComponent4.html</b></p><div style="background-color: white; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: maroon;"><template></span></div><div> </div><div> <span style="color: maroon;"><p></span> Do you would like to know whos the legend of cricket? <span style="color: maroon;"></p></span> <span style="color: maroon;"><br/></span> </div><div> <span style="color: maroon;"><b></span> Click on below button to get Legend Name<span style="color: maroon;"></b></span> <span style="color: maroon;"><br/></span> </div><div> <span style="color: maroon;"><p></span> Legend Name: <span style="color: maroon;"><b></span> {cricketerName} <span style="color: maroon;"></b></p></span></div><div><span style="color: maroon;"></template></span></div></div><p><b>Js</b></p><div style="background-color: white; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: blue;">import</span> { LightningElement,api } <span style="color: blue;">from</span> <span style="color: #a31515;">'lwc'</span>;</div><br /><div><span style="color: blue;">export</span> <span style="color: blue;">default</span> <span style="color: blue;">class</span> ChildComponent4 <span style="color: blue;">extends</span> LightningElement {</div><div> @api cricketer;</div><div> cricketerName;</div><div> <span style="color: green;">//Decorate method with apI property</span></div><div> <span style="color: green;">//Publicly expose this method</span></div><div> <span style="color: green;">//Otherwise it becomes private method</span></div><div> @api findLegend(Name){</div><div> <span style="color: blue;">this</span>.cricketerName =Name;</div><div> }</div><div>}</div></div><p><b>xml</b></p><div style="background-color: white; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: maroon;"><?xml</span><span style="color: red;"> version</span>=<span style="color: blue;">"1.0"</span><span style="color: red;"> encoding</span>=<span style="color: blue;">"UTF-8"</span><span style="color: maroon;">?></span></div><div><span style="color: maroon;"><LightningComponentBundle</span> <span style="color: red;">xmlns</span>=<span style="color: blue;">"http://soap.sforce.com/2006/04/metadata"</span><span style="color: maroon;">></span></div><div> <span style="color: maroon;"><apiVersion></span>50.0<span style="color: maroon;"></apiVersion></span></div><div> <span style="color: maroon;"><isExposed></span>true<span style="color: maroon;"></isExposed></span> </div><div> <span style="color: maroon;"><targets></span></div><div> <span style="color: maroon;"><target></span>lightning__AppPage<span style="color: maroon;"></target></span></div><div> <span style="color: maroon;"><target></span>lightning__RecordPage<span style="color: maroon;"></target></span></div><div> <span style="color: maroon;"><target></span>lightning__HomePage<span style="color: maroon;"></target></span></div><div> <span style="color: maroon;"></targets></span></div><div><span style="color: maroon;"></LightningComponentBundle></span></div></div>Master Class http://www.blogger.com/profile/01852672912613116009noreply@blogger.com0tag:blogger.com,1999:blog-2963651217753251164.post-26448087994440504592021-01-09T08:11:00.006-08:002021-01-09T23:10:02.194-08:00<p> <b style="text-align: justify;"><span style="font-size: 16pt;">Configuration File Tags</span></b></p>
<p style="text-align: justify;"><b>apiVersion</b>:- A double value that binds the component to a Salesforce
API version. To check the current version, take help of this knowledge article.<o:p></o:p></p><p style="text-align: justify;"><b>description</b>:-A short
description of the component, usually a single sentence. Appears in list views,
like the list of Lightning Components in Setup, and as a tooltip in the
Lightning App Builder and in Community Builder.<o:p></o:p></p><p style="text-align: justify;">When you hover your mouse to the custom component deployed
to the org, you can see the description with the label.<o:p></o:p></p><p style="text-align: justify;"><b>isExposed</b>:-A Boolean
value. Exposes 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.<o:p></o:p></p><p style="text-align: justify;"><b>masterLabel</b>:-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.<o:p></o:p></p><p style="text-align: justify;"><b>targetConfig</b>:- It is subtag of targetConfigs and used for different
page type configuration. For Example:-<o:p></o:p></p><p style="text-align: justify;"><targetConfig targets=”lightning__RecordPage”><o:p></o:p></p><p style="text-align: justify;"><targetConfig targets=”lightning__AppPage,
lightning_HomePage”><o:p></o:p></p><p style="text-align: justify;"><b>targets</b>:-The
targets attribute value that you specify must match one or more of the page
types that you listed under <targets> for the component. It Supports the
property and objects subtags.<o:p></o:p></p><p style="text-align: justify;"><b>property</b>:-Specifies
a public property of a component that can be set in Lightning App Builder or
Community Builder. The component author defines the property in the component’s
JavaScript class using the @apidecorator.<o:p></o:p></p><p style="text-align: justify;"><b>objects</b>:-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.<o:p></o:p></p><p style="text-align: justify;"> <b>Note</b><o:p></o:p></p><p style="text-align: justify;">object:-Defines which objects the component is
supported for. Use one object tag for each supported object. You can’t use ‘*’
to denote all objects.<o:p></o:p></p><p style="text-align: justify;">
</p><p class="MsoNormal"><o:p> </o:p></p><p><b>Html</b></p><div style="background-color: #002451; color: white; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #ff9da4;"><template></span></div><div> <span style="color: #ff9da4;"><div class=</span><span style="color: #d1f1a9;">"slds-m-around_small"</span><span style="color: #ff9da4;">></span></div><div> <span style="color: #ff9da4;"><strong></span></div><div> Metadata File Example {message} <span style="color: #ff9da4;"><br/></span></div><div> page no : {pageno}</div><div> <span style="color: #ff9da4;"></strong></span></div><div> <span style="color: #ff9da4;"></div></span></div><div><span style="color: #ff9da4;"></template></span></div></div><p><b>Javascript</b></p><div style="background-color: #002451; color: white; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #ebbbff;">import</span> { <span style="color: #ff9da4;">LightningElement</span>,<span style="color: #ff9da4;">api</span> } <span style="color: #ebbbff;">from</span> <span style="color: #d1f1a9;">'lwc'</span>;</div><br /><div><span style="color: #ebbbff;">export</span> <span style="color: #ebbbff;">default</span> <span style="color: #ebbbff;">class</span> <span style="color: #ffeead;">MetaExample</span> <span style="color: #ebbbff;">extends</span> <span style="color: #d1f1a9;">LightningElement</span> {</div><div> @<span style="color: #ff9da4;">api</span> <span style="color: #ff9da4;">message</span>;</div><div> @<span style="color: #ff9da4;">api</span> <span style="color: #ff9da4;">pageno</span>;</div><div>}</div></div><p><b>xml</b></p><div style="background-color: #002451; color: white; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #ff9da4;"><?xml version=</span><span style="color: #d1f1a9;">"1.0"</span><span style="color: #ff9da4;"> encoding=</span><span style="color: #d1f1a9;">"UTF-8"</span><span style="color: #ff9da4;">?></span></div><div><span style="color: #ff9da4;"><LightningComponentBundle xmlns=</span><span style="color: #d1f1a9;">"http://soap.sforce.com/2006/04/metadata"</span><span style="color: #ff9da4;">></span></div><div> <span style="color: #ff9da4;"><apiVersion></span>50.0<span style="color: #ff9da4;"></apiVersion></span></div><div> <span style="color: #ff9da4;"><isExposed></span>true<span style="color: #ff9da4;"></isExposed></span></div><div> <span style="color: #ff9da4;"><masterLabel></span>Metadata File Configuraton<span style="color: #ff9da4;"></masterLabel></span></div><div> <span style="color: #ff9da4;"><targets></span></div><div> <span style="color: #ff9da4;"><target></span>lightning__AppPage<span style="color: #ff9da4;"></target></span></div><div> <span style="color: #ff9da4;"><target></span>lightning__RecordPage<span style="color: #ff9da4;"></target></span></div><div> <span style="color: #ff9da4;"><target></span>lightning__HomePage<span style="color: #ff9da4;"></target></span></div><div> <span style="color: #ff9da4;"><target></span>lightningCommunity__Default<span style="color: #ff9da4;"></target></span></div><div> <span style="color: #ff9da4;"><target></span>lightningCommunity__Page<span style="color: #ff9da4;"></target></span></div><div> <span style="color: #ff9da4;"><target></span>lightning__Tab<span style="color: #ff9da4;"></target></span><span style="color: #7285b7;"><!-- Winter 20 --></span></div><div> <span style="color: #ff9da4;"><target></span>lightning__Inbox<span style="color: #ff9da4;"></target></span></div><div> <span style="color: #ff9da4;"></targets></span></div><div> <span style="color: #ff9da4;"><targetConfigs></span></div><div> <span style="color: #ff9da4;"><targetConfig targets=</span><span style="color: #d1f1a9;">"lightning__RecordPage"</span><span style="color: #ff9da4;"> ></span></div><div> <span style="color: #ff9da4;"><property name=</span><span style="color: #d1f1a9;">"message"</span><span style="color: #ff9da4;"> type=</span><span style="color: #d1f1a9;">"String"</span><span style="color: #ff9da4;"> label=</span><span style="color: #d1f1a9;">"Welcome Message"</span><span style="color: #ff9da4;">/></span></div><div> <span style="color: #ff9da4;"><property name=</span><span style="color: #d1f1a9;">"pageno"</span><span style="color: #ff9da4;"> type=</span><span style="color: #d1f1a9;">"Integer"</span><span style="color: #ff9da4;"> label=</span><span style="color: #d1f1a9;">"Page No"</span><span style="color: #ff9da4;"> /></span></div><div> <span style="color: #ff9da4;"><objects></span></div><div> <span style="color: #ff9da4;"><object></span>Contact<span style="color: #ff9da4;"></object></span></div><div> <span style="color: #ff9da4;"></objects></span></div><div> <span style="color: #ff9da4;"></targetConfig></span></div><div> <span style="color: #ff9da4;"></targetConfigs></span></div><div><span style="color: #ff9da4;"></LightningComponentBundle></span></div></div><p><br /></p><p><br /></p>Master Class http://www.blogger.com/profile/01852672912613116009noreply@blogger.com2tag:blogger.com,1999:blog-2963651217753251164.post-89925803348393857332021-01-09T06:27:00.011-08:002023-06-24T22:07:27.094-07:00<p> </p><h1 class="slds-text-heading_large" componentreference-externaldocumentationcontent_externaldocumentationcontent="" style="box-sizing: border-box; font-family: "Salesforce Sans", Arial, sans-serif; font-size: 1.75rem; line-height: 1.25; margin: 0px 0px 0.75rem; padding: 0px;"><span componentreference-externaldocumentationcontent_externaldocumentationcontent="" id="topic-title" style="box-sizing: border-box; color: red;"><i style="background-color: white;"> </i></span><b><i><span face=""Arial",sans-serif" style="background: white; color: red; font-size: 14pt; mso-fareast-font-family: "Times New Roman"; mso-font-kerning: 18.0pt;">Component
Lifecycle</span></i></b></h1>
<p class="MsoNormal" style="text-align: justify;"><span style="font-size: 12.0pt; line-height: 107%;">Lightning web components have a lifecycle managed by the
framework. The framework creates components, inserts them into the DOM, renders
them, and removes them from the DOM. It also monitors components for property
changes. Generally, components don’t need to call these lifecycle hooks, but it
is possible.<o:p></o:p></span></p><p class="MsoNormal" style="text-align: justify;"><b><span style="font-size: 12.0pt; line-height: 107%;">Run Code When a Component Is Created<o:p></o:p></span></b></p><p class="MsoNormal" style="text-align: justify;"><span style="font-size: 12.0pt; line-height: 107%;">The constructor() method fires when a component instance is
created. Don’t add attributes to the host element during construction. You can
add attributes to the host element in any other lifecycle hook.<o:p></o:p></span></p><p class="MsoNormal" style="text-align: justify;"><b><span style="font-size: 12.0pt; line-height: 107%;">Run Code When a Component Is Inserted or Removed from the DOM<o:p></o:p></span></b></p><p class="MsoNormal" style="text-align: justify;"><span style="font-size: 12.0pt; line-height: 107%;">The connectedCallback() lifecycle hook fires when a component
is inserted into the DOM. The disconnectedCallback() lifecycle hook fires when
a component is removed from the DOM.<o:p></o:p></span></p><p class="MsoNormal" style="text-align: justify;"><b><span style="font-size: 12.0pt; line-height: 107%;">Run Code When a Component Renders<o:p></o:p></span></b></p><p class="MsoNormal" style="text-align: justify;"><span style="font-size: 12.0pt; line-height: 107%;">The renderedCallback() is unique to Lightning Web Components.
Use it to perform logic after a component has finished the rendering phase.<o:p></o:p></span></p><p class="MsoNormal" style="text-align: justify;"><b><span style="font-size: 12.0pt; line-height: 107%;">Handle Component Errors<o:p></o:p></span></b></p><p class="MsoNormal">
</p><p class="MsoNormal" style="text-align: justify;"><span style="font-size: 12.0pt; line-height: 107%;">The errorCallback() is unique to Lightning Web Components.
Implement it to create an error boundary component that captures errors in all
the descendent components in its tree. It captures errors that occur in the
descendant's lifecycle hooks or during an event handler declared in an HTML
template. You can code the error boundary component to log stack information
and render an alternative view to tell users what happened and what to do next.<o:p></o:p></span></p><p class="MsoNormal" style="background: rgb(250, 250, 249); line-height: normal; margin-bottom: 3.0pt; margin-left: .5in; margin-right: 0in; margin-top: 0in; margin: 0in 0in 3pt 0.5in;"><i><span face=""Arial",sans-serif" style="background: white; color: #909090; font-size: 14pt; mso-fareast-font-family: "Times New Roman";"><br /></span></i></p><div class="separator" style="clear: both; text-align: center;"><ul componentreference-externaldocumentationcontent_externaldocumentationcontent="" style="background-color: #fafaf9; box-sizing: border-box; color: #080707; font-family: "Salesforce Sans", Arial, sans-serif; font-size: 16px; list-style-image: initial; list-style-position: initial; margin-block-start: 1em; margin: 0px 0px 0.75rem 1.5rem; padding: 0px; text-align: left;"><li class="slds-p-bottom_small" componentreference-codehighlighter_codehighlighter="" componentreference-externaldocumentationcontent_externaldocumentationcontent="" style="box-sizing: border-box; padding-bottom: 0.75rem;"><b style="background-color: transparent;">html</b></li></ul><div style="text-align: left;"><div style="background-color: #002451; color: white; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #ff9da4;"><template></span></div><div> <span style="color: #ff9da4;"><p></span>Test Hook example<span style="color: #ff9da4;"></p></span></div><div> <span style="color: #ff9da4;"><lightning-card title=</span><span style="color: #d1f1a9;">"Life cycle hooks"</span><span style="color: #ff9da4;"> icon-name=</span><span style="color: #d1f1a9;">"custom:custom14"</span><span style="color: #ff9da4;">></span></div><div> {msg}</div><div> <span style="color: #ff9da4;"></lightning-card></span></div><div><span style="color: #ff9da4;"></template></span></div></div></div><div style="text-align: left;"><span face="Salesforce Sans, Arial, sans-serif" style="color: #080707;"><br /></span></div><div style="text-align: left;"><span face="Salesforce Sans, Arial, sans-serif" style="color: #080707;"><br /></span></div><div style="text-align: left;"><span face="Salesforce Sans, Arial, sans-serif" style="color: #080707;"><b>Javascript</b></span></div><div style="text-align: left;"><span face="Salesforce Sans, Arial, sans-serif" style="color: #080707;"><br /></span></div><div style="text-align: left;"><div style="background-color: #002451; color: white; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #ebbbff;">import</span> { <span style="color: #ff9da4;">LightningElement</span> } <span style="color: #ebbbff;">from</span> <span style="color: #d1f1a9;">'lwc'</span>;</div><br /><div><span style="color: #ebbbff;">export</span> <span style="color: #ebbbff;">default</span> <span style="color: #ebbbff;">class</span> <span style="color: #ffeead;">HooksExample</span> <span style="color: #ebbbff;">extends</span> <span style="color: #d1f1a9;">LightningElement</span> {</div><div> <span style="color: #ff9da4;">msg</span><span style="color: #99ffff;">=</span><span style="color: #d1f1a9;">'annappa'</span>;</div><div> <span style="color: #7285b7;">//When component is created</span></div><div> <span style="color: #ebbbff;">constructor</span>(){</div><div> <span style="color: #ff9da4;">super</span>();</div><div> <span style="color: #ff9da4;">console</span><span style="color: #bbdaff;">.</span><span style="color: #bbdaff;">log</span>(<span style="color: #d1f1a9;">'inside constructor'</span>);</div><div> <span style="color: #ff9da4;">this</span>.<span style="color: #ff9da4;">msg</span> <span style="color: #99ffff;">=</span> <span style="color: #ff9da4;">this</span>.<span style="color: #ff9da4;">msg</span><span style="color: #99ffff;">+</span><span style="color: #d1f1a9;">''</span><span style="color: #99ffff;">+</span><span style="color: #d1f1a9;">'PH'</span>;</div><br /><div> }</div><div> <span style="color: #7285b7;">//Component is inserted from DOM</span></div><div> <span style="color: #bbdaff;">connectedCallback</span>(){</div><div> <span style="color: #ff9da4;">console</span><span style="color: #bbdaff;">.</span><span style="color: #bbdaff;">log</span>(<span style="color: #d1f1a9;">'connected callback'</span>);</div><br /><div> }</div><div> <span style="color: #7285b7;">//Component is disconnected from DOM</span></div><div> <span style="color: #bbdaff;">disconnectedCallback</span>(){</div><div> <span style="color: #ff9da4;">console</span><span style="color: #bbdaff;">.</span><span style="color: #bbdaff;">log</span>(<span style="color: #d1f1a9;">'disconnected callback'</span>);</div><br /><div> }</div><div> <span style="color: #7285b7;">//Run a component when Component renders</span></div><div> <span style="color: #bbdaff;">renderedCallback</span>(){</div><div> <span style="color: #ff9da4;">console</span><span style="color: #bbdaff;">.</span><span style="color: #bbdaff;">log</span>(<span style="color: #d1f1a9;">'rendered callback'</span>);</div><div> }</div><div> <span style="color: #7285b7;">//Handle component error</span></div><div> <span style="color: #bbdaff;">errorCallback</span>(<span style="color: #ffc58f;">error</span>,<span style="color: #ffc58f;">stack</span>){</div><div> <span style="color: #ff9da4;">console</span><span style="color: #bbdaff;">.</span><span style="color: #bbdaff;">error</span>(<span style="color: #d1f1a9;">'error'</span>);</div><br /><div> }</div><div>}</div></div></div><div style="text-align: left;"><br /></div><div style="text-align: left;"><span face="Salesforce Sans, Arial, sans-serif" style="color: #080707;"><b>xml</b></span></div><div style="text-align: left;"><div style="background-color: #002451; color: white; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #ff9da4;"><?xml version=</span><span style="color: #d1f1a9;">"1.0"</span><span style="color: #ff9da4;"> encoding=</span><span style="color: #d1f1a9;">"UTF-8"</span><span style="color: #ff9da4;">?></span></div><div><span style="color: #ff9da4;"><LightningComponentBundle xmlns=</span><span style="color: #d1f1a9;">"http://soap.sforce.com/2006/04/metadata"</span><span style="color: #ff9da4;">></span></div><div> <span style="color: #ff9da4;"><apiVersion></span>50.0<span style="color: #ff9da4;"></apiVersion></span></div><div> <span style="color: #ff9da4;"><isExposed></span>true<span style="color: #ff9da4;"></isExposed></span> </div><div> <span style="color: #ff9da4;"><targets></span></div><div> <span style="color: #ff9da4;"><target></span>lightning__AppPage<span style="color: #ff9da4;"></target></span></div><div> <span style="color: #ff9da4;"><target></span>lightning__RecordPage<span style="color: #ff9da4;"></target></span></div><div> <span style="color: #ff9da4;"><target></span>lightning__HomePage<span style="color: #ff9da4;"></target></span></div><div> <span style="color: #ff9da4;"></targets></span></div><div><span style="color: #ff9da4;"></LightningComponentBundle></span></div></div></div><div style="text-align: left;"><span face="Salesforce Sans, Arial, sans-serif" style="color: #080707;"><br /></span></div><div style="text-align: left;"><span face="Salesforce Sans, Arial, sans-serif" style="color: #080707;"><br /></span></div><div style="text-align: left;"><span face="Salesforce Sans, Arial, sans-serif" style="color: #080707;"><br /></span></div><div style="text-align: left;"><span face="Salesforce Sans, Arial, sans-serif" style="color: #080707;"><br /></span></div></div>Master Class http://www.blogger.com/profile/01852672912613116009noreply@blogger.com0tag:blogger.com,1999:blog-2963651217753251164.post-90776697359003638802021-01-09T03:25:00.006-08:002021-01-09T03:25:41.799-08:00<p><b><u> Getter property in Lightning web components</u></b></p><p>1. Use getter property if you want to modify the property before you use in template</p><p>2. Use getter property when you don't want to create a variable</p><p><b>html</b></p><div style="background-color: #002451; color: white; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #ff9da4;"><template></span></div><div> <span style="color: #ff9da4;"><lightning-card title=</span><span style="color: #d1f1a9;">"Getter Property"</span><span style="color: #ff9da4;"> icon-name=</span><span style="color: #d1f1a9;">"custom:custom14"</span><span style="color: #ff9da4;">></span></div><div> <span style="color: #ff9da4;"><p></span> Passing variable without declaring variable : {passProperty}<span style="color: #ff9da4;"></p></span></div><div> <span style="color: #ff9da4;"><p></span> changemessage : {changemessage}<span style="color: #ff9da4;"></p></span></div><div> <span style="color: #ff9da4;"></lightning-card></span></div><div><span style="color: #ff9da4;"></template></span></div></div><p><b>Js</b></p><div style="background-color: #002451; color: white; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #ebbbff;">import</span> { <span style="color: #ff9da4;">LightningElement</span> } <span style="color: #ebbbff;">from</span> <span style="color: #d1f1a9;">'lwc'</span>;</div><br /><div><span style="color: #ebbbff;">export</span> <span style="color: #ebbbff;">default</span> <span style="color: #ebbbff;">class</span> <span style="color: #ffeead;">GetProperty</span> <span style="color: #ebbbff;">extends</span> <span style="color: #d1f1a9;">LightningElement</span> {</div><div> <span style="color: #ff9da4;">msg</span><span style="color: #99ffff;">=</span><span style="color: #d1f1a9;">'Test'</span>;</div><div> <span style="color: #ebbbff;">get</span> <span style="color: #ff9da4;">passProperty</span>(){</div><div> <span style="color: #ebbbff;">return</span> <span style="color: #d1f1a9;">'Without Declaring Variable'</span>;</div><div> }</div><div> <span style="color: #ebbbff;">get</span> <span style="color: #ff9da4;">changemessage</span>(){</div><div> <span style="color: #ebbbff;">return</span> <span style="color: #ff9da4;">this</span>.<span style="color: #ff9da4;">msg</span><span style="color: #99ffff;">+</span><span style="color: #d1f1a9;">'-->'</span><span style="color: #99ffff;">+</span><span style="color: #d1f1a9;">'add value'</span>;</div><div> }</div><div>}</div></div><p><b>xml</b></p><div style="background-color: #002451; color: white; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #ff9da4;"><?xml version=</span><span style="color: #d1f1a9;">"1.0"</span><span style="color: #ff9da4;"> encoding=</span><span style="color: #d1f1a9;">"UTF-8"</span><span style="color: #ff9da4;">?></span></div><div><span style="color: #ff9da4;"><LightningComponentBundle xmlns=</span><span style="color: #d1f1a9;">"http://soap.sforce.com/2006/04/metadata"</span><span style="color: #ff9da4;">></span></div><div> <span style="color: #ff9da4;"><apiVersion></span>50.0<span style="color: #ff9da4;"></apiVersion></span></div><div> <span style="color: #ff9da4;"><isExposed></span>true<span style="color: #ff9da4;"></isExposed></span> </div><div> <span style="color: #ff9da4;"><targets></span></div><div> <span style="color: #ff9da4;"><target></span>lightning__AppPage<span style="color: #ff9da4;"></target></span></div><div> <span style="color: #ff9da4;"><target></span>lightning__RecordPage<span style="color: #ff9da4;"></target></span></div><div> <span style="color: #ff9da4;"><target></span>lightning__HomePage<span style="color: #ff9da4;"></target></span></div><div> <span style="color: #ff9da4;"></targets></span></div><div><span style="color: #ff9da4;"></LightningComponentBundle></span></div></div><p><b><br /></b></p>Master Class http://www.blogger.com/profile/01852672912613116009noreply@blogger.com0tag:blogger.com,1999:blog-2963651217753251164.post-6105686267299886862021-01-04T06:36:00.007-08:002021-01-04T06:45:10.052-08:00<p><b> Render Multiple Templates</b></p><p>You may want to render a component with more than one look and feel, but not want to mix the HTML in one file. For example, one version of the component is plain, and another version displays an image and extra text. In this case, you can import multiple HTML templates and write business logic that renders them conditionally. This pattern is similar to the code splitting used in some JavaScript frameworks.</p><p><br /></p><p>Note</p><p><b>NOTE Although it’s possible for a component to render multiple templates, we recommend using an if:true|false directive to render nested templates conditionally instead.</b></p><p>Create multiple HTML files in the component bundle. Import them all and add a condition in the render() method to return the correct template depending on the component’s state. The returned value from the render() method must be a template reference, which is the imported default export from an HTML file.</p><p><br /></p><p>In this example, the template references are templateOne and templateTwo.</p><p><b>miscMultipleTemplates.js</b></p><div><div style="background-color: #002451; color: white; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #ebbbff;">import</span> { <span style="color: #ff9da4;">LightningElement</span> } <span style="color: #ebbbff;">from</span> <span style="color: #d1f1a9;">'lwc'</span>;</div><div><span style="color: #ebbbff;">import</span> <span style="color: #ff9da4;">templateOne</span> <span style="color: #ebbbff;">from</span> <span style="color: #d1f1a9;">'./templateOne.html'</span>;</div><div><span style="color: #ebbbff;">import</span> <span style="color: #ff9da4;">templateTwo</span> <span style="color: #ebbbff;">from</span> <span style="color: #d1f1a9;">'./templateTwo.html'</span>;</div><br /><div><span style="color: #ebbbff;">export</span> <span style="color: #ebbbff;">default</span> <span style="color: #ebbbff;">class</span> <span style="color: #ffeead;">MiscMultipleTemplates</span> <span style="color: #ebbbff;">extends</span> <span style="color: #d1f1a9;">LightningElement</span> {</div><br /><div> <span style="color: #ff9da4;">templateOne</span> <span style="color: #99ffff;">=</span> <span style="color: #ffc58f;">true</span>;</div><br /><div> <span style="color: #bbdaff;">render</span>() {</div><div> <span style="color: #ebbbff;">return</span> <span style="color: #ff9da4;">this</span>.<span style="color: #ff9da4;">templateOne</span> <span style="color: #99ffff;">?</span> <span style="color: #ff9da4;">templateOne</span> <span style="color: #99ffff;">:</span> <span style="color: #ff9da4;">templateTwo</span>;</div><div> }</div><br /><div> <span style="color: #bbdaff;">switchTemplate</span>(){ </div><div> <span style="color: #ff9da4;">this</span>.<span style="color: #ff9da4;">templateOne</span> <span style="color: #99ffff;">=</span> <span style="color: #99ffff;">!</span><span style="color: #ff9da4;">this</span>.<span style="color: #ff9da4;">templateOne</span>; </div><div> }</div><div>}</div></div></div><p componentreference-codehighlighter_codehighlighter="" componentreference-externaldocumentationcontent_externaldocumentationcontent="" style="background-color: #fafaf9; box-sizing: border-box; color: #080707; font-family: "Salesforce Sans", Arial, sans-serif; font-size: 16px; margin: 0px 0px 0.75rem; padding: 0px;"><b>xml file:</b></p><div style="background-color: #002451; color: white; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #ff9da4;"><?xml version=</span><span style="color: #d1f1a9;">"1.0"</span><span style="color: #ff9da4;"> encoding=</span><span style="color: #d1f1a9;">"UTF-8"</span><span style="color: #ff9da4;"> ?></span></div><div><span style="color: #ff9da4;"><LightningComponentBundle xmlns=</span><span style="color: #d1f1a9;">"http://soap.sforce.com/2006/04/metadata"</span><span style="color: #ff9da4;">></span></div><div> <span style="color: #ff9da4;"><apiVersion></span>47.0<span style="color: #ff9da4;"></apiVersion></span></div><div> <span style="color: #ff9da4;"><isExposed></span>true<span style="color: #ff9da4;"></isExposed></span> </div><div> <span style="color: #ff9da4;"><targets></span></div><div> <span style="color: #ff9da4;"><target></span>lightning__AppPage<span style="color: #ff9da4;"></target></span></div><div> <span style="color: #ff9da4;"><target></span>lightning__RecordPage<span style="color: #ff9da4;"></target></span></div><div> <span style="color: #ff9da4;"><target></span>lightning__HomePage<span style="color: #ff9da4;"></target></span></div><div> <span style="color: #ff9da4;"></targets></span></div><div><span style="color: #ff9da4;"></LightningComponentBundle></span></div></div><p componentreference-codehighlighter_codehighlighter="" componentreference-externaldocumentationcontent_externaldocumentationcontent="" style="background-color: #fafaf9; box-sizing: border-box; color: #080707; font-family: "Salesforce Sans", Arial, sans-serif; font-size: 16px; margin: 0px 0px 0.75rem; padding: 0px;"><b><br /></b></p><p componentreference-codehighlighter_codehighlighter="" componentreference-externaldocumentationcontent_externaldocumentationcontent="" style="background-color: #fafaf9; box-sizing: border-box; color: #080707; font-family: "Salesforce Sans", Arial, sans-serif; font-size: 16px; margin: 0px 0px 0.75rem; padding: 0px;"><b>templateTwo.html</b></p><div style="background-color: #002451; color: white; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #7285b7;"><!-- templateTwo.html --></span></div><div><span style="color: #ff9da4;"><template></span></div><div> <span style="color: #ff9da4;"><lightning-card title=</span><span style="color: #d1f1a9;">"Template Two"</span><span style="color: #ff9da4;">></span></div><div> <span style="color: #ff9da4;"><div></span></div><div> This is template two.</div><div> <span style="color: #ff9da4;"></div></span></div><div> <span style="color: #ff9da4;"><p class=</span><span style="color: #d1f1a9;">"margin-vertical-small"</span><span style="color: #ff9da4;">></span></div><div> <span style="color: #ff9da4;"><lightning-button label=</span><span style="color: #d1f1a9;">"Switch Templates"</span><span style="color: #ff9da4;"> </span></div><div><span style="color: #ff9da4;"> onclick=</span><span style="color: #d1f1a9;">{</span><span style="color: #ff9da4;">switchTemplate</span><span style="color: #d1f1a9;">}</span><span style="color: #ff9da4;">></span></div><div> <span style="color: #ff9da4;"></lightning-button></span> </div><div> <span style="color: #ff9da4;"></p></span></div><div> <span style="color: #ff9da4;"></lightning-card></span></div><div><span style="color: #ff9da4;"></template></span></div></div><p componentreference-codehighlighter_codehighlighter="" componentreference-externaldocumentationcontent_externaldocumentationcontent="" style="background-color: #fafaf9; box-sizing: border-box; color: #080707; font-family: "Salesforce Sans", Arial, sans-serif; font-size: 16px; margin: 0px 0px 0.75rem; padding: 0px;"><br /></p><p componentreference-codehighlighter_codehighlighter="" componentreference-externaldocumentationcontent_externaldocumentationcontent="" style="background-color: #fafaf9; box-sizing: border-box; color: #080707; font-family: "Salesforce Sans", Arial, sans-serif; font-size: 16px; margin: 0px 0px 0.75rem; padding: 0px;"><b>templateOne.html</b></p><div style="background-color: #002451; color: white; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #7285b7;"><!-- templateOne.html --></span></div><div><span style="color: #ff9da4;"><template></span></div><div> <span style="color: #ff9da4;"><lightning-card title=</span><span style="color: #d1f1a9;">"Template One"</span><span style="color: #ff9da4;"> icon-name=</span><span style="color: #d1f1a9;">"custom:custom14"</span><span style="color: #ff9da4;">></span></div><div> <span style="color: #ff9da4;"><div></span></div><div> This is template one.</div><div> <span style="color: #ff9da4;"></div></span></div><div> <span style="color: #ff9da4;"><p class=</span><span style="color: #d1f1a9;">"margin-vertical-small"</span><span style="color: #ff9da4;">></span></div><div> <span style="color: #ff9da4;"><lightning-button label=</span><span style="color: #d1f1a9;">"Switch Templates"</span><span style="color: #ff9da4;"> </span></div><div><span style="color: #ff9da4;"> onclick=</span><span style="color: #d1f1a9;">{</span><span style="color: #ff9da4;">switchTemplate</span><span style="color: #d1f1a9;">}</span><span style="color: #ff9da4;">></span></div><div> <span style="color: #ff9da4;"></lightning-button></span> </div><div> <span style="color: #ff9da4;"></p></span></div><div> <span style="color: #ff9da4;"></lightning-card></span></div><div><span style="color: #ff9da4;"></template></span></div><div><br /></div></div>Master Class http://www.blogger.com/profile/01852672912613116009noreply@blogger.com0tag:blogger.com,1999:blog-2963651217753251164.post-53045138791905567292020-12-19T03:36:00.006-08:002020-12-19T03:40:47.854-08:00<p><u><b><span style="color: red;">Lightning components: can helpers call other helpers</span></b></u></p><p>You can definitely call another function within the same object using the this keyword. Below Example doesnt make sense but it demonstrates the functionality of code</p><p><b>Lightning component : </b></p><p><aura:component ></p><p> <input type="button" onclick="{!c.buttonClicked}" value="Click Me" id="myButton" /></p><p></aura:component></p><p><b>Controller :</b></p><p>({</p><p> buttonClicked : function(component, event, helper) {</p><p> helper.callHelper(component, event.target.id);</p><p> }</p><p>})</p><p><b>Helper:</b></p><p> ({</p><p> callHelper : function(component, buttonId) </p><p> {</p><p> console.log('call1',buttonId);</p><p> this.helper1(component, buttonId,'Test'); </p><p> },</p><p> helper1 : function(component, buttonId, newLabel)</p><p> {</p><p> console.log('call2',buttonId);</p><p> console.log('call3',newLabel);</p><p> }</p><p>})</p>Master Class http://www.blogger.com/profile/01852672912613116009noreply@blogger.com0tag:blogger.com,1999:blog-2963651217753251164.post-32201799967449523502020-12-16T05:54:00.014-08:002020-12-16T19:21:46.645-08:00<p class="MsoNormal" style="line-height: normal; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;"><b><i><u><span style="color: red; font-family: "Times New Roman",serif; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";"> Permission to Write
Apex Code</span></u></i></b></p><p class="MsoNormal" style="line-height: normal; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;"><span style="font-family: "Times New Roman", serif; font-size: 13.5pt;"> </span><span style="font-family: "Times New Roman", serif; font-size: 10pt;">They need the Author Apex permission. Ticking
this box will result in them being assigned a lot of other permissions as well
though.</span><span style="font-family: "Times New Roman", serif; font-size: 13.5pt;"><o:p></o:p></span></p><p class="MsoNormal" style="line-height: normal; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;"><span style="font-family: "Times New Roman", serif; font-size: 10pt;">Granting Author Apex
permission also gives the user the following permissions:</span><span style="font-family: "Times New Roman", serif; font-size: 13.5pt;"><o:p></o:p></span></p><ul type="disc">
<li class="MsoNormal" style="line-height: normal;"><span style="font-family: "Times New Roman",serif; font-size: 10.0pt; mso-fareast-font-family: "Times New Roman";">Modify All Data</span><span style="font-family: "Times New Roman",serif; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></li>
<li class="MsoNormal" style="line-height: normal;"><span style="font-family: "Times New Roman",serif; font-size: 10.0pt; mso-fareast-font-family: "Times New Roman";">View Setup and Configuration</span><span style="font-family: "Times New Roman",serif; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></li>
</ul><p class="MsoNormal" style="line-height: normal; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;"><span style="font-family: "Times New Roman", serif; font-size: 10pt;">Granting Modify All Data
also gives the user the following permissions:</span><span style="font-family: "Times New Roman", serif; font-size: 13.5pt;"><o:p></o:p></span></p><p class="MsoNormal" style="line-height: normal; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;"><span style="font-family: "Times New Roman", serif; font-size: 10pt;">Read, Create, Edit,
Delete, View All, Modify All on all standard and custom objects</span><span style="font-family: "Times New Roman", serif; font-size: 13.5pt;"><o:p></o:p></span></p><p class="MsoNormal" style="line-height: normal; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
</p><ul type="disc">
<li class="MsoNormal" style="line-height: normal;"><span style="font-family: "Times New Roman",serif; font-size: 10.0pt; mso-fareast-font-family: "Times New Roman";">Edit Events</span><span style="font-family: "Times New Roman",serif; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></li>
<li class="MsoNormal" style="line-height: normal;"><span style="font-family: "Times New Roman",serif; font-size: 10.0pt; mso-fareast-font-family: "Times New Roman";">Edit Tasks</span><span style="font-family: "Times New Roman",serif; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></li>
<li class="MsoNormal" style="line-height: normal;"><span style="font-family: "Times New Roman",serif; font-size: 10.0pt; mso-fareast-font-family: "Times New Roman";">Manage Public List Views</span><span style="font-family: "Times New Roman",serif; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></li>
<li class="MsoNormal" style="line-height: normal;"><span style="font-family: "Times New Roman",serif; font-size: 10.0pt; mso-fareast-font-family: "Times New Roman";">Manage Public Templates</span><span style="font-family: "Times New Roman",serif; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></li>
<li class="MsoNormal" style="line-height: normal;"><span style="font-family: "Times New Roman",serif; font-size: 10.0pt; mso-fareast-font-family: "Times New Roman";">Run Reports</span><span style="font-family: "Times New Roman",serif; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></li>
<li class="MsoNormal" style="line-height: normal;"><span style="font-family: "Times New Roman",serif; font-size: 10.0pt; mso-fareast-font-family: "Times New Roman";">Transfer Record</span><span style="font-family: "Times New Roman",serif; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></li>
<li class="MsoNormal" style="line-height: normal;"><span style="font-family: "Times New Roman",serif; font-size: 10.0pt; mso-fareast-font-family: "Times New Roman";">View Setup and Configuration</span><span style="font-family: "Times New Roman",serif; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></li>
<li class="MsoNormal" style="line-height: normal;"><span style="font-family: "Times New Roman",serif; font-size: 10.0pt; mso-fareast-font-family: "Times New Roman";">Manage Public Documents</span><span style="font-family: "Times New Roman",serif; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></li>
<li class="MsoNormal" style="line-height: normal;"><span style="font-family: "Times New Roman",serif; font-size: 10.0pt; mso-fareast-font-family: "Times New Roman";">Import Leads</span><span style="font-family: "Times New Roman",serif; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></li>
<li class="MsoNormal" style="line-height: normal;"><span style="font-family: "Times New Roman",serif; font-size: 10.0pt; mso-fareast-font-family: "Times New Roman";">Transfer Leads</span><span style="font-family: "Times New Roman",serif; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></li>
<li class="MsoNormal" style="line-height: normal;"><span style="font-family: "Times New Roman",serif; font-size: 10.0pt; mso-fareast-font-family: "Times New Roman";">View All Data</span><span style="font-family: "Times New Roman",serif; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></li>
<li class="MsoNormal" style="line-height: normal;"><span style="font-family: "Times New Roman",serif; font-size: 10.0pt; mso-fareast-font-family: "Times New Roman";">Use Team Reassignment Wizards</span><span style="font-family: "Times New Roman",serif; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></li>
<li class="MsoNormal" style="line-height: normal;"><span style="font-family: "Times New Roman",serif; font-size: 10.0pt; mso-fareast-font-family: "Times New Roman";">Manage Categories</span><span style="font-family: "Times New Roman",serif; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></li>
<li class="MsoNormal" style="line-height: normal;"><span style="font-family: "Times New Roman",serif; font-size: 10.0pt; mso-fareast-font-family: "Times New Roman";">Convert Leads</span><span style="font-family: "Times New Roman",serif; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></li>
<li class="MsoNormal" style="line-height: normal;"><span style="font-family: "Times New Roman",serif; font-size: 10.0pt; mso-fareast-font-family: "Times New Roman";">Import Solutions</span><span style="font-family: "Times New Roman",serif; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></li>
<li class="MsoNormal" style="line-height: normal;"><span style="font-family: "Times New Roman",serif; font-size: 10.0pt; mso-fareast-font-family: "Times New Roman";">Create and Set Up Communities</span><span style="font-family: "Times New Roman",serif; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></li>
<li class="MsoNormal" style="line-height: normal;"><span style="font-family: "Times New Roman",serif; font-size: 10.0pt; mso-fareast-font-family: "Times New Roman";">Connect Organization to Environment Hub</span><span style="font-family: "Times New Roman",serif; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></li>
<li class="MsoNormal" style="line-height: normal;"><span style="font-family: "Times New Roman",serif; font-size: 10.0pt; mso-fareast-font-family: "Times New Roman";">Manage Reports in Public Folders</span><span style="font-family: "Times New Roman",serif; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></li>
<li class="MsoNormal" style="line-height: normal;"><span style="font-family: "Times New Roman",serif; font-size: 10.0pt; mso-fareast-font-family: "Times New Roman";">Manage Dashboards in Public Folders</span><span style="font-family: "Times New Roman",serif; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></li>
<li class="MsoNormal" style="line-height: normal;"><span style="font-family: "Times New Roman",serif; font-size: 10.0pt; mso-fareast-font-family: "Times New Roman";">Delete Topics</span><span style="font-family: "Times New Roman",serif; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></li>
<li class="MsoNormal" style="line-height: normal;"><span style="font-family: "Times New Roman",serif; font-size: 10.0pt; mso-fareast-font-family: "Times New Roman";">Assign Topics</span><span style="font-family: "Times New Roman",serif; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></li>
<li class="MsoNormal" style="line-height: normal;"><span style="font-family: "Times New Roman",serif; font-size: 10.0pt; mso-fareast-font-family: "Times New Roman";">Create Topics</span><span style="font-family: "Times New Roman",serif; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></li>
<li class="MsoNormal" style="line-height: normal;"><span style="font-family: "Times New Roman",serif; font-size: 10.0pt; mso-fareast-font-family: "Times New Roman";">Edit Topics</span><span style="font-family: "Times New Roman",serif; font-size: 13.5pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></li>
</ul><ul type="disc">
</ul><p></p>Master Class http://www.blogger.com/profile/01852672912613116009noreply@blogger.com0tag:blogger.com,1999:blog-2963651217753251164.post-30380121223896965962020-12-13T07:28:00.003-08:002020-12-13T07:57:02.384-08:00<p class="MsoNormal" style="background: white; line-height: 15pt; margin-bottom: 0in; mso-margin-top-alt: auto;"><i><span face=""Segoe UI",sans-serif" style="color: #0b5394; font-size: 12pt; mso-fareast-font-family: "Times New Roman";"> </span></i><b><i><span face=""Segoe UI",sans-serif" style="color: red; font-size: 12pt; mso-fareast-font-family: "Times New Roman";"> Duplicate
rule not firing with data loader batch size of 200</span></i></b><span style="font-family: "Times New Roman", serif; font-size: 13.5pt;"><o:p></o:p></span></p><p class="MsoNormal" style="line-height: normal; margin-bottom: 0in; mso-margin-top-alt: auto;"><span face=""Segoe UI", sans-serif" style="font-size: 13.5pt;"> </span><i><span face=""Segoe UI",sans-serif" style="background: white; color: #16325c; font-size: 10pt; mso-fareast-font-family: "Times New Roman";">Duplicate rules does not
compare data within same batch of record. So only option is to set batch size
equal to 1.</span></i><span style="font-family: "Times New Roman", serif; font-size: 13.5pt;"><o:p></o:p></span></p><p class="MsoNormal" style="line-height: normal; margin-bottom: 0in; mso-margin-top-alt: auto;"><b><span face=""Segoe UI",sans-serif" style="color: red; font-size: 12pt; mso-fareast-font-family: "Times New Roman";"> <i><span style="background: white;">Invalid cross reference id using process builder</span></i></span></b><span style="font-family: "Times New Roman", serif; font-size: 12pt;"><o:p></o:p></span></p><p class="MsoNormal" style="line-height: normal; margin-bottom: 0in; mso-margin-top-alt: auto;"><i><span face=""Segoe UI", sans-serif" style="background: white; font-size: 10pt;">When you develop the process in a sandbox you are providing the name of the
group or queue and the process builder links it to the internal ID behind the
scenes. Unfortunately the IDs are typically different in your dev org and
production org.</span></i><span style="font-family: "Times New Roman", serif; font-size: 13.5pt;"><o:p></o:p></span></p><p class="MsoNormal" style="background: white; line-height: 15pt; margin-bottom: 0in; mso-outline-level: 1;">
</p><p class="MsoNormal" style="line-height: normal; margin-bottom: 0in; mso-margin-top-alt: auto;"><i><span face=""Segoe UI", sans-serif" style="background: white; font-size: 10pt;"> To
fix this, after you deploy, you will need to modify the process (clone) in the
production org and re-link the queue by name in the prod org so it gets the
proper ID. When you activate the cloned version, it should work as expected.</span></i><span style="font-family: "Times New Roman", serif; font-size: 13.5pt;"><o:p></o:p></span></p><div><i style="background-color: white; color: #048ec6; font-family: DSCDefaultFontRegular; font-size: 1.3em;"><br /></i></div>Master Class http://www.blogger.com/profile/01852672912613116009noreply@blogger.com0tag:blogger.com,1999:blog-2963651217753251164.post-69149770234020298542020-12-05T21:41:00.002-08:002020-12-06T23:44:46.036-08:00<p> <span face="Calibri, sans-serif" style="background-color: white; color: red; font-size: 11pt; text-align: justify;">3 types of Event Communication</span></p><p style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 0.0001pt 0.5in; text-align: justify;"><span style="font-family: Symbol;">·<span style="font-family: "Times New Roman"; font-size: 7pt; font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: normal;"> </span></span>Parent to child</p><p style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 0.0001pt 0.5in; text-align: justify;"><span style="font-family: Symbol;">·<span style="font-family: "Times New Roman"; font-size: 7pt; font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: normal;"> </span></span>Child to Parent</p><p style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt 0.5in; text-align: justify;"><span style="font-family: Symbol;">·<span style="font-family: "Times New Roman"; font-size: 7pt; font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: normal;"> </span></span>Unrelated components</p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;"> </p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;"><b> Parent to child:</b></p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;">Note: Use <b><span style="color: #44546a;">@api decorator in child components</span></b><span style="color: #44546a;"></span></p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;">Passing message from parent to child:</p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;"> </p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;">ChildComp</p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">template</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> Message will come here <wbr></wbr>from Parent component :{<wbr></wbr>message}</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">template</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;">Js:</p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #859900; font-family: Consolas; font-size: 10.5pt;">import</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> { </span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">LightningElement</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">,</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">trac<wbr></wbr>k</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">,</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">api</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> } </span><span style="color: #859900; font-family: Consolas; font-size: 10.5pt;">from</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">'lwc'</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">;</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #859900; font-family: Consolas; font-size: 10.5pt;">export</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #859900; font-family: Consolas; font-size: 10.5pt;">default</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><b><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">class</span></b><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #cb4b16; font-family: Consolas; font-size: 10.5pt;">ChildComp</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"><wbr></wbr> </span><b><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">extends</span></b><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #cb4b16; font-family: Consolas; font-size: 10.5pt;">LightningElement</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> {</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> @</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">track</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">message</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">;</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> @</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">api</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">changeMessage</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">(strString)</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> {</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">this</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">.</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">message</span><span style="color: #859900; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">strString</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">.</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">t<wbr></wbr>oUpperCase</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">();</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> }</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">}</span></p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;"> </p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><?</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">xml</span><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;"> version</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">"1.0"</span><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;"> encoding</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">"<wbr></wbr>UTF-8"</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">?></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">LightningComponentBundle</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">xmln<wbr></wbr>s</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">"<a data-saferedirecturl="https://www.google.com/url?hl=en&q=http://soap.sforce.com/2006/04/metadata&source=gmail&ust=1607319039375000&usg=AFQjCNFt-JJixIOSoRt0cJnEU4FvS9G3mg" href="http://soap.sforce.com/2006/04/metadata" style="color: #1155cc; font-family: arial, sans-serif; text-decoration-line: none;" target="_blank">http://soap.sforce.com/<wbr></wbr>2006/04/metadata</a>"</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">fqn</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">"<wbr></wbr>childComp"</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">apiVersion</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">46.0</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">apiVersi<wbr></wbr>on</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">isExposed</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">false</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">isExpose<wbr></wbr>d</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">LightningComponentBundle</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;"> </p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;"> </p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;">Parent Component:</p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;"> </p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">template</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">lightning-card</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">title</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">"<wbr></wbr>Parent to Child Demo"</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">lightning-layout</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">lightning-layout-<wbr></wbr>item</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">flexibility</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">"auto"</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">paddin<wbr></wbr>g</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">"around-small"</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">lightning-<wbr></wbr>input</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">label</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">"Enter the <wbr></wbr>message"</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">onchange</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">{<wbr></wbr>handleChangeEvent}</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">lightning<wbr></wbr>-input</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">lightning-<wbr></wbr>layout-item</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">lightning-layout-<wbr></wbr>item</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">flexibility</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">"auto"</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">paddin<wbr></wbr>g</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">"around-small"</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">c-child-<wbr></wbr>comp</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">c-child-comp</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">lightning-<wbr></wbr>layout-item</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">lightning-layout</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 12pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">lightning-card</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">template</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;"> </p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;">Js:</p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;"> </p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #859900; font-family: Consolas; font-size: 10.5pt;">import</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> { </span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">LightningElement</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> } </span><span style="color: #859900; font-family: Consolas; font-size: 10.5pt;">fr<wbr></wbr>om</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">'lwc'</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">;</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #859900; font-family: Consolas; font-size: 10.5pt;">export</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #859900; font-family: Consolas; font-size: 10.5pt;">default</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><b><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">class</span></b><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #cb4b16; font-family: Consolas; font-size: 10.5pt;">ParentCom<wbr></wbr>p</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><b><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">extends</span></b><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #cb4b16; font-family: Consolas; font-size: 10.5pt;">LightningElement</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> {</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">handleChangeEvent</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">(event)</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> {</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">this</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">.</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">template</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">.</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">querySel<wbr></wbr>ector</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">(</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">'c-child-comp'</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">).</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">changeMe<wbr></wbr>ssage</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">(</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">event</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">.</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">target</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">.</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">value</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">);</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> }</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">}</span></p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;"> <span style="font-size: 11pt;"> </span></p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;">Xml:</p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;"> </p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><?</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">xml</span><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;"> version</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">"1.0"</span><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;"> encoding</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">"<wbr></wbr>UTF-8"</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">?></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">LightningComponentBundle</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">xmln<wbr></wbr>s</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">"<a data-saferedirecturl="https://www.google.com/url?hl=en&q=http://soap.sforce.com/2006/04/metadata&source=gmail&ust=1607319039375000&usg=AFQjCNFt-JJixIOSoRt0cJnEU4FvS9G3mg" href="http://soap.sforce.com/2006/04/metadata" style="color: #1155cc; font-family: arial, sans-serif; text-decoration-line: none;" target="_blank">http://soap.sforce.com/<wbr></wbr>2006/04/metadata</a>"</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">fqn</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">"<wbr></wbr>parentComp"</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">apiVersion</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">46.0</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">apiVersi<wbr></wbr>on</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">isExposed</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">true</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">isExposed</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><wbr></wbr>></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">targets</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">target</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">lightning__<wbr></wbr>AppPage</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">target</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">target</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">lightning__<wbr></wbr>RecordPage</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">target</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">target</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">lightning__<wbr></wbr>HomePage</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">target</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">targets</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">LightningComponentBundle</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;"> </p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;"><b><i>Child to Parent:</i></b></p><p style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 0.0001pt 0.5in; text-align: justify;"><span style="font-family: Symbol;">·<span style="font-family: "Times New Roman"; font-size: 7pt; font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: normal;"> </span></span>Child component will create and Fire the event</p><p style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt 0.5in; text-align: justify;"><span style="font-family: Symbol;">·<span style="font-family: "Times New Roman"; font-size: 7pt; font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: normal;"> </span></span>Parent component will handle the event</p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;"><b>Handling the event in two ways:</b></p><p style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 0.0001pt 0.5in; text-align: justify;"><span style="font-family: Symbol;">·<span style="font-family: "Times New Roman"; font-size: 7pt; font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: normal;"> </span></span>Declarative via html Markup</p><p style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt 0.5in; text-align: justify;"><span style="font-family: Symbol;">·<span style="font-family: "Times New Roman"; font-size: 7pt; font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: normal;"> </span></span>JavaScript using add Event Listener</p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;"> </p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;"><b><i> <u> Declarative via html Markup</u></i></b></p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;"> <span style="font-size: 11pt;"><i><b>Creating Event in childComponent</b></i></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><b><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">const</span></b><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">selectEvent</span><span style="color: #859900; font-family: Consolas; font-size: 10.5pt;">=new</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #cb4b16; font-family: Consolas; font-size: 10.5pt;">CustomEv<wbr></wbr>ent</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">(</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">'mycustomevent'</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">,{</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">detail</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">:</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">na<wbr></wbr>me</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">});</span></p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;"> </p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;"><i><b>Dispatch/fire Event in child component:</b></i></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">this</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">.</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">dispatchEvent</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">(</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">sel<wbr></wbr>ectEvent</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">);</span></p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;"> </p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;">Handling the event in Parent side using html Markup</p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">c-child-component2 on</span><span style="background: yellow; color: #2aa198; font-family: Consolas; font-size: 10.5pt;">mycustomevent</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">={</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">handleCustomE<wbr></wbr>vent</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">}</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">c-child-component2</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;"> </p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;"> </p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;"><i>Here <span style="background: yellow;">mycustomevent</span> is eventName</i></p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;"> <b style="font-size: 11pt;"><i>childComponent2</i></b></p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;"> </p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">template</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">lightning-card</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">title</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">"<wbr></wbr>Child Component"</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">div</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">class</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">"slds-m-<wbr></wbr>around_medium"</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">lightning-input</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">n<wbr></wbr>ame</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">"textVal"</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">label</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">"Enter <wbr></wbr>Text"</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">onchange</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">{handleChange}</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">><wbr></wbr></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">lightning-input</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">div</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">lightning-card</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">template</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;"> </p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;">Js</p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #859900; font-family: Consolas; font-size: 10.5pt;">import</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> { </span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">LightningElement</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> } </span><span style="color: #859900; font-family: Consolas; font-size: 10.5pt;">fr<wbr></wbr>om</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">'lwc'</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">;</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #859900; font-family: Consolas; font-size: 10.5pt;">export</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #859900; font-family: Consolas; font-size: 10.5pt;">default</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><b><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">class</span></b><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #cb4b16; font-family: Consolas; font-size: 10.5pt;">ChildComp<wbr></wbr>onent2</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><b><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">extends</span></b><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #cb4b16; font-family: Consolas; font-size: 10.5pt;">LightningElemen<wbr></wbr>t</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> {</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">handleChange</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">(event)</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> {</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><b><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">const</span></b><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">name</span><span style="color: #859900; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">event</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">.</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">targe<wbr></wbr>t</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">.</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">value</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">;</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><b><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">const</span></b><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">selectEvent</span><span style="color: #859900; font-family: Consolas; font-size: 10.5pt;">=new</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #cb4b16; font-family: Consolas; font-size: 10.5pt;"><wbr></wbr>CustomEvent</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">(</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">'mycustomevent'</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">,{</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">d<wbr></wbr>etail</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">:</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">name</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">});</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">this</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">.</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">dispatchEvent</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">(</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">sel<wbr></wbr>ectEvent</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">);</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> }</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">}</span></p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;"> </p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;"> <span style="font-size: 11pt;">Xml:</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><?</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">xml</span><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;"> version</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">"1.0"</span><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;"> encoding</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">"<wbr></wbr>UTF-8"</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">?></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">LightningComponentBundle</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">xmln<wbr></wbr>s</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">"<a data-saferedirecturl="https://www.google.com/url?hl=en&q=http://soap.sforce.com/2006/04/metadata&source=gmail&ust=1607319039375000&usg=AFQjCNFt-JJixIOSoRt0cJnEU4FvS9G3mg" href="http://soap.sforce.com/2006/04/metadata" style="color: #1155cc; font-family: arial, sans-serif; text-decoration-line: none;" target="_blank">http://soap.sforce.com/<wbr></wbr>2006/04/metadata</a>"</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">fqn</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">"<wbr></wbr>childComponent2"</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">apiVersion</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">46.0</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">apiVersi<wbr></wbr>on</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">isExposed</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">false</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">isExpose<wbr></wbr>d</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">LightningComponentBundle</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;"> </p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;"> <span style="font-size: 11pt;">ParentComponent2:</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">template</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">div</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">class</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">"slds-m-around_<wbr></wbr>medium"</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> Value from Child: {<wbr></wbr>msg}</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">c-child-component2 on</span><span style="background: yellow; color: #2aa198; font-family: Consolas; font-size: 10.5pt;">mycustomevent</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">={</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">handleCustomE<wbr></wbr>vent</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">}</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">c-child-component2</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">div</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">template</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;"> </p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #859900; font-family: Consolas; font-size: 10.5pt;">import</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> { </span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">LightningElement</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">,</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">trac<wbr></wbr>k</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> } </span><span style="color: #859900; font-family: Consolas; font-size: 10.5pt;">from</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">'lwc'</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">;</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #859900; font-family: Consolas; font-size: 10.5pt;">export</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #859900; font-family: Consolas; font-size: 10.5pt;">default</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><b><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">class</span></b><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #cb4b16; font-family: Consolas; font-size: 10.5pt;">ParentCom<wbr></wbr>ponent2</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><b><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">extends</span></b><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #cb4b16; font-family: Consolas; font-size: 10.5pt;">LightningEleme<wbr></wbr>nt</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> {</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> @</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">track</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">msg</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">;</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">handleCustomEvent</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">(event)</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> {</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">this</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">.</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">msg</span><span style="color: #859900; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">event</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">.</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">detail</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">;</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> }</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">}</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span></p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;"> </p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;">xml:</p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><?</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">xml</span><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;"> version</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">"1.0"</span><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;"> encoding</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">"<wbr></wbr>UTF-8"</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">?></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">LightningComponentBundle</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">xmln<wbr></wbr>s</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">"<a data-saferedirecturl="https://www.google.com/url?hl=en&q=http://soap.sforce.com/2006/04/metadata&source=gmail&ust=1607319039375000&usg=AFQjCNFt-JJixIOSoRt0cJnEU4FvS9G3mg" href="http://soap.sforce.com/2006/04/metadata" style="color: #1155cc; font-family: arial, sans-serif; text-decoration-line: none;" target="_blank">http://soap.sforce.com/<wbr></wbr>2006/04/metadata</a>"</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">fqn</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">"<wbr></wbr>parentComponent2"</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">apiVersion</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">46.0</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">apiVersi<wbr></wbr>on</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">isExposed</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">true</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">isExposed</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><wbr></wbr>></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">targets</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">target</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">lightning__<wbr></wbr>AppPage</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">target</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">target</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">lightning__<wbr></wbr>HomePage</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">target</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">target</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">lightning__<wbr></wbr>RecordPage</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">target</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">targets</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">LightningComponentBundle</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;"> </p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;"><span style="background: yellow;">Push Parent component to LightningPage</span></p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;"> </p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;"><b><i>Using AddEventListner Method:</i></b></p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;">childComponent3</p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;"><br /></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">template</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">lightning-card</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">title</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">"<wbr></wbr>Child Component"</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">div</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">class</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">"slds-m-<wbr></wbr>around_medium"</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">lightning-input</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">n<wbr></wbr>ame</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">"textVal"</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">label</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">"Enter <wbr></wbr>Text"</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">onchange</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">{handleChange}</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">><wbr></wbr></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">lightning-input</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">div</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">lightning-card</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">template</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;"> </p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;"> </p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;">Js:</p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #859900; font-family: Consolas; font-size: 10.5pt;">import</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> { </span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">LightningElement</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> } </span><span style="color: #859900; font-family: Consolas; font-size: 10.5pt;">fr<wbr></wbr>om</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">'lwc'</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">;</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #859900; font-family: Consolas; font-size: 10.5pt;">export</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #859900; font-family: Consolas; font-size: 10.5pt;">default</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><b><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">class</span></b><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #cb4b16; font-family: Consolas; font-size: 10.5pt;">ChildComp<wbr></wbr>onent2</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><b><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">extends</span></b><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #cb4b16; font-family: Consolas; font-size: 10.5pt;">LightningElemen<wbr></wbr>t</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> {</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">handleChange</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">(event)</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> {</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><b><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">const</span></b><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">name</span><span style="color: #859900; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">event</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">.</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">targe<wbr></wbr>t</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">.</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">value</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">;</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><b><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">const</span></b><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">selectEvent</span><span style="color: #859900; font-family: Consolas; font-size: 10.5pt;">=new</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #cb4b16; font-family: Consolas; font-size: 10.5pt;"><wbr></wbr>CustomEvent</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">(</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">'mycustomevent'</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">,{</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">d<wbr></wbr>etail</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">:</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">name</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">,</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">bubbles</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">:</span><span style="color: #b58900; font-family: Consolas; font-size: 10.5pt;">true</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">});</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">this</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">.</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">dispatchEvent</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">(</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">sel<wbr></wbr>ectEvent</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">);</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> }</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">}</span></p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;"> </p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;">Xml:</p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><?</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">xml</span><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;"> version</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">"1.0"</span><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;"> encoding</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">"<wbr></wbr>UTF-8"</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">?></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">LightningComponentBundle</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">xmln<wbr></wbr>s</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">"<a data-saferedirecturl="https://www.google.com/url?hl=en&q=http://soap.sforce.com/2006/04/metadata&source=gmail&ust=1607319039376000&usg=AFQjCNEGMgFD_0RQJtLNBq12XP1g9BaAPQ" href="http://soap.sforce.com/2006/04/metadata" style="color: #1155cc; font-family: arial, sans-serif; text-decoration-line: none;" target="_blank">http://soap.sforce.com/<wbr></wbr>2006/04/metadata</a>"</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">fqn</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">"<wbr></wbr>childComponent2"</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">apiVersion</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">46.0</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">apiVersi<wbr></wbr>on</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">isExposed</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">false</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">isExpose<wbr></wbr>d</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">LightningComponentBundle</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;"> </p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;"> </p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;">ParentComponent3:</p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;"> </p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">template</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">div</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">class</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">"slds-m-around_<wbr></wbr>medium"</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> Value from Child: {<wbr></wbr>msg}</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">c-child-component3</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;"><wbr></wbr>c-child-component2</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">div</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">template</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;"> </p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;">Js:</p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #859900; font-family: Consolas; font-size: 10.5pt;">import</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> { </span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">LightningElement</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">,</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">trac<wbr></wbr>k</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> } </span><span style="color: #859900; font-family: Consolas; font-size: 10.5pt;">from</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">'lwc'</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">;</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #859900; font-family: Consolas; font-size: 10.5pt;">export</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #859900; font-family: Consolas; font-size: 10.5pt;">default</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><b><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">class</span></b><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #cb4b16; font-family: Consolas; font-size: 10.5pt;">ParentCom<wbr></wbr>ponent2</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><b><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">extends</span></b><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #cb4b16; font-family: Consolas; font-size: 10.5pt;">LightningEleme<wbr></wbr>nt</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> {</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> @</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">track</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">msg</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">;</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><b><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">constructor</span></b><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">()</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> {</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">super</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">();</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">this</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">.</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">template</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">.</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">addEventL<wbr></wbr>istener</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">(</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">'mycustomevent'</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">,</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">this</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">.</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">h<wbr></wbr>andleCustomEvent</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">.</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">bind</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">(</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">this</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">));</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> }</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">handleCustomEvent</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">(event)</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> {</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">this</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">.</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">msg</span><span style="color: #859900; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">event</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">.</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">detail</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">;</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> }</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">}</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span></p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;"> </p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;"> </p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;">Xml:</p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><?</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">xml</span><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;"> version</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">"1.0"</span><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;"> encoding</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">"<wbr></wbr>UTF-8"</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">?></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">LightningComponentBundle</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">xmln<wbr></wbr>s</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">"<a data-saferedirecturl="https://www.google.com/url?hl=en&q=http://soap.sforce.com/2006/04/metadata&source=gmail&ust=1607319039376000&usg=AFQjCNEGMgFD_0RQJtLNBq12XP1g9BaAPQ" href="http://soap.sforce.com/2006/04/metadata" style="color: #1155cc; font-family: arial, sans-serif; text-decoration-line: none;" target="_blank">http://soap.sforce.com/<wbr></wbr>2006/04/metadata</a>"</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">fqn</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">"<wbr></wbr>parentComponent2"</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">apiVersion</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">46.0</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">apiVersi<wbr></wbr>on</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">isExposed</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">true</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">isExposed</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><wbr></wbr>></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">targets</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">target</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">lightning__<wbr></wbr>AppPage</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">target</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">target</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">lightning__<wbr></wbr>HomePage</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">target</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">target</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">lightning__<wbr></wbr>RecordPage</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">target</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">targets</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt; text-align: justify;"><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">LightningComponentBundle</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;"> </p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;"> </p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;"><u> <b style="font-size: 11pt;"> Pub sub Model in Lightning Web Component:</b></u></p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;">Two components are not related to each other then we need to go for pub sub model. Its similar to Application Event in Aura Components.</p><p style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 0.0001pt 0.5in; text-align: justify;"><span style="font-family: Symbol;">·<span style="font-family: "Times New Roman"; font-size: 7pt; font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: normal;"> </span></span>Need to use pubsub.js</p><p style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 0.0001pt 0.5in; text-align: justify;"><span style="font-family: Symbol;">·<span style="font-family: "Times New Roman"; font-size: 7pt; font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: normal;"> </span></span>Publisher event takes 3 parameters: import these parameters pageRefrence,event Name,eventdetail from pubsub.js</p><p style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt 0.5in; text-align: justify;"><span style="font-family: Symbol;">·<span style="font-family: "Times New Roman"; font-size: 7pt; font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: normal;"> </span></span>Subscriber component : Import registerListner,<wbr></wbr>unregisterAllListner from pubsub.js file</p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;"> </p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;">PalettsPublisher:</p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">template</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">lightning-card</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">title</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">"<wbr></wbr>Palette Publisher"</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">lightning-layout</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">lightning-layout-<wbr></wbr>item</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">flexibility</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">"auto"</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">paddin<wbr></wbr>g</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">"around-small"</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">lightning-<wbr></wbr>combobox</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">label</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">"Color"</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">value</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">{<wbr></wbr>color}</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">options</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">{<wbr></wbr>colorCodeOptions}</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">onchange</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">{<wbr></wbr>changeColor}</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">lightning-<wbr></wbr>combobox</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">div</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">class</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">"<wbr></wbr>slds-p-top_small"</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">lightning<wbr></wbr>-button</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">label</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">"change color"</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">v<wbr></wbr>ariant</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">"brand"</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">onclick</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">{<wbr></wbr>handleChangeColor}</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">lightning<wbr></wbr>-button</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">div</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">lightning-<wbr></wbr>layout-item</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 12pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">lightning-layout</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">lightning-card</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">template</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;"> </p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;"> </p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;">Js:</p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;"> </p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #859900; font-family: Consolas; font-size: 10.5pt;">import</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> { </span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">LightningElement</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">,</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">trac<wbr></wbr>k</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">,</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">wire</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">} </span><span style="color: #859900; font-family: Consolas; font-size: 10.5pt;">from</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">'lwc'</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">;</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #859900; font-family: Consolas; font-size: 10.5pt;">import</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> {</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">fireEvent</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">} </span><span style="color: #859900; font-family: Consolas; font-size: 10.5pt;">from</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">'c/<wbr></wbr>pubsub'</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">;</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #859900; font-family: Consolas; font-size: 10.5pt;">import</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> {</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">CurrentPageReference</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">} </span><span style="color: #859900; font-family: Consolas; font-size: 10.5pt;"><wbr></wbr>from</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">'lightning/navigation'</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">;</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 12pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #859900; font-family: Consolas; font-size: 10.5pt;">export</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #859900; font-family: Consolas; font-size: 10.5pt;">default</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><b><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">class</span></b><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #cb4b16; font-family: Consolas; font-size: 10.5pt;">PalettePu<wbr></wbr>blisher</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><b><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">extends</span></b><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #cb4b16; font-family: Consolas; font-size: 10.5pt;">LightningEleme<wbr></wbr>nt</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> {</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> @</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">track</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">color</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">;</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> @</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">wire</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">(</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">CurrentPageReference</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"><wbr></wbr>) </span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">pageRef</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">;</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">colorCodeOptions</span><span style="color: #859900; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">[</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> {</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">label</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">:</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">"Green"</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">,</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">value</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">:</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">"<wbr></wbr>green"</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">},</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> {</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">label</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">:</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">"Red"</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">,</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">value</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">:</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">"<wbr></wbr>red"</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">},</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> {</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">label</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">:</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">"Yellow"</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">,</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">value</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">:</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;"><wbr></wbr>"yellow"</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">},</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> {</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">label</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">:</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">"Blue"</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">,</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">value</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">:</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">"<wbr></wbr>blue"</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">}</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> ];</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">changeColor</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">(event)</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> {</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">this</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">.</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">color</span><span style="color: #859900; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">event</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">.</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">targe<wbr></wbr>t</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">.</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">value</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">;</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> }</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">handleChangeColor</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">()</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> {</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">console</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">.</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">log</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">(</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">"color ->"</span><span style="color: #859900; font-family: Consolas; font-size: 10.5pt;"><wbr></wbr>+</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">this</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">.</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">color</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">);</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">fireEvent</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">(</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">this</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">.</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">pageRef</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"><wbr></wbr>,</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">"changedColor"</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">,</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">this</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">.</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">color</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">);</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> }</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">}</span></p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;"> </p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;">Xml:</p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><?</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">xml</span><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;"> version</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">"1.0"</span><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;"> encoding</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">"<wbr></wbr>UTF-8"</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">?></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">LightningComponentBundle</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">xmln<wbr></wbr>s</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">"<a data-saferedirecturl="https://www.google.com/url?hl=en&q=http://soap.sforce.com/2006/04/metadata&source=gmail&ust=1607319039376000&usg=AFQjCNEGMgFD_0RQJtLNBq12XP1g9BaAPQ" href="http://soap.sforce.com/2006/04/metadata" style="color: #1155cc; font-family: arial, sans-serif; text-decoration-line: none;" target="_blank">http://soap.sforce.com/<wbr></wbr>2006/04/metadata</a>"</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">fqn</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">"<wbr></wbr>palettePublisher"</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">apiVersion</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">46.0</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">apiVersi<wbr></wbr>on</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">isExposed</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">true</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">isExposed</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><wbr></wbr>></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">targets</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">target</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">lightning__<wbr></wbr>AppPage</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">target</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">target</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">lightning__<wbr></wbr>HomePage</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">target</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">target</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">lightning__<wbr></wbr>RecordPage</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">target</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">targets</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">LightningComponentBundle</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;"><br /></p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;">Canvas:</p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;"> </p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">template</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">lightning-card</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">title</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">"<wbr></wbr>Canvas Subscriber"</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">lightning-layout-item</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"><wbr></wbr> </span><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">flexibility</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">"grow"</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"><</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">div</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">class</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">"<wbr></wbr>templateBodyClass"</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">style</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">{<wbr></wbr>colorStyle}</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">div</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">lightning-layout-<wbr></wbr>item</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 12pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">lightning-card</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;"></</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">template</span><span style="color: #657b83; font-family: Consolas; font-size: 10.5pt;">></span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"></span></p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;"> </p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;"> </p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;">Js:</p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #859900; font-family: Consolas; font-size: 10.5pt;">import</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> { </span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">LightningElement</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">,</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">trac<wbr></wbr>k</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">,</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">wire</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> } </span><span style="color: #859900; font-family: Consolas; font-size: 10.5pt;">from</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">'lwc'</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">;</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #859900; font-family: Consolas; font-size: 10.5pt;">import</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> {</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">registerListener</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">,</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">unreg<wbr></wbr>isterAllListeners</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">} </span><span style="color: #859900; font-family: Consolas; font-size: 10.5pt;">from</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">'c/<wbr></wbr>pubsub'</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">;</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #859900; font-family: Consolas; font-size: 10.5pt;">import</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> {</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">CurrentPageReference</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">} </span><span style="color: #859900; font-family: Consolas; font-size: 10.5pt;"><wbr></wbr>from</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">'lightning/navigation'</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">;</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #859900; font-family: Consolas; font-size: 10.5pt;">export</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #859900; font-family: Consolas; font-size: 10.5pt;">default</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><b><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">class</span></b><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #cb4b16; font-family: Consolas; font-size: 10.5pt;">CanvasSub<wbr></wbr>scriber</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><b><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">extends</span></b><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #cb4b16; font-family: Consolas; font-size: 10.5pt;">LightningEleme<wbr></wbr>nt</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> {</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> @</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">track</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">color</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">;</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> @</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">wire</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">(</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">CurrentPageReference</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">)<wbr></wbr> </span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">pageRef</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">;</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">connectedCallback</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">()</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> {</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">registerListener</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">(</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">"<wbr></wbr>changedColor"</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">,</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">this</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">.</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">handleChang<wbr></wbr>edColor</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">,</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">this</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">);</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> }</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">disconnectedCallback</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">()</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> {</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">unregisterAllListeners</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">(</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;"><wbr></wbr>this</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">);</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> }</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">handleChangedColor</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">(<wbr></wbr>colorCode)</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> {</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">console</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">.</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">log</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">(</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">"Color -->"</span><span style="color: #859900; font-family: Consolas; font-size: 10.5pt;"><wbr></wbr>+</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">colorCode</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">);</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">this</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">.</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">color</span><span style="color: #859900; font-family: Consolas; font-size: 10.5pt;">=</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">colorCode</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">;</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> }</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><b><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">get</span></b><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">colorStyle</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">(){</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #859900; font-family: Consolas; font-size: 10.5pt;">return</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">`background-<wbr></wbr>color:${</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">this</span><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">.</span><span style="color: #268bd2; font-family: Consolas; font-size: 10.5pt;">color</span><span style="color: #2aa198; font-family: Consolas; font-size: 10.5pt;">}`</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">;</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> }</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">}</span></p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;"> </p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;">css</p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #93a1a1; font-family: Consolas; font-size: 10.5pt;">.templateBodyClass</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">{</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;"> </span><span style="color: #859900; font-family: Consolas; font-size: 10.5pt;">height</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">:</span><span style="color: #d33682; font-family: Consolas; font-size: 10.5pt;">80</span><span style="color: #859900; font-family: Consolas; font-size: 10.5pt;">px</span><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">;</span></p><p class="MsoNormal" style="background: rgb(0, 43, 54); color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;"><span style="color: #bbbbbb; font-family: Consolas; font-size: 10.5pt;">}</span></p><p class="MsoNormal" style="background-color: white; color: #222222; font-family: Calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt; text-align: justify;"> </p>Master Class http://www.blogger.com/profile/01852672912613116009noreply@blogger.com0tag:blogger.com,1999:blog-2963651217753251164.post-33161313582027799792020-06-04T10:04:00.003-07:002023-06-24T23:24:48.053-07:00<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="MsoNormal" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; line-height: normal; margin: 12pt 0in 8.55pt;">
<div class="MsoNormal" style="background-color: white; color: #222222; font-family: calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt;">
<span face=""segoe ui" , sans-serif"> </span><b><span style="font-size: 14pt;">LWC Components </span></b></div>
<p class="MsoNormal" style="background-color: white; line-height: normal; text-align: justify;"><b><span style="color: red; font-family: "Arial",sans-serif; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-IN; mso-font-kerning: 0pt; mso-ligatures: none;">lightning-record-form</span></b><span style="color: red; font-family: "Arial",sans-serif; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-IN; mso-font-kerning: 0pt; mso-ligatures: none;"> </span><span style="color: #4a474b; font-family: "Arial",sans-serif; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-IN; mso-font-kerning: 0pt; mso-ligatures: none;">component allows you to quickly create forms to add, view, or update a
record.</span><span style="color: #222222; font-family: "Arial",sans-serif; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-IN; mso-font-kerning: 0pt; mso-ligatures: none;"><o:p></o:p></span></p>
<p class="MsoNormal" style="background-color: white; line-height: normal; text-align: justify;"><b><span style="color: red; font-family: "Arial",sans-serif; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-IN; mso-font-kerning: 0pt; mso-ligatures: none;">lightning-record-form</span></b><span style="color: red; font-family: "Arial",sans-serif; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-IN; mso-font-kerning: 0pt; mso-ligatures: none;"> </span><span style="color: #4a474b; font-family: "Arial",sans-serif; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-IN; mso-font-kerning: 0pt; mso-ligatures: none;">implements <b><span style="background: yellow; mso-highlight: yellow;">Lightning
Data Service</span></b> and doesn’t require additional Apex controllers to
create or edit record data. It also takes care of <span style="background: yellow; mso-highlight: yellow;">field-level security and sharing for you</span>,
so users see only the data that they have access to.</span><span style="color: #222222; font-family: "Arial",sans-serif; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-IN; mso-font-kerning: 0pt; mso-ligatures: none;"><o:p></o:p></span></p>
<p class="MsoNormal" style="background-color: white; line-height: normal; text-align: justify;"><span style="color: #4a474b; font-family: "Arial",sans-serif; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-IN; mso-font-kerning: 0pt; mso-ligatures: none;">The </span><b><span style="background: yellow; color: #222222; font-family: "Arial",sans-serif; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-IN; mso-font-kerning: 0pt; mso-highlight: yellow; mso-ligatures: none;">object-api-name</span></b><span style="background: yellow; color: #222222; font-family: "Arial",sans-serif; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-IN; mso-font-kerning: 0pt; mso-highlight: yellow; mso-ligatures: none;"> attribute is always
required, and the <b>record-id</b></span><span style="color: #222222; font-family: "Arial",sans-serif; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-IN; mso-font-kerning: 0pt; mso-ligatures: none;"> is required only
when <span style="background: yellow; mso-highlight: yellow;">you’re editing
or viewing a record</span>.<o:p></o:p></span></p>
<p class="MsoNormal" style="background-color: white; line-height: 11.75pt; margin: 12pt 0cm 6pt; text-align: justify;"><b><span style="color: red; font-family: "Arial",sans-serif; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-IN; mso-font-kerning: 0pt; mso-ligatures: none;">Modes</span></b><b><i><span style="font-family: Arial, sans-serif;"><o:p></o:p></span></i></b></p>
<p class="MsoNormal" style="background-color: white; line-height: normal; text-align: justify;"><span style="color: #4a474b; font-family: "Arial",sans-serif; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-IN; mso-font-kerning: 0pt; mso-ligatures: none;"> The component accepts a mode value that determines
the user interaction allowed for the form. The value for mode can be
one of the following:</span><span style="color: #222222; font-family: "Arial",sans-serif; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-IN; mso-font-kerning: 0pt; mso-ligatures: none;"><o:p></o:p></span></p>
<ol start="1" style="background-color: white;" type="1">
<li class="MsoNormal" style="color: #4a474b; line-height: normal; mso-list: l1 level1 lfo1; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; tab-stops: list 36.0pt; text-align: justify;"><b><span style="font-family: "Arial",sans-serif; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-IN; mso-font-kerning: 0pt; mso-ligatures: none;">edit</span></b><span style="font-family: "Arial",sans-serif; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-IN; mso-font-kerning: 0pt; mso-ligatures: none;"> – Creates an
editable form to add a record or update an existing one. When updating an
existing record, specify the record-id. Edit mode is the default when
record-id is not provided, and displays a form to create new records.<o:p></o:p></span></li>
<li class="MsoNormal" style="color: #4a474b; line-height: normal; mso-list: l1 level1 lfo1; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; tab-stops: list 36.0pt; text-align: justify;"><b><span style="font-family: "Arial",sans-serif; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-IN; mso-font-kerning: 0pt; mso-ligatures: none;">view</span></b><span style="font-family: "Arial",sans-serif; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-IN; mso-font-kerning: 0pt; mso-ligatures: none;"> – Creates a form
to display a record that the user can also edit. The record fields each
have an edit button. View mode is the default when record-id is provided.</span></li><li class="MsoNormal" style="color: #4a474b; line-height: normal; mso-list: l1 level1 lfo1; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; tab-stops: list 36.0pt; text-align: justify;"><b><span style="font-family: "Arial",sans-serif; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-IN; mso-font-kerning: 0pt; mso-ligatures: none;">readonly</span></b><span style="font-family: Arial, sans-serif;"> –
Creates a form to display a record without enabling edits. The form
doesn’t display any buttons.</span></li></ol>
<div class="MsoNormal" style="background-color: white; color: #222222; font-family: calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt;">
<br /></div>
<div class="MsoNormal" style="background-color: white; color: #222222; font-family: calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;">
<span face=""segoe ui" , sans-serif" style="color: maroon; font-size: 10.5pt;"><template></span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"></span></div>
<div class="MsoNormal" style="background-color: white; color: #222222; font-family: calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;">
<span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: maroon; font-size: 10.5pt;"><lightning-card</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: red; font-size: 10.5pt;">title</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;">=</span><span face=""segoe ui" , sans-serif" style="color: blue; font-size: 10.5pt;">"<wbr></wbr>Record Form ReadOnly"</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: red; font-size: 10.5pt;">icon-<wbr></wbr>name</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;">=</span><span face=""segoe ui" , sans-serif" style="color: blue; font-size: 10.5pt;">"standard:account"</span><span face=""segoe ui" , sans-serif" style="color: maroon; font-size: 10.5pt;">></span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"></span></div>
<div class="MsoNormal" style="background-color: white; color: #222222; font-family: calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;">
<span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: maroon; font-size: 10.5pt;"><lightning-record-form</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"><wbr></wbr> </span><span face=""segoe ui" , sans-serif" style="color: red; font-size: 10.5pt;">record-id</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;">=</span><span face=""segoe ui" , sans-serif" style="color: blue; font-size: 10.5pt;">{recordId}</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: red; font-size: 10.5pt;">object-<wbr></wbr>api-name</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;">=</span><span face=""segoe ui" , sans-serif" style="color: blue; font-size: 10.5pt;">{objectApiName}</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: red; font-size: 10.5pt;">field<wbr></wbr>s</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;">=</span><span face=""segoe ui" , sans-serif" style="color: blue; font-size: 10.5pt;">{fields}</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: red; font-size: 10.5pt;">columns</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;">=</span><span face=""segoe ui" , sans-serif" style="color: blue; font-size: 10.5pt;">"2"</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: red; font-size: 10.5pt;">mode</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;">=</span><span face=""segoe ui" , sans-serif" style="color: blue; font-size: 10.5pt;">"<wbr></wbr>readonly"</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: red; font-size: 10.5pt;">onsubmit</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;">=</span><span face=""segoe ui" , sans-serif" style="color: blue; font-size: 10.5pt;">{<wbr></wbr>handleSubmit}</span><span face=""segoe ui" , sans-serif" style="color: maroon; font-size: 10.5pt;">></lightning-<wbr></wbr>record-form></span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"></span></div>
<div class="MsoNormal" style="background-color: white; color: #222222; font-family: calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;">
<span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: maroon; font-size: 10.5pt;"></lightning-card></span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"></span></div>
<div class="MsoNormal" style="background-color: white; color: #222222; font-family: calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;">
<span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: green; font-size: 10.5pt;"><!-- Record Edit--></span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"></span></div>
<div class="MsoNormal" style="background-color: white; color: #222222; font-family: calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;">
<span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: maroon; font-size: 10.5pt;"><lightning-card</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: red; font-size: 10.5pt;">title</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;">=</span><span face=""segoe ui" , sans-serif" style="color: blue; font-size: 10.5pt;">"<wbr></wbr>Record Form Edit"</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: red; font-size: 10.5pt;">icon-name</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;">=</span><span face=""segoe ui" , sans-serif" style="color: blue; font-size: 10.5pt;">"<wbr></wbr>standard:account"</span><span face=""segoe ui" , sans-serif" style="color: maroon; font-size: 10.5pt;">></span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"></span></div>
<div class="MsoNormal" style="background-color: white; color: #222222; font-family: calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;">
<span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: maroon; font-size: 10.5pt;"><lightning-record-form</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"><wbr></wbr> </span><span face=""segoe ui" , sans-serif" style="color: red; font-size: 10.5pt;">record-id</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;">=</span><span face=""segoe ui" , sans-serif" style="color: blue; font-size: 10.5pt;">{recordId}</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: red; font-size: 10.5pt;">object-<wbr></wbr>api-name</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;">=</span><span face=""segoe ui" , sans-serif" style="color: blue; font-size: 10.5pt;">{objectApiName}</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: red; font-size: 10.5pt;">field<wbr></wbr>s</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;">=</span><span face=""segoe ui" , sans-serif" style="color: blue; font-size: 10.5pt;">{fields}</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: red; font-size: 10.5pt;">columns</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;">=</span><span face=""segoe ui" , sans-serif" style="color: blue; font-size: 10.5pt;">"2"</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: red; font-size: 10.5pt;">mode</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;">=</span><span face=""segoe ui" , sans-serif" style="color: blue; font-size: 10.5pt;">"<wbr></wbr>Edit"</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: red; font-size: 10.5pt;">onsubmit</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;">=</span><span face=""segoe ui" , sans-serif" style="color: blue; font-size: 10.5pt;">{handleSubmit}</span><span face=""segoe ui" , sans-serif" style="color: maroon; font-size: 10.5pt;">><wbr></wbr></lightning-record-form></span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"></span></div>
<div class="MsoNormal" style="background-color: white; color: #222222; font-family: calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;">
<span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: maroon; font-size: 10.5pt;"></lightning-card></span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"></span></div>
<div class="MsoNormal" style="background-color: white; color: #222222; font-family: calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;">
<span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: green; font-size: 10.5pt;"><!-- Record View--></span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"></span></div>
<div class="MsoNormal" style="background-color: white; color: #222222; font-family: calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;">
<span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: maroon; font-size: 10.5pt;"><lightning-card</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: red; font-size: 10.5pt;">title</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;">=</span><span face=""segoe ui" , sans-serif" style="color: blue; font-size: 10.5pt;">"<wbr></wbr>Record Form View"</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: red; font-size: 10.5pt;">icon-name</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;">=</span><span face=""segoe ui" , sans-serif" style="color: blue; font-size: 10.5pt;">"<wbr></wbr>standard:account"</span><span face=""segoe ui" , sans-serif" style="color: maroon; font-size: 10.5pt;">></span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"></span></div>
<div class="MsoNormal" style="background-color: white; color: #222222; font-family: calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;">
<span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: maroon; font-size: 10.5pt;"><lightning-record-form</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"><wbr></wbr> </span><span face=""segoe ui" , sans-serif" style="color: red; font-size: 10.5pt;">record-id</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;">=</span><span face=""segoe ui" , sans-serif" style="color: blue; font-size: 10.5pt;">{recordId}</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: red; font-size: 10.5pt;">object-<wbr></wbr>api-name</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;">=</span><span face=""segoe ui" , sans-serif" style="color: blue; font-size: 10.5pt;">{objectApiName}</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: red; font-size: 10.5pt;">field<wbr></wbr>s</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;">=</span><span face=""segoe ui" , sans-serif" style="color: blue; font-size: 10.5pt;">{fields}</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: red; font-size: 10.5pt;">columns</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;">=</span><span face=""segoe ui" , sans-serif" style="color: blue; font-size: 10.5pt;">"2"</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: red; font-size: 10.5pt;">mode</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;">=</span><span face=""segoe ui" , sans-serif" style="color: blue; font-size: 10.5pt;">"<wbr></wbr>View"</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: red; font-size: 10.5pt;">onsubmit</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;">=</span><span face=""segoe ui" , sans-serif" style="color: blue; font-size: 10.5pt;">{handleSubmit}</span><span face=""segoe ui" , sans-serif" style="color: maroon; font-size: 10.5pt;">><wbr></wbr></lightning-record-form></span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"></span></div>
<div class="MsoNormal" style="background-color: white; color: #222222; font-family: calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;">
<span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: maroon; font-size: 10.5pt;"></lightning-card></span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"></span></div>
<div class="MsoNormal" style="background-color: white; color: #222222; font-family: calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;">
<span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: green; font-size: 10.5pt;"><!-- Edit form --></span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"></span></div>
<div class="MsoNormal" style="background-color: white; color: #222222; font-family: calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;">
<span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: maroon; font-size: 10.5pt;"><lightning-card</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: red; font-size: 10.5pt;">title</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;">=</span><span face=""segoe ui" , sans-serif" style="color: blue; font-size: 10.5pt;">"<wbr></wbr>Edit Form"</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: red; font-size: 10.5pt;">icon-name</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;">=</span><span face=""segoe ui" , sans-serif" style="color: blue; font-size: 10.5pt;">"<wbr></wbr>standard:account"</span><span face=""segoe ui" , sans-serif" style="color: maroon; font-size: 10.5pt;">></span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"></span></div>
<div class="MsoNormal" style="background-color: white; color: #222222; font-family: calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;">
<span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: maroon; font-size: 10.5pt;"><lightning-record-<wbr></wbr>edit-form</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: red; font-size: 10.5pt;">object-api-name</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;">=</span><span face=""segoe ui" , sans-serif" style="color: blue; font-size: 10.5pt;">{<wbr></wbr>objectApiName}</span><span face=""segoe ui" , sans-serif" style="color: maroon; font-size: 10.5pt;">></span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"></span></div>
<div class="MsoNormal" style="background-color: white; color: #222222; font-family: calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;">
<span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: maroon; font-size: 10.5pt;"><lightning-input-<wbr></wbr>field</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: red; font-size: 10.5pt;">field-name</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;">=</span><span face=""segoe ui" , sans-serif" style="color: blue; font-size: 10.5pt;">"Name"</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: red; font-size: 10.5pt;">requir<wbr></wbr>ed</span><span face=""segoe ui" , sans-serif" style="color: maroon; font-size: 10.5pt;">></lightning-input-field></span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"></span></div>
<div class="MsoNormal" style="background-color: white; color: #222222; font-family: calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;">
<span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: maroon; font-size: 10.5pt;"><lightning-input-<wbr></wbr>field</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: red; font-size: 10.5pt;">field-name</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;">=</span><span face=""segoe ui" , sans-serif" style="color: blue; font-size: 10.5pt;">"<wbr></wbr>AnnualRevenue"</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: red; font-size: 10.5pt;">required</span><span face=""segoe ui" , sans-serif" style="color: maroon; font-size: 10.5pt;">></<wbr></wbr>lightning-input-field></span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"></span></div>
<div class="MsoNormal" style="background-color: white; color: #222222; font-family: calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;">
<span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: maroon; font-size: 10.5pt;"><lightning-button</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: red; font-size: 10.5pt;"><wbr></wbr>type</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;">=</span><span face=""segoe ui" , sans-serif" style="color: blue; font-size: 10.5pt;">"submit"</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: red; font-size: 10.5pt;">name</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;">=</span><span face=""segoe ui" , sans-serif" style="color: blue; font-size: 10.5pt;">"submit"</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: red; font-size: 10.5pt;">la<wbr></wbr>bel</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;">=</span><span face=""segoe ui" , sans-serif" style="color: blue; font-size: 10.5pt;">"Create Account"</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: maroon; font-size: 10.5pt;">></<wbr></wbr>lightning-button></span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"></span></div>
<div class="MsoNormal" style="background-color: white; color: #222222; font-family: calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;">
<span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: maroon; font-size: 10.5pt;"></lightning-record-<wbr></wbr>edit-form></span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"></span></div>
<div class="MsoNormal" style="background-color: white; color: #222222; font-family: calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;">
<span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: maroon; font-size: 10.5pt;"></lightning-card></span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"></span></div>
<div class="MsoNormal" style="background-color: white; color: #222222; font-family: calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;">
<span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: green; font-size: 10.5pt;"><!-- View Form--></span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"></span></div>
<div class="MsoNormal" style="background-color: white; color: #222222; font-family: calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;">
<span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: maroon; font-size: 10.5pt;"><lightning-card</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: red; font-size: 10.5pt;">title</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;">=</span><span face=""segoe ui" , sans-serif" style="color: blue; font-size: 10.5pt;">"<wbr></wbr>View Form"</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: red; font-size: 10.5pt;">icon-name</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;">=</span><span face=""segoe ui" , sans-serif" style="color: blue; font-size: 10.5pt;">"<wbr></wbr>standard:account"</span><span face=""segoe ui" , sans-serif" style="color: maroon; font-size: 10.5pt;">></span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"></span></div>
<div class="MsoNormal" style="background-color: white; color: #222222; font-family: calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;">
<span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: maroon; font-size: 10.5pt;"><lightning-record-<wbr></wbr>view-form</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: red; font-size: 10.5pt;">record-id</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;">=</span><span face=""segoe ui" , sans-serif" style="color: blue; font-size: 10.5pt;">{recordId}</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"><wbr></wbr> </span><span face=""segoe ui" , sans-serif" style="color: red; font-size: 10.5pt;">object-api-name</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;">=</span><span face=""segoe ui" , sans-serif" style="color: blue; font-size: 10.5pt;">{<wbr></wbr>objectApiName}</span><span face=""segoe ui" , sans-serif" style="color: maroon; font-size: 10.5pt;">></span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"></span></div>
<div class="MsoNormal" style="background-color: white; color: #222222; font-family: calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;">
<span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: maroon; font-size: 10.5pt;"><lightning-output-<wbr></wbr>field</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: red; font-size: 10.5pt;">field-name</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;">=</span><span face=""segoe ui" , sans-serif" style="color: blue; font-size: 10.5pt;">"Name"</span><span face=""segoe ui" , sans-serif" style="color: maroon; font-size: 10.5pt;">></<wbr></wbr>lightning-output-field></span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"></span></div>
<div class="MsoNormal" style="background-color: white; color: #222222; font-family: calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;">
<span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: maroon; font-size: 10.5pt;"><lightning-output-<wbr></wbr>field</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: red; font-size: 10.5pt;">field-name</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;">=</span><span face=""segoe ui" , sans-serif" style="color: blue; font-size: 10.5pt;">"<wbr></wbr>AnnualRevenue"</span><span face=""segoe ui" , sans-serif" style="color: maroon; font-size: 10.5pt;">></lightning-<wbr></wbr>output-field></span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"></span></div>
<div class="MsoNormal" style="background-color: white; color: #222222; font-family: calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;">
<span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: maroon; font-size: 10.5pt;"></lightning-record-<wbr></wbr>view-form></span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"></span></div>
<div class="MsoNormal" style="background-color: white; color: #222222; font-family: calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;">
<span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: maroon; font-size: 10.5pt;"></lightning-card></span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"></span></div>
<div class="MsoNormal" style="background-color: white; color: #222222; font-family: calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;">
<span face=""segoe ui" , sans-serif" style="color: maroon; font-size: 10.5pt;"></template></span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"></span></div>
<div class="MsoNormal" style="background-color: white; color: #222222; font-family: calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt;">
<br /></div>
<div class="MsoNormal" style="background-color: white; color: #222222; font-family: calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt;">
<b>JS</b></div>
<div class="MsoNormal" style="background-color: white; color: #222222; font-family: calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;">
<span face=""segoe ui" , sans-serif" style="color: blue; font-size: 10.5pt;">import</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> { LightningElement,api <wbr></wbr>} </span><span face=""segoe ui" , sans-serif" style="color: blue; font-size: 10.5pt;">from</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: #a31515; font-size: 10.5pt;">'lwc'</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;">;</span></div>
<div class="MsoNormal" style="background-color: white; color: #222222; font-family: calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;">
<span face=""segoe ui" , sans-serif" style="color: blue; font-size: 10.5pt;">import</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> Name_Field </span><span face=""segoe ui" , sans-serif" style="color: blue; font-size: 10.5pt;">from</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: #a31515; font-size: 10.5pt;">'@<wbr></wbr>salesforce/schema/Account.<wbr></wbr>Name'</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;">;</span></div>
<div class="MsoNormal" style="background-color: white; color: #222222; font-family: calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;">
<span face=""segoe ui" , sans-serif" style="color: blue; font-size: 10.5pt;">import</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> Revenue_Field </span><span face=""segoe ui" , sans-serif" style="color: blue; font-size: 10.5pt;">from</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: #a31515; font-size: 10.5pt;">'@<wbr></wbr>salesforce/schema/Account.<wbr></wbr>AnnualRevenue'</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;">;</span></div>
<div class="MsoNormal" style="background-color: white; color: #222222; font-family: calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;">
<span face=""segoe ui" , sans-serif" style="color: blue; font-size: 10.5pt;">import</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> { ShowToastEvent } </span><span face=""segoe ui" , sans-serif" style="color: blue; font-size: 10.5pt;">from</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"><wbr></wbr> </span><span face=""segoe ui" , sans-serif" style="color: #a31515; font-size: 10.5pt;">'lightning/<wbr></wbr>platformShowToastEvent'</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;">;</span></div>
<div class="MsoNormal" style="background-color: white; color: #222222; font-family: calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;">
<span face=""segoe ui" , sans-serif" style="color: blue; font-size: 10.5pt;">export</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: blue; font-size: 10.5pt;">default</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: blue; font-size: 10.5pt;">class</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> <wbr></wbr>RecordForm </span><span face=""segoe ui" , sans-serif" style="color: blue; font-size: 10.5pt;">extends</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> <wbr></wbr>LightningElement {</span></div>
<div class="MsoNormal" style="background-color: white; color: #222222; font-family: calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;">
<span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> fields=[Name_Field,<wbr></wbr>Revenue_Field];</span></div>
<div class="MsoNormal" style="background-color: white; color: #222222; font-family: calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;">
<span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> @api recordId;</span></div>
<div class="MsoNormal" style="background-color: white; color: #222222; font-family: calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;">
<span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> @api objectApiName;</span></div>
<div class="MsoNormal" style="background-color: white; color: #222222; font-family: calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;">
<span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> handleSubmit(event){</span></div>
<div class="MsoNormal" style="background-color: white; color: #222222; font-family: calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;">
<span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span></div>
<div class="MsoNormal" style="background-color: white; color: #222222; font-family: calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;">
<span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> }</span></div>
<div class="MsoNormal" style="background-color: white; color: #222222; font-family: calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;">
<span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> validateFields() {</span></div>
<div class="MsoNormal" style="background-color: white; color: #222222; font-family: calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;">
<span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: blue; font-size: 10.5pt;">this</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;">.template.<wbr></wbr>querySelectorAll(</span><span face=""segoe ui" , sans-serif" style="color: #a31515; font-size: 10.5pt;">'lightning-<wbr></wbr>input-field'</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;">).forEach(element </span><span face=""segoe ui" , sans-serif" style="color: blue; font-size: 10.5pt;"><wbr></wbr>=></span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> {</span></div>
<div class="MsoNormal" style="background-color: white; color: #222222; font-family: calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;">
<span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> element.<wbr></wbr>reportValidity();</span></div>
<div class="MsoNormal" style="background-color: white; color: #222222; font-family: calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;">
<span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> });</span></div>
<div class="MsoNormal" style="background-color: white; color: #222222; font-family: calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;">
<span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> }</span></div>
<div class="MsoNormal" style="background-color: white; color: #222222; font-family: calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="background-color: white; color: #222222; font-family: calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;">
<span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;">}</span></div>
<div class="MsoNormal" style="background-color: white; color: #222222; font-family: calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt;"><b>XML</b></div>
<div class="MsoNormal" style="background-color: white; color: #222222; font-family: calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;">
<span face=""segoe ui" , sans-serif" style="color: maroon; font-size: 10.5pt;"><?xml</span><span face=""segoe ui" , sans-serif" style="color: red; font-size: 10.5pt;"> version</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;">=</span><span face=""segoe ui" , sans-serif" style="color: blue; font-size: 10.5pt;">"1.0"</span><span face=""segoe ui" , sans-serif" style="color: red; font-size: 10.5pt;"> encoding</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;">=</span><span face=""segoe ui" , sans-serif" style="color: blue; font-size: 10.5pt;">"<wbr></wbr>UTF-8"</span><span face=""segoe ui" , sans-serif" style="color: maroon; font-size: 10.5pt;">?></span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"></span></div>
<div class="MsoNormal" style="background-color: white; color: #222222; font-family: calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;">
<span face=""segoe ui" , sans-serif" style="color: maroon; font-size: 10.5pt;"><LightningComponentBundle</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: red; font-size: 10.5pt;">xmln<wbr></wbr>s</span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;">=</span><span face=""segoe ui" , sans-serif" style="color: blue; font-size: 10.5pt;">"<a data-saferedirecturl="https://www.google.com/url?q=http://soap.sforce.com/2006/04/metadata&source=gmail&ust=1591369211445000&usg=AFQjCNENr-YDegN-EN74QVV_UUKmIWqKCg" href="http://soap.sforce.com/2006/04/metadata" style="color: #1155cc;" target="_blank">http://soap.sforce.com/<wbr></wbr>2006/04/metadata</a>"</span><span face=""segoe ui" , sans-serif" style="color: maroon; font-size: 10.5pt;">></span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"></span></div>
<div class="MsoNormal" style="background-color: white; color: #222222; font-family: calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;">
<span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: maroon; font-size: 10.5pt;"><apiVersion></span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;">48.0</span><span face=""segoe ui" , sans-serif" style="color: maroon; font-size: 10.5pt;"></<wbr></wbr>apiVersion></span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"></span></div>
<div class="MsoNormal" style="background-color: white; color: #222222; font-family: calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;">
<span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: maroon; font-size: 10.5pt;"><isExposed></span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;">true</span><span face=""segoe ui" , sans-serif" style="color: maroon; font-size: 10.5pt;"></<wbr></wbr>isExposed></span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"></span></div>
<div class="MsoNormal" style="background-color: white; color: #222222; font-family: calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;">
<span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: maroon; font-size: 10.5pt;"><targets></span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span></div>
<div class="MsoNormal" style="background-color: white; color: #222222; font-family: calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;">
<span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: maroon; font-size: 10.5pt;"><target></span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;">lightning__<wbr></wbr>AppPage</span><span face=""segoe ui" , sans-serif" style="color: maroon; font-size: 10.5pt;"></target></span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"></span></div>
<div class="MsoNormal" style="background-color: white; color: #222222; font-family: calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;">
<span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: maroon; font-size: 10.5pt;"><target></span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;">lightning__<wbr></wbr>RecordPage</span><span face=""segoe ui" , sans-serif" style="color: maroon; font-size: 10.5pt;"></target></span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"></span></div>
<div class="MsoNormal" style="background-color: white; color: #222222; font-family: calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;">
<span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: maroon; font-size: 10.5pt;"><target></span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;">lightning__<wbr></wbr>HomePage</span><span face=""segoe ui" , sans-serif" style="color: maroon; font-size: 10.5pt;"></target></span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"></span></div>
<div class="MsoNormal" style="background-color: white; color: #222222; font-family: calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;">
<span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"> </span><span face=""segoe ui" , sans-serif" style="color: maroon; font-size: 10.5pt;"></targets></span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"></span></div>
<div class="MsoNormal" style="background-color: white; color: #222222; font-family: calibri, sans-serif; font-size: 11pt; line-height: 14.25pt; margin: 0in 0in 0.0001pt;">
<span face=""segoe ui" , sans-serif" style="color: maroon; font-size: 10.5pt;"></LightningComponentBundle></span><span face=""segoe ui" , sans-serif" style="color: black; font-size: 10.5pt;"></span></div>
<div class="MsoNormal" style="background-color: white; font-family: calibri, sans-serif; font-size: 11pt; line-height: 15.6933px; margin: 0in 0in 8pt;">
<br /></div>
<h1 style="font-family: "calibri light", sans-serif; font-size: 16pt; line-height: 22.8267px; margin: 0in 0in 0.05in;"><span style="color: #4a474b; font-family: Arial, sans-serif; font-size: medium; text-align: justify; text-indent: -24px;"><span style="background-color: red;">Note </span><span style="background-color: white; font-weight: normal;">: - This component doesn’t support all </span><span style="background: yellow; font-weight: normal;">Salesforce standard objects. For example, the Event and Task objects are not supported. </span></span><span style="background: yellow; color: #4a474b; font-family: Arial, sans-serif; font-size: 11pt; font-weight: normal; text-align: justify; text-indent: -18pt;">External objects and person accounts</span><span style="background-color: white; color: #4a474b; font-family: Arial, sans-serif; font-size: 11pt; font-weight: normal; text-align: justify; text-indent: -18pt;"> are not supported.</span><span style="background-color: white; color: #222222; font-family: calibri, sans-serif; font-size: 11pt; font-weight: normal; text-indent: -24px;"> </span></h1></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal" style="background: white; line-height: normal; margin: 12pt 0in 8.55pt;">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal" style="background: white; line-height: 15.6pt; margin: 17.15pt 0in 8.55pt;">
</div>
<div class="MsoNormal" style="background: white; line-height: 15.6pt; margin: 17.15pt 0in 8.55pt;">
</div>
</div>
Master Class http://www.blogger.com/profile/01852672912613116009noreply@blogger.com0