Pop Overs in lightning Components

Hi,

While working with input forms , Pop-overs are more useful to enter correct details. By using “lightning:overlayLibrary“, we can show Pop Overs on multiple input fields with different text.

Pop Over

 

Lets look in to Example,

Advertisements

Modal window in lightning components

Hi,

For Creating a new modal window using slds , takes lot of time and effort. Good bye to all those slds implementation to open modal window in lightning components. Using “lightning:overlayLibrary” tag , modal window can be easily shown in components. It is easy to customize also.

This component is supported in Lightning Experience, Salesforce1, and Lightning communities only. This component requires API version 41.0 and later.

 

 

Modal window

 

Fields comparison using Dynamic SOQL Query

Hi,

There is a requirement  to check the duplicate records with some web service callout response values like street,city,country,region,postal code.  For some callouts , response values are empty or null and some times it is having actual address values. We can’t expect , when it is having values and when it is empty.

To fetch the duplicate records , we need to pass the input Strings to soql query. Before constructing query , we are checking if the input address is empty or not. If it is not empty, we are adding it to the list.  Dynamically creating query at the end and it will fectch all the duplicate records with matching input Strings.

 

Render Multiple section’s in Lightning Component

I have 3 sections in my component and a pick-list value. On change of this pick-list value , i need to show related sections. There are two ways to accomplish this requirement. First way is using css property (display:none). Second way is using aura-if and aura-set. By using Css property , it will completely remove the element from lightning component. The efficient way of doing this , using aura tags.

IF ELse

Let’s get it into the code.

MultipleIFELSE.Component

<aura:component implements="forceCommunity:availableForAllPageTypes" access="global">

<aura:attribute name="toggleGer" type="boolean" default="true" />
<aura:attribute name="toggleEng" type="boolean" />

<!-- Start Picklist Values -->
<div class="slds-align_absolute-center ">
	<lightning:select name="mySelect" label="Select a language" aura:id="mySelect" onchange="{!c.toggle}" >
<option>German</option>
<option>Spanish</option>
<option>English</option>
</lightning:select>
</div>
<!-- End Picklist Values -->
<!-- Start of Multiple If's-->
<aura:if isTrue="{!v.toggleGer}">
<div aura:id="German" class="demo-only demo-only--sizing slds-grid slds-wrap slds-p-vertical_medium">
<div class="slds-size_3-of-12 slds-p-left_xx-large slds-p-horizontal_x-large" >
This is German
</div>
</div>
<aura:set attribute="else">
<aura:if isTrue="{!v.toggleEng}">
<div aura:id="English" class="demo-only demo-only--sizing slds-grid slds-wrap slds-p-vertical_medium">
<div class="slds-size_3-of-12 slds-p-left_xx-large slds-p-horizontal_x-large">
This is English
</div>
</div>
<aura:set attribute="else">
<div aura:id="Spanish" class="demo-only demo-only--sizing slds-grid slds-wrap slds-p-vertical_medium">
<div class="slds-size_3-of-12 slds-p-left_xx-large slds-p-horizontal_x-large" >
This is Spanish
</div>
</div>
</aura:set>
</aura:if>
</aura:set>
</aura:if>

<!--End of mutiple if's -->

</aura:component>

 

Controller.js

({
toggle: function (component, event, helper) {

var sel = component.find("mySelect");
var nav = sel.get("v.value");

if (nav == "German") {
component.set("v.toggleGer", true);

}else if(nav == "Spanish"){
component.set("v.toggleGer", false);
component.set("v.toggleEng", false);


}else if(nav == "English"){
component.set("v.toggleGer", false);
component.set("v.toggleEng", true);

}

},
})

 

Depending up on the requirement , you can refer input fields or sections that you need. it will re-render based on the pick-list that we selected.

Hope this helps!

 

 

Use Google Map’s Api in Lightning Components , Salesforce

Requirement:

Create a picklist with 3 to 4 languages. Based on language selection, auto-suggestions should display on input text form. Once the Place is selected, need to make another call out to get the details of that place.

Google Auto Suggestion

Solution:

First , we need to register our email to get the google maps key.
Google is offering multiple auto search api’s. We have to choose “Server-side and client-side” Api.

Follow below link to register in Google.
https://developers.google.com/places/web-service/autocomplete

https://developers.google.com/places/web-service/details

1) Click on “Get” Key
2) Enabel Api
3) Copy the key

Go to Developer console and click on new component — GoogleAutoSearch.cmp


<aura:component  controller="GoogleController">
   <aura:attribute name="options" type="List" />
   <aura:attribute name="selectedValue" type="String" default="en"/>
   <aura:attribute name="selectedOption" type="String" default="English"  />
   <!-- After call out , suggestions stored in it -->
   <aura:attribute name="filteredOptions" type="String[]"/>
   <aura:attribute name="searchKey" type="String"/>
   <aura:attribute name="placeholder" type="String" default="Enter a location"/>
   <aura:registerEvent name="toastEvent" type="force:showToast"/>
   <ltng:require styles="{!$Resource.SLDS24 + '/styles/lightning-design-system-ltng.css'}" />
   <!-- To load the picklist values -->
   <aura:handler name="init" value="{!this}" action="{!c.loadOptions}" />
   <br/><br/><br/>
   <!--Language Pick list Start   --> 
   <div class="slds-align_absolute-center kj">
      <lightning:select name="mySelect" label="Select a language" aura:id="mySelect" onchange="{!c.handleSelect}" value="{!v.selectedValue}">
         <aura:iteration items="{!v.options}" var="item">
            <option text="{!item.label}" value="{!item.value}" selected="{!item.selected}"/>
         </aura:iteration>
      </lightning:select>
   </div>
   <!--Language Pick list End   -->    
   <br/><br/><br/>
   <!-- Auto Suggestion Start -->
   <div>
   <div class="slds-form-element">
   <div class="slds-form-element__control">
   <div class="slds-combobox_container slds-has-inline-listbox">
   <div class="slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click slds-combobox-lookup"
      aria-expanded="false"
      aria-haspopup="listbox"
      role="combobox"
      aura:id="searchLookup">
   <div class="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_left"
      aura:id="iconDirection">
   <ui:inputText updateOn="keyup"
      keyup="{!c.keyPressController}"
      class="slds-input slds-combobox__input"
      value="{!v.searchKey}"
      placeholder="{!v.placeholder}"/>
   <aura:if isTrue="{!empty(v.selectedOption)}">
   <span class="slds-icon_container slds-input__icon">
   <lightning:icon iconName="utility:dash" size="xx-small"/> 
  
   <span class="slds-assistive-text"></span>
   </span>
   <aura:set attribute="else">
   <button class="slds-button slds-button_icon slds-input__icon slds-input__icon_right"
      onclick="{!c.clear}">
   <lightning:icon iconName="utility:dash" size="xx-small"/> 
  
   <span class="slds-assistive-text">Remove selected option</span>
   </button>
   </aura:set>
   </aura:if>
   </div>
   <div id="listbox-unique-id" role="listbox">
   <ul class="slds-listbox slds-listbox_vertical slds-dropdown slds-dropdown_fluid"
      role="presentation">
   <aura:iteration items="{!v.filteredOptions}" var="option">
   <li role="presentation"
      class="slds-listbox__item"
      onclick="{!c.selectOption}"
      data-value="{!option.value}"
      data-record="{!option.label}"
      data-placeid="{!option.PlaceId}"
      data-locaval="{!option.locaval}">
   <span id="listbox-option-unique-id-01"
      class="slds-media slds-listbox__option slds-listbox__option_entity slds-listbox__option_has-meta"
      role="option">
   <span class="slds-media__body">
   <span class="slds-listbox__option-text slds-listbox__option-text_entity">{!option.label}</span>
   </span>
   </span>
   </li>
   </aura:iteration>
   </ul>
   </div>
   </div>
   </div>
   </div>
   </div>
   </div>   
   <!-- Auto Suggestion End -->
</aura:component>

Component JS Controller :


({
    loadOptions: function (component, event, helper) {
         loadOptions: function (component, event, helper) {
        var opts = [
            { value: "de", label: "German" },
            { value: "es", label: "Spanish" },
            { value: "ta", label: "Tamil" },
            { value: "en", label: "English" }
         ];
         component.set("v.options", opts);
    },
    handleSelect:function(component,event,helper){
       var selected = event.getSource().get(&amp;quot;v.value&amp;quot;);
       var locaval2 = event.currentTarget.dataset.locaval;

        if(Language1 !== 'en'){
            helper.displayOptionDetails(component,selectedPlaceHolder);
        }else{
            helper.sendSelectedOption(component,locaval2);
        }

        component.set(&amp;quot;v.selectedOption&amp;quot;, selectedItem);

        var searchLookup = component.find(&amp;quot;searchLookup&amp;quot;);
        $A.util.removeClass(searchLookup, 'slds-is-open');
        var iconDirection = component.find(&amp;quot;iconDirection&amp;quot;);
        $A.util.removeClass(iconDirection, 'slds-input-has-icon_left');
        $A.util.addClass(iconDirection, 'slds-input-has-icon_right');
        component.set(&amp;quot;v.searchKey&amp;quot;, selectedItem);

    },

    clear: function (component, event, helper) {
        helper.clearComponentConfig(component);
    },
   

})

Component -JS – helper


({
	 displayOptionsLocation: function (component, searchKey , Language) {
        var action = component.get(&amp;quot;c.getAddressAutoComplete&amp;quot;);
        action.setParams({
            &amp;quot;input&amp;quot;: searchKey,
            &amp;quot;langug&amp;quot;: Language,
            &amp;quot;types&amp;quot;: '(regions)'
        });

        action.setCallback(this, function (response) {
            var state = response.getState();
            if (state === &amp;quot;SUCCESS&amp;quot;) {
                var options = JSON.parse(response.getReturnValue());
                var predictions = options.predictions;
                var addresses = [];
                if (predictions.length &amp;gt; 0) {
                    for (var i = 0; i &amp;lt; predictions.length; i++) {
                    
                        var bc =[];
                        for(var j=0;j&amp;lt;predictions[i].terms.length;j++){
                         
                            bc.push(predictions[i].terms[j].offset , predictions[i].terms[j].value );
                     
                            }
                        addresses.push(
                            {
                                value: predictions[i].types[0],
                                PlaceId: predictions[i].place_id,
                                locaval: bc,
                                label: predictions[i].description                              
                            });
                       
                    }
                   
                    component.set(&amp;quot;v.filteredOptions&amp;quot;, addresses);
                }
            }
        });
        $A.enqueueAction(action);
    },
    sendSelectedOption:function(component,locaval2){
        
          var action1 = component.get(&amp;quot;c.processWebResp&amp;quot;);
        action1.setParams({
            &amp;quot;Res&amp;quot;: locaval2
        });

        action1.setCallback(this, function (response) {
            
            var state = response.getState();
            if (state === &amp;quot;SUCCESS&amp;quot;) {
                console.log('This is webservice resp &amp;gt;&amp;gt;');
                
            }
            
            
        });
        
        $A.enqueueAction(action1);
      
        
    },
    displayOptionDetails: function(component,placeid){
        var self = this;       
         var action1 = component.get(&amp;quot;c.getAddressDetails&amp;quot;);
        action1.setParams({
            &amp;quot;PlaceId&amp;quot;: placeid
        });

        action1.setCallback(this, function (response) {
            
             var state = response.getState();
            if (state === &amp;quot;SUCCESS&amp;quot;) {
                var options = JSON.parse(response.getReturnValue());
                 var Addressdet = options.result;
              
               
                var key = &amp;quot;address_components&amp;quot;;
                var o = Addressdet[key]  // value2
                for(var prop in o) {
                  console.log(prop,o[prop]);  
                }
                
                self.insertRecords(component,o);
                
               
                
            }
	
        });
        $A.enqueueAction(action1);
        
    },
    insertRecords:function(component,data){
          var self = this;
        
        console.log('?????New Method??????');
          for(var prop in data) {
                  console.log(prop,data[prop]);  
                }
        var d=data;
         var action1 = component.get(&amp;quot;c.processWebRes&amp;quot;);
        action1.setParams({
            &amp;quot;Res&amp;quot;:JSON.stringify(d)
        });

        action1.setCallback(this, function (response) {
            
             var state = response.getState();
            if (state === &amp;quot;SUCCESS&amp;quot;) {
                
               
                
            }
            
        });
        $A.enqueueAction(action1);
        
                
        
    },

    openListbox: function (component, searchKey) {
        var searchLookup = component.find(&amp;quot;searchLookup&amp;quot;);

        if (typeof searchKey === 'undefined' || searchKey.length &amp;lt; 3)
        {
            $A.util.addClass(searchLookup, 'slds-combobox-lookup');
            $A.util.removeClass(searchLookup, 'slds-is-open');
            return;
        }

        $A.util.addClass(searchLookup, 'slds-is-open');
        $A.util.removeClass(searchLookup, 'slds-combobox-lookup');
    },

    clearComponentConfig: function (component) {
        var searchLookup = component.find(&amp;quot;searchLookup&amp;quot;);
        $A.util.addClass(searchLookup, 'slds-combobox-lookup');

        component.set(&amp;quot;v.selectedOption&amp;quot;, null);
        component.set(&amp;quot;v.searchKey&amp;quot;, null);

        var iconDirection = component.find(&amp;quot;iconDirection&amp;quot;);
        $A.util.removeClass(iconDirection, 'slds-input-has-icon_right');
        $A.util.addClass(iconDirection, 'slds-input-has-icon_left');
    },
    displayToast : function(component, type, message) {
                       

	    var toastEvent = $A.get('e.force:showToast');
	    toastEvent.setParams({
	      type: type,
	      message: message
	    });
	    toastEvent.fire();
                        

	  },
    
})

Apex Controller:

global class GoogleController {

 @AuraEnabled
 global static string getAddressAutoComplete(String input, String types, String langug) {
  String url = 'https://maps.googleapis.com/maps/api/place/autocomplete/json?input=' + EncodingUtil.urlEncode(input, 'UTF-8') + 'types=' + types + 'language=' + langug + 'key=' + GoogleController.getGoogleMapsAPIKey();
  return GoogleController.getHttp(url);
 }

 @AuraEnabled
 global static string getAddressDetails(String PlaceId) {
  String url = 'https://maps.googleapis.com/maps/api/place/details/json?placeid=' + PlaceId + 'language=enkey=' + GoogleController.getGoogleMapsAPIKey();
  return GoogleController.getHttp(url);
 }




 global static String getGoogleMapsAPIKey() {

  return 'GOOGLE API KEY';

 }

 global static string getHttp(String url) {

  try {

   Http http = new Http();
   HttpRequest request = new HttpRequest();
   request.setEndpoint(url);
   request.setMethod('GET');
   HttpResponse response = http.send(request);
   return response.getBody();
  } catch (Exception e) {
   return 'sle string';
  }
 }

 //This is for first web service
 @AuraEnabled
 global static string processWebResp(String Res) {

  system.debug('Web service response to process;' + Res);

  return null;

 }


 //This is for second web service 
 @AuraEnabled
 global static string processWebRes(String Res) {
  List mylst = GoogleController.parse(Res);

  system.debug('Web service response to process' + Res);

  return null;
 }

 public static List parse(String json) {
  return (List) System.JSON.deserialize(json, List.class);
 }

 //Wrapper class
 public class AddressJsonInfo {
  public String long_name;
  public String short_name;
  public List types;
 }


}

Different clouds in salesforce

Sales Cloud platform

Salesforce Sales Cloud is a CRM  platform designed to manage the sales, marketing and customer support facets of business-to-business (B2B) and business-to-customer (B2C) engagement strategies.

To aid with new and existing lead management and lead monitoring, users can create custom lead-capture forms, view and access a lead’s most up-to-date contact information in an activity timeline and establish automatic lead routing to ensure that customer engagement and sales personnel receive timely notification of hot leads. Users can also track and analyze marketing campaign data and its impact on lead generation. This data can be viewed and used by sales teams and translated into more effective sales performance.

Features of Sales cloud:

  • Einstein High Velocity Sales Cloud
  • Outlook integration
  • Opportunity Kanban (Forecasting)
  • Lead management
  • Lead assignment and routing
  • Rules-based lead scoring
  • Einstein lead scoring
  • Duplicate blocking
  • Web-to-lead capture
  • Mass email
  • Campaign Management
  • Campaign Influence
  • Email templates
  • Salesforce Engage
  • Pardot B2B Marketing Automation
  • Manage customer and sales details.
  • Account and contact management
  • Einstein Account Insights
  • Opportunity Management
  • Sales Path
  • Einstein Opportunity Insights
  • Sales Teams
  • Task Management, Activity feed
  • Einstein Activity Capture
  • Calendar All
  • Sales Console app
  • Lightning Voice
  • Person Accounts
  • Sell from anywhere on any device.
  • Salesforce1 Mobile App
  • Full Offline Mobile Functionality
  • Inbox Mobile App
  • Forecast sales more accurately.
  • Collaborative forecasting
  • Custom Opportunity fields in forecasting
  • Collaborative forecasting with opportunity splits
  • Forecasting mobile app
  • Enterprise territory management
  • Configure, price, quote, and bill.
  • Contracts
  • Orders
  • Products and price books
  • Quotes
  • Salesforce Quote-to-Cash
  • Salesforce Billing
  • Get real-time sales insights.
  • Configurable Reports and Dashboards
  • Advanced reporting features
  • Wave App for Sales
  • Collaborate across your company.
  • Chatter
  • Files
  • Topics and Recommendations
  • Extend Salesforce to your partners.
  • Lead registration
  • Partner Communities
  • Lightning Bolt solutions
  • Cross-sell and upsell more easily.
  • Customise and automate processes.
  • com
  • Process Builder (processes per org)
  • Workflow and approval automation
  • Lightning App Builder
  • AppExchange
  • Unlimited custom applications
  • Connect sales info to any app.
  • Web Services API
  • Lightning for Gmail (beta) or Outlook
  • Inbox Desktop Apps
  • Send email through Gmail or Outlook
  • Google Apps integration
  • Lightning Sync

Different Editions of salescloud :

SalesforceIQ CRM Starter Edition — Let up to five users track and manage all your sales leads, opportunities, and customer cases. You’ll also get more insights into your business with basic reports and dashboards.

 

Professional Edition — Let an unlimited number of users manage your entire sales cycle. In addition to basic sales and marketing features, you can manage marketing campaigns, contracts, orders, and more. Get even more business insights with accurate sales forecasts and customizable dashboards.

 

Enterprise Edition — Automate business processes using workflow and approvals, tailor Sales Cloud to your company with custom record types, and integrate with any system using our web services API. You can also manage complex sales territories, and see how your sales deals have progressed with deal trending.

 

Unlimited Edition — Get access to unlimited online training, over 100 admin services, and 24/7 toll-free support. Tailor Salesforce to fit your business by building custom objects and creating an unlimited number of custom tabs and apps. Plus, your admins will have access to several sandboxes for development and testing.

 

Service Cloud Platform

Licenses for Service Cloud

Service Cloud User: Lets support agents use the console for service.

Knowledge User:  Lets support agents create and edit knowledge base articles.

Live Agent User: Lets support agents communicate with customers using Web chat.

Customer Community: Lets support agents communicate with customers on an online community.

Features of Service cloud:

Feature Description
Case Management Record, track and solve customer issues across sales, service and support. Includes ability to create cases from an email (email to case) and from a web form (web to case). Cases can be managed in queues. Assignment rules and escalation rules can be defined.
Activities Activities in Salesforce are Tasks and Events. Activities can have a priority and assignment to a user that are related to cases or other Salesforce standard or custom objects.
CTI Integration Integration of telephony systems with Salesforce to allow functionality such as screen popping (display of incoming caller information), automatic dialling and phone control.
Contracts and Entitlements Recording of service contracts (e.g. warranties, subscriptions, maintentance agreements) related to accounts and the level of entitlement applicable that can be verified to determine if customers are eligible for support.
Call Scripting Provide a online interactive script for sales or support staff to follow when talking to a customer.
Live Agent Chat Provides a chat interface to allows customers to chat with Salesforce customer sales or service agents.
Solution Management Allows you to capture in a central location information to answer customer questions and support requests. Adds a search facility to access solutions via cases. Auto suggestions can be enabled to suggestion solutions based on case content. Solutions can also be exposed via a customer portal or a public website.
Service Cloud Console Consolidated view of related records in one screen with different frames to improve agent productivity. For example, instead of having to scroll down to the related lists of a contact and navigate to related records, the service cloud console allows you to navigate to related records via tabs.
Ideas Provides a facility for internal staff, customers and partners to submit, discuss and vote on ideas.
Social Service Monitor and create cases from tweets and posts. Resolve cases in social channels.
Communities for Service Customer self-service for issue management, searching for solutions and enabling customers to have discussion and answer questions between themselves.
Asset Management Allows tracking of which customers own what products. Can track the purchase date, install date, serial number, quantity and even if it is a competitor asset.
Knowledge Management Knowledge base of FAQs, common customer service response, resolutions and other information that is useful for solving issues, cases both accessible internally and externally in multiple channels.
Partner Service Collaboration Salesforce to Salesforce connection to allow creation and update of cases between partners.

 

Community Cloud

At its most basic level, a community is a group of people who share a common mission or goal. You can define what collaboration model best fits your needs. Do you want to have customers helping one another out? Peer-to-peer communities do just that. Perhaps you want a portal, where your customers can, for example, access account information.

 

Customer Community:  Best for service and marketing use cases (Powerful capabilities for customer service and engagement)

Partner Community:  Best for partner and channel management (Empower partners with deal collaboration and productivity tools)

Employee Community:  For mobile and social intranets (Transform your workplace and harness the power of social and mobile)

Differences between three communities:

CUSTOMER

COMMUNITY

PARTNER

COMMUNITY

Employee 

COMMUNITY

Includes the following features: Includes the following features: Includes the following features:
Social collaboration for customers and employees Role-based sharing for controlled data access Accounts (read-only)
Mobile access Lead and opportunity management Contacts (read-only)
Custom branding Delegated administration capabilities Chatter Collaboration
Q & A for self-service Run and Export Reports Salesforce Knowledge (read-only)
Access to support cases, accounts, and contacts Dashboard viewing Cases (create, read, comment only)
Knowledge base articles Social collaboration for customers and employees 10 custom objects
Idea submission and endorsement Mobile access Dashboards
10 custom objects Custom branding Reports
Salesforce Identity Q & A for self-service Answers and Ideas
Powerful capabilities for customer service and engagement Access to support cases, accounts, and contacts Workflow
  Knowledge base articles Tasks and Events
  Idea submission and endorsement Advanced sharing
  10 custom objects  
  Salesforce Identity

 

Data Cloud

Data.com Clean helps you automatically update and enrich the account, contact and lead data that drives your most important sales and marketing processes, all right inside Salesforce.

 

data cloud 1

data cloud 2

Data.com: It will sync all the contacts and lead information from salesforce.