Sunday, June 20, 2021

Show facebook public page in salesforce with lightning component

This post explains how to show any facebook public page in salesforce(Salesforce facebook integration). Below is demo of output :



Steps :

It is basically a four steps process :
1.) Generate iFrame code of your facebook page.
2.) Create a visualforce page.
3.) Create a Lightning component .
4.) Drag your lightning component anywhere in salesforce. That's all...!!!

  • Generate iFrame code of your facebook page

1.) First of all you have to generate the iFrame code of your facebook page. For that search developers facebook page plugin. 

2.) You will see the facebook page URL textbox there. You just have to enter your page name at the end of the URL. Like I am integrating facebook public page with salesforce, you can integrate any page.

Facebook iFrame code for salesforce


3.) Click on the get code button.

facebook public page in salesforce


4.) Click on iframe, copy all the code and paste it on the notepad. This code will be used in the visualforce page.

facebook code for salesforce


  • Create a visualforce page(FacebookIntegration.vpf) :

1.) Create visualforcePage on your org and paste the iFrame code between <apex:page> tags.

<apex:page>
    <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Ffacebook&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="400" height="500" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share">
    </iframe>
</apex:page>


  • Create a Lightning component(Facebook.cmp):

1.) Create Lightning component on your org and call visualforce page in <iframe> tag like below :

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <div>  
        <div class="slds-col slds-size_1-of-1">
            <div class="slds-p-around_small">
                <p class="slds-p-bottom_small slds-border_bottom"></p>
                <div class="slds-p-top_medium">
                    <div>
                        <iframe aura:id="frame" style ="width: 100%; height: 400px;"                              src="/apex/FacebookIntegration" frameborder="0" allowfullscreen="" title="Embedded post" scrolling = "" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</aura:component>

  • Use Lightning component anywhere:

1.) Now your component is ready.  Preview your lightning component to test. You can drag this lightning component anywhere in salesforce.


Thanks, 
Lovesalesforceyes

Saturday, June 5, 2021

Pass parameters from LWC to apex in salesforce

In this post I will explain how to pass parameters from LWC to apex.

There are basically two ways to call apex from LWC. 

  • If you want to call the apex function onLoad of component.
    • @Wire
    • ConnectedCallback()
  • If you want to call apex function on some other event

In both the methods there is a small difference to pass data from LWC to apex. So let's get started:

Call apex function onLoad of component :

With the help of this methods apex function call on OnLoad of component.

  • Apex Class: 


public class ContactInfo {
    @AuraEnabled(cacheable=true)
    public static List<ContactGetInfo(String EmailString Phone)
    {
        List<ContactCon = [SELECT IdNameEmailPhone FROM Contact 
where Email =: Email and phone =: Phone];
        return Con;
    }
}

ContactInfo class is used in LWC component in which GetInfo method is used to return the list of contacts. @Auraenables annotation is used to access the list from apex method  in LWC.


  • With @Wire: 


import { LightningElement,track,wirefrom 'lwc';
import GetInfo from "@salesforce/apex/ContactInfo.GetInfo";
@track Mail = 'ab@gmail.com';
@track PhNum = '9876543210';

 @wire(ContactInfo, { Email : '$Mail' , Phone :'$PhNum' })
    Contacts(results){
        if(results.data){
            this.ContactData = results.data;
        } 
        if(results.error){
            this.error=results.error;
        }       
    }

@Wire hit every time, whenever you load your LWC component.  In this, parameters are passed in single quotes with $ symbol.


  • With ConnectedCallback(): 

 
import { LightningElement,track,wirefrom 'lwc';
 import GetInfo from "@salesforce/apex/ContactInfo.GetInfo";
    
 @track Mail = 'ab@gmail.com';
 @track PhNum = '9876543210';

connectedCallback() {
    ContactInfo({ Email : this.Mail, Phone : this.PhNum}) 
        .then(results => { 
                this.ContactData = results;  
                })
                .catch(error => {
                this.error = error;
         }
);
    }

ConnectedCallback also onload of your LWC component



Call apex function on some other event :

If you want to call an apex method on any action like on click of button, then you can use this. In this apex method is called when you perform handleclick() action.

 
import { LightningElement,track,wirefrom 'lwc';
 import GetInfo from "@salesforce/apex/ContactInfo.GetInfo";
    
 @track Mail = 'ab@gmail.com';
 @track PhNum = '9876543210';

handleclick(){
        ContactInfo({ Email : this.Mail, Phone : this.PhNum}) 
        .then(results => { 
                this.conLists = results;  
                })
                .catch(error => {
                this.error = error;
         }
);
    }



Thanks, 
Lovesalesforceyes

Get selected radio button value in LWC

This post explains how to get selected radio button in LWC. Below is demo of output : To use the radio button in LWC you have to use the  li...