tag:blogger.com,1999:blog-90834318426388545692024-03-05T10:10:58.188+05:30Salesforce Code CrackShaik Nagajanihttp://www.blogger.com/profile/08014314816293399854noreply@blogger.comBlogger230125tag:blogger.com,1999:blog-9083431842638854569.post-59912140397396129932024-01-12T12:08:00.001+05:302024-01-12T12:08:14.730+05:30Lightning Record Picker in Salesforce<p><span style="white-space: normal;">The lightning-record-picker component allows you to search for a list of Salesforce Records that match search input. It uses the GraphQL wire adapter to search for records, displays the records, and allows the user to select a record.</span></p><p> Ex:</p><p><b>HTML</b></p><p></p><pre class="hljs" style="background: rgb(248, 248, 248); color: #333333; display: block; overflow-x: auto; padding: 0.5em;"><span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">template</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-card</span> <span class="hljs-attr" style="color: teal;">title</span>=<span class="hljs-string" style="color: #dd1144;">"Lightning Record Picker"</span> <span class="hljs-attr" style="color: teal;">icon-name</span>=<span class="hljs-string" style="color: #dd1144;">"standard:account"</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-record-picker</span> <span class="hljs-attr" style="color: teal;">label</span>=<span class="hljs-string" style="color: #dd1144;">"Select Account"</span>
<span class="hljs-attr" style="color: teal;">onchange</span>=<span class="hljs-string" style="color: #dd1144;">{handleRecordChange}</span>
<span class="hljs-attr" style="color: teal;">placeholder</span>=<span class="hljs-string" style="color: #dd1144;">"Search Accounts..."</span>
<span class="hljs-attr" style="color: teal;">object-api-name</span>=<span class="hljs-string" style="color: #dd1144;">"Account"</span>
<span class="hljs-attr" style="color: teal;">display-info</span>=<span class="hljs-string" style="color: #dd1144;">{displayInfo}</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-record-picker</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">template</span> <span class="hljs-attr" style="color: teal;">lwc:if</span>=<span class="hljs-string" style="color: #dd1144;">{selectedRecordId}</span>></span>Selected Record Id: {selectedRecordId}<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">template</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-card</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">template</span>></span></pre><b>JS</b><p></p><pre class="hljs" style="background: rgb(248, 248, 248); color: #333333; display: block; overflow-x: auto; padding: 0.5em;"><span class="hljs-keyword" style="color: #333333; font-weight: 700;">import</span> { LightningElement } <span class="hljs-keyword" style="color: #333333; font-weight: 700;">from</span> <span class="hljs-string" style="color: #dd1144;">'lwc'</span>;
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">export</span> <span class="hljs-keyword" style="color: #333333; font-weight: 700;">default</span> <span class="hljs-class"><span class="hljs-keyword" style="color: #333333; font-weight: 700;">class</span> <span class="hljs-title" style="color: #445588; font-weight: 700;">RecordPicker</span> <span class="hljs-keyword" style="color: #333333; font-weight: 700;">extends</span> <span class="hljs-title" style="color: #445588; font-weight: 700;">LightningElement</span> </span>{
selectedRecordId;
displayInfo = {
additionalFields: [<span class="hljs-string" style="color: #dd1144;">'Phone'</span>, <span class="hljs-string" style="color: #dd1144;">'Industry'</span>]
}
handleRecordChange(event) {
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.selectedRecordId = event.detail.recordId;
}
}</pre><div><b><br /></b></div><div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSrtc2y6nExiK_OiMK4Q72pfZDRr0SJ_VulrxTOolMJqN95X-tZM2HRfB32ujeK_Fm4jUUFs1gYY5Tsa1w4YBDxKJVYSMagI6FkDyfAhsZHAQPKk7gutHqSV0LNQgnWEXxwkOztziYpb0GKlaUYeohkmwahx1hCRQsaVlB0vQiWxjSif9Q6U4hkdseMJaW/s1244/Screenshot%202024-01-12%20115354.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="201" data-original-width="1244" height="103" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSrtc2y6nExiK_OiMK4Q72pfZDRr0SJ_VulrxTOolMJqN95X-tZM2HRfB32ujeK_Fm4jUUFs1gYY5Tsa1w4YBDxKJVYSMagI6FkDyfAhsZHAQPKk7gutHqSV0LNQgnWEXxwkOztziYpb0GKlaUYeohkmwahx1hCRQsaVlB0vQiWxjSif9Q6U4hkdseMJaW/w640-h103/Screenshot%202024-01-12%20115354.png" width="640" /></a></div><br /><b><br /></b></div>Shaik Nagajanihttp://www.blogger.com/profile/08014314816293399854noreply@blogger.com0tag:blogger.com,1999:blog-9083431842638854569.post-29891526416013498292024-01-11T19:01:00.005+05:302024-01-11T19:01:59.222+05:30Dynamically detect the running context in salesforce using Apex<p>In the salesforce, the <b>Request</b> class provides a few methods among them we do have a <b>getQuiddity ()</b> method that returns an enum(System.Quiddity) specifying the context of the origin of this request. </p><p>Ex:</p><p></p><pre class="hljs" style="background: rgb(248, 248, 248); color: #333333; display: block; overflow-x: auto; padding: 0.5em;">Quiddity contextInfo = Request.getCurrent().getQuiddity();
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">switch</span> on contextInfo {
when VF {
system.debug(<span class="hljs-string" style="color: #dd1144;">'Visualforce'</span>);
} when AURA {
system.debug(<span class="hljs-string" style="color: #dd1144;">'AURA'</span>);
} when FUTURE, SCHEDULED, QUEUEABLE, BATCH_APEX {
system.debug(<span class="hljs-string" style="color: #dd1144;">'async context'</span>);
} when INVOCABLE_ACTION {
system.debug(<span class="hljs-string" style="color: #dd1144;">'FLOW'</span>);
} when ANONYMOUS {
system.debug(<span class="hljs-string" style="color: #dd1144;">'ANONYMOUS'</span>);
} when REST {
system.debug(<span class="hljs-string" style="color: #dd1144;">'REST'</span>);
}
}</pre>For Reference <p></p><div><a href="https://developer.salesforce.com/docs/atlas.en-us.apexref.meta/apexref/apex_enum_System_Quiddity.htm#topic-title" rel="nofollow" target="_blank">Quiddity Enum</a><br /></div>Shaik Nagajanihttp://www.blogger.com/profile/08014314816293399854noreply@blogger.com0tag:blogger.com,1999:blog-9083431842638854569.post-81849159422721152932023-08-09T12:25:00.002+05:302023-08-09T12:25:26.093+05:30How to convert timestamp to datetime using apex in salesforce<p> Sample Code:</p><pre class="hljs" style="background: rgb(240, 240, 240); color: #444444; display: block; overflow-x: auto; padding: 0.5em;">String timestamp = <span class="hljs-string" style="color: #880000;">'2023-08-07T14:53:49Z'</span>;
timestamp = timestamp.replace(<span class="hljs-string" style="color: #880000;">'T'</span>, <span class="hljs-string" style="color: #880000;">' '</span>);
System.debug(<span class="hljs-string" style="color: #880000;">'Datetime ==> '</span>+DateTime.valueOf(timestamp));
</pre><p></p>Screenshot:<div><p class="p1" style="font-family: Helvetica; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 12px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><br /></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMzGfCr-YwGLR035ljUf3FziemljhiQndkIg7nIDHA3Qf-0U6loNCWkfltXxJVAd31xZuWIxbs38PUvBRsul609wphc9DV7DkQKS41lfcqz7NTfOTp8uBAWS9TSPrh-JENKjMEbxktkGef7Ajk0QcMFdeLO_kyUA4l3MfsVNlS3vgMAY3-nQnVhE-CYhnT/s1638/Screenshot%202023-08-09%20at%2002.52.54.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="212" data-original-width="1638" height="83" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMzGfCr-YwGLR035ljUf3FziemljhiQndkIg7nIDHA3Qf-0U6loNCWkfltXxJVAd31xZuWIxbs38PUvBRsul609wphc9DV7DkQKS41lfcqz7NTfOTp8uBAWS9TSPrh-JENKjMEbxktkGef7Ajk0QcMFdeLO_kyUA4l3MfsVNlS3vgMAY3-nQnVhE-CYhnT/w640-h83/Screenshot%202023-08-09%20at%2002.52.54.png" width="640" /></a></div><br /><p class="p1" style="font-family: Helvetica; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 12px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><br /></p></div>Shaik Nagajanihttp://www.blogger.com/profile/08014314816293399854noreply@blogger.com0tag:blogger.com,1999:blog-9083431842638854569.post-89659950829306070072023-01-03T14:48:00.000+05:302023-01-03T14:48:03.461+05:30Dynamic popup/modal using Lightning-modal in Lightning Web Components(LWC)<p>This post explains how to open the popup using Lightning web components (LWC).</p><p></p><ul style="text-align: left;"><li>Created the lwcmodal component this component has the lighting modal base components to open the popup/modal.</li><li>import <b>LightningModal</b> from<b> lightning/modal</b>. The component has access to the normal LWC resources as well as the special container, helper components, methods, and events of the <b>lightning/modal </b>module.</li></ul><p></p><p>LWCModal Component</p><p><b>lwcmodal.html</b></p><pre class="hljs" style="background: rgb(248, 248, 248); color: #333333; display: block; overflow-x: auto; padding: 0.5em;"><span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">template</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-modal-header</span> <span class="hljs-attr" style="color: teal;">label</span>=<span class="hljs-string" style="color: #dd1144;">{label}</span>></span><span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-modal-header</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-modal-body</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-datatable</span> <span class="hljs-attr" style="color: teal;">key-field</span>=<span class="hljs-string" style="color: #dd1144;">"id"</span> <span class="hljs-attr" style="color: teal;">data</span>=<span class="hljs-string" style="color: #dd1144;">{conData}</span> <span class="hljs-attr" style="color: teal;">columns</span>=<span class="hljs-string" style="color: #dd1144;">{columns}</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-datatable</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-modal-body</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-modal-footer</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-button</span> <span class="hljs-attr" style="color: teal;">variant</span>=<span class="hljs-string" style="color: #dd1144;">"brand"</span> <span class="hljs-attr" style="color: teal;">label</span>=<span class="hljs-string" style="color: #dd1144;">"OK"</span> <span class="hljs-attr" style="color: teal;">onclick</span>=<span class="hljs-string" style="color: #dd1144;">{handleOkay}</span>></span><span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-button</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-modal-footer</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">template</span>></span></pre><p><b>lwcmodal.js</b></p><pre class="hljs" style="background: rgb(248, 248, 248); color: #333333; display: block; overflow-x: auto; padding: 0.5em;"><span class="hljs-keyword" style="color: #333333; font-weight: 700;">import</span> { api } <span class="hljs-keyword" style="color: #333333; font-weight: 700;">from</span> <span class="hljs-string" style="color: #dd1144;">'lwc'</span>;
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">import</span> LightningModal <span class="hljs-keyword" style="color: #333333; font-weight: 700;">from</span> <span class="hljs-string" style="color: #dd1144;">'lightning/modal'</span>;
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">export</span> <span class="hljs-keyword" style="color: #333333; font-weight: 700;">default</span> <span class="hljs-class"><span class="hljs-keyword" style="color: #333333; font-weight: 700;">class</span> <span class="hljs-title" style="color: #445588; font-weight: 700;">Lwcmodal</span> <span class="hljs-keyword" style="color: #333333; font-weight: 700;">extends</span> <span class="hljs-title" style="color: #445588; font-weight: 700;">LightningModal</span> </span>{
@api conData;
@api columns;
@api label;
handleOkay(event) {
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.close(<span class="hljs-string" style="color: #dd1144;">'okay'</span>);
}
}</pre><br /><div><ul style="text-align: left;"><li><b>LightningModal</b> provides a <b>.open() </b>method which opens a modal and returns a promise that asynchronously resolves with the result of the user’s interaction with the modal.</li><li>Use<b> this.close(result) </b>to close the modal, where the result is anything you want to return from the modal. The .close() operation is asynchronous to display a brief fade-out animation before the modal is destroyed. The result data can’t be modified after the close operation begins.</li></ul><div><div>The .open() method lets you assign values to the modal's properties. LightningModal provides these properties.</div><div><br /></div><div><b>label </b>- Required. Sets the modal's title and assistive device label. If the modal has a header, set the label in the lightning-modal-header component. If the modal doesn't have a header, set the label property when opening the modal.</div><div><br /></div><div><b>size</b> - Determines how much of the viewport width the modal uses. Supported values are small, medium, and large, which you can set when you open the modal. The default value is medium. The length of the modal is determined by the amount of content.</div><div><br /></div><div><b>description</b> - Sets the modal's accessible description. It uses the aria-description attribute where supported, or falls back to aria-describedby. If you set a custom description value, include the label name at the beginning of your description, because some screen readers only read the description and not the label.</div><div><br /></div><div><b>disableClose </b>- Prevents closing the modal by normal means like the ESC key, the close button, or .close(). For example, you could briefly set disableClose to true while a completed form is saving, so the user doesn't dismiss the modal early.</div><div><br /></div></div></div><div><b>dynamicmodal.html</b></div><pre class="hljs" style="background: rgb(248, 248, 248); color: #333333; display: block; overflow-x: auto; padding: 0.5em;"><span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">template</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-card</span> <span class="hljs-attr" style="color: teal;">variant</span>=<span class="hljs-string" style="color: #dd1144;">"Narrow"</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">p</span> <span class="hljs-attr" style="color: teal;">class</span>=<span class="hljs-string" style="color: #dd1144;">"slds-p-horizontal_small"</span>></span>When clicking the button it opens the dynamic modal.<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">br</span>/></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-button</span> <span class="hljs-attr" style="color: teal;">variant</span>=<span class="hljs-string" style="color: #dd1144;">"brand"</span> <span class="hljs-attr" style="color: teal;">onclick</span>=<span class="hljs-string" style="color: #dd1144;">{handleContactData}</span> <span class="hljs-attr" style="color: teal;">label</span>=<span class="hljs-string" style="color: #dd1144;">"Show Contact Data"</span>></span><span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-button</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">p</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-card</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">template</span>></span></pre><b>dynamicmodal.js</b><br /><pre class="hljs" style="background: rgb(248, 248, 248); color: #333333; display: block; overflow-x: auto; padding: 0.5em;"><span class="hljs-keyword" style="color: #333333; font-weight: 700;">import</span> { LightningElement } <span class="hljs-keyword" style="color: #333333; font-weight: 700;">from</span> <span class="hljs-string" style="color: #dd1144;">'lwc'</span>;
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">import</span> MyModal <span class="hljs-keyword" style="color: #333333; font-weight: 700;">from</span> <span class="hljs-string" style="color: #dd1144;">"c/lwcmodal"</span>;
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">import</span> getContacts <span class="hljs-keyword" style="color: #333333; font-weight: 700;">from</span> <span class="hljs-string" style="color: #dd1144;">'@salesforce/apex/LWCExampleController.getContacts'</span>;
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">export</span> <span class="hljs-keyword" style="color: #333333; font-weight: 700;">default</span> <span class="hljs-class"><span class="hljs-keyword" style="color: #333333; font-weight: 700;">class</span> <span class="hljs-title" style="color: #445588; font-weight: 700;">Dynamicmodal</span> <span class="hljs-keyword" style="color: #333333; font-weight: 700;">extends</span> <span class="hljs-title" style="color: #445588; font-weight: 700;">LightningElement</span> </span>{
consData;
columns = [
{ label: <span class="hljs-string" style="color: #dd1144;">'First Name'</span>, fieldName: <span class="hljs-string" style="color: #dd1144;">'FirstName'</span>, type:<span class="hljs-string" style="color: #dd1144;">'text'</span> },
{ label: <span class="hljs-string" style="color: #dd1144;">'Last Name'</span>, fieldName: <span class="hljs-string" style="color: #dd1144;">'LastName'</span>, type: <span class="hljs-string" style="color: #dd1144;">'text'</span> },
{ label: <span class="hljs-string" style="color: #dd1144;">'Name'</span>, fieldName: <span class="hljs-string" style="color: #dd1144;">'Name'</span>, type: <span class="hljs-string" style="color: #dd1144;">'text'</span> },
{ label: <span class="hljs-string" style="color: #dd1144;">'Email'</span>, fieldName: <span class="hljs-string" style="color: #dd1144;">'Email'</span>, type: <span class="hljs-string" style="color: #dd1144;">'email'</span> },
];
connectedCallback() {
getContacts().then(res => {
<span class="hljs-built_in" style="color: #0086b3;">console</span>.log(<span class="hljs-string" style="color: #dd1144;">'res => '</span>, res);
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.consData = res;
})
.catch(error => {
<span class="hljs-built_in" style="color: #0086b3;">console</span>.log(<span class="hljs-string" style="color: #dd1144;">'error => '</span>, error);
});
}
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">async</span> handleContactData() {
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">const</span> result = <span class="hljs-keyword" style="color: #333333; font-weight: 700;">await</span> MyModal.open({
label: <span class="hljs-string" style="color: #dd1144;">'Contact Data'</span>,
size: <span class="hljs-string" style="color: #dd1144;">'large'</span>,
columns: [...this.columns],
conData : [...this.consData]
});
<span class="hljs-comment" style="color: #999988; font-style: italic;">// if modal closed with X button, promise returns result = 'undefined'</span>
<span class="hljs-comment" style="color: #999988; font-style: italic;">// if modal closed with OK button, promise returns result = 'okay'</span>
<span class="hljs-built_in" style="color: #0086b3;">console</span>.log(<span class="hljs-string" style="color: #dd1144;">'result ==> '</span>,result);
}
}</pre><b>Apex class</b><div><pre class="hljs" style="background: rgb(248, 248, 248); color: #333333; display: block; overflow-x: auto; padding: 0.5em;"><span class="hljs-keyword" style="color: #333333; font-weight: 700;">public</span> inherited sharing <span class="hljs-class"><span class="hljs-keyword" style="color: #333333; font-weight: 700;">class</span> <span class="hljs-title" style="color: #445588; font-weight: 700;">LWCExampleController</span> </span>{
<span class="hljs-meta" style="color: #999999; font-weight: 700;">@AuraEnabled</span>(Cacheable = <span class="hljs-keyword" style="color: #333333; font-weight: 700;">true</span>)
<span class="hljs-function"><span class="hljs-keyword" style="color: #333333; font-weight: 700;">public</span> <span class="hljs-keyword" style="color: #333333; font-weight: 700;">static</span> List<Contact> <span class="hljs-title" style="color: #990000; font-weight: 700;">getContacts</span><span class="hljs-params">()</span> </span>{
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">return</span> [SELECT Id, Name, FirstName, LastName, Email
FROM Contact
WHERE Email != <span class="hljs-keyword" style="color: #333333; font-weight: 700;">null</span>
ORDER BY CreatedDate DESC NULLS LAST limit <span class="hljs-number" style="color: teal;">10</span>];
}
}</pre><div><b>Example</b></div><div><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghp0tMSDI1OmrEmRzPzogu0O0Zqi7szBnO3nbpI3J6euiUab8qgbjvZVo1XEp0yHNl3WHGUYZjWFL4RKvp8vm4CBXaWfen-61ibOkBuVRZj_6p7QGRqdNb0R6fhwWS9aKCtxV5OzgEKYHGCiu8WA6FAacRpU2XzEP4B9NZidY7lJ06G6SUqyyz2bzlhg/s1000/chrome-capture-2023-0-3%20(1).gif" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="408" data-original-width="1000" height="262" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghp0tMSDI1OmrEmRzPzogu0O0Zqi7szBnO3nbpI3J6euiUab8qgbjvZVo1XEp0yHNl3WHGUYZjWFL4RKvp8vm4CBXaWfen-61ibOkBuVRZj_6p7QGRqdNb0R6fhwWS9aKCtxV5OzgEKYHGCiu8WA6FAacRpU2XzEP4B9NZidY7lJ06G6SUqyyz2bzlhg/w640-h262/chrome-capture-2023-0-3%20(1).gif" width="640" /></a></div><br /><div><br /></div><div><br /></div></div>Shaik Nagajanihttp://www.blogger.com/profile/08014314816293399854noreply@blogger.com0tag:blogger.com,1999:blog-9083431842638854569.post-91988320585445653182023-01-01T13:16:00.003+05:302023-01-01T13:16:29.357+05:30Convert XML string to blob using Javascript <p> This post explain how to convet to XML string to Blob and you can sent blob to servers.</p><br />
<pre class="hljs" style="background: rgb(248, 248, 248); color: #333333; display: block; overflow-x: auto; padding: 0.5em;"> convertXMLStringToblob = (xmlstring) => {
<span class="hljs-comment" style="color: #999988; font-style: italic;">// Convert xml string to base64data</span>
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">let</span> xmlval = <span class="hljs-keyword" style="color: #333333; font-weight: 700;">new</span> DOMParser().parseFromString(xmlstring, <span class="hljs-string" style="color: #dd1144;">'application/xml'</span>);
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">let</span> base64Data = <span class="hljs-built_in" style="color: #0086b3;">window</span>.btoa((<span class="hljs-keyword" style="color: #333333; font-weight: 700;">new</span> XMLSerializer()).serializeToString(xmlval));
<span class="hljs-comment" style="color: #999988; font-style: italic;">// Convert base64data to blob</span>
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">const</span> byteCharacters = <span class="hljs-built_in" style="color: #0086b3;">window</span>.atob(base64Data);
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">const</span> byteNumbers = <span class="hljs-keyword" style="color: #333333; font-weight: 700;">new</span> <span class="hljs-built_in" style="color: #0086b3;">Array</span>(byteCharacters.length);
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">for</span> (<span class="hljs-keyword" style="color: #333333; font-weight: 700;">let</span> i = <span class="hljs-number" style="color: teal;">0</span>; i < byteCharacters.length; i++) {
byteNumbers[i] = byteCharacters.charCodeAt(i);
}
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">const</span> byteArray = <span class="hljs-keyword" style="color: #333333; font-weight: 700;">new</span> <span class="hljs-built_in" style="color: #0086b3;">Uint8Array</span>(byteNumbers);
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">return</span> <span class="hljs-keyword" style="color: #333333; font-weight: 700;">new</span> Blob([byteArray], {type:<span class="hljs-string" style="color: #dd1144;">'application/xml'</span>});
}</pre><p>Sample file</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt3-_ZEDabugob4sZEVhRT2FC5LdPbWrHzHj6gckCxPgqhkaygIlz7M3t-z9BnDzcLBnM8nIOcNOGo1zMAhWgjo3hqvBQM6XEQAA8TstGftdr-mh3tlGI5_Clv9nWJYR9d3464DAln6ulCtyvGAlQPFJ7pgdtd6giR4Gjuh_53LuKnSn5EvQCfWdP7uQ/s2598/Screenshot%202023-01-01%20at%202.44.21%20AM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="128" data-original-width="2598" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt3-_ZEDabugob4sZEVhRT2FC5LdPbWrHzHj6gckCxPgqhkaygIlz7M3t-z9BnDzcLBnM8nIOcNOGo1zMAhWgjo3hqvBQM6XEQAA8TstGftdr-mh3tlGI5_Clv9nWJYR9d3464DAln6ulCtyvGAlQPFJ7pgdtd6giR4Gjuh_53LuKnSn5EvQCfWdP7uQ/w640-h32/Screenshot%202023-01-01%20at%202.44.21%20AM.png" width="640" /></a></div><br /><p><br /></p>Shaik Nagajanihttp://www.blogger.com/profile/08014314816293399854noreply@blogger.com0tag:blogger.com,1999:blog-9083431842638854569.post-14576427188704321492022-11-25T18:42:00.003+05:302022-11-25T18:44:00.453+05:30Show alerts using Lightning Web Componets(LWC)<p>This post explains how to create the notifications alerts using lightning web components(lwc).</p><p><b>lightning/alert </b>module lets you create an alert modal within your component. Use LightningAlert on your components to communicate a state that affects the entire system, not just a feature or page.</p><p><b>HTML</b></p><p></p><pre class="hljs" style="background: rgb(248, 248, 248); color: #333333; display: block; overflow-x: auto; padding: 0.5em;"><span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">template</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">div</span> <span class="hljs-attr" style="color: teal;">class</span>=<span class="hljs-string" style="color: #dd1144;">"slds-align_absolute-center slds-theme_default"</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-button-group</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-button</span> <span class="hljs-attr" style="color: teal;">label</span>=<span class="hljs-string" style="color: #dd1144;">"Default"</span> <span class="hljs-attr" style="color: teal;">title</span>=<span class="hljs-string" style="color: #dd1144;">"default"</span> <span class="hljs-attr" style="color: teal;">onclick</span>=<span class="hljs-string" style="color: #dd1144;">{handleClick}</span>></span><span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-button</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-button</span> <span class="hljs-attr" style="color: teal;">label</span>=<span class="hljs-string" style="color: #dd1144;">"Shade Alert"</span> <span class="hljs-attr" style="color: teal;">title</span>=<span class="hljs-string" style="color: #dd1144;">"shade"</span> <span class="hljs-attr" style="color: teal;">onclick</span>=<span class="hljs-string" style="color: #dd1144;">{handleClick}</span>></span><span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-button</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-button</span> <span class="hljs-attr" style="color: teal;">label</span>=<span class="hljs-string" style="color: #dd1144;">"Inverse Alert"</span> <span class="hljs-attr" style="color: teal;">title</span>=<span class="hljs-string" style="color: #dd1144;">"inverse"</span> <span class="hljs-attr" style="color: teal;">onclick</span>=<span class="hljs-string" style="color: #dd1144;">{handleClick}</span>></span><span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-button</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-button</span> <span class="hljs-attr" style="color: teal;">label</span>=<span class="hljs-string" style="color: #dd1144;">"Alt-inverse Alert"</span> <span class="hljs-attr" style="color: teal;">title</span>=<span class="hljs-string" style="color: #dd1144;">"alt-inverse"</span> <span class="hljs-attr" style="color: teal;">onclick</span>=<span class="hljs-string" style="color: #dd1144;">{handleClick}</span>></span><span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-button</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-button</span> <span class="hljs-attr" style="color: teal;">label</span>=<span class="hljs-string" style="color: #dd1144;">"Success Alert"</span> <span class="hljs-attr" style="color: teal;">title</span>=<span class="hljs-string" style="color: #dd1144;">"success"</span> <span class="hljs-attr" style="color: teal;">onclick</span>=<span class="hljs-string" style="color: #dd1144;">{handleClick}</span>></span><span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-button</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-button</span> <span class="hljs-attr" style="color: teal;">label</span>=<span class="hljs-string" style="color: #dd1144;">"Info Alert"</span> <span class="hljs-attr" style="color: teal;">title</span>=<span class="hljs-string" style="color: #dd1144;">"info"</span> <span class="hljs-attr" style="color: teal;">onclick</span>=<span class="hljs-string" style="color: #dd1144;">{handleClick}</span>></span><span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-button</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-button</span> <span class="hljs-attr" style="color: teal;">label</span>=<span class="hljs-string" style="color: #dd1144;">"Warning Alert"</span> <span class="hljs-attr" style="color: teal;">title</span>=<span class="hljs-string" style="color: #dd1144;">"warning"</span> <span class="hljs-attr" style="color: teal;">onclick</span>=<span class="hljs-string" style="color: #dd1144;">{handleClick}</span>></span><span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-button</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-button</span> <span class="hljs-attr" style="color: teal;">label</span>=<span class="hljs-string" style="color: #dd1144;">"Error Alert"</span> <span class="hljs-attr" style="color: teal;">title</span>=<span class="hljs-string" style="color: #dd1144;">"error"</span> <span class="hljs-attr" style="color: teal;">onclick</span>=<span class="hljs-string" style="color: #dd1144;">{handleClick}</span>></span><span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-button</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-button</span> <span class="hljs-attr" style="color: teal;">label</span>=<span class="hljs-string" style="color: #dd1144;">"Offline Alert"</span> <span class="hljs-attr" style="color: teal;">title</span>=<span class="hljs-string" style="color: #dd1144;">"offline"</span> <span class="hljs-attr" style="color: teal;">onclick</span>=<span class="hljs-string" style="color: #dd1144;">{handleClick}</span>></span><span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-button</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-button-group</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">div</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">template</span>></span></pre><p></p>
<p><b>Javascript</b></p><p></p><pre class="hljs" style="background: rgb(248, 248, 248); color: #333333; display: block; overflow-x: auto; padding: 0.5em;"><span class="hljs-keyword" style="color: #333333; font-weight: 700;">import</span> { LightningElement } <span class="hljs-keyword" style="color: #333333; font-weight: 700;">from</span> <span class="hljs-string" style="color: #dd1144;">'lwc'</span>;
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">import</span> LightningAlert <span class="hljs-keyword" style="color: #333333; font-weight: 700;">from</span> <span class="hljs-string" style="color: #dd1144;">'lightning/alert'</span>;
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">export</span> <span class="hljs-keyword" style="color: #333333; font-weight: 700;">default</span> <span class="hljs-class"><span class="hljs-keyword" style="color: #333333; font-weight: 700;">class</span> <span class="hljs-title" style="color: #445588; font-weight: 700;">LightningAlerts</span> <span class="hljs-keyword" style="color: #333333; font-weight: 700;">extends</span> <span class="hljs-title" style="color: #445588; font-weight: 700;">LightningElement</span> </span>{
handleClick(event) {
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">if</span> (!event.currentTarget.title) <span class="hljs-keyword" style="color: #333333; font-weight: 700;">return</span>;
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">let</span> themeType = event.currentTarget.title;
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">let</span> msg = <span class="hljs-string" style="color: #dd1144;">'This is test alert'</span>;
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">switch</span> (themeType) {
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">case</span> <span class="hljs-string" style="color: #dd1144;">'shade'</span>:
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.showAlerts(msg, <span class="hljs-string" style="color: #dd1144;">'shade'</span>, <span class="hljs-string" style="color: #dd1144;">'Hey Salesforce!!'</span>);
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">break</span>;
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">case</span> <span class="hljs-string" style="color: #dd1144;">'inverse'</span>:
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.showAlerts(msg, <span class="hljs-string" style="color: #dd1144;">'inverse'</span>, <span class="hljs-string" style="color: #dd1144;">'Hey Salesforce!!'</span>);
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">break</span>;
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">case</span> <span class="hljs-string" style="color: #dd1144;">'alt-inverse'</span>:
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.showAlerts(msg, <span class="hljs-string" style="color: #dd1144;">'alt-inverse'</span>, <span class="hljs-string" style="color: #dd1144;">'Hey Salesforce!!'</span>);
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">break</span>;
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">case</span> <span class="hljs-string" style="color: #dd1144;">'success'</span>:
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.showAlerts(msg, <span class="hljs-string" style="color: #dd1144;">'success'</span>, <span class="hljs-string" style="color: #dd1144;">'Hey Salesforce!!'</span>);
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">break</span>;
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">case</span> <span class="hljs-string" style="color: #dd1144;">'info'</span>:
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.showAlerts(msg, <span class="hljs-string" style="color: #dd1144;">'info'</span>, <span class="hljs-string" style="color: #dd1144;">'Hey Salesforce!!'</span>);
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">break</span>;
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">case</span> <span class="hljs-string" style="color: #dd1144;">'warning'</span>:
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.showAlerts(msg, <span class="hljs-string" style="color: #dd1144;">'warning'</span>, <span class="hljs-string" style="color: #dd1144;">'Hey Salesforce!!'</span>);
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">break</span>;
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">case</span> <span class="hljs-string" style="color: #dd1144;">'error'</span>:
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.showAlerts(msg, <span class="hljs-string" style="color: #dd1144;">'error'</span>, <span class="hljs-string" style="color: #dd1144;">'Hey Salesforce!!'</span>);
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">break</span>;
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">case</span> <span class="hljs-string" style="color: #dd1144;">'offline'</span>:
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.showAlerts(msg, <span class="hljs-string" style="color: #dd1144;">'offline'</span>, <span class="hljs-string" style="color: #dd1144;">'Hey Salesforce!!'</span>);
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">break</span>;
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">default</span>:
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.showAlerts(msg, <span class="hljs-string" style="color: #dd1144;">''</span>, <span class="hljs-string" style="color: #dd1144;">'Hey Salesforce!!'</span>);
}
}
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">async</span> showAlerts(msg, theme, label) {
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">await</span> LightningAlert.open({
message: msg,
theme: theme,
label: label
});
}
}</pre><p></p>
<p><b>Config Meta file</b></p>
<pre class="hljs" style="background: rgb(248, 248, 248); color: #333333; display: block; overflow-x: auto; padding: 0.5em;"><span class="php"><span class="hljs-meta" style="color: #999999; font-weight: 700;"><?</span>xml version=<span class="hljs-string" style="color: #dd1144;">"1.0"</span><span class="hljs-meta" style="color: #999999; font-weight: 700;">?></span></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">LightningComponentBundle</span> <span class="hljs-attr" style="color: teal;">xmlns</span>=<span class="hljs-string" style="color: #dd1144;">"http://soap.sforce.com/2006/04/metadata"</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">apiVersion</span>></span>54.0<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">apiVersion</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">isExposed</span>></span>true<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">isExposed</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">targets</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">target</span>></span>lightning__RecordPage<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">target</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">target</span>></span>lightning__AppPage<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">target</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">target</span>></span>lightning__HomePage<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">target</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">target</span>></span>lightning__Tab<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">target</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">targets</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">LightningComponentBundle</span>></span></pre><b>
Demo</b><div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif3eGiXD9eU9VI2yUJmvxoTcRdA0-FEVIxEhRk4mNm8tJ7Y8rTxM3TUrhcfTQbLooUcRRGyU6kH76FQXShC5uqXjApkCL4GVjkG6bEdf8Ww1_uJqlQEZWzlLy2YpHs7x0whgxihrNvyyhCmIvZcEM-XXrkcsxiPyzGpNSAC9jVPKzqKAH4rfJz6sycRw/s2684/Screenshot%202022-11-25%20at%208.00.14%20AM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="834" data-original-width="2684" height="198" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif3eGiXD9eU9VI2yUJmvxoTcRdA0-FEVIxEhRk4mNm8tJ7Y8rTxM3TUrhcfTQbLooUcRRGyU6kH76FQXShC5uqXjApkCL4GVjkG6bEdf8Ww1_uJqlQEZWzlLy2YpHs7x0whgxihrNvyyhCmIvZcEM-XXrkcsxiPyzGpNSAC9jVPKzqKAH4rfJz6sycRw/w640-h198/Screenshot%202022-11-25%20at%208.00.14%20AM.png" width="640" /></a></div><br /><b><br /></b></div>Shaik Nagajanihttp://www.blogger.com/profile/08014314816293399854noreply@blogger.com1tag:blogger.com,1999:blog-9083431842638854569.post-91706025157435351912021-11-03T13:04:00.006+05:302021-11-03T13:04:41.116+05:30Dynamically Add/Remove rows using Lightning Web Components(LWC)<p> This post explains how to add/remove the rows using the Lighting web component(LWC).</p><p><b>HTML Code:</b></p><pre class="hljs" style="background: rgb(248, 248, 248); color: #333333; display: block; overflow-x: auto; padding: 0.5em;"><span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">template</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-card</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-spinner</span> <span class="hljs-attr" style="color: teal;">if:true</span>=<span class="hljs-string" style="color: #dd1144;">{isSpinner}</span> <span class="hljs-attr" style="color: teal;">variant</span>=<span class="hljs-string" style="color: #dd1144;">"brand"</span> <span class="hljs-attr" style="color: teal;">size</span>=<span class="hljs-string" style="color: #dd1144;">"large"</span>></span> <span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-spinner</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-layout</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-layout-item</span> <span class="hljs-attr" style="color: teal;">size</span>=<span class="hljs-string" style="color: #dd1144;">"12"</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-button</span> <span class="hljs-attr" style="color: teal;">class</span>=<span class="hljs-string" style="color: #dd1144;">"slds-float--right slds-m-around_small"</span> <span class="hljs-attr" style="color: teal;">variant</span>=<span class="hljs-string" style="color: #dd1144;">"brand"</span> <span class="hljs-attr" style="color: teal;">label</span>=<span class="hljs-string" style="color: #dd1144;">"Save"</span>
<span class="hljs-attr" style="color: teal;">onclick</span>=<span class="hljs-string" style="color: #dd1144;">{saveRows}</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-button</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">table</span> <span class="hljs-attr" style="color: teal;">class</span>=<span class="hljs-string" style="color: #dd1144;">"slds-table slds-table_cell-buffer slds-table_bordered slds-border_left slds-border_right"</span>
<span class="hljs-attr" style="color: teal;">aria-labelledby</span>=<span class="hljs-string" style="color: #dd1144;">"element-with-table-label other-element-with-table-label"</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">thead</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">tr</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">th</span>></span>Name<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">th</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">th</span>></span>Industry<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">th</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">th</span>></span>Phone<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">th</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">th</span>></span>Email<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">th</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">th</span>></span><span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">th</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">tr</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">thead</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">tbody</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">template</span> <span class="hljs-attr" style="color: teal;">for:each</span>=<span class="hljs-string" style="color: #dd1144;">{filterList}</span> <span class="hljs-attr" style="color: teal;">for:item</span>=<span class="hljs-string" style="color: #dd1144;">"filterData"</span> <span class="hljs-attr" style="color: teal;">for:index</span>=<span class="hljs-string" style="color: #dd1144;">"index"</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">tr</span> <span class="hljs-attr" style="color: teal;">key</span>=<span class="hljs-string" style="color: #dd1144;">{filterData}</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">td</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-input</span> <span class="hljs-attr" style="color: teal;">type</span>=<span class="hljs-string" style="color: #dd1144;">"text"</span> <span class="hljs-attr" style="color: teal;">name</span>=<span class="hljs-string" style="color: #dd1144;">"accName"</span> <span class="hljs-attr" style="color: teal;">data-index</span>=<span class="hljs-string" style="color: #dd1144;">{index}</span>
<span class="hljs-attr" style="color: teal;">variant</span>=<span class="hljs-string" style="color: #dd1144;">"label-hidden"</span> <span class="hljs-attr" style="color: teal;">placeholder</span>=<span class="hljs-string" style="color: #dd1144;">""</span> <span class="hljs-attr" style="color: teal;">onchange</span>=<span class="hljs-string" style="color: #dd1144;">{handleChange}</span>
<span class="hljs-attr" style="color: teal;">value</span>=<span class="hljs-string" style="color: #dd1144;">{filterData.Name}</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-input</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">td</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">td</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-combobox</span> <span class="hljs-attr" style="color: teal;">name</span>=<span class="hljs-string" style="color: #dd1144;">"industry"</span> <span class="hljs-attr" style="color: teal;">data-index</span>=<span class="hljs-string" style="color: #dd1144;">{index}</span> <span class="hljs-attr" style="color: teal;">variant</span>=<span class="hljs-string" style="color: #dd1144;">"label-hidden"</span>
<span class="hljs-attr" style="color: teal;">placeholder</span>=<span class="hljs-string" style="color: #dd1144;">""</span> <span class="hljs-attr" style="color: teal;">onchange</span>=<span class="hljs-string" style="color: #dd1144;">{handleChange}</span> <span class="hljs-attr" style="color: teal;">value</span>=<span class="hljs-string" style="color: #dd1144;">{filterData.Industry}</span>
<span class="hljs-attr" style="color: teal;">options</span>=<span class="hljs-string" style="color: #dd1144;">{industryOptions}</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-combobox</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">td</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">td</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-input</span> <span class="hljs-attr" style="color: teal;">type</span>=<span class="hljs-string" style="color: #dd1144;">"text"</span> <span class="hljs-attr" style="color: teal;">name</span>=<span class="hljs-string" style="color: #dd1144;">"accEmail"</span> <span class="hljs-attr" style="color: teal;">data-index</span>=<span class="hljs-string" style="color: #dd1144;">{index}</span>
<span class="hljs-attr" style="color: teal;">variant</span>=<span class="hljs-string" style="color: #dd1144;">"label-hidden"</span> <span class="hljs-attr" style="color: teal;">placeholder</span>=<span class="hljs-string" style="color: #dd1144;">""</span> <span class="hljs-attr" style="color: teal;">onchange</span>=<span class="hljs-string" style="color: #dd1144;">{handleChange}</span>
<span class="hljs-attr" style="color: teal;">value</span>=<span class="hljs-string" style="color: #dd1144;">{filterData.Email}</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-input</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">td</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">td</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-input</span> <span class="hljs-attr" style="color: teal;">type</span>=<span class="hljs-string" style="color: #dd1144;">"text"</span> <span class="hljs-attr" style="color: teal;">name</span>=<span class="hljs-string" style="color: #dd1144;">"accPhone"</span> <span class="hljs-attr" style="color: teal;">data-index</span>=<span class="hljs-string" style="color: #dd1144;">{index}</span>
<span class="hljs-attr" style="color: teal;">value</span>=<span class="hljs-string" style="color: #dd1144;">{filterData.Phone}</span> <span class="hljs-attr" style="color: teal;">variant</span>=<span class="hljs-string" style="color: #dd1144;">"label-hidden"</span> <span class="hljs-attr" style="color: teal;">onchange</span>=<span class="hljs-string" style="color: #dd1144;">{handleChange}</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-input</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">td</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">td</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-button-icon</span> <span class="hljs-attr" style="color: teal;">data-index</span>=<span class="hljs-string" style="color: #dd1144;">{filterData.id}</span> <span class="hljs-attr" style="color: teal;">class</span>=<span class="hljs-string" style="color: #dd1144;">"slds-float--right"</span>
<span class="hljs-attr" style="color: teal;">icon-name</span>=<span class="hljs-string" style="color: #dd1144;">"action:new"</span> <span class="hljs-attr" style="color: teal;">onclick</span>=<span class="hljs-string" style="color: #dd1144;">{handleAddRow}</span>></span><span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-button-icon</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-button-icon</span> <span class="hljs-attr" style="color: teal;">data-index</span>=<span class="hljs-string" style="color: #dd1144;">{filterData.id}</span> <span class="hljs-attr" style="color: teal;">class</span>=<span class="hljs-string" style="color: #dd1144;">"slds-float--right"</span>
<span class="hljs-attr" style="color: teal;">icon-name</span>=<span class="hljs-string" style="color: #dd1144;">"action:delete"</span> <span class="hljs-attr" style="color: teal;">onclick</span>=<span class="hljs-string" style="color: #dd1144;">{handleRemoveRow}</span>></span><span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-button-icon</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">td</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">tr</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">template</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">tbody</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">table</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-layout-item</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-layout</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-card</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">template</span>></span></pre><p></p><b>JS Code:</b><div><pre class="hljs" style="background: rgb(248, 248, 248); color: #333333; display: block; overflow-x: auto; padding: 0.5em;"><span class="hljs-keyword" style="color: #333333; font-weight: 700;">import</span> { LightningElement, wire } <span class="hljs-keyword" style="color: #333333; font-weight: 700;">from</span> <span class="hljs-string" style="color: #dd1144;">'lwc'</span>;
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">import</span> { getPicklistValues } <span class="hljs-keyword" style="color: #333333; font-weight: 700;">from</span> <span class="hljs-string" style="color: #dd1144;">'lightning/uiObjectInfoApi'</span>;
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">import</span> { getObjectInfo } <span class="hljs-keyword" style="color: #333333; font-weight: 700;">from</span> <span class="hljs-string" style="color: #dd1144;">'lightning/uiObjectInfoApi'</span>;
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">import</span> ACCOUNT_OBJECT <span class="hljs-keyword" style="color: #333333; font-weight: 700;">from</span> <span class="hljs-string" style="color: #dd1144;">'@salesforce/schema/Account'</span>;
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">import</span> INDUSTRY_FIELD <span class="hljs-keyword" style="color: #333333; font-weight: 700;">from</span> <span class="hljs-string" style="color: #dd1144;">'@salesforce/schema/Account.Industry'</span>;
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">import</span> { ShowToastEvent } <span class="hljs-keyword" style="color: #333333; font-weight: 700;">from</span> <span class="hljs-string" style="color: #dd1144;">'lightning/platformShowToastEvent'</span>;
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">import</span> saveAccounts <span class="hljs-keyword" style="color: #333333; font-weight: 700;">from</span> <span class="hljs-string" style="color: #dd1144;">'@salesforce/apex/LWCExampleController.saveAccounts'</span>;
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">export</span> <span class="hljs-keyword" style="color: #333333; font-weight: 700;">default</span> <span class="hljs-class"><span class="hljs-keyword" style="color: #333333; font-weight: 700;">class</span> <span class="hljs-title" style="color: #445588; font-weight: 700;">DynamicallyAddRow</span> <span class="hljs-keyword" style="color: #333333; font-weight: 700;">extends</span> <span class="hljs-title" style="color: #445588; font-weight: 700;">LightningElement</span> </span>{
industryOptions = [{ value: <span class="hljs-string" style="color: #dd1144;">'-None-'</span>, label: <span class="hljs-string" style="color: #dd1144;">''</span> }];
filterList = [];
keyIndex = <span class="hljs-number" style="color: teal;">0</span>;
isSpinner = <span class="hljs-literal" style="color: teal;">false</span>;
@wire(getObjectInfo, { objectApiName: ACCOUNT_OBJECT })
accountinfo;
@wire(getPicklistValues, { recordTypeId: <span class="hljs-string" style="color: #dd1144;">'$accountinfo.data.defaultRecordTypeId'</span>, fieldApiName: INDUSTRY_FIELD })
industryValues({ data, error }) {
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">if</span> (data) {
data.values.forEach(val => {
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.industryOptions = [...this.industryOptions, { value: val.value, label: val.label }];
});
}
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">else</span> <span class="hljs-keyword" style="color: #333333; font-weight: 700;">if</span> (error) {
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.processErrorMessage(error);
}
}
connectedCallback() {
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.handleAddRow();
}
handleChange(event) {
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">if</span> (event.target.name == <span class="hljs-string" style="color: #dd1144;">'accName'</span>) {
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.filterList[event.currentTarget.dataset.index].Name = event.target.value;
}
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">else</span> <span class="hljs-keyword" style="color: #333333; font-weight: 700;">if</span> (event.target.name == <span class="hljs-string" style="color: #dd1144;">'industry'</span>) {
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.filterList[event.currentTarget.dataset.index].Industry = event.target.value;
}
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">else</span> <span class="hljs-keyword" style="color: #333333; font-weight: 700;">if</span> (event.target.name == <span class="hljs-string" style="color: #dd1144;">'accEmail'</span>) {
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.filterList[event.currentTarget.dataset.index].Email = event.target.value;
}
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">else</span> <span class="hljs-keyword" style="color: #333333; font-weight: 700;">if</span> (event.target.name == <span class="hljs-string" style="color: #dd1144;">'accPhone'</span>) {
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.filterList[event.currentTarget.dataset.index].Phone = event.target.value;
}
}
handleAddRow() {
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">let</span> objRow = {
Name: <span class="hljs-string" style="color: #dd1144;">''</span>,
Industry: <span class="hljs-string" style="color: #dd1144;">''</span>,
Phone: <span class="hljs-string" style="color: #dd1144;">''</span>,
Email: <span class="hljs-string" style="color: #dd1144;">''</span>,
id: ++<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.keyIndex
}
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.filterList = [...this.filterList, <span class="hljs-built_in" style="color: #0086b3;">Object</span>.create(objRow)];
}
handleRemoveRow(event) {
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.filterList = <span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.filterList.filter((ele) => {
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">return</span> <span class="hljs-built_in" style="color: #0086b3;">parseInt</span>(ele.id) !== <span class="hljs-built_in" style="color: #0086b3;">parseInt</span>(event.currentTarget.dataset.index);
});
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">if</span> (<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.filterList.length == <span class="hljs-number" style="color: teal;">0</span>) {
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.handleAddRow();
}
}
saveRows() {
<span class="hljs-built_in" style="color: #0086b3;">console</span>.log(<span class="hljs-string" style="color: #dd1144;">'this.filterList => '</span>, <span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.filterList);
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.isSpinner = <span class="hljs-literal" style="color: teal;">true</span>;
saveAccounts({ lstAccs: <span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.filterList }).then(result => {
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.isSpinner = <span class="hljs-literal" style="color: teal;">false</span>;
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.showToastMessage(<span class="hljs-string" style="color: #dd1144;">'success'</span>, <span class="hljs-string" style="color: #dd1144;">'Accounts Saved Successfully!!'</span>, <span class="hljs-string" style="color: #dd1144;">'Success'</span>);
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.filterList = [];
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">if</span> (<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.filterList.length == <span class="hljs-number" style="color: teal;">0</span>) {
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.handleAddRow();
}
<span class="hljs-built_in" style="color: #0086b3;">console</span>.log(<span class="hljs-string" style="color: #dd1144;">'result ==> '</span>, result);
}).catch(error => {
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.processErrorMessage(error);
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.isSpinner = <span class="hljs-literal" style="color: teal;">false</span>;
})
}
processErrorMessage(message) {
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">let</span> errorMsg = <span class="hljs-string" style="color: #dd1144;">''</span>;
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">if</span> (message) {
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">if</span> (message.body) {
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">if</span> (<span class="hljs-built_in" style="color: #0086b3;">Array</span>.isArray(message.body)) {
errorMsg = message.body.map(e => e.message).join(<span class="hljs-string" style="color: #dd1144;">', '</span>);
} <span class="hljs-keyword" style="color: #333333; font-weight: 700;">else</span> <span class="hljs-keyword" style="color: #333333; font-weight: 700;">if</span> (<span class="hljs-keyword" style="color: #333333; font-weight: 700;">typeof</span> message.body.message === <span class="hljs-string" style="color: #dd1144;">'string'</span>) {
errorMsg = message.body.message;
}
}
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">else</span> {
errorMsg = message;
}
}
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.showToastMessage(<span class="hljs-string" style="color: #dd1144;">'error'</span>, errorMsg, <span class="hljs-string" style="color: #dd1144;">'Error!'</span>);
}
showToastMessage(variant, message, title) {
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.dispatchEvent(
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">new</span> ShowToastEvent({
title: title,
message: message,
variant: variant
})
);
}
}</pre></div><br /><div><b>Apex Class:</b></div><div><pre class="hljs" style="background: rgb(248, 248, 248); color: #333333; display: block; overflow-x: auto; padding: 0.5em;"><span class="hljs-keyword" style="color: #333333; font-weight: 700;">public</span> inherited sharing <span class="hljs-class"><span class="hljs-keyword" style="color: #333333; font-weight: 700;">class</span> <span class="hljs-title" style="color: #445588; font-weight: 700;">LWCExampleController</span> </span>{
<span class="hljs-meta" style="color: #999999; font-weight: 700;">@AuraEnabled</span>
<span class="hljs-function"><span class="hljs-keyword" style="color: #333333; font-weight: 700;">public</span> <span class="hljs-keyword" style="color: #333333; font-weight: 700;">static</span> List<Account> <span class="hljs-title" style="color: #990000; font-weight: 700;">saveAccounts</span><span class="hljs-params">(List<Account> lstAccs)</span> </span>{
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">try</span> {
insert lstAccs;
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">return</span> lstAccs;
}
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">catch</span>(Exception ex) {
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">throw</span> <span class="hljs-keyword" style="color: #333333; font-weight: 700;">new</span> AuraHandledException(ex.getMessage());
}
}
}</pre><b>Output:</b></div><div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEjE66OO3bQYR-PUrpRAOn1oaHDCDD1syEiJ3Yivbod4fvDshgZxVlAYGLzlvJEZDon4vmIaMboshPd9Jv9EZJDBHduCRvKTAGxcoKD3X-4OTCDIm5yJHePmtKVHOmDoR1xu_FQmHYyHOdRDWGsBP5LSF3C4gkHkVWNtckWttF0aF1pthj-l-MwIAJbyCA=s1250" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="310" data-original-width="1250" height="158" src="https://blogger.googleusercontent.com/img/a/AVvXsEjE66OO3bQYR-PUrpRAOn1oaHDCDD1syEiJ3Yivbod4fvDshgZxVlAYGLzlvJEZDon4vmIaMboshPd9Jv9EZJDBHduCRvKTAGxcoKD3X-4OTCDIm5yJHePmtKVHOmDoR1xu_FQmHYyHOdRDWGsBP5LSF3C4gkHkVWNtckWttF0aF1pthj-l-MwIAJbyCA=w640-h158" width="640" /></a></div><br /><b><br /></b></div>Shaik Nagajanihttp://www.blogger.com/profile/08014314816293399854noreply@blogger.com0tag:blogger.com,1999:blog-9083431842638854569.post-17165041068129085522021-06-19T12:40:00.005+05:302021-06-19T12:40:44.824+05:30How to get Community Id and base path in lighting web components(lwc)This post explains how to get community Id and base path in lightning web components(lwc)<div><br /></div><div><b>HTML Code</b></div><div><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcmArf5zHAIS84UO5emNuZwk7wNxs0JiDaNjAOzmMWMRQIq6dUhJX4mo9rfvep0_d0NcRwSwzuTnjIYOphDYOmwMc6HjN15T2O7Y5bm6uLF6ZQhhyphenhyphenHt4bj7Gq0gWYpok_nOt5r8LrV9AhM/s1388/HTML+Code.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="734" data-original-width="1388" height="338" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcmArf5zHAIS84UO5emNuZwk7wNxs0JiDaNjAOzmMWMRQIq6dUhJX4mo9rfvep0_d0NcRwSwzuTnjIYOphDYOmwMc6HjN15T2O7Y5bm6uLF6ZQhhyphenhyphenHt4bj7Gq0gWYpok_nOt5r8LrV9AhM/w640-h338/HTML+Code.png" width="640" /></a></div><div><pre class="hljs" style="background: rgb(248, 248, 248); color: #333333; display: block; overflow-x: auto; padding: 0.5em;"><span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">template</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-card</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">div</span> <span class="hljs-attr" style="color: teal;">class</span>=<span class="hljs-string" style="color: #dd1144;">"slds-text-heading_medium slds-text-align_center"</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">b</span>></span>Community Id:<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">b</span>></span> {currentcommunityId}
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">div</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">div</span> <span class="hljs-attr" style="color: teal;">class</span>=<span class="hljs-string" style="color: #dd1144;">"slds-text-heading_medium slds-text-align_center"</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">b</span>></span>Community Basepath:<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">b</span>></span> {currentcommunityBasePath}
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">div</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-card</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">template</span>></span></pre><br /><b>
Javascript Code
</b></div><div><b><br /></b></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXPdyfFy66pPCHx8E-7ucsfAoW0uFFByW0a6ZHCXPFNs0z_02b1zXmeVol_tAUofCdX0U2ZsvWqN7jqHaZurQrEj60PHTOjaVJJA4qtKo-jwiCqi52b26WnK7GCVg86SqCL9qTefaInMdv/s1280/Javascript+Code.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1130" data-original-width="1280" height="564" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXPdyfFy66pPCHx8E-7ucsfAoW0uFFByW0a6ZHCXPFNs0z_02b1zXmeVol_tAUofCdX0U2ZsvWqN7jqHaZurQrEj60PHTOjaVJJA4qtKo-jwiCqi52b26WnK7GCVg86SqCL9qTefaInMdv/w640-h564/Javascript+Code.png" width="640" /></a></div><div><pre class="hljs" style="background: rgb(248, 248, 248); color: #333333; display: block; overflow-x: auto; padding: 0.5em;"><span class="hljs-keyword" style="color: #333333; font-weight: 700;">import</span> {LightningElement, api, track, wire} <span class="hljs-keyword" style="color: #333333; font-weight: 700;">from</span> <span class="hljs-string" style="color: #dd1144;">'lwc'</span>;
<span class="hljs-comment" style="color: #999988; font-style: italic;">// We can get the community Id for use in the callout</span>
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">import</span> communityId <span class="hljs-keyword" style="color: #333333; font-weight: 700;">from</span> <span class="hljs-string" style="color: #dd1144;">'@salesforce/community/Id'</span>;
<span class="hljs-comment" style="color: #999988; font-style: italic;">// Get the base path for navigating to non-named pages</span>
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">import</span> communityBasePath <span class="hljs-keyword" style="color: #333333; font-weight: 700;">from</span> <span class="hljs-string" style="color: #dd1144;">'@salesforce/community/basePath'</span>;
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">export</span> <span class="hljs-keyword" style="color: #333333; font-weight: 700;">default</span> <span class="hljs-class"><span class="hljs-keyword" style="color: #333333; font-weight: 700;">class</span> <span class="hljs-title" style="color: #445588; font-weight: 700;">CommunityName</span> <span class="hljs-keyword" style="color: #333333; font-weight: 700;">extends</span> <span class="hljs-title" style="color: #445588; font-weight: 700;">LightningElement</span> </span>{
currentcommunityId;
currentcommunityBasePath;
connectedCallback() {
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.currentcommunityId = communityId;
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.currentcommunityBasePath = communityBasePath;
}
}</pre></div><b>Configuration File</b><div><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmoDw-2LK_mLLelNelvZlbFRPZvErCuQz28ooy4fBlmLfmmdKH9ENz-MknQjQuPtW9nHvO9lVxl_LQCEz4qpFxqbLkrwLG5CruRB0NPj4K9WJEnCM-dB29ibuTkmVQfkh5X3SyTQK6EsfW/s1476/Config+file+Code.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="734" data-original-width="1476" height="318" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmoDw-2LK_mLLelNelvZlbFRPZvErCuQz28ooy4fBlmLfmmdKH9ENz-MknQjQuPtW9nHvO9lVxl_LQCEz4qpFxqbLkrwLG5CruRB0NPj4K9WJEnCM-dB29ibuTkmVQfkh5X3SyTQK6EsfW/w640-h318/Config+file+Code.png" width="640" /></a></div><pre class="hljs" style="background: rgb(248, 248, 248); color: #333333; display: block; overflow-x: auto; padding: 0.5em;"><span class="php"><span class="hljs-meta" style="color: #999999; font-weight: 700;"><?</span>xml version=<span class="hljs-string" style="color: #dd1144;">"1.0"</span><span class="hljs-meta" style="color: #999999; font-weight: 700;">?></span></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">LightningComponentBundle</span> <span class="hljs-attr" style="color: teal;">xmlns</span>=<span class="hljs-string" style="color: #dd1144;">"http://soap.sforce.com/2006/04/metadata"</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">apiVersion</span>></span>52.0<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">apiVersion</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">isExposed</span>></span>true<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">isExposed</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">targets</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">target</span>></span>lightning__RecordPage<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">target</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">target</span>></span>lightningCommunity__Page<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">target</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">target</span>></span>lightningCommunity__Default<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">target</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">targets</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">LightningComponentBundle</span>></span></pre><b>Output</b><div><b><br /></b><div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyesU4qt3Mr5r6Isruon8Wlcl9JmJW2JJIFMrbmSazbsE9B5IWhZb-884h8xHSP7MOWSy7EvhOYQJXnXJBI07zUFjFE-PHPE5SObGnh0zfFLwpQBB5gZOrNOm6rffrp0I31CshO0R1bQuh/s941/screenshot-kia6-dev-ed.builder.salesforce-communities.com-2021.06.19-12_13_18.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="173" data-original-width="941" height="118" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyesU4qt3Mr5r6Isruon8Wlcl9JmJW2JJIFMrbmSazbsE9B5IWhZb-884h8xHSP7MOWSy7EvhOYQJXnXJBI07zUFjFE-PHPE5SObGnh0zfFLwpQBB5gZOrNOm6rffrp0I31CshO0R1bQuh/w640-h118/screenshot-kia6-dev-ed.builder.salesforce-communities.com-2021.06.19-12_13_18.png" width="640" /></a></div><br /><b><br /></b></div></div>Shaik Nagajanihttp://www.blogger.com/profile/08014314816293399854noreply@blogger.com0tag:blogger.com,1999:blog-9083431842638854569.post-32217408161113995002021-05-01T21:01:00.001+05:302021-05-01T21:01:44.434+05:30LeadStaus Object in Salesforce<p> LeadStatus object Represents the status of a Lead, such as Open, Qualified, or Converted.</p><p><b>SOQL Query</b></p><pre class="hljs" style="background: rgb(248, 248, 248); color: #333333; display: block; overflow-x: auto; padding: 0.5em;"><span class="hljs-keyword" style="color: #333333; font-weight: 700;">select</span> <span class="hljs-keyword" style="color: #333333; font-weight: 700;">id</span>, MasterLabel, IsConverted, IsDefault <span class="hljs-keyword" style="color: #333333; font-weight: 700;">from</span> Leadstatus</pre><p><b>Result</b></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN_zuwoStR73jEFupW8jp-jgBhQZWvrqpwRWrxug76l8kQaCs-5F54VRe1dPcLxp-nwG3RV695Tp8DR7A6tsMzXCo3ZcQVCIZDwN6y7JcBMLNDlxpow0pSbZ4-zWk8ti4M5JlHg0_1i9Yc/s1266/Screenshot+2021-05-01+at+8.58.47+PM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="608" data-original-width="1266" height="308" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN_zuwoStR73jEFupW8jp-jgBhQZWvrqpwRWrxug76l8kQaCs-5F54VRe1dPcLxp-nwG3RV695Tp8DR7A6tsMzXCo3ZcQVCIZDwN6y7JcBMLNDlxpow0pSbZ4-zWk8ti4M5JlHg0_1i9Yc/w640-h308/Screenshot+2021-05-01+at+8.58.47+PM.png" width="640" /></a></div><br /><p><br /></p>Shaik Nagajanihttp://www.blogger.com/profile/08014314816293399854noreply@blogger.com0tag:blogger.com,1999:blog-9083431842638854569.post-44089896727934000492021-05-01T20:38:00.006+05:302021-05-01T20:38:57.205+05:30Dynamic Search/Custom Search functionality in Lightning Web Components(lwc)<p> <b>HTML Code</b></p>
<pre class="hljs" style="background: rgb(248, 248, 248); color: #333333; display: block; overflow-x: auto; padding: 0.5em;"><span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">template</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-card</span> <span class="hljs-attr" style="color: teal;">title</span>=<span class="hljs-string" style="color: #dd1144;">"Custom Search Functionality in LWC"</span> <span class="hljs-attr" style="color: teal;">icon-name</span>=<span class="hljs-string" style="color: #dd1144;">"standard:account"</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">div</span> <span class="hljs-attr" style="color: teal;">if:true</span>=<span class="hljs-string" style="color: #dd1144;">{errorMsg}</span> <span class="hljs-attr" style="color: teal;">style</span>=<span class="hljs-string" style="color: #dd1144;">"margin-left: 3%;"</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">p</span> <span class="hljs-attr" style="color: teal;">style</span>=<span class="hljs-string" style="color: #dd1144;">"color: red;"</span>></span>{errorMsg}<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">p</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">div</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-layout</span> <span class="hljs-attr" style="color: teal;">multiple-rows</span>=<span class="hljs-string" style="color: #dd1144;">"true"</span> <span class="hljs-attr" style="color: teal;">vertical-align</span>=<span class="hljs-string" style="color: #dd1144;">"end"</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-layout-item</span> <span class="hljs-attr" style="color: teal;">size</span>=<span class="hljs-string" style="color: #dd1144;">"12"</span> <span class="hljs-attr" style="color: teal;">small-device-size</span>=<span class="hljs-string" style="color: #dd1144;">"10"</span> <span class="hljs-attr" style="color: teal;">medium-device-size</span>=<span class="hljs-string" style="color: #dd1144;">"8"</span> <span class="hljs-attr" style="color: teal;">large-device-size</span>=<span class="hljs-string" style="color: #dd1144;">"6"</span> <span class="hljs-attr" style="color: teal;">padding</span>=<span class="hljs-string" style="color: #dd1144;">"around-small"</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">div</span> <span class="hljs-attr" style="color: teal;">class</span>=<span class="hljs-string" style="color: #dd1144;">"slds-form-element"</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">div</span> <span class="hljs-attr" style="color: teal;">class</span>=<span class="hljs-string" style="color: #dd1144;">"slds-form-element__control"</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-input</span> <span class="hljs-attr" style="color: teal;">type</span>=<span class="hljs-string" style="color: #dd1144;">"text"</span>
<span class="hljs-attr" style="color: teal;">label</span>=<span class="hljs-string" style="color: #dd1144;">"Enter Account Name"</span>
<span class="hljs-attr" style="color: teal;">onchange</span>=<span class="hljs-string" style="color: #dd1144;">{handleAccountName}</span> ></span><span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-input</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">div</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">div</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-layout-item</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-layout-item</span> <span class="hljs-attr" style="color: teal;">size</span>=<span class="hljs-string" style="color: #dd1144;">"12"</span> <span class="hljs-attr" style="color: teal;">small-device-size</span>=<span class="hljs-string" style="color: #dd1144;">"2"</span> <span class="hljs-attr" style="color: teal;">medium-device-size</span>=<span class="hljs-string" style="color: #dd1144;">"2"</span> <span class="hljs-attr" style="color: teal;">large-device-size</span>=<span class="hljs-string" style="color: #dd1144;">"2"</span> <span class="hljs-attr" style="color: teal;">padding</span>=<span class="hljs-string" style="color: #dd1144;">"around-small"</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-button</span> <span class="hljs-attr" style="color: teal;">label</span>=<span class="hljs-string" style="color: #dd1144;">"Search"</span>
<span class="hljs-attr" style="color: teal;">variant</span>=<span class="hljs-string" style="color: #dd1144;">"brand"</span>
<span class="hljs-attr" style="color: teal;">onclick</span>=<span class="hljs-string" style="color: #dd1144;">{handleSearch}</span>></span><span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-button</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-layout-item</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-layout</span>></span><span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">br</span>/></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">div</span> <span class="hljs-attr" style="color: teal;">if:true</span>=<span class="hljs-string" style="color: #dd1144;">{searchData}</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-datatable</span> <span class="hljs-attr" style="color: teal;">data</span>=<span class="hljs-string" style="color: #dd1144;">{searchData}</span>
<span class="hljs-attr" style="color: teal;">columns</span>=<span class="hljs-string" style="color: #dd1144;">{columns}</span>
<span class="hljs-attr" style="color: teal;">key-field</span>=<span class="hljs-string" style="color: #dd1144;">"id"</span>
<span class="hljs-attr" style="color: teal;">hide-checkbox-column</span>=<span class="hljs-string" style="color: #dd1144;">"true"</span>></span><span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-datatable</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">div</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-card</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">template</span>></span></pre>
<p><b>JS Code</b></p><pre class="hljs" style="background: rgb(248, 248, 248); color: #333333; display: block; overflow-x: auto; padding: 0.5em;"><span class="hljs-keyword" style="color: #333333; font-weight: 700;">import</span> { LightningElement } <span class="hljs-keyword" style="color: #333333; font-weight: 700;">from</span> <span class="hljs-string" style="color: #dd1144;">'lwc'</span>;
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">import</span> serachAccs <span class="hljs-keyword" style="color: #333333; font-weight: 700;">from</span> <span class="hljs-string" style="color: #dd1144;">'@salesforce/apex/LWCExamples.retriveAccs'</span>;
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">const</span> columns = [
{
label: <span class="hljs-string" style="color: #dd1144;">'Name'</span>,
fieldName: <span class="hljs-string" style="color: #dd1144;">'Name'</span>
}, {
label: <span class="hljs-string" style="color: #dd1144;">'Industry'</span>,
fieldName: <span class="hljs-string" style="color: #dd1144;">'Industry'</span>,
}, {
label: <span class="hljs-string" style="color: #dd1144;">'Phone'</span>,
fieldName: <span class="hljs-string" style="color: #dd1144;">'Phone'</span>,
type: <span class="hljs-string" style="color: #dd1144;">'phone'</span>,
}, {
label: <span class="hljs-string" style="color: #dd1144;">'Type'</span>,
fieldName: <span class="hljs-string" style="color: #dd1144;">'Type'</span>,
type: <span class="hljs-string" style="color: #dd1144;">'text'</span>
},
];
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">export</span> <span class="hljs-keyword" style="color: #333333; font-weight: 700;">default</span> <span class="hljs-class"><span class="hljs-keyword" style="color: #333333; font-weight: 700;">class</span> <span class="hljs-title" style="color: #445588; font-weight: 700;">DynamicSearchInLWC</span> <span class="hljs-keyword" style="color: #333333; font-weight: 700;">extends</span> <span class="hljs-title" style="color: #445588; font-weight: 700;">LightningElement</span> </span>{
searchData;
columns = columns;
errorMsg = <span class="hljs-string" style="color: #dd1144;">''</span>;
strSearchAccName = <span class="hljs-string" style="color: #dd1144;">''</span>;
handleAccountName(event) {
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.errorMsg = <span class="hljs-string" style="color: #dd1144;">''</span>;
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.strSearchAccName = event.currentTarget.value;
}
handleSearch() {
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">if</span>(!<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.strSearchAccName) {
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.errorMsg = <span class="hljs-string" style="color: #dd1144;">'Please enter account name to search.'</span>;
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.searchData = <span class="hljs-literal" style="color: teal;">undefined</span>;
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">return</span>;
}
serachAccs({strAccName : <span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.strSearchAccName})
.then(result => {
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.searchData = result;
})
.catch(error => {
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.searchData = <span class="hljs-literal" style="color: teal;">undefined</span>;
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">if</span>(error) {
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">if</span> (<span class="hljs-built_in" style="color: #0086b3;">Array</span>.isArray(error.body)) {
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.errorMsg = error.body.map(e => e.message).join(<span class="hljs-string" style="color: #dd1144;">', '</span>);
} <span class="hljs-keyword" style="color: #333333; font-weight: 700;">else</span> <span class="hljs-keyword" style="color: #333333; font-weight: 700;">if</span> (<span class="hljs-keyword" style="color: #333333; font-weight: 700;">typeof</span> error.body.message === <span class="hljs-string" style="color: #dd1144;">'string'</span>) {
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.errorMsg = error.body.message;
}
}
})
}
}</pre><p><b>Apex Class</b></p><pre class="hljs" style="background: rgb(248, 248, 248); color: #333333; display: block; overflow-x: auto; padding: 0.5em;"><span class="hljs-keyword" style="color: #333333; font-weight: 700;">public</span> inherited sharing <span class="hljs-class"><span class="hljs-keyword" style="color: #333333; font-weight: 700;">class</span> <span class="hljs-title" style="color: #445588; font-weight: 700;">LWCExamples</span> </span>{
<span class="hljs-meta" style="color: #999999; font-weight: 700;">@AuraEnabled</span>(Cacheable = <span class="hljs-keyword" style="color: #333333; font-weight: 700;">true</span>)
<span class="hljs-function"><span class="hljs-keyword" style="color: #333333; font-weight: 700;">public</span> <span class="hljs-keyword" style="color: #333333; font-weight: 700;">static</span> list<Account> <span class="hljs-title" style="color: #990000; font-weight: 700;">retriveAccs</span><span class="hljs-params">(String strAccName)</span> </span>{
strAccName = <span class="hljs-string" style="color: #dd1144;">'%'</span> + strAccName + <span class="hljs-string" style="color: #dd1144;">'%'</span>;
list<Account> lstAccs = [SELECT Id, Name, Industry, Phone, Type From Account WHERE Name LIKE :strAccName];
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">if</span>(lstAccs.isEmpty()) {
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">throw</span> <span class="hljs-keyword" style="color: #333333; font-weight: 700;">new</span> AuraHandledException(<span class="hljs-string" style="color: #dd1144;">'No Record Found..'</span>);
}
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">return</span> lstAccs;
}
}
</pre><p><b>Result</b></p><p></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjHAehxMDFze0LnuLko1tXHKUBS5Pz-Vo1NFbpr7JRAHs0RB5lAckE9KlJbZ3py57jgVGyJvdvAyPpvBeNOM9tBu01Xy5UOpliKLJro6C_dhebbXlg2w5uz3b0pUqkAAdXTAthRSy_0zUP/s1900/Screenshot+2021-05-01+at+8.35.00+PM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="438" data-original-width="1900" height="148" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjHAehxMDFze0LnuLko1tXHKUBS5Pz-Vo1NFbpr7JRAHs0RB5lAckE9KlJbZ3py57jgVGyJvdvAyPpvBeNOM9tBu01Xy5UOpliKLJro6C_dhebbXlg2w5uz3b0pUqkAAdXTAthRSy_0zUP/w640-h148/Screenshot+2021-05-01+at+8.35.00+PM.png" width="640" /></a></div><br /><b><br /></b><p></p>Shaik Nagajanihttp://www.blogger.com/profile/08014314816293399854noreply@blogger.com2tag:blogger.com,1999:blog-9083431842638854569.post-90250006543768770062021-02-04T14:11:00.002+05:302021-02-04T14:12:08.994+05:30jQuery Datatable in Lightning Web Component(lwc)<p>This post explains how to use jquery data tables in the lightning web component(lwc).</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5OeCRsFMHw6ohUtEz13xUMMzRblyfZlKwtXX-KhLI7tydVpcI5qP4jnsHLMTL-STKB5Y-MmeKBysd2-9k7GiVc8wJI8wKcBZMznthR3dhDq7nmLaAgMNbFym65sdHIU5fsjHfUdZrPtYX/s1316/jquery+table.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="487" data-original-width="1316" height="237" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5OeCRsFMHw6ohUtEz13xUMMzRblyfZlKwtXX-KhLI7tydVpcI5qP4jnsHLMTL-STKB5Y-MmeKBysd2-9k7GiVc8wJI8wKcBZMznthR3dhDq7nmLaAgMNbFym65sdHIU5fsjHfUdZrPtYX/w640-h237/jquery+table.gif" width="640" /></a></div><p><br /></p><h2 style="text-align: left;"><span style="color: #073763;">Prerequisites:</span></h2><h3 style="text-align: left;"><span style="color: #134f5c;">Step 1 : Download Required Resources </span></h3><div style="text-align: left;"><b>1. Download jQuery DataTables Plugin</b></div><div style="text-align: left;"><b><br /></b></div><div>Click on the following link to download the DataTables library. [version 1.10.18]</div><div><br /></div><div><b><a href="https://datatables.net/releases/DataTables-1.10.18.zip">https://datatables.net/releases/DataTables-1.10.18.zip</a></b></div><div><br /></div><div>This zip file includes CSS, javascript, and other files related to the plugin.</div><div><br /></div><div><b>2. Download jQuery library [version 3.3.1 Recommended]</b></div><div><br /></div><div>Click on the following link to download JQuery 3.3.1 minified version. [3.3.1 Recommended]</div><div><br /></div><div><b><a href="https://code.jquery.com/jquery-3.3.1.min.js">https://code.jquery.com/jquery-3.3.1.min.js</a></b></div><div><br /></div><div><h3><span style="color: #134f5c;">Step 2: Upload Files to static resource</span></h3></div><div>upload files to static resourecs</div><div><br /></div><div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVXd_VxfCkxHulCNUHPQG6L1WNOcIiP43DkL9EIt9uJ2MS1NUeIAaRYmS20RWvJ8TNpmQM6kKF81L0Vk8rxMukuVFvYP88R83OQPHKx1k54QgQuxGPerz60nAL3zRfzKAEzf2rqX5gzxB6/" style="margin-left: 1em; margin-right: 1em;"><img data-original-height="344" data-original-width="1056" height="208" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVXd_VxfCkxHulCNUHPQG6L1WNOcIiP43DkL9EIt9uJ2MS1NUeIAaRYmS20RWvJ8TNpmQM6kKF81L0Vk8rxMukuVFvYP88R83OQPHKx1k54QgQuxGPerz60nAL3zRfzKAEzf2rqX5gzxB6/w640-h208/image.png" width="640" /></a></div><br /><br /></div><div><b>Demo:</b></div><div><b><br /></b></div><div><b>HTML Code:</b></div><div><pre class="hljs" style="background: rgb(248, 248, 248); color: #333333; display: block; overflow-x: auto; padding: 0.5em;"><span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">template</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-card</span> <span class="hljs-attr" style="color: teal;">title</span>=<span class="hljs-string" style="color: #dd1144;">"JQuery Datatable Demo"</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">div</span> <span class="hljs-attr" style="color: teal;">class</span>=<span class="hljs-string" style="color: #dd1144;">"slds-m-around_medium"</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">table</span> <span class="hljs-attr" style="color: teal;">lwc:dom</span>=<span class="hljs-string" style="color: #dd1144;">"manual"</span>
<span class="hljs-attr" style="color: teal;">class</span>=<span class="hljs-string" style="color: #dd1144;">"tableClass slds-table slds-table_cell-buffer slds-table_bordered"</span>
<span class="hljs-attr" style="color: teal;">style</span>=<span class="hljs-string" style="color: #dd1144;">"width:100%"</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">table</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">div</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-card</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">template</span>></span></pre><b>JS Code:</b></div><div><pre class="hljs" style="background: rgb(248, 248, 248); color: #333333; display: block; overflow-x: auto; padding: 0.5em;"><span class="hljs-keyword" style="color: #333333; font-weight: 700;">import</span> {
LightningElement
} <span class="hljs-keyword" style="color: #333333; font-weight: 700;">from</span> <span class="hljs-string" style="color: #dd1144;">'lwc'</span>;
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">import</span> dataTableResource <span class="hljs-keyword" style="color: #333333; font-weight: 700;">from</span> <span class="hljs-string" style="color: #dd1144;">'@salesforce/resourceUrl/DataTableDemo'</span>;
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">import</span> JqueryResource <span class="hljs-keyword" style="color: #333333; font-weight: 700;">from</span> <span class="hljs-string" style="color: #dd1144;">'@salesforce/resourceUrl/Jquery331'</span>;
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">import</span> {
loadScript,
loadStyle
} <span class="hljs-keyword" style="color: #333333; font-weight: 700;">from</span> <span class="hljs-string" style="color: #dd1144;">'lightning/platformResourceLoader'</span>;
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">import</span> {
ShowToastEvent
} <span class="hljs-keyword" style="color: #333333; font-weight: 700;">from</span> <span class="hljs-string" style="color: #dd1144;">'lightning/platformShowToastEvent'</span>;
<span class="hljs-comment" style="color: #999988; font-style: italic;">// import toast message event .</span>
<span class="hljs-comment" style="color: #999988; font-style: italic;">// import apex class and it's methods.</span>
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">import</span> getAccounts <span class="hljs-keyword" style="color: #333333; font-weight: 700;">from</span> <span class="hljs-string" style="color: #dd1144;">'@salesforce/apex/LWCExampleController.getAccounts'</span>;
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">export</span> <span class="hljs-keyword" style="color: #333333; font-weight: 700;">default</span> <span class="hljs-class"><span class="hljs-keyword" style="color: #333333; font-weight: 700;">class</span> <span class="hljs-title" style="color: #445588; font-weight: 700;">JqueryDataTableLWCDemo</span> <span class="hljs-keyword" style="color: #333333; font-weight: 700;">extends</span> <span class="hljs-title" style="color: #445588; font-weight: 700;">LightningElement</span> </span>{
accounts = [];
error;
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">async</span> connectedCallback() {
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">await</span> <span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.fetchAccoutns();
<span class="hljs-built_in" style="color: #0086b3;">Promise</span>.all([
loadScript(<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>, JqueryResource),
loadScript(<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>, dataTableResource + <span class="hljs-string" style="color: #dd1144;">'/DataTables-1.10.18/js/jquery.dataTables.min.js'</span>),
loadStyle(<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>, dataTableResource + <span class="hljs-string" style="color: #dd1144;">'/DataTables-1.10.18/css/jquery.dataTables.min.css'</span>),
]).then(() => {
<span class="hljs-built_in" style="color: #0086b3;">console</span>.log(<span class="hljs-string" style="color: #dd1144;">'script loaded sucessfully'</span>);
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">const</span> table = <span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.template.querySelector(<span class="hljs-string" style="color: #dd1144;">'.tableClass'</span>);
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">const</span> columnNames = [<span class="hljs-string" style="color: #dd1144;">'Name'</span>, <span class="hljs-string" style="color: #dd1144;">'Industry'</span>, <span class="hljs-string" style="color: #dd1144;">'Type'</span>, <span class="hljs-string" style="color: #dd1144;">'Phone'</span>, <span class="hljs-string" style="color: #dd1144;">'Rating'</span>];
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">let</span> tableHeaders = <span class="hljs-string" style="color: #dd1144;">'<thead> <tr>'</span>;
columnNames.forEach(header => {
tableHeaders += <span class="hljs-string" style="color: #dd1144;">'<th>'</span> + header + <span class="hljs-string" style="color: #dd1144;">'</th>'</span>;
});
tableHeaders += <span class="hljs-string" style="color: #dd1144;">'</tr></thead>'</span>;
table.innerHTML = tableHeaders;
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">let</span> jqTable = $(table).DataTable();
$(<span class="hljs-string" style="color: #dd1144;">'div.dataTables_filter input'</span>).addClass(<span class="hljs-string" style="color: #dd1144;">'slds-input'</span>);
$(<span class="hljs-string" style="color: #dd1144;">'div.dataTables_filter input'</span>).css(<span class="hljs-string" style="color: #dd1144;">"marginBottom"</span>, <span class="hljs-string" style="color: #dd1144;">"10px"</span>);
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.accounts.forEach(rec => {
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">let</span> tableRows = [];
tableRows.push(<span class="hljs-string" style="color: #dd1144;">'<a href="/lightning/r/Account/'</span> + rec.Id + <span class="hljs-string" style="color: #dd1144;">'/view">'</span> + rec.Name + <span class="hljs-string" style="color: #dd1144;">'</a>'</span>);
tableRows.push(rec.Industry != <span class="hljs-literal" style="color: teal;">undefined</span> ? rec.Industry : <span class="hljs-string" style="color: #dd1144;">''</span>);
tableRows.push(rec.Type != <span class="hljs-literal" style="color: teal;">undefined</span> ? rec.Type : <span class="hljs-string" style="color: #dd1144;">''</span>);
tableRows.push(rec.Phone != <span class="hljs-literal" style="color: teal;">undefined</span> ? rec.Phone : <span class="hljs-string" style="color: #dd1144;">''</span>);
tableRows.push(rec.Rating != <span class="hljs-literal" style="color: teal;">undefined</span> ? rec.Rating : <span class="hljs-string" style="color: #dd1144;">''</span>);
jqTable.row.add(tableRows);
});
jqTable.draw();
}).catch(error => {
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.error = error;
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.dispatchEvent(
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">new</span> ShowToastEvent({
title: <span class="hljs-string" style="color: #dd1144;">'Error!!'</span>,
message: <span class="hljs-built_in" style="color: #0086b3;">JSON</span>.stringify(error),
variant: <span class="hljs-string" style="color: #dd1144;">'error'</span>,
}),
);
});
}
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">async</span> fetchAccoutns() {
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">await</span> getAccounts()
.then(data => {
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">if</span> (data) {
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.accounts = data;
}
})
.catch(error => {
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.error = error;
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.accounts = <span class="hljs-literal" style="color: teal;">undefined</span>;
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.error = <span class="hljs-string" style="color: #dd1144;">'Unknown error'</span>;
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">if</span> (<span class="hljs-built_in" style="color: #0086b3;">Array</span>.isArray(error.body)) {
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.error = error.body.map(e => e.message).join(<span class="hljs-string" style="color: #dd1144;">', '</span>);
} <span class="hljs-keyword" style="color: #333333; font-weight: 700;">else</span> <span class="hljs-keyword" style="color: #333333; font-weight: 700;">if</span> (<span class="hljs-keyword" style="color: #333333; font-weight: 700;">typeof</span> error.body.message === <span class="hljs-string" style="color: #dd1144;">'string'</span>) {
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.error = error.body.message;
}
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.dispatchEvent(
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">new</span> ShowToastEvent({
title: <span class="hljs-string" style="color: #dd1144;">'Error!!'</span>,
message: error,
variant: <span class="hljs-string" style="color: #dd1144;">'error'</span>,
}),
);
});
}
}</pre><b>Apex Class</b></div><div><pre class="hljs" style="background: rgb(248, 248, 248); color: #333333; display: block; overflow-x: auto; padding: 0.5em;"><span class="hljs-keyword" style="color: #333333; font-weight: 700;">public</span> inherited sharing <span class="hljs-class"><span class="hljs-keyword" style="color: #333333; font-weight: 700;">class</span> <span class="hljs-title" style="color: #445588; font-weight: 700;">LWCExampleController</span> </span>{
<span class="hljs-meta" style="color: #999999; font-weight: 700;">@AuraEnabled</span>(Cacheable = <span class="hljs-keyword" style="color: #333333; font-weight: 700;">true</span>)
<span class="hljs-function"><span class="hljs-keyword" style="color: #333333; font-weight: 700;">public</span> <span class="hljs-keyword" style="color: #333333; font-weight: 700;">static</span> List<Account> <span class="hljs-title" style="color: #990000; font-weight: 700;">getAccounts</span><span class="hljs-params">()</span></span>{
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">return</span> [SELECT Id, Name,Industry, Type, Phone, Rating, AccountNumber FROM Account ORDER BY Name];
}
}</pre><b><br /></b></div>Shaik Nagajanihttp://www.blogger.com/profile/08014314816293399854noreply@blogger.com2tag:blogger.com,1999:blog-9083431842638854569.post-28775520106304734132021-02-02T12:11:00.001+05:302021-02-02T12:11:17.564+05:30Custom Spinner in Lightning Web Component(lwc)<p> This post explains how to create a custom spinner in lightning web components(lwc)</p><h3 style="text-align: left;"><b>HTML Code</b></h3><div><b><pre class="hljs" style="background: rgb(248, 248, 248); color: #333333; display: block; overflow-x: auto; padding: 0.5em;"><span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">template</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-card</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">div</span> <span class="hljs-attr" style="color: teal;">align</span>=<span class="hljs-string" style="color: #dd1144;">"center"</span> <span class="hljs-attr" style="color: teal;">if:true</span>=<span class="hljs-string" style="color: #dd1144;">{isSpinner}</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">div</span> <span class="hljs-attr" style="color: teal;">class</span>=<span class="hljs-string" style="color: #dd1144;">"loader"</span>></span><span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">div</span>></span>
Please wait...
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">div</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">div</span> <span class="hljs-attr" style="color: teal;">align</span>=<span class="hljs-string" style="color: #dd1144;">"center"</span> <span class="hljs-attr" style="color: teal;">if:true</span>=<span class="hljs-string" style="color: #dd1144;">{showButon}</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-button</span> <span class="hljs-attr" style="color: teal;">label</span>=<span class="hljs-string" style="color: #dd1144;">"Enable Spinner"</span> <span class="hljs-attr" style="color: teal;">variant</span>=<span class="hljs-string" style="color: #dd1144;">"brand"</span> <span class="hljs-attr" style="color: teal;">onclick</span>=<span class="hljs-string" style="color: #dd1144;">{enableSpinner}</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-button</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">div</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-card</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">template</span>></span></pre></b><h3 style="text-align: left;"><b>JS Code</b></h3></div><div><pre class="hljs" style="background: rgb(248, 248, 248); color: #333333; display: block; overflow-x: auto; padding: 0.5em;"><span class="hljs-keyword" style="color: #333333; font-weight: 700;">import</span> {
LightningElement
} <span class="hljs-keyword" style="color: #333333; font-weight: 700;">from</span> <span class="hljs-string" style="color: #dd1144;">'lwc'</span>;
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">export</span> <span class="hljs-keyword" style="color: #333333; font-weight: 700;">default</span> <span class="hljs-class"><span class="hljs-keyword" style="color: #333333; font-weight: 700;">class</span> <span class="hljs-title" style="color: #445588; font-weight: 700;">Customspinner</span> <span class="hljs-keyword" style="color: #333333; font-weight: 700;">extends</span> <span class="hljs-title" style="color: #445588; font-weight: 700;">LightningElement</span> </span>{
isSpinner = <span class="hljs-literal" style="color: teal;">false</span>;
showButon = <span class="hljs-literal" style="color: teal;">true</span>;
enableSpinner() {
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">if</span> (!<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.isSpinner) {
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.isSpinner = <span class="hljs-literal" style="color: teal;">true</span>;
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.showButon = <span class="hljs-literal" style="color: teal;">false</span>;
}
}
}</pre><b>CSS Code</b></div><div><pre class="hljs" style="background: rgb(248, 248, 248); color: #333333; display: block; overflow-x: auto; padding: 0.5em;"><span class="hljs-selector-class">.loader</span> {
<span class="hljs-attribute" style="color: navy; font-weight: 400;">border</span>: <span class="hljs-number" style="color: teal;">5px</span> solid <span class="hljs-number" style="color: teal;">#f3f3f3</span>;
<span class="hljs-attribute" style="color: navy; font-weight: 400;">border-radius</span>: <span class="hljs-number" style="color: teal;">50%</span>;
<span class="hljs-attribute" style="color: navy; font-weight: 400;">border-top</span>: <span class="hljs-number" style="color: teal;">5px</span> solid <span class="hljs-number" style="color: teal;">#3498db</span>;
<span class="hljs-attribute" style="color: navy; font-weight: 400;">width</span>: <span class="hljs-number" style="color: teal;">60px</span>;
<span class="hljs-attribute" style="color: navy; font-weight: 400;">height</span>: <span class="hljs-number" style="color: teal;">60px</span>;
<span class="hljs-attribute" style="color: navy; font-weight: 400;">-webkit-animation</span>: spin <span class="hljs-number" style="color: teal;">2s</span> linear infinite; <span class="hljs-comment" style="color: #999988; font-style: italic;">/* Safari */</span>
<span class="hljs-attribute" style="color: navy; font-weight: 400;">animation</span>: spin <span class="hljs-number" style="color: teal;">2s</span> linear infinite;
}
<span class="hljs-comment" style="color: #999988; font-style: italic;">/* Safari */</span>
@-<span class="hljs-keyword" style="color: #333333; font-weight: 700;">webkit</span>-<span class="hljs-keyword" style="color: #333333; font-weight: 700;">keyframes</span> spin {
0% { <span class="hljs-attribute" style="color: navy; font-weight: 400;">-webkit-transform</span>: <span class="hljs-built_in" style="color: #0086b3;">rotate</span>(0deg); }
100% { <span class="hljs-attribute" style="color: navy; font-weight: 400;">-webkit-transform</span>: <span class="hljs-built_in" style="color: #0086b3;">rotate</span>(360deg); }
}
@<span class="hljs-keyword" style="color: #333333; font-weight: 700;">keyframes</span> spin {
0% { <span class="hljs-attribute" style="color: navy; font-weight: 400;">transform</span>: <span class="hljs-built_in" style="color: #0086b3;">rotate</span>(0deg); }
100% { <span class="hljs-attribute" style="color: navy; font-weight: 400;">transform</span>: <span class="hljs-built_in" style="color: #0086b3;">rotate</span>(360deg); }
}</pre><b>Output</b></div><div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfN2u6gl2nRRsz27JseYyexNu2VxGeul_roECf_PXSgI84KZr9EG_yoAPsc_o-8_TnPvYs9-wGdABh-vrzGsuWijFgFJzxEz3-nNg3NwzYRbiWI519pwGsRHetW1H5Yyqy1mnLu-nU-mHy/s604/custom+spinner.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="168" data-original-width="604" height="178" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfN2u6gl2nRRsz27JseYyexNu2VxGeul_roECf_PXSgI84KZr9EG_yoAPsc_o-8_TnPvYs9-wGdABh-vrzGsuWijFgFJzxEz3-nNg3NwzYRbiWI519pwGsRHetW1H5Yyqy1mnLu-nU-mHy/w640-h178/custom+spinner.gif" width="640" /></a></div><br /><b><br /></b></div>Shaik Nagajanihttp://www.blogger.com/profile/08014314816293399854noreply@blogger.com0tag:blogger.com,1999:blog-9083431842638854569.post-70815527055142664802021-01-19T11:42:00.003+05:302021-01-19T11:42:30.529+05:30Expand/Collapse Sections In Salesforce Lightning Web Component(lwc)<p>This post explains how to create expand/collapse sections in Salesforce Lightning Web Component(lwc) using the <a href="https://www.w3schools.com/tags/tag_details.asp" target="_blank">details</a> tag in html.</p><p>Demo:</p><h3 style="text-align: left;"><b>HTML Code:</b></h3><div><b><pre class="hljs" style="background: rgb(248, 248, 248); color: #333333; display: block; overflow-x: auto; padding: 0.5em;"><span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">template</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-card</span> <span class="hljs-attr" style="color: teal;">title</span>=<span class="hljs-string" style="color: #dd1144;">"Expand/Collapse Sections In Salesforce Lightning Web Component"</span>></span><span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">br</span> /></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">div</span> <span class="hljs-attr" style="color: teal;">style</span>=<span class="hljs-string" style="color: #dd1144;">"padding-left: 10px;"</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">details</span> <span class="hljs-attr" style="color: teal;">open</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">summary</span>></span>India<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">summary</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">ul</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">li</span>></span>Hyderabad<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">li</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">li</span>></span>Delhi<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">li</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">li</span>></span>Mumbaie<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">li</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">ul</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">details</span>></span><span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">br</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">details</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">summary</span>></span>USA<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">summary</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">ul</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">li</span>></span>New York<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">li</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">li</span>></span>Las Vegas<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">li</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">li</span>></span>Miami<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">li</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">ul</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">details</span>></span><span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">br</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">details</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">summary</span>></span>China<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">summary</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">ul</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">li</span>></span>Shenzhen<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">li</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">li</span>></span>Guangzhou<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">li</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">li</span>></span>Shanghai<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">li</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">ul</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">details</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">div</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-card</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">template</span>></span></pre></b><h3 style="text-align: left;"><b>CSS</b></h3></div><div style="text-align: left;"><b><pre class="hljs" style="background: rgb(248, 248, 248); color: #333333; display: block; overflow-x: auto; padding: 0.5em;"><span class="hljs-selector-tag" style="color: #333333; font-weight: 700;">details</span> > <span class="hljs-selector-tag" style="color: #333333; font-weight: 700;">summary</span> {
<span class="hljs-attribute" style="color: navy; font-weight: 400;">padding</span>: <span class="hljs-number" style="color: teal;">4px</span>;
<span class="hljs-attribute" style="color: navy; font-weight: 400;">background-color</span>: <span class="hljs-number" style="color: teal;">#eeeeee</span>;
<span class="hljs-attribute" style="color: navy; font-weight: 400;">outline</span>: none;
}
</pre></b><h3><b>Output</b></h3><div><b><br /></b></div><div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikxAowkpGNxkNe2zV1zO_aUC68ixOZpog66VgHfZpcEzjRiqKPEh23z4998Qkxxe68v1W_fCknstGCsehjXnm-PxCFZ0VBWb3Whu7RGd4PYJ2kSSNyGOT8RM2igYfLasztrKo8-EASvdCw/s884/collapse.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="372" data-original-width="884" height="270" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikxAowkpGNxkNe2zV1zO_aUC68ixOZpog66VgHfZpcEzjRiqKPEh23z4998Qkxxe68v1W_fCknstGCsehjXnm-PxCFZ0VBWb3Whu7RGd4PYJ2kSSNyGOT8RM2igYfLasztrKo8-EASvdCw/w640-h270/collapse.gif" width="640" /></a></div><br /><b><br /></b></div></div>Shaik Nagajanihttp://www.blogger.com/profile/08014314816293399854noreply@blogger.com1tag:blogger.com,1999:blog-9083431842638854569.post-74240806965545571082020-12-16T11:31:00.002+05:302020-12-16T11:31:22.448+05:30Access Custom Metadata Type data without Using the SOQL in Salesforce<p>From Spring'21 onwards we can get the custom metadata record information without using the SOQL.</p><p><b>Demo:</b></p><p>For the demo, I created the Country and Amount(Country_And_Amount__mdt) Custom Metadata type object and records.</p><p><b>Country_And_Amount__mdt</b> object.</p><p></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiky4DIO0uiKCA0AQhoj8Z8DZB7xGXS1wi9ormhISznnlJ-pouZ2qKTc15vjO2CcP3NbEofz_-Ub7Z64Jlb1CPX5RZ8idmSfZrsgUjfbQgIGZecTSfda50s0w8xRWIZTrRVxfcnhAbVrlej/" style="margin-left: 1em; margin-right: 1em;"><img data-original-height="410" data-original-width="1098" height="238" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiky4DIO0uiKCA0AQhoj8Z8DZB7xGXS1wi9ormhISznnlJ-pouZ2qKTc15vjO2CcP3NbEofz_-Ub7Z64Jlb1CPX5RZ8idmSfZrsgUjfbQgIGZecTSfda50s0w8xRWIZTrRVxfcnhAbVrlej/w640-h238/image.png" width="640" /></a></div><br /><b>Sample Code:</b><p></p><pre class="hljs" style="background: rgb(248, 248, 248); color: #333333; display: block; overflow-x: auto; padding: 0.5em;"><span class="hljs-comment" style="color: #999988; font-style: italic;">// Getting all metadata values </span>
Map<String, Country_And_Amount__mdt> mapValues = Country_And_Amount__mdt.getAll();
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">for</span>(Country_And_Amount__mdt mdt : mapValues.values()) {
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">System</span>.debug(<span class="hljs-string" style="color: #dd1144;">'Name => '</span>+mdt.Label);
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">System</span>.debug(<span class="hljs-string" style="color: #dd1144;">'DeveloperName => '</span>+mdt.DeveloperName);
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">System</span>.debug(<span class="hljs-string" style="color: #dd1144;">'Amount__c => '</span>+mdt.Amount__c);
}
<span class="hljs-comment" style="color: #999988; font-style: italic;">// Getting metadata record based on value</span>
Country_And_Amount__mdt objMdt = Country_And_Amount__mdt.getInstance(<span class="hljs-string" style="color: #dd1144;">'United_States'</span>);
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">System</span>.debug(<span class="hljs-string" style="color: #dd1144;">'objMdt => '</span>+objMdt);
</pre><p><b><br /></b></p><p><b>Output:</b></p><p><b></b></p><div class="separator" style="clear: both; text-align: center;"><b><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBe0DkvcHtdwh42LPqNMZwV8Wx5SrecY9Bf6JRnMMXkCqNWKKS_nGax7UP8zs9XdlSreuEUozBnClDbu3SebadsXYtAbKj-fh10HJf2EJyMY7CKPZNTEhncmZc1_PwzpGUgYzxaDI1EoXR/" style="margin-left: 1em; margin-right: 1em;"><img data-original-height="195" data-original-width="1350" height="92" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBe0DkvcHtdwh42LPqNMZwV8Wx5SrecY9Bf6JRnMMXkCqNWKKS_nGax7UP8zs9XdlSreuEUozBnClDbu3SebadsXYtAbKj-fh10HJf2EJyMY7CKPZNTEhncmZc1_PwzpGUgYzxaDI1EoXR/w640-h92/image.png" width="640" /></a></b></div><b><br /><br /></b><p></p>Shaik Nagajanihttp://www.blogger.com/profile/08014314816293399854noreply@blogger.com0tag:blogger.com,1999:blog-9083431842638854569.post-29776993581615393372020-12-15T13:15:00.003+05:302020-12-15T14:30:30.038+05:30Inline Editing in lightning-datatable in Salesforce Lightning Web Component(lwc)<p> This post explains, inline editing in lightning-datatable in salesforce lightning web components(lwc).</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2n6njT5-Wexxh6UoSEH3VwwFskJSQYwI7cUbk4fK0ezfq0TaJ13dqW5_hjtAIzyq-2Rl7P9tZK5Fol_90AFxQDWjTmBB0toUcow7nQhqCA-ChtpPYb1LYa3jf5DJH3jGBlXWawkai8HHG/s1344/inlineedit.gif" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="372" data-original-width="1344" height="178" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2n6njT5-Wexxh6UoSEH3VwwFskJSQYwI7cUbk4fK0ezfq0TaJ13dqW5_hjtAIzyq-2Rl7P9tZK5Fol_90AFxQDWjTmBB0toUcow7nQhqCA-ChtpPYb1LYa3jf5DJH3jGBlXWawkai8HHG/w640-h178/inlineedit.gif" width="640" /></a></div><h4 style="text-align: left;"><span style="color: #0b5394;"><br /></span></h4><h4 style="text-align: left;"><span style="color: #0b5394;">HTML Code:</span></h4>
<pre class="hljs" style="background: rgb(248, 248, 248); color: #333333; display: block; overflow-x: auto; padding: 0.5em;"><span class="xml"><span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">template</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-card</span> <span class="hljs-attr" style="color: teal;">title</span>=<span class="hljs-string" style="color: #dd1144;">"Inline Edit With Lightning Datatable in LWC"</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">template</span> <span class="hljs-attr" style="color: teal;">if:true</span>=<span class="hljs-string" style="color: #dd1144;">{contacts.data}</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-datatable</span> <span class="hljs-attr" style="color: teal;">key-field</span>=<span class="hljs-string" style="color: #dd1144;">"Id"</span>
<span class="hljs-attr" style="color: teal;">data</span>=<span class="hljs-string" style="color: #dd1144;">{contacts.data}</span>
<span class="hljs-attr" style="color: teal;">columns</span>=<span class="hljs-string" style="color: #dd1144;">{columns}</span>
<span class="hljs-attr" style="color: teal;">onsave</span>=<span class="hljs-string" style="color: #dd1144;">{handleSave}</span>
<span class="hljs-attr" style="color: teal;">draft-values</span>=<span class="hljs-string" style="color: #dd1144;">{saveDraftValues}</span>
<span class="hljs-attr" style="color: teal;">hide-checkbox-column</span>
<span class="hljs-attr" style="color: teal;">show-row-number-column</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-datatable</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">template</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-card</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">template</span>></span></span></pre><h4 style="text-align: left;"><b><br /></b></h4><h4 style="text-align: left;"><b><span style="color: #0b5394;">Javascript Code:</span></b></h4>
<pre class="hljs" style="background: rgb(248, 248, 248); color: #333333; display: block; overflow-x: auto; padding: 0.5em;"><span class="hljs-keyword" style="color: #333333; font-weight: 700;">import</span> { LightningElement, wire, track } <span class="hljs-keyword" style="color: #333333; font-weight: 700;">from</span> <span class="hljs-string" style="color: #dd1144;">'lwc'</span>;
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">import</span> getContacts <span class="hljs-keyword" style="color: #333333; font-weight: 700;">from</span> <span class="hljs-string" style="color: #dd1144;">'@salesforce/apex/LWCExampleController.getContacts'</span>;
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">import</span> { updateRecord } <span class="hljs-keyword" style="color: #333333; font-weight: 700;">from</span> <span class="hljs-string" style="color: #dd1144;">'lightning/uiRecordApi'</span>;
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">import</span> { ShowToastEvent } <span class="hljs-keyword" style="color: #333333; font-weight: 700;">from</span> <span class="hljs-string" style="color: #dd1144;">'lightning/platformShowToastEvent'</span>;
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">import</span> { refreshApex } <span class="hljs-keyword" style="color: #333333; font-weight: 700;">from</span> <span class="hljs-string" style="color: #dd1144;">'@salesforce/apex'</span>;
<span class="hljs-comment" style="color: #999988; font-style: italic;">// datatable columns</span>
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">const</span> columns = [
{
label: <span class="hljs-string" style="color: #dd1144;">'Name'</span>,
fieldName: <span class="hljs-string" style="color: #dd1144;">'Name'</span>,
type: <span class="hljs-string" style="color: #dd1144;">'text'</span>,
}, {
label: <span class="hljs-string" style="color: #dd1144;">'FirstName'</span>,
fieldName: <span class="hljs-string" style="color: #dd1144;">'FirstName'</span>,
type: <span class="hljs-string" style="color: #dd1144;">'text'</span>,
editable: <span class="hljs-literal" style="color: teal;">true</span>,
}, {
label: <span class="hljs-string" style="color: #dd1144;">'LastName'</span>,
fieldName: <span class="hljs-string" style="color: #dd1144;">'LastName'</span>,
type: <span class="hljs-string" style="color: #dd1144;">'text'</span>,
editable: <span class="hljs-literal" style="color: teal;">true</span>,
}, {
label: <span class="hljs-string" style="color: #dd1144;">'Phone'</span>,
fieldName: <span class="hljs-string" style="color: #dd1144;">'Phone'</span>,
type: <span class="hljs-string" style="color: #dd1144;">'phone'</span>,
editable: <span class="hljs-literal" style="color: teal;">true</span>
}
];
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">export</span> <span class="hljs-keyword" style="color: #333333; font-weight: 700;">default</span> <span class="hljs-class"><span class="hljs-keyword" style="color: #333333; font-weight: 700;">class</span> <span class="hljs-title" style="color: #445588; font-weight: 700;">InlineEditTable</span> <span class="hljs-keyword" style="color: #333333; font-weight: 700;">extends</span> <span class="hljs-title" style="color: #445588; font-weight: 700;">LightningElement</span> </span>{
columns = columns;
@track contacts;
saveDraftValues = [];
@wire(getContacts)
cons(result) {
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.contacts = result;
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">if</span> (result.error) {
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.contacts = <span class="hljs-literal" style="color: teal;">undefined</span>;
}
};
handleSave(event) {
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.saveDraftValues = event.detail.draftValues;
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">const</span> recordInputs = <span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.saveDraftValues.slice().map(draft => {
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">const</span> fields = <span class="hljs-built_in" style="color: #0086b3;">Object</span>.assign({}, draft);
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">return</span> { fields };
});
<span class="hljs-comment" style="color: #999988; font-style: italic;">// Updateing the records using the UiRecordAPi</span>
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">const</span> promises = recordInputs.map(recordInput => updateRecord(recordInput));
<span class="hljs-built_in" style="color: #0086b3;">Promise</span>.all(promises).then(res => {
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.dispatchEvent(
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">new</span> ShowToastEvent({
title: <span class="hljs-string" style="color: #dd1144;">'Success'</span>,
message: <span class="hljs-string" style="color: #dd1144;">'Records Updated Successfully!!'</span>,
variant: <span class="hljs-string" style="color: #dd1144;">'success'</span>
})
);
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.saveDraftValues = [];
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">return</span> <span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.refresh();
}).catch(error => {
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.dispatchEvent(
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">new</span> ShowToastEvent({
title: <span class="hljs-string" style="color: #dd1144;">'Error'</span>,
message: <span class="hljs-string" style="color: #dd1144;">'An Error Occured!!'</span>,
variant: <span class="hljs-string" style="color: #dd1144;">'error'</span>
})
);
}).finally(() => {
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.saveDraftValues = [];
});
}
<span class="hljs-comment" style="color: #999988; font-style: italic;">// This function is used to refresh the table once data updated</span>
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">async</span> refresh() {
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">await</span> refreshApex(<span class="hljs-keyword" style="color: #333333; font-weight: 700;">this</span>.contacts);
}
}</pre><h4 style="text-align: left;"><b><span style="color: #0b5394;">Apex Code:</span></b></h4>
<pre class="hljs" style="background: rgb(248, 248, 248); color: #333333; display: block; overflow-x: auto; padding: 0.5em;"><span class="hljs-keyword" style="color: #333333; font-weight: 700;">public</span> inherited sharing <span class="hljs-class"><span class="hljs-keyword" style="color: #333333; font-weight: 700;">class</span> <span class="hljs-title" style="color: #445588; font-weight: 700;">LWCExampleController</span> </span>{
<span class="hljs-meta" style="color: #999999; font-weight: 700;">@AuraEnabled</span>(Cacheable = <span class="hljs-keyword" style="color: #333333; font-weight: 700;">true</span>)
<span class="hljs-function"><span class="hljs-keyword" style="color: #333333; font-weight: 700;">public</span> <span class="hljs-keyword" style="color: #333333; font-weight: 700;">static</span> List<Contact> <span class="hljs-title" style="color: #990000; font-weight: 700;">getContacts</span><span class="hljs-params">()</span> </span>{
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">return</span> [SELECT Id, Name, FirstName, LastName, Phone, Email
FROM Contact
WHERE Email != <span class="hljs-keyword" style="color: #333333; font-weight: 700;">null</span>
AND Phone != <span class="hljs-keyword" style="color: #333333; font-weight: 700;">null</span>
ORDER BY CreatedDate DESC NULLS LAST limit <span class="hljs-number" style="color: teal;">10</span>];
}
}
</pre><p><b><span><br /></span></b></p><p><b><span style="color: #0b5394;">Output:</span></b></p><p><b></b></p><div class="separator" style="clear: both; text-align: center;"><b><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIQnNsDpTAhftBAb9f0Xwr58V78NcG4Y2ogsiIxy2YmdrgspXPGo_tYGayFz3sM62ye7emIloBpec8peShDNZ_xY3l1LxidymHTdgg2YrN8eAEItL-AFFCTRofDUqvqHA-EjGuJqP9Ya66/s1344/inlineedit.gif" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="372" data-original-width="1344" height="178" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIQnNsDpTAhftBAb9f0Xwr58V78NcG4Y2ogsiIxy2YmdrgspXPGo_tYGayFz3sM62ye7emIloBpec8peShDNZ_xY3l1LxidymHTdgg2YrN8eAEItL-AFFCTRofDUqvqHA-EjGuJqP9Ya66/w640-h178/inlineedit.gif" width="640" /></a></b></div><b><br /><span style="color: #0b5394;"><br /></span></b><p></p>Shaik Nagajanihttp://www.blogger.com/profile/08014314816293399854noreply@blogger.com6tag:blogger.com,1999:blog-9083431842638854569.post-3337008692657343062020-12-08T10:46:00.001+05:302020-12-08T10:46:16.719+05:30How to get object key prefix using apex in salesforce<p>This post explains how to get the object key prefix using apex in salesforce.</p><p>Below the code is to get the Account Key prefix.</p><p><b>Sample Code:</b></p><pre class="hljs" style="background: rgb(248, 248, 248); color: #333333; display: block; overflow-x: auto; padding: 0.5em;">String strObjKeyPrefix = Account.sobjecttype.getDescribe().getKeyPrefix();
system.debug(<span class="hljs-string" style="color: #dd1144;">'Key Prefix =>'</span> +strObjKeyPrefix);</pre><b>Output:</b><div><b><br /></b><div><b><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLzLd7jmvvorjRY46x14uIdoCnl0SV-et3jU2AyWRQ-WqQSv8Dt8XkLG8Gbp1r-zQh7Y_W7HDiQL3Imrkjz2hOckpayNWiS6sA7DQ74X-kVYsSoDBsQhFe73TQpdXjz9HoIyjF0otZ1x7q/" style="margin-left: 1em; margin-right: 1em;"><img data-original-height="118" data-original-width="551" height="138" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLzLd7jmvvorjRY46x14uIdoCnl0SV-et3jU2AyWRQ-WqQSv8Dt8XkLG8Gbp1r-zQh7Y_W7HDiQL3Imrkjz2hOckpayNWiS6sA7DQ74X-kVYsSoDBsQhFe73TQpdXjz9HoIyjF0otZ1x7q/w640-h138/image.png" width="640" /></a></div><br /><br /></b></div></div>Shaik Nagajanihttp://www.blogger.com/profile/08014314816293399854noreply@blogger.com0tag:blogger.com,1999:blog-9083431842638854569.post-30356020397798968352020-12-07T14:41:00.005+05:302020-12-07T14:41:49.004+05:30Hyperlink a Record in lightning-datatable in Lightning Web Components(lwc)<p> This post explains how to add the Hyperlink to name in the lightning data table using Lightning web components(lwc).</p><p><b>Example:</b></p><p><b>HTML Code:</b></p><pre style="background: rgb(0, 0, 0); color: #f8f8f8; overflow: auto;"><span style="color: #89bdff;"><<span style="color: #89bdff;">template</span>></span>
<span style="color: #89bdff;"><<span style="color: #89bdff;">lightning</span><span style="color: #89bdff;">-card</span> <span style="color: #89bdff;">title</span>=<span style="color: #65b042;">"Hyperlink to The Name in Lightning Datatable"</span>></span><span style="color: #e0c589;"><<span style="color: #e0c589;">br</span>/></span>
<span style="color: #89bdff;"><<span style="color: #89bdff;">div</span> <span style="color: #89bdff;">if:true</span>={consData}></span>
<span style="color: #89bdff;"><<span style="color: #89bdff;">lightning</span><span style="color: #89bdff;">-datatable</span> <span style="color: #89bdff;">data</span>={consData}
<span style="color: #89bdff;">columns</span>={columns}
<span style="color: #89bdff;">key-field</span>=<span style="color: #65b042;">"Id"</span>
<span style="color: #89bdff;">hide-checkbox-column</span>=<span style="color: #65b042;">"true"</span>></span><span style="color: #89bdff;"></<span style="color: #89bdff;">lightning</span><span style="color: #89bdff;">-datatable</span>></span>
<span style="color: #89bdff;"></<span style="color: #89bdff;">div</span>></span>
<span style="color: #89bdff;"></<span style="color: #89bdff;">lightning</span><span style="color: #89bdff;">-card</span>></span>
<span style="color: #89bdff;"></<span style="color: #89bdff;">template</span>></span>
</pre><p><b>Javascript Code:</b></p><pre style="background: rgb(0, 0, 0); color: #f8f8f8; overflow: auto;"><span style="color: #e28964;">import</span> { LightningElement, wire, track } from <span style="color: #65b042;">'lwc'</span>;
<span style="color: #e28964;">import</span> getContacts from <span style="color: #65b042;">'@salesforce/apex/LWCExampleController.getContacts'</span>;
<span style="color: #aeaeae; font-style: italic;">// datatable columns</span>
<span style="color: #99cf50;">const</span> columns <span style="color: #e28964;">=</span> [
{
label: <span style="color: #65b042;">'Name'</span>,
fieldName: <span style="color: #65b042;">'ConName'</span>,
type: <span style="color: #65b042;">'url'</span>,
typeAttributes: {label: { fieldName: <span style="color: #65b042;">'Name'</span> }, target: <span style="color: #65b042;">'_blank'</span>}
}, {
label: <span style="color: #65b042;">'FirstName'</span>,
fieldName: <span style="color: #65b042;">'FirstName'</span>,
type: <span style="color: #65b042;">'text'</span>,
}, {
label: <span style="color: #65b042;">'LastName'</span>,
fieldName: <span style="color: #65b042;">'LastName'</span>,
type: <span style="color: #65b042;">'text'</span>,
}, {
label: <span style="color: #65b042;">'Phone'</span>,
fieldName: <span style="color: #65b042;">'Phone'</span>,
type: <span style="color: #65b042;">'phone'</span>
}
];
<span style="color: #99cf50;">export</span> <span style="color: #e28964;">default</span> <span style="color: #99cf50;">class</span> HyperlinkNameInDatatable <span style="color: #99cf50;">extends</span> LightningElement {
consData <span style="color: #e28964;">=</span> [];
columns <span style="color: #e28964;">=</span> columns;
@wire(getContacts)
contacts({ error, data }) {
<span style="color: #e28964;">if</span> (data) {
let tempConList <span style="color: #e28964;">=</span> [];
data.forEach((record) <span style="color: #e28964;">=</span><span style="color: #e28964;">></span> {
let tempConRec <span style="color: #e28964;">=</span> <span style="color: #9b859d;">Object</span>.assign({}, record);
tempConRec.ConName <span style="color: #e28964;">=</span> <span style="color: #65b042;">'/'</span> <span style="color: #e28964;">+</span> tempConRec.Id;
tempConList.<span style="color: #dad085;">push</span>(tempConRec);
});
<span style="color: #3e87e3;">this</span>.consData <span style="color: #e28964;">=</span> tempConList;
<span style="color: #3e87e3;">this</span><span style="color: #dad085;">.error</span> <span style="color: #e28964;">=</span> <span style="color: #3387cc;">undefined</span>;
<span style="text-decoration: underline;">console</span>.table(<span style="color: #3e87e3;">this</span>.consData);
} <span style="color: #e28964;">else</span> <span style="color: #e28964;">if</span> (error) {
<span style="color: #3e87e3;">this</span><span style="color: #dad085;">.error</span> <span style="color: #e28964;">=</span> result<span style="color: #dad085;">.error</span>;
}
}
}
</pre><p><b>Apex Code:</b></p>
<pre style="background: rgb(0, 0, 0); color: #f8f8f8; overflow: auto;"><span style="color: #99cf50;">public</span> inherited sharing <span style="color: #99cf50;">class</span> <span style="text-decoration: underline;">LWCExampleController</span> {
<span style="color: #99cf50;">@AuraEnabled</span>(<span style="color: #3387cc;">Cacheable</span> <span style="color: #e28964;">=</span> <span style="color: #3387cc;">true</span>)
<span style="color: #99cf50;">public</span> <span style="color: #99cf50;">static</span> <span style="color: #99cf50;">List<<span style="color: #99cf50;">Contact</span>></span> <span style="color: #89bdff;">getContacts</span>() {
<span style="color: #e28964;">return</span> [<span style="color: #3387cc;">SELECT</span> <span style="color: #99cf50;">Id</span>, <span style="color: #99cf50;">Name</span>, <span style="color: #99cf50;">FirstName</span>, <span style="color: #99cf50;">LastName</span>, <span style="color: #99cf50;">Phone</span>, <span style="color: #99cf50;">Email</span>
<span style="color: #3387cc;">FROM</span> <span style="color: #99cf50;">Contact</span>
<span style="color: #3387cc;">WHERE</span> <span style="color: #99cf50;">Email</span> <span style="color: #e28964;">!=</span> <span style="color: #3387cc;">null</span>
<span style="color: #3387cc;">AND</span> <span style="color: #99cf50;">Phone</span> <span style="color: #e28964;">!=</span> <span style="color: #3387cc;">null</span>
<span style="color: #3387cc;">ORDER</span> <span style="color: #3387cc;">BY</span> <span style="color: #99cf50;">CreatedDate</span> <span style="color: #3387cc;">DESC</span> <span style="color: #3387cc;">NULLS</span> <span style="color: #3387cc;">LAST</span> limit <span style="color: #3387cc;">10</span>];
}
}
</pre><p><b>Result:</b></p><p><b></b></p><div class="separator" style="clear: both; text-align: center;"><b><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6P_KeNl7eUkuMeTj6ScWj1ey-z1nH2zLVKxr1UKIs97_1hUC-RNVAm49Dcfqshiavw8svYFZdwF1Po4hEqdQzP8DJbiCyOPn9xim0f99XJ8_fhBqbuQcGB0mipmTG2NEp9EdWoab7rg92/" style="margin-left: 1em; margin-right: 1em;"><img data-original-height="351" data-original-width="897" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6P_KeNl7eUkuMeTj6ScWj1ey-z1nH2zLVKxr1UKIs97_1hUC-RNVAm49Dcfqshiavw8svYFZdwF1Po4hEqdQzP8DJbiCyOPn9xim0f99XJ8_fhBqbuQcGB0mipmTG2NEp9EdWoab7rg92/w640-h250/image.png" width="640" /></a></b></div><b><br /><br /></b><p></p>Shaik Nagajanihttp://www.blogger.com/profile/08014314816293399854noreply@blogger.com7tag:blogger.com,1999:blog-9083431842638854569.post-77252751942670755522020-12-06T17:10:00.001+05:302020-12-06T17:10:18.422+05:30Address Lookup in Lightning Web Components(LWC) using Google Maps Places API<p>To Enable the address lookup in<b> lightning-input-address</b> first we need to enable the permission for<b> Maps and Location Settings</b> in our salesforce org.</p><p><span style="color: #cc0000;"><b>Note: </b></span></p><p><b>Maps and Location Settings feature only available in Professional, Enterprise, Performance, and Unlimited editions.</b></p><p><b>Path:</b></p><p></p><p>From <b>Setup</b>, enter Maps in the Quick Find box, and then select <b>Maps and Location Settings</b></p><p></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhvou2hyphenhyphenPXtxVrjYt0dHKUqlPBx2JcPVZjZExlgiQwn1iNVmIHF8e_fg9nN3Cs_dzhbWOCyB2zY48CidI8u2vewqaRLJi_jLU5O52vxQG989o9drAPchxe0DZo5gzRmT8nCXrx_3cG19mT/s1188/Map+Fields.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="516" data-original-width="1188" height="278" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhvou2hyphenhyphenPXtxVrjYt0dHKUqlPBx2JcPVZjZExlgiQwn1iNVmIHF8e_fg9nN3Cs_dzhbWOCyB2zY48CidI8u2vewqaRLJi_jLU5O52vxQG989o9drAPchxe0DZo5gzRmT8nCXrx_3cG19mT/w640-h278/Map+Fields.PNG" width="640" /></a></div><br /><p></p><p>Once the permission is enabled, we need to provide the <b>show-address-lookup</b> attribute to display the Address Lookup field.</p><p><b>Example:</b></p>
<pre class="hljs" style="background: rgb(248, 248, 248); color: #333333; display: block; overflow-x: auto; padding: 0.5em;"><span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">template</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"><<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-card</span> <span class="hljs-attr" style="color: teal;">title</span>=<span class="hljs-string" style="color: #dd1144;">"Address Lookup using Google Maps Places API"</span>></span>
<span class="hljs-tag" style="color: navy;"><<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-input-address</span> <span class="hljs-attr" style="color: teal; font-weight: 400;">address-label</span>=<span class="hljs-string" style="color: #dd1144; font-weight: 400;">"Shipping Address"</span>
<span class="hljs-attr" style="color: teal; font-weight: 400;">street-label</span>=<span class="hljs-string" style="color: #dd1144; font-weight: 400;">"Street"</span>
<span class="hljs-attr" style="color: teal; font-weight: 400;">city-label</span>=<span class="hljs-string" style="color: #dd1144; font-weight: 400;">"City"</span>
<span class="hljs-attr" style="color: teal; font-weight: 400;">country-label</span>=<span class="hljs-string" style="color: #dd1144; font-weight: 400;">"Country"</span>
<span class="hljs-attr" style="color: teal; font-weight: 400;">province-label</span>=<span class="hljs-string" style="color: #dd1144; font-weight: 400;">"Province"</span>
<span class="hljs-attr" style="color: teal; font-weight: 400;">postal-code-label</span>=<span class="hljs-string" style="color: #dd1144; font-weight: 400;">"PostalCode"</span>
<span class="hljs-attr" style="color: teal; font-weight: 400;">street</span>=<span class="hljs-string" style="color: #dd1144; font-weight: 400;">"Default Street Line"</span>
<span class="hljs-attr" style="color: teal; font-weight: 400;">city</span>=<span class="hljs-string" style="color: #dd1144; font-weight: 400;">""</span>
<span class="hljs-attr" style="color: teal; font-weight: 400;">country</span>=<span class="hljs-string" style="color: #dd1144; font-weight: 400;">""</span>
<span class="hljs-attr" style="color: teal; font-weight: 400;">province</span>=<span class="hljs-string" style="color: #dd1144; font-weight: 400;">""</span>
<span class="hljs-attr" style="color: teal; font-weight: 400;">postal-code</span>=<span class="hljs-string" style="color: #dd1144; font-weight: 400;">""</span>
<span class="hljs-attr" style="color: teal; font-weight: 400;">required</span>
<span class="hljs-attr" style="color: teal; font-weight: 400;">field-level-help</span>=<span class="hljs-string" style="color: #dd1144; font-weight: 400;">"Select Shipping Address"</span>
<span class="hljs-attr" style="color: teal;"><b>show-address-lookup</b></span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-input-address</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">lightning-card</span>></span>
<span class="hljs-tag" style="color: navy; font-weight: 400;"></<span class="hljs-name" style="color: navy; font-weight: 400;">template</span>></span></pre>
<p><b>Output:</b></p><p></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSMEMzTYYYt6W6NOMsNr0RbXL2PnZ8fxg7p-ce9gvu8buFk4IijFBmrOn3pVTw93GVwjpPCtUnmvKXyqihJyuGCSQkXmQluw2NY5OzZEo5Tx0dAZJ1yOqrklXd4a_Nwu5dCchgo4aQ3beI/s883/google+map+palces.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="355" data-original-width="883" height="258" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSMEMzTYYYt6W6NOMsNr0RbXL2PnZ8fxg7p-ce9gvu8buFk4IijFBmrOn3pVTw93GVwjpPCtUnmvKXyqihJyuGCSQkXmQluw2NY5OzZEo5Tx0dAZJ1yOqrklXd4a_Nwu5dCchgo4aQ3beI/w640-h258/google+map+palces.gif" width="640" /></a></div><br /><b><br /></b><p></p><p><br /></p>Shaik Nagajanihttp://www.blogger.com/profile/08014314816293399854noreply@blogger.com0tag:blogger.com,1999:blog-9083431842638854569.post-25325140582711073362020-12-01T12:10:00.002+05:302020-12-01T12:10:17.923+05:30Safe Navigation Operator – Avoid Null Pointer Exceptions<p>Safe Navigation Operator (<b><span style="color: #3d85c6;">?.</span></b>) first evaluates the Left-Hand-Side of the chain expression. If it is NULL, the Right-Hand-Side is evaluated and returns NULL. <b>We can use this operator in variable, method, and property chaining.</b></p><p>To use the Safe Navigation Operator, we just need to replace the dot (.) with “?.“.</p><p>For Example, <b>Account?.Type.</b></p><h3 style="text-align: left;"><b><span style="color: #e69138;">Example: 1</span></b></h3><p></p><pre class="hljs" style="background: rgb(248, 248, 248); color: #333333; display: block; overflow-x: auto; padding: 0.5em;"><span class="hljs-comment" style="color: #999988; font-style: italic;">// Creating a NULL reference.</span>
Account objAcc;
<span class="hljs-comment" style="color: #999988; font-style: italic;">// it throws Null Pointer Exception.</span>
System.debug(objAcc.Type);
<span class="hljs-comment" style="color: #999988; font-style: italic;">// it prints the NULL because we used the safe operator</span>
System.debug(objAcc?.Type); </pre><p></p><h3 style="text-align: left;"><span style="color: #e69138;">Example: 2</span></h3><div><br /></div><h4 style="text-align: left;"><span style="color: #0c343d;">Without Safe Navigation Operator:</span></h4>
<pre class="hljs" style="background: rgb(248, 248, 248); color: #333333; display: block; overflow-x: auto; padding: 0.5em;">String str = <span class="hljs-string" style="color: #dd1144;">'Salesforce Code Crack'</span>;
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">if</span>(!String.isEmpty(str)){
System.debug(str.capitalize());
}</pre><h4 style="text-align: left;"><b><span style="color: #0c343d;">With Safe Navigation Operator:</span></b></h4><pre class="hljs" style="background: rgb(248, 248, 248); color: #333333; display: block; overflow-x: auto; padding: 0.5em;">String str = <span class="hljs-string" style="color: #dd1144;">'Salesforce Code Crack'</span>;
System.debug(str?.capitalize());</pre><h3 style="text-align: left;"><span style="color: #e69138;">Example: 3</span></h3><div><br /></div><div><h4><span style="color: #0c343d;">Without Safe Navigation Operator:</span></h4></div><pre class="hljs" style="background: rgb(248, 248, 248); color: #333333; display: block; overflow-x: auto; padding: 0.5em;">list<Account> lstAccs = [SELECT Type FROM Account WHERE Id=<span class="hljs-string" style="color: #dd1144;">'0013z00002TAEwaAAH'</span>];
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">if</span>(lstAccs != <span class="hljs-keyword" style="color: #333333; font-weight: 700;">null</span> && !lstAccs.isEmpty()){
System.debug(lstAccs[<span class="hljs-number" style="color: teal;">0</span>].Type);
}</pre><h4><b><span style="color: #0c343d;">With Safe Navigation Operator:</span></b></h4>
<pre class="hljs" style="background: rgb(248, 248, 248); color: #333333; display: block; overflow-x: auto; padding: 0.5em;">System.debug([SELECT Type FROM Account WHERE Id=<span class="hljs-string" style="color: #dd1144;">'0013z00002TAEwaAAH'</span> LIMIT <span class="hljs-number" style="color: teal;">1</span>]?.Type);</pre><b><div><b><br /></b></div>References:</b><div><b><a href="https://developer.salesforce.com/docs/atlas.en-us.228.0.apexcode.meta/apexcode/langCon_apex_SafeNavigationOperator.htm">https://developer.salesforce.com/docs/atlas.en-us.228.0.apexcode.meta/apexcode/langCon_apex_SafeNavigationOperator.htm</a></b></div>Shaik Nagajanihttp://www.blogger.com/profile/08014314816293399854noreply@blogger.com0tag:blogger.com,1999:blog-9083431842638854569.post-7449672218992908172020-11-17T09:46:00.002+05:302020-11-17T09:46:33.546+05:30Salesforce Lightning button menu in Lightning Web component(lwc)<p> Below is the sample button menu example to get the selected button menu value.</p><p>Example:</p>
<pre class="hljs" style="background: rgb(43, 43, 43); color: #bababa; display: block; overflow-x: auto; padding: 0.5em;"><span class="hljs-tag"><<span class="hljs-name" style="color: #cb7832;">template</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #cb7832;">lightning-card</span> <span class="hljs-attr">title</span>=<span class="hljs-string" style="color: #e0c46c;">"Button Menu Example"</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #cb7832;">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string" style="color: #e0c46c;">"slds-p-around_medium lgc-bg"</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #cb7832;">lightning-button-menu</span> <span class="hljs-attr">alternative-text</span>=<span class="hljs-string" style="color: #e0c46c;">"Show menu"</span> <span class="hljs-attr">icon-name</span>=<span class="hljs-string" style="color: #e0c46c;">"utility:settings"</span> <span class="hljs-attr">onselect</span>=<span class="hljs-string" style="color: #e0c46c;">{handleMenuItem}</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #cb7832;">lightning-menu-item</span> <span class="hljs-attr">label</span>=<span class="hljs-string" style="color: #e0c46c;">"New"</span> <span class="hljs-attr">icon-name</span>=<span class="hljs-string" style="color: #e0c46c;">"utility:new"</span> <span class="hljs-attr">value</span>=<span class="hljs-string" style="color: #e0c46c;">"New"</span>></span><span class="hljs-tag"></<span class="hljs-name" style="color: #cb7832;">lightning-menu-item</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #cb7832;">lightning-menu-item</span> <span class="hljs-attr">label</span>=<span class="hljs-string" style="color: #e0c46c;">"Edit"</span> <span class="hljs-attr">icon-name</span>=<span class="hljs-string" style="color: #e0c46c;">"utility:edit"</span> <span class="hljs-attr">value</span>=<span class="hljs-string" style="color: #e0c46c;">"Edit"</span>></span><span class="hljs-tag"></<span class="hljs-name" style="color: #cb7832;">lightning-menu-item</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #cb7832;">lightning-menu-item</span> <span class="hljs-attr">label</span>=<span class="hljs-string" style="color: #e0c46c;">"Delete"</span> <span class="hljs-attr">icon-name</span>=<span class="hljs-string" style="color: #e0c46c;">"utility:delete"</span> <span class="hljs-attr">value</span>=<span class="hljs-string" style="color: #e0c46c;">"Delete"</span>></span><span class="hljs-tag"></<span class="hljs-name" style="color: #cb7832;">lightning-menu-item</span>></span>
<span class="hljs-tag"></<span class="hljs-name" style="color: #cb7832;">lightning-button-menu</span>></span>
<span class="hljs-tag"></<span class="hljs-name" style="color: #cb7832;">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name" style="color: #cb7832;">lightning-card</span>></span>
<span class="hljs-tag"></<span class="hljs-name" style="color: #cb7832;">template</span>></span></pre>
<p><b>JS Code:</b></p>
<pre class="hljs" style="background: rgb(43, 43, 43); color: #bababa; display: block; overflow-x: auto; padding: 0.5em;"><span class="hljs-keyword" style="color: #cb7832;">import</span> { LightningElement } <span class="hljs-keyword" style="color: #cb7832;">from</span> <span class="hljs-string" style="color: #e0c46c;">"lwc"</span>;
<span class="hljs-keyword" style="color: #cb7832;">export</span> <span class="hljs-keyword" style="color: #cb7832;">default</span> <span class="hljs-class"><span class="hljs-keyword" style="color: #cb7832;">class</span> <span class="hljs-title">App</span> <span class="hljs-keyword" style="color: #cb7832;">extends</span> <span class="hljs-title">LightningElement</span> </span>{
handleMenuItem(event) {
<span class="hljs-built_in" style="color: #e0c46c;">console</span>.log(<span class="hljs-string" style="color: #e0c46c;">"selected menu => "</span> + event.detail.value);
<span class="hljs-keyword" style="color: #cb7832;">switch</span> (event.detail.value) {
<span class="hljs-keyword" style="color: #cb7832;">case</span> <span class="hljs-string" style="color: #e0c46c;">"New"</span>:
<span class="hljs-comment" style="color: #7f7f7f;">// do logic</span>
<span class="hljs-keyword" style="color: #cb7832;">break</span>;
<span class="hljs-keyword" style="color: #cb7832;">case</span> <span class="hljs-string" style="color: #e0c46c;">"Edit"</span>:
<span class="hljs-comment" style="color: #7f7f7f;">//do logic</span>
<span class="hljs-keyword" style="color: #cb7832;">break</span>;
<span class="hljs-keyword" style="color: #cb7832;">case</span> <span class="hljs-string" style="color: #e0c46c;">"Delete"</span>:
<span class="hljs-comment" style="color: #7f7f7f;">//do logic</span>
<span class="hljs-keyword" style="color: #cb7832;">break</span>;
}
}
}
</pre>
<p><b>Output:</b></p><p></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWixZb6a6nLCt7aD47xcXbZiRh_beebao1kPG8Cd-C2oixsBS2hdoTBgHQ8NEooMGnNzzmrhx0kKwCpW4QtwHbHHAJAd-YIhAfGFMpsShonFB0foqI8sssXy93744wsOtVui9TZZ-M_CUL/s301/button+menu.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="230" data-original-width="301" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWixZb6a6nLCt7aD47xcXbZiRh_beebao1kPG8Cd-C2oixsBS2hdoTBgHQ8NEooMGnNzzmrhx0kKwCpW4QtwHbHHAJAd-YIhAfGFMpsShonFB0foqI8sssXy93744wsOtVui9TZZ-M_CUL/s16000/button+menu.png" /></a></div><br /><b><br /></b><p></p>Shaik Nagajanihttp://www.blogger.com/profile/08014314816293399854noreply@blogger.com1tag:blogger.com,1999:blog-9083431842638854569.post-44497085679212887402020-11-16T11:46:00.005+05:302020-11-18T11:24:57.174+05:30WhatsApp Business + Salesforce + Chat on go <p>The need for customer interaction and management has been realized by businesses for a long time. The game has really changed with the advent of technology. Customers want to connect with businesses on readily available platforms that they are familiar with. And what easier way to fulfill this demand other than WhatsApp. With more than 1.5 billion users across 180 countries, WhatsApp is the leading messenger app in the world. So, it is no surprise that they launched WhatsApp Business to take advantage of the wide user base that they have. Another giant in the tech industry is the Salesforce CRM platform. It is a dominator in CRM with more than 150,000 users and 83% of market share among Fortune 500 companies. It is but natural to wonder how these two can be combined to create even more business value with better CRM.</p><p>In this blog, I will share my experience and findings for the implementation of WhatsApp business with Salesforce. </p><p><br /></p><div><h2 style="text-align: left;"><span lang="EN-US"><span style="color: #6fa8dc; font-weight: normal;">Client Use Case</span></span></h2><div><span lang="EN-US"><span style="color: #6fa8dc;"><br /></span></span></div>My client was a car dealership owner based in Italy. His company was selling cars of various brands from different store locations. They have a lot of inbound leads generated through WhatsApp from the website and we're looking for a solution to manage these contacts for their sales team. The issue was that the team was mostly in the stores busy with customer engagement and had limited accessibility to Salesforce on PC. The need was for a better way to connect with their customers through their mobile phones and simultaneously sync their chats with Salesforce.</div><div><br /></div><div><h2 style="text-align: left;"><span lang="EN-US"><span style="font-weight: normal;"><span style="color: #6fa8dc;">My research</span> </span> </span></h2></div><div><span lang="EN-US"><br /></span></div><div><span lang="EN-US">After spending a lot of time in an attempt to find a solution like an application or API development services. I ended up reviewing lots of apps and attending 8 demos from different service providers like Screen Magic, SMS360, <a href="https://valuetext.io/user/home" target="_blank">ValueText</a>, and others. Here it would be good to state that the client was looking for a ready to use service. As a result, API integration service providers like Twilio and Nexmo were out of the question. This is because API integration has to be built from a scratch and takes a lot of time and investment which the client wasn’t ready for.</span></div><div><span lang="EN-US"><br /></span></div><div><span lang="EN-US"><h2 style="text-align: left;"><span lang="EN-US"><span style="color: #6fa8dc; font-weight: normal;">The Solutions and Findings</span></span></h2><div><span lang="EN-US"><span style="color: #6fa8dc;"><br /></span></span></div><div><span lang="EN-US"><h3 style="text-align: left;"><span lang="EN-US"><span style="color: #6fa8dc; font-weight: normal;">What is WhatsApp Business API</span></span></h3><div><span lang="EN-US"><span style="color: #6fa8dc;"><br /></span></span></div><div><span lang="EN-US"><div>We are all familiar with WhatsApp personal and WhatsApp for Small Businesses. These are easily available on iOS and Android app stores. But they cannot be integrated with other business systems like Salesforce and other platforms.</div><div><br /></div><div>Only WhatsApp business API is capable of integrating with the systems like Salesforce and any other platforms. The limitation of using WhatsApp Business API is that you can only configure one number with one WhatsApp service. This means that if you are already a WhatsApp Personal user, you cannot use the same number for WhatsApp Business. </div><div style="color: #6fa8dc;"><br /></div></span></div></span></div></span></div><div><h3 style="text-align: left;"><span lang="EN-US" style="font-weight: normal;"><span style="color: #6fa8dc;">The Findings </span></span></h3><div><span lang="EN-US"><p class="MsoNormal"><span lang="EN-US">After much effort, I narrowed down the
ready-to-use application by ValueText.</span></p>
<p class="MsoNormal"><span lang="EN-US"><a href="https://valuetext.io/"><span style="color: #4a6ee0;">ValueText</span></a> has a functionality where you can chat
from the phone and all chats can sync with Salesforce. This option helps sales
teams to serve from their phones and sync chats with Salesforce. ValueText
application is available on Android and iOS. Their ready-to-use application
integrates WhatsApp with Salesforce, to allow business on the go! This lets you
send WhatsApp messages to your customers directly from your phone.</span></p>
<p class="MsoNormal"><span lang="EN-US">ValueText was the clear winner in this case
and here is some more information to prove that their application goes beyond
mere integration. <o:p></o:p></span></p><p class="MsoNormal"><span lang="EN-US"></span></p><h3 style="text-align: left;"><span lang="EN-US"><span style="font-weight: normal;"><span style="color: #6fa8dc;">The ValueText Advantage</span></span></span></h3><div><span lang="EN-US">ValueText application brings a lot to the table in terms of features and functionality to provide a single platform for
global messaging. <o:p></o:p></span></div><div><span lang="EN-US"><br /></span></div><div><span lang="EN-US"><p class="MsoNormal" style="margin-left: 18pt; mso-list: l0 level1 lfo1; text-indent: -18pt;"><!--[if !supportLists]--><span lang="EN-US">1.<span style="font-size: 7pt; font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: normal;">
</span></span><!--[endif]--><span lang="EN-US">Easy to use</span></p></span></div></span></div><p class="MsoNormal" style="margin-left: 18pt;"><span lang="EN-US">The app is
extremely user friendly and easy to use. It has only two tabs that give all the
functionality you need. One tab is for chats and the other one is for accessing
Salesforce features. The chatting interface is similar to WhatsApp so it needs
little time for the sales team to get familiar with it.</span></p><p class="MsoNormal" style="margin-left: 18pt;">Find their website - <a href="https://valuetext.io/user/home" target="_blank">https://valuetext.io/</a></p><p class="MsoNormal" style="margin-left: 18pt;">Find them at AppExchange: <a href="https://appexchange.salesforce.com/appxListingDetail?listingId=a0N3A00000EFoedUAD" target="_blank">https://appexchange.salesforce.com/appxListingDetail?listingId=a0N3A00000EFoedUAD</a></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmsk-b09FdBJI7YiAkI8xnAQb8wr7nLVIk4QorO0k2jjsyqAYueSz60aHbO0eOOipp0fohnehYz3mobUVbZSpoUd5-BujGUmeA0wtY0az7D6RMrJ3xUopXGOtuTZIa4hPWLEPBi6Z2C87Y/" style="margin-left: 1em; margin-right: 1em;"><img data-original-height="343" data-original-width="554" height="328" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmsk-b09FdBJI7YiAkI8xnAQb8wr7nLVIk4QorO0k2jjsyqAYueSz60aHbO0eOOipp0fohnehYz3mobUVbZSpoUd5-BujGUmeA0wtY0az7D6RMrJ3xUopXGOtuTZIa4hPWLEPBi6Z2C87Y/w529-h328/image.png" title="Figure 2 – ValueText’s Simple User Interface" width="529" /></a></div></div><div class="separator" style="clear: both; text-align: center;"><p align="center" class="MsoNormal" style="margin-left: 18pt; text-align: center; text-indent: -18pt;"><span lang="EN-US" style="font-size: 9pt; line-height: 150%;">Figure
2 – ValueText’s Simple User Interface</span></p><p class="MsoNormal" style="margin-left: 18pt; text-align: left; text-indent: -18pt;"><span lang="EN-US"><span style="font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: normal;">2</span><span style="font-size: 7pt; font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: normal;"> </span></span><!--[endif]--><span lang="EN-US">Accessibility</span><span lang="EN-US"><o:p></o:p></span></p><p class="MsoNormal" style="margin-left: 13.5pt; text-align: left;"><span lang="EN-US">The chat window
seamlessly connects with the Salesforce tab giving easy access to existing
object data like contacts, leads, case, and other objects. This helps in
searching Salesforce records and initiating chat on the go. </span></p><p class="MsoNormal" style="margin-left: 18pt; text-align: left; text-indent: -18pt;"><span lang="EN-US">3.<span style="font-size: 7pt; font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: normal;"> </span></span><span lang="EN-US">Multi-language
support and International Messaging</span><span lang="EN-US"><o:p></o:p></span></p><p class="MsoNormal" style="margin-left: 18pt; text-align: left;"><span lang="EN-US">With technology,
the world has become a smaller place. Realizing the global needs of businesses,
ValueText offers Multi-language support for messaging. It also lets you
integrate with the messaging service of any country at local prices.</span></p><p class="MsoNormal" style="margin-left: 18pt; text-align: left; text-indent: -18pt;"><span lang="EN-US">4.<span style="font-size: 7pt; font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: normal;"> </span></span><span lang="EN-US">Dynamic Templates<o:p></o:p></span></p><p class="MsoNormal" style="margin-left: 18pt; text-align: left;"><span lang="EN-US">ValueText offers
mobile apps having dynamic templates. This allows users to access real-time
data from Salesforce and helps them to create custom message templates to
communicate with their customers. These templates can be easily accessed to
initiate sessions.</span></p><p class="MsoNormal" style="margin-left: 18pt; text-align: left; text-indent: -18pt;"><span lang="EN-US">5.<span style="font-size: 7pt; font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: normal;"> </span></span><span lang="EN-US">Powerful Salesforce app<o:p></o:p></span></p><p class="MsoNormal" style="margin-left: 18pt; text-align: left;"><span lang="EN-US">The ValueText app has many features for Salesforce like one conversation on detailed
record, WhatsApp web-like chat console, automation texting (workflow/process
builder/flow/apex), texting from reports, appointment reminders, bots, inbound
leads capture and creation, case management with WA, omnichannel support &
drip campaigns. This ensures successful integration and robust functionality.<o:p></o:p></span></p><h3 style="text-align: left;"><span lang="EN-US"><span style="font-weight: normal;"><span style="color: #6fa8dc;">Conclusion</span></span></span></h3><p class="MsoNormal" style="text-align: left;"><span lang="EN-US" style="color: #0e101a;">Needless to say, I </span><span lang="EN-US">successfully implemented the ValueText solution for my client across
their different stores. ValueText enabled the use of its advanced features for
quick and easy communication with customers. It is a single platform automated
solution that leverages the advantages of messaging with the power of
Salesforce to give you the best of both worlds<span style="color: #0e101a;">.</span></span></p></div>Shaik Nagajanihttp://www.blogger.com/profile/08014314816293399854noreply@blogger.com1tag:blogger.com,1999:blog-9083431842638854569.post-28120339979514335902020-11-04T09:51:00.003+05:302020-11-04T09:51:19.435+05:30Opportunity must have products to close the opportunity validation rule in salesforce<p> Below validation rules fires when you are trying to close the opportunity without opportunity products.</p><p><b>Validation Rule:</b></p><p></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmURVA-CmOuV_IdV6y-UcFpMmsm_TsaZDDKaeprDm1k87QZdftJLLQXOnWOeT3BIBDcLiCZfmlQUx8tNo8zgotYgO79-PIMOocD8y6f4HYRwtdxZb3ILzILDX6WB4Ag_UYNbOaA9PXDho5/" style="margin-left: 1em; margin-right: 1em;"><img data-original-height="218" data-original-width="1039" height="134" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmURVA-CmOuV_IdV6y-UcFpMmsm_TsaZDDKaeprDm1k87QZdftJLLQXOnWOeT3BIBDcLiCZfmlQUx8tNo8zgotYgO79-PIMOocD8y6f4HYRwtdxZb3ILzILDX6WB4Ag_UYNbOaA9PXDho5/w640-h134/image.png" width="640" /></a></div><br /><pre class="hljs" style="background: rgb(35, 36, 31); color: #f8f8f2; display: block; overflow-x: auto; padding: 0.5em;">AND (
CASE( StageName,
<span class="hljs-string" style="color: #e6db74;">"Closed Won"</span>, <span class="hljs-number" style="color: #ae81ff;">1</span>,
<span class="hljs-number" style="color: #ae81ff;">0</span>) = <span class="hljs-number" style="color: #ae81ff;">1</span>,
NOT(HasOpportunityLineItem)
)</pre><p></p><b>Output:</b><div>Try to close the opportunity without products it will show an error message.</div><div><br /></div><div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifw9c4BXpBizD0i3RjMyv46MVQAfn6-zPo-4PobKKzqYcL_95-6RT6VcZTVRn-L1URjycSltRDx9dyHpxJsxJBzRuMbfDm1rN14su3GtwamnY4U3zUVTx5vHUg-kYmikchtgQs6PqLH4Lf/" style="margin-left: 1em; margin-right: 1em;"><img data-original-height="365" data-original-width="1329" height="176" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifw9c4BXpBizD0i3RjMyv46MVQAfn6-zPo-4PobKKzqYcL_95-6RT6VcZTVRn-L1URjycSltRDx9dyHpxJsxJBzRuMbfDm1rN14su3GtwamnY4U3zUVTx5vHUg-kYmikchtgQs6PqLH4Lf/w640-h176/image.png" width="640" /></a></div><br /><br /></div><div><br /></div><div><br /></div>Shaik Nagajanihttp://www.blogger.com/profile/08014314816293399854noreply@blogger.com0tag:blogger.com,1999:blog-9083431842638854569.post-77636283747101446062020-10-28T11:11:00.002+05:302020-10-28T11:11:36.364+05:30How to set CreatedDate field value for Test Class Records in Salesforce<p>We can now set the Created date field value for the test records in Salesforce test classes using <b><span style="color: #6fa8dc;">setCreatedDate(Id recordId, Datetime createdDatetime) </span></b>method. </p><p><b><span style="color: #cc0000;">Note</span></b>: Both recordId and DateTime parameters are required.</p><p><b>Example:</b></p>
<pre class="hljs" style="background: rgb(248, 248, 248); color: #333333; display: block; overflow-x: auto; padding: 0.5em;"><span class="hljs-meta" style="color: #999999; font-weight: 700;">@isTest</span>
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">private</span> <span class="hljs-class"><span class="hljs-keyword" style="color: #333333; font-weight: 700;">class</span> <span class="hljs-title" style="color: #445588; font-weight: 700;">SetCreatedDateTest</span> </span>{
<span class="hljs-function"><span class="hljs-keyword" style="color: #333333; font-weight: 700;">static</span> testMethod <span class="hljs-keyword" style="color: #333333; font-weight: 700;">void</span> <span class="hljs-title" style="color: #990000; font-weight: 700;">testSetCreatedDate</span><span class="hljs-params">()</span> </span>{
Account a = <span class="hljs-keyword" style="color: #333333; font-weight: 700;">new</span> Account(name=<span class="hljs-string" style="color: #dd1144;">'myAccount'</span>);
insert a;
Test.setCreatedDate(a.Id, DateTime.newInstance(<span class="hljs-number" style="color: teal;">2020</span>,<span class="hljs-number" style="color: teal;">12</span>,<span class="hljs-number" style="color: teal;">12</span>));
Test.startTest();
Account myAccount = [SELECT Id, Name, CreatedDate FROM Account
WHERE Name =<span class="hljs-string" style="color: #dd1144;">'myAccount'</span> limit <span class="hljs-number" style="color: teal;">1</span>];
System.assertEquals(myAccount.CreatedDate, DateTime.newInstance(<span class="hljs-number" style="color: teal;">2020</span>,<span class="hljs-number" style="color: teal;">12</span>,<span class="hljs-number" style="color: teal;">12</span>));
Test.stopTest();
}
}</pre><br /><div><br /></div>Shaik Nagajanihttp://www.blogger.com/profile/08014314816293399854noreply@blogger.com0tag:blogger.com,1999:blog-9083431842638854569.post-90848671479303956642020-10-22T15:23:00.002+05:302020-10-22T15:23:18.868+05:30Auto Add Fields to Custom Report Types in salesforce<p> From Winter 21 onwards we can auto-add, custom fields that you add to a Salesforce object are added automatically to all the custom report types based on that object. When you create a report from the custom report type, all the custom fields are right there for you to add to your report.</p><h2 style="text-align: left;">How to Enable:</h2><h3 style="text-align: left;">Path:</h3><div>From <b>Setup</b>, enter <b>Reports & Dashboard Settings</b> in the Quick Find box, and then <b>Reports & Dashboard Settings</b></div><div><b><br /></b></div><div><b>Enable the <span style="color: #6fa8dc;">Auto add new custom fields to custom report type layouts</span></b></div><div><b><span style="color: #6fa8dc;"><br /></span></b></div><div><b><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUSXqamI0XruIMyp7_uOtUTPQ4BJkl4xoT7eHqCYYNIrFdMTBwsMZ7QiOhKKgUPfHrgSJ3I6yCdeGIo16RZExDxNME81dI6ZAHSoGA49li1IVpSvj39OO0k8kIwEOqgoSXSMeRh2_3J2UJ/s918/enable+reports.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="477" data-original-width="918" height="332" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUSXqamI0XruIMyp7_uOtUTPQ4BJkl4xoT7eHqCYYNIrFdMTBwsMZ7QiOhKKgUPfHrgSJ3I6yCdeGIo16RZExDxNME81dI6ZAHSoGA49li1IVpSvj39OO0k8kIwEOqgoSXSMeRh2_3J2UJ/w640-h332/enable+reports.PNG" width="640" /></a></div><br /><span style="color: #6fa8dc;"><br /></span></b></div>Shaik Nagajanihttp://www.blogger.com/profile/08014314816293399854noreply@blogger.com0tag:blogger.com,1999:blog-9083431842638854569.post-75726947110472557562020-10-19T11:42:00.002+05:302020-10-20T19:21:00.087+05:30How to extract specific tags information from String using Apex in Salesforce<p>we can use the regular expression and utilize the Apex Pattern and Matcher classes.</p><p>Below is the generic regular expression to get the specific tags information from the HTML string.</p><p>Replace your tag and use it for your requirement.</p>
<pre class="hljs" style="background: rgb(248, 248, 248); color: #333333; display: block; overflow-x: auto; padding: 0.5em;">(?i)<test([^>]+)>(.+?)</test></pre>
Ex: <div><pre class="hljs" style="background: rgb(248, 248, 248); color: #333333; overflow-x: auto; padding: 0.5em;">(?i)<div([^>]+)>(.+?)</div></pre></div><b>Demo:</b><div>from the below string, I am extracting the <span style="color: #3d85c6;">a (anchor) tag</span> information.</div><div><br /></div><div><b>Sample Html String:</b></div><div><b><br /></b></div><div>"We at <span style="color: #3d85c6;"><a href="https://www.linkedin.com/company/etg/" rel="noopener noreferrer" target="_blank">ETS, Inc.</a></span> are eager to share with you that we are a Strategic Solution Partner for the <span style="color: #3d85c6;"><a href="https://www.linkedin.com/company/commercecloud-demandware/" rel="noopener noreferrer" target="_blank">Salesforce Commerce Cloud</a></span>.<br>If you need any assistance with your <span style="color: #3d85c6;"><a href="https://www.linkedin.com/feed/hashtag/?keywords=ecommerce&amp;highlightedUpdateUrns=urn%3Ali%3Aactivity%3A6721841224095014912" rel="noopener noreferrer" target="_blank">#eCommerce</a></span> systems, let us know how we can help!"</div><div><br /></div><div>From the above string, I am getting the anchor tag information.</div><div><br /></div><div><b>Sample Code:</b></div>
<pre class="hljs" style="background: rgb(248, 248, 248); color: #333333; display: block; overflow-x: auto; padding: 0.5em;">String strMessage = <span class="hljs-string" style="color: #dd1144;">'We at <a href="https://www.linkedin.com/company/etg/" rel="noopener noreferrer" target="_blank">ETS, Inc.</a> are eager to share with you that we are a Strategic Solution Partner for the <a href="https://www.linkedin.com/company/commercecloud-demandware/" rel="noopener noreferrer" target="_blank">Salesforce Commerce Cloud</a>.<br>If you need any assistance with your <a href="https://www.linkedin.com/feed/hashtag/?keywords=ecommerce&amp;highlightedUpdateUrns=urn%3Ali%3Aactivity%3A6721841224095014912" rel="noopener noreferrer" target="_blank">#eCommerce</a> systems, let us know how we can help!'</span>;
Pattern objPattren = Pattern.compile(<span class="hljs-string" style="color: #dd1144;">'(?i)<a([^>]+)>(.+?)</a>'</span>);
Matcher objMatcher = objPattren.matcher(strMessage);
<span class="hljs-keyword" style="color: #333333; font-weight: 700;">while</span> (objMatcher.find()) {
String groupValue = objMatcher.group();
System.debug(<span class="hljs-string" style="color: #dd1144;">'groupValue => '</span>+groupValue);
}</pre><b>Output:</b><div><b><br /></b><div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj67rLwCeqdYLyIiCpNIpu894mFWRnvRSUU5CUpRZ3WMBJ6Wn8J7HsBx3xDHNH9gsFx0Sk28EOawK5lV8gW7MVPLK6-tHuLfOi-pK7ouEYHiHEwoOoH-LHhL-1lsg2gcGsDnXiboOCXtO5h/s1349/anchortag.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="129" data-original-width="1349" height="62" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj67rLwCeqdYLyIiCpNIpu894mFWRnvRSUU5CUpRZ3WMBJ6Wn8J7HsBx3xDHNH9gsFx0Sk28EOawK5lV8gW7MVPLK6-tHuLfOi-pK7ouEYHiHEwoOoH-LHhL-1lsg2gcGsDnXiboOCXtO5h/w640-h62/anchortag.PNG" width="640" /></a></div><br /><b><br /></b></div></div>Shaik Nagajanihttp://www.blogger.com/profile/08014314816293399854noreply@blogger.com0