<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>lightning &#8211; Hamza Siddiqui</title>
	<atom:link href="https://www.mhamzas.com/blog/tag/lightning/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.mhamzas.com</link>
	<description>4x Salesforce MVP &#124; 26x Certified &#124; Salesforce App &#38; System Architect</description>
	<lastBuildDate>Tue, 03 Jan 2023 08:14:48 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9</generator>
<site xmlns="com-wordpress:feed-additions:1">233526040</site>	<item>
		<title>Checkbox label with URL in AURA/LWC</title>
		<link>https://www.mhamzas.com/blog/2020/06/05/checkbox-label-with-url-in-aura-lwc/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=checkbox-label-with-url-in-aura-lwc</link>
					<comments>https://www.mhamzas.com/blog/2020/06/05/checkbox-label-with-url-in-aura-lwc/#comments</comments>
		
		<dc:creator><![CDATA[hamza]]></dc:creator>
		<pubDate>Fri, 05 Jun 2020 12:47:39 +0000</pubDate>
				<category><![CDATA[Salesforce]]></category>
		<category><![CDATA[aura]]></category>
		<category><![CDATA[component]]></category>
		<category><![CDATA[lightning]]></category>
		<category><![CDATA[lwc]]></category>
		<category><![CDATA[salesforce]]></category>
		<guid isPermaLink="false">https://www.mhamzas.com/?p=3134</guid>

					<description><![CDATA[This is a pretty common use case where you want to show a simple checkbox to authorize the terms and condition with a URL to your terms of service or privacy url. But using lightning:input or lightning-input, we&#8217;re not allowed to add <br /><a href="https://www.mhamzas.com/blog/2020/06/05/checkbox-label-with-url-in-aura-lwc/" class="more-link btn btn-primary">Read More</a>]]></description>
										<content:encoded><![CDATA[
<p>This is a pretty common use case where you want to show a simple checkbox to authorize the terms and condition with a URL to your terms of service or privacy url. </p>



<div class="wp-block-image"><figure class="aligncenter size-large"><img data-recalc-dims="1" decoding="async" width="369" height="43" src="https://i0.wp.com/www.mhamzas.com/wp-content/uploads/2020/06/image.png?resize=369%2C43&#038;ssl=1" alt="" class="wp-image-3135" srcset="https://i0.wp.com/www.mhamzas.com/wp-content/uploads/2020/06/image.png?w=369&amp;ssl=1 369w, https://i0.wp.com/www.mhamzas.com/wp-content/uploads/2020/06/image.png?resize=300%2C35&amp;ssl=1 300w" sizes="(max-width: 369px) 100vw, 369px" /></figure></div>



<p>But using lightning:input or lightning-input, we&#8217;re not allowed to add HTML tags under LABEL attribute.</p>



<p>So here are the work-arounds for AURA and LWC,</p>



<h2 class="wp-block-heading">AURA</h2>



<p>Component:</p>



<pre class="wp-block-code"><code>&lt;aura:attribute name="chkTerms" type="Boolean"/>
&lt;div>
    &lt;input type="checkbox" id="terms" name="terms" value="{!v.chkTerms}" onchange="{!c.termsChanged}" >&lt;/input>
    &lt;label for="terms"> Yes, by creating an account I agree to the &lt;a href="#">Terms and Service.&lt;/a>&lt;/label>
&lt;/div></code></pre>



<p>JS</p>



<pre class="wp-block-code"><code>termsChanged : function(cmp, event, helper){
    cmp.set("v.chkTerms", document.getElementById("terms").checked );
    //console.log(event.getSource().get("v.checked"));
    // the above didn't work except for `ui:input` or `lightning:input`
    console.log(cmp.get("v.chkTerms") ); 
}</code></pre>



<h2 class="wp-block-heading">LWC</h2>



<p>HTML</p>



<pre class="wp-block-code"><code>&lt;div class="slds-p-around_medium lgc-bg">
    &lt;input type="checkbox" id="terms" name="authorize" onchange={handleCheckBoxChange} required="required">&lt;/input>
    &lt;label for="terms" style="display: inline;" class="slds-form-element__label"> Yes, by creating an account I agree to the &lt;a href="#">Terms and Service.&lt;/label>
&lt;/div></code></pre>



<p>JS</p>



<pre class="wp-block-code"><code>handleCheckBoxChange(event){        
    console.log('Authorized::'+event.target.checked);
    // Your Logic
}</code></pre>



<p>Source <br><a href="https://salesforce.stackexchange.com/questions/213749/lightninginput-checkbox-label-with-url">https://salesforce.stackexchange.com/questions/213749/lightninginput-checkbox-label-with-url</a></p>



<p></p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.mhamzas.com/blog/2020/06/05/checkbox-label-with-url-in-aura-lwc/feed/</wfw:commentRss>
			<slash:comments>1</slash:comments>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">3134</post-id>	</item>
		<item>
		<title>Apex Calling Methods In Lightning web components</title>
		<link>https://www.mhamzas.com/blog/2019/06/25/apex-calling-methods-in-lightning-web-components/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=apex-calling-methods-in-lightning-web-components</link>
					<comments>https://www.mhamzas.com/blog/2019/06/25/apex-calling-methods-in-lightning-web-components/#comments</comments>
		
		<dc:creator><![CDATA[hamza]]></dc:creator>
		<pubDate>Tue, 25 Jun 2019 10:48:37 +0000</pubDate>
				<category><![CDATA[Salesforce]]></category>
		<category><![CDATA[lightning]]></category>
		<category><![CDATA[lwc]]></category>
		<category><![CDATA[salesforce]]></category>
		<guid isPermaLink="false">https://www.mhamzas.com/?p=2883</guid>

					<description><![CDATA[Let’s discuss here how to call the apex class from the Lightning web components. Lightning web components can import methods from Apex classes into the JavaScript&#160;classes using ES6&#160;import. Once after importing the apex class method you can able call the apex methods <br /><a href="https://www.mhamzas.com/blog/2019/06/25/apex-calling-methods-in-lightning-web-components/" class="more-link btn btn-primary">Read More</a>]]></description>
										<content:encoded><![CDATA[
<p>Let’s discuss here how to call the apex class from the Lightning web components. Lightning web components can import methods from Apex classes into the JavaScript&nbsp;classes using ES6&nbsp;import. Once after importing the apex class method you can able call the apex methods as functions into the component by calling either via the wire service or imperatively. Before you use an Apex method, make sure that there isn’t an easier way to get the data. See whether a base Lightning component, like&nbsp;lightning-record-form,&nbsp;lightning-record-view-form, or&nbsp;lightning-record-edit-form&nbsp;works for your use case. If they don’t give you enough flexibility, use a wire adapter like&nbsp;getListUi&nbsp;or&nbsp;getRecordUi.&nbsp;</p>



<h4 class="wp-block-heading">Import Syntax&nbsp;</h4>



<p>You can able use&nbsp;default export&nbsp;syntax to import an Apex method via the&nbsp;@salesforce/apex&nbsp;scoped module into JavaScript&nbsp;controller class. The&nbsp;Syntax looks like below.Default</p>



<pre class="wp-block-code"><code>import apexMethod from '@salesforce/apex/Namespace.Classname.apexMethod';</code></pre>



<p><em><strong>apexMethod</strong></em>—The imported symbol that identifies the Apex method.<br><em><strong>Namespace</strong></em>—The namespace of the Salesforce organization. Specify a namespace unless the organization uses the default namespace (c), in which case don’t specify it.<br><em><strong>Classname</strong></em>—The name of the Apex class.</p>



<h4 class="wp-block-heading">Create Apex Class&nbsp;</h4>



<p>In this example, we will be getting account data and show it into the UI. Create an apex class using SFDX create apex class command.Default</p>



<pre class="wp-block-code"><code>sfdx force:apex:class:create -n GetAccountData -d force-app/main/default/apex</code></pre>



<p>Here is the apex class. To expose an Apex method to a Lightning web component, the method must be static and either global or public. Annotate the method with @AuraEnabledDefault</p>



<pre class="wp-block-code"><code>public with sharing class GetAccountData {
   @AuraEnabled(cacheable=true)
    public static List&lt;Account&gt; getAccountList() {
        return &#091;SELECT Id, Name,Type,Rating,Phone FROM Account];
    }
}</code></pre>



<p>Now you can able to call the apex class in&nbsp; Lightning web component using these different&nbsp;ways.</p>



<ul class="wp-block-list">
<li>Wire a property</li>



<li>Wire a function</li>



<li>Call a method imperatively</li>
</ul>



<h4 class="wp-block-heading">Wire an Apex Method to a Property</h4>



<p>If an Apex method is annotated with @AuraEnabled(Cacheable=true), you can invoke it from a component via the wire service. You can @wire a property or a function. Here is the syntaxDefault</p>



<pre class="wp-block-code"><code>import apexMethod from '@salesforce/apex/Namespace.Classname.apexMethod';
@wire(apexMethod, { apexMethodParams })
propertyOrFunction;</code></pre>



<p>Create a Lightning web component&nbsp;using below SFDX commandsDefault</p>



<pre class="wp-block-code"><code>sfdx force:lightning:component:create --type lwc -n LWCWireEx -d force-app/main/default/lwc</code></pre>



<p>Here is the&nbsp;LWCWireEx.html markup for the lightning web components.Default</p>



<pre class="wp-block-code"><code>&lt;template&gt;
    &lt;lightning-card title="Apex Class Example" icon-name="custom:custom63"&gt;
            &lt;div class="slds-m-around_medium"&gt;
                &lt;template if:true={accounts.data}&gt;
                    &lt;template for:each={accounts.data} for:item="acc"&gt;
                        &lt;p key={acc.Id}&gt;{acc.Name}&lt;/p&gt;
                    &lt;/template&gt;
                &lt;/template&gt;
                
            &lt;/div&gt;
        &lt;/lightning-card&gt;
&lt;/template&gt;</code></pre>



<p>Here is the&nbsp;LWCWireEx.js classDefault</p>



<pre class="wp-block-code"><code>import { LightningElement, wire } from 'lwc';
import getAccountList from '@salesforce/apex/GetAccountData.getAccountList';

export default class LWCWireEx extends LightningElement {
    @wire(getAccountList) accounts;
}</code></pre>



<p>Here is the&nbsp;LWCWireEx.js-meta.xml markup.Default</p>



<pre class="wp-block-code"><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
&lt;LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"&gt;
    &lt;apiVersion&gt;45.0&lt;/apiVersion&gt;
    &lt;isExposed&gt;false&lt;/isExposed&gt;
    &lt;targets&gt;
        &lt;target&gt;lightning__RecordPage&lt;/target&gt;
       &lt;/targets&gt;
&lt;/LightningComponentBundle&gt;</code></pre>



<p>Push the changes to scratch org and add the lightning web component to the record page. You can able to see the result like below.</p>


<div class="wp-block-image">
<figure class="aligncenter"><img decoding="async" src="https://i2.wp.com/rajvakati.com/wp-content/uploads/2018/12/Capture-59.png?resize=612%2C322&amp;ssl=1" alt="" class="wp-image-8980"/></figure>
</div>


<h4 class="wp-block-heading">Wire an Apex Method to a Function</h4>



<p>Now let’s look at how to wire an apex method to function.we will be updating&nbsp;the same code here to operate the apex method as function.</p>



<p>Update the LWCWireEx.js class as shown&nbsp;belowDefault</p>



<pre class="wp-block-code"><code>import { LightningElement, wire,track } from 'lwc';
import getAccountList from '@salesforce/apex/GetAccountData.getAccountList';

export default class LWCWireEx extends LightningElement {
    @track accounts;
    @track error;
    @wire(getAccountList)
    wiredAccounts({ error, data }) {
        if (data) {
            this.accounts = data;
        } else if (error) {
            console.log(error);
            this.error = error;
        }
    }
}</code></pre>



<p>update the&nbsp;LWCWireEx.html markup as shown belowDefault</p>



<pre class="wp-block-code"><code>&lt;template&gt;

    &lt;lightning-card title="Apex Wire To Function Example" icon-name="custom:custom63"&gt;

        &lt;div class="slds-m-around_medium"&gt;
            &lt;template if:true={accounts}&gt;
                 &lt;ul&gt;
                &lt;template for:each={accounts} for:item="account"&gt;
                    &lt;li key={account.Id}&gt; {account.Name} &lt;/li&gt;
                &lt;/template&gt;
             &lt;/ul&gt;
            &lt;/template&gt;
            &lt;template if:true={error}&gt;
                {error}
            &lt;/template&gt;                
        &lt;/div&gt;
    &lt;/lightning-card&gt;
&lt;/template&gt;</code></pre>



<p>Push the changes to scratch org and add the lightning web component to the record page. You can able to see the result like below.</p>


<div class="wp-block-image">
<figure class="aligncenter"><img decoding="async" src="https://i1.wp.com/rajvakati.com/wp-content/uploads/2018/12/Capture-60.png?resize=607%2C324&amp;ssl=1" alt="" class="wp-image-8984"/></figure>
</div>


<h4 class="wp-block-heading">Call an Apex Method Imperatively</h4>



<p>Now let’s see here how to call apex method&nbsp;imperatively. Create a new Lightning web component using the below SFDX commandDefault</p>



<pre class="wp-block-code"><code>sfdx force:lightning:component:create --type lwc -n ImperativEx -d force-app/main/default/lwc</code></pre>



<p>Use the below ImperativEx.html codeDefault</p>



<pre class="wp-block-code"><code>&lt;template&gt;
        &lt;lightning-card title="Apex Imperative Method Example"&gt;
            &lt;div class="slds-m-around_medium"&gt;
                &lt;p class="slds-m-bottom_small"&gt;
                    &lt;lightning-button label="Load Accounts" onclick={handleLoad}&gt;&lt;/lightning-button&gt;
                &lt;/p&gt;
                &lt;template if:true={accounts}&gt;
                    &lt;template for:each={accounts} for:item="account"&gt;
                        &lt;p key={account.Id}&gt;{account.Name}&lt;/p&gt;
                    &lt;/template&gt;
                &lt;/template&gt;
                &lt;template if:true={error}&gt;
                   {error}
                &lt;/template&gt;
            &lt;/div&gt;
        &lt;/lightning-card&gt;
    &lt;/template&gt;</code></pre>



<p>Use the below ImperativEx.js class codeDefault</p>



<pre class="wp-block-code"><code>import { LightningElement, wire,track } from 'lwc';
import getAccountList from '@salesforce/apex/GetAccountData.getAccountList';


export default class ImperativEx extends LightningElement {
    @track accounts;
    @track error;
    handleLoad() {
        getAccountList()
            .then(result =&gt; {
                this.accounts = result;
            })
            .catch(error =&gt; {
                this.error = error;
            });
    }
}</code></pre>



<p>Use the below ImperativEx.js-meta.xml class codeDefault</p>



<pre class="wp-block-code"><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
&lt;LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="hello"&gt;
    &lt;apiVersion&gt;45.0&lt;/apiVersion&gt;
    &lt;isExposed&gt;false&lt;/isExposed&gt;
     &lt;targets&gt;
        &lt;target&gt;lightning__RecordPage&lt;/target&gt;
    &lt;/targets&gt;
&lt;/LightningComponentBundle&gt;</code></pre>



<p>push the changes to scratch org and add the lightning web component to the record page and you can able to see the below result when you click on the button .</p>


<div class="wp-block-image">
<figure class="aligncenter"><img decoding="async" src="https://i0.wp.com/rajvakati.com/wp-content/uploads/2018/12/Capture-61.png?resize=560%2C375&amp;ssl=1" alt="" class="wp-image-8987"/></figure>
</div>


<h2 class="wp-block-heading">Call an Apex Method with Parameters</h2>



<p>Pass parameters values to an Apex method in an object whose properties match the parameters of the Apex method. For example, if the Apex method takes a string parameter, don’t pass a string directly. Instead, pass an object that contains a property whose value is a string.</p>



<figure class="wp-block-image"><img data-recalc-dims="1" decoding="async" src="https://i0.wp.com/resources.docs.salesforce.com/images/28232961511d39db2ddf9b5a0110df79.png?w=640&#038;ssl=1" alt="Enter characters in a seach field and click Search to return a list of contacts."/></figure>



<pre class="wp-block-code"><code><em>// apexImperativeMethodWithParams.js</em>

import { LightningElement } from 'lwc';
import findContacts from '@salesforce/apex/ContactController.findContacts';

export default class ApexImperativeMethodWithParams extends LightningElement {
    searchKey = '';
    contacts;
    error;

    handleKeyChange(event) {
        this.searchKey = event.target.value;
    }

    handleSearch() {
        findContacts({ searchKey: this.searchKey })
            .then((result) =&gt; {
                this.contacts = result;
                this.error = undefined;
            })
            .catch((error) =&gt; {
                this.error = error;
                this.contacts = undefined;
            });
    }
}</code></pre>



<pre class="wp-block-code"><code>public with sharing class ContactController {
    @AuraEnabled(cacheable=true)
    public static List&lt;Contact&gt; findContacts(String searchKey) {
        String key = '%' + searchKey + '%';
        return &#091;
            SELECT Id, Name, Title, Phone, Email, Picture__c
            FROM Contact
            WHERE Name LIKE :key AND Picture__c != NULL
            WITH SECURITY_ENFORCED
            LIMIT 10
        ];
    }
}</code></pre>
]]></content:encoded>
					
					<wfw:commentRss>https://www.mhamzas.com/blog/2019/06/25/apex-calling-methods-in-lightning-web-components/feed/</wfw:commentRss>
			<slash:comments>6</slash:comments>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">2883</post-id>	</item>
	</channel>
</rss>
