lightning-record-form LWC

lightning-record-form LWC (Lightning Web Component)

lightning-record-form LWC

lightning-record-form component allows you to quickly create forms to add, view, or update a record. Using this component to create record forms is easier than building forms manually with lightning-record-edit-form or lightning-record-view-form. The lightning-record-form component provides these helpful features:

  • Switches between view and edit modes automatically when the user begins editing a field in a view form
  • Provides Cancel and Save buttons automatically in edit forms
  • Uses the object’s default record layout with support for multiple columns
  • Loads all fields in the object’s compact or full layout, or only the fields you specify

 

lightning-record-form is less customizable. To customize the form layout or provide custom rendering of record data, use lightning-record-edit-form (add or update a record) and lightning-record-view-form (view a record).

The object-api-name attribute is always required, and the record-id is required only when you’re editing or viewing a record.

lightning-record-form implements Lightning Data Service and doesn’t require additional Apex controllers to create or edit record data. It also takes care of field-level security and sharing for you, so users see only the data that they have access to.

 

Modes

The component accepts a mode value that determines the user interaction allowed for the form. The value for mode can be one of the following:

  • edit – Creates an editable form to add a record or update an existing one. When updating an existing record, specify the record-id. Edit mode is the default when record-id is not provided, and displays a form to create new records.
  • view – Creates a form to display a record that the user can also edit. The record fields each have an edit button. View mode is the default when record-id is provided.
  • readonly – Creates a form to display a record without enabling edits. The form doesn’t display any buttons.

 

Specifying Record Fields

For all modes, the component expects the fields attribute or the layout-type attribute.

Use the fields attribute to pass record fields as an array of strings. The fields display in the order you list them.

Use the layout-type attribute to specify a Full or Compact layout. Layouts are typically defined (created and modified) by administrators. Specifying record data using layout-type loads the fields in the layout definition. All fields that have been assigned to the layout are loaded into the form.

To see the fields in the layout types in your org:

  • Full – The full layout corresponds to the fields on the record detail page. From the management settings for the object that you want to edit, go to Page Layouts.
  • Compact – The compact layout corresponds to the fields on the highlights panel at the top of the record. From the management settings for the object that you want to edit, go to Compact Layouts.

 

Editing a Record using lightning-record-form LWC

lightningRecordFormEditExampleLWC.html

<template>
    <lightning-record-form record-id={recordId} object-api-name={objectApiName}
        fields={fields} columns="2" mode="edit" onsubmit={handleSubmit}>
    </lightning-record-form>
</template>

lightningRecordFormEditExampleLWC.js

import { LightningElement, api } from 'lwc';
import NAME_FIELD from '@salesforce/schema/Account.Name';
import REVENUE_FIELD from '@salesforce/schema/Account.AnnualRevenue';
import INDUSTRY_FIELD from '@salesforce/schema/Account.Industry';
export default class LightningRecordFormEditExampleLWC extends LightningElement {
    @api recordId;
    @api objectApiName;
    fields = [NAME_FIELD, REVENUE_FIELD, INDUSTRY_FIELD];
    handleSubmit(event){
        //you can change values from here
        //const fields = event.detail.fields;
        //fields.Name = 'My Custom  Name'; // modify a field
        console.log('Account detail : ',event.detail.fields);
        console.log('Account name : ',event.detail.fields.Name);
    }
}

lightningRecordFormEditExampleLWC.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <targets> 
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Now we can add this LWC component on the Account Record page.

  • Go to Home page
  • Click Setup (Gear Icon) and select Edit Page.
  • Under Custom Components, find your lightningRecordFormEditExampleLWC component and drag it on right-hand side top.
  • Click Save and activate.

 

We will get the following output

lightning-record-form LWC Edit Record

 

We can change html file to show full page layout

lightningRecordFormEditExampleLWC.html

<template>
    <lightning-record-form record-id={recordId} object-api-name="Account" layout-type="Full" columns="2" mode="edit"
       onsuccess={handleSuccess} onsubmit={handleSubmit}>
    </lightning-record-form>
</template>

 

Creating a Record using lightning-record-form LWC

lightningRecordFormCreateExampleLWC.html

<template>
    <lightning-record-form object-api-name={objectApiName}
        fields={fields} onsuccess={handleSuccess}>
    </lightning-record-form>
</template>

lightningRecordFormCreateExampleLWC.js

import { LightningElement, api } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import NAME_FIELD from '@salesforce/schema/Account.Name';
import REVENUE_FIELD from '@salesforce/schema/Account.AnnualRevenue';
import INDUSTRY_FIELD from '@salesforce/schema/Account.Industry';
export default class LightningRecordFormCreateExampleLWC extends LightningElement {
    // objectApiName is "Account" when this component is placed on an account record page
    @api objectApiName;
    fields = [NAME_FIELD, REVENUE_FIELD, INDUSTRY_FIELD];
    handleSuccess(event) {
        const evt = new ShowToastEvent({
            title: "Account created",
            message: "Record ID: " + event.detail.id,
            variant: "success"
        });
        this.dispatchEvent(evt);
    }
}

lightningRecordFormCreateExampleLWC.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <targets> 
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Now we can add this LWC component on the Account Record page.

  • Go to Home page
  • Click Setup (Gear Icon) and select Edit Page.
  • Under Custom Components, find your lightningRecordFormCreateExampleLWC component and drag it on right-hand side top.
  • Click Save and activate.

 

We will get the following output

lightning-record-form LWC Create Record

For more details please refer to official link

Permanent link to this article: https://www.sfdcpoint.com/salesforce/lightning-record-form-lwc/

lightning-record-edit-form LWC(Lightning Web Component)

lightning-record-edit-form LWC

lightning-record-edit-form LWC (Lightning Web Component)

A lightning-record-edit-form component is a wrapper component that accepts a record ID and object name. It is used to add a Salesforce record or update fields in an existing record. The component displays fields with their labels and the current values and enables you to edit their values. The lightning-input-field component is used inside the lightning-record-edit-form to create editable fields. The lightning-output-field component and other display components such as lightning-formatted-name can be used to display read-only information in your form. lightning-record-edit-form implements Lightning Data Service. It doesn’t require additional Apex controllers to create or update records. Using lightning-record-edit-form to create or update records with Apex controllers can lead to unexpected behaviors. This component also takes care of field-level security and sharing for you, so users see only the data they have access to.

lightning-record-edit-form supports the following features:

  • Editing a record’s specified fields, given the record ID.
  • Creating a record using specified fields.
  • Customizing the form layout
  • Custom rendering of record data

 

Editing a Record

To enable record editing, pass in the ID of the record and the corresponding object API name to be edited. Specify the fields you want to include in the record edit layout using lightning-input-field.

Include a lightning-button component with type=”submit” to automatically save any changes in the input fields when the button is clicked.

Let’s create an example to edit account record using lightning-record-edit-form in Lightning Web Component

recordEditFormEditExampleLWC.html

<template>
    <lightning-record-edit-form record-id={recordId} object-api-name="Contact" 
            onsuccess={handleSuccess} onsubmit ={handleSubmit}>
        <lightning-messages>
        </lightning-messages>
        <lightning-output-field field-name="AccountId">
        </lightning-output-field>
        <lightning-input-field field-name="FirstName">
        </lightning-input-field>
        <lightning-input-field field-name="LastName">
        </lightning-input-field>
        <lightning-input-field field-name="Email">
        </lightning-input-field>
        <lightning-button class="slds-m-top_small" variant="brand" type="submit" name="update" label="Update">
        </lightning-button>
    </lightning-record-edit-form>
</template>

Please note that onsuccess and onsubmit are optional here and are used for Overriding Default Behaviors. Here I added these for testing.

recordEditFormEditExampleLWC.js

import { LightningElement, api} from 'lwc';
export default class RecordEditFormEditExampleLWC extends LightningElement {
    @api recordId;
    handleSubmit(event) {
        console.log('onsubmit event recordEditForm'+ event.detail.fields);
    }
    handleSuccess(event) {
        console.log('onsuccess event recordEditForm', event.detail.id);
    }
}

recordEditFormEditExampleLWC.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <targets> 
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Now we can add this LWC component on the Contact Record page.

  • Go to Contact record
  • Click Setup (Gear Icon) and select Edit Page.
  • Under Custom Components, find your recordEditFormEditExampleLWC component and drag it on Contact Page.
  • Click Save and activate.

 

We will get the following output

lightning-record-edit-form LWC Edit Record

 

Creating a Record

To enable record creation, pass in the object API name for the record to be created. Specify the fields you want to include in the record create layout using lightning-input-field components. For more information, see the lightning-input-field documentation.

Include a lightning-button component with type=”submit” to automatically save the record when the button is clicked.

Let’s create an example to create account record using lightning-record-edit-form in Lightning Web Component

recordEditFormCreateExampleLWC.html

<template>
    <lightning-record-edit-form object-api-name="Contact" onsuccess={handleSuccess} onsubmit ={handleSubmit}>
        <lightning-messages>
        </lightning-messages>
        <lightning-input-field field-name='AccountId'></lightning-input-field>
        <lightning-input-field field-name='FirstName'></lightning-input-field>
        <lightning-input-field field-name='LastName'></lightning-input-field>
        <lightning-input-field field-name='Email'></lightning-input-field>
        <lightning-button class="slds-m-top_small" type="submit" label="Create Contact">
        </lightning-button>
    </lightning-record-edit-form>
</template>

recordEditFormCreateExampleLWC.js

import { LightningElement} from 'lwc';
export default class RecordEditFormCreateExampleLWC extends LightningElement {
    handleSuccess(event) {
        console.log('onsuccess event recordEditForm',event.detail.id)
    }
    handleSubmit(event) {
        console.log('onsubmit event recordEditForm'+ event.detail.fields);
    }
}

recordEditFormCreateExampleLWC.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <targets> 
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Now we can add this LWC component on the Contact Record page.

  • Go to Contact record.
  • Click Setup (Gear Icon) and select Edit Page.
  • Under Custom Components, find your recordEditFormCreateExampleLWC component and drag it on Contact Page.
  • Click Save and activate.

 

We will get the following output

lightning-record-edit-form LWC Create Record

 

Displaying Forms Based on a Record Type

If your org uses record types, picklist fields display values according to your record types. You must provide a record type ID using the record-type-id attribute if you have multiple record types on an object and you don’t have a default record type. Otherwise, the default record type ID is used.

Supported Objects

This component doesn’t support all Salesforce standard objects. For example, the Event and Task objects are not supported. This limitation also applies to a record that references a field that belongs to an unsupported object.

External objects and person accounts are not supported.

To work with the User object, specify FirstName and LastName instead of the Name compound field for the field-name values of lightning-input-field.

Error Handling

lightning-record-edit-form handles field-level validation errors and Lightning Data Service errors automatically. For example, entering an invalid email format for the Email field results in an error message when you move focus away from the field. Similarly, a required field like the Last Name field displays an error message when you leave the field blank and move focus away.

We need to include lightning-messages to support error handling and displaying of error messages. If the record edit layout includes a lightning-button component with type="submit", when the button is clicked the lightning-record-edit-form component automatically performs error handling and saves any changes in the input fields. Similarly, if the record create layout provides a submit button, when the button is clicked error handling is automatically performed and a new record is created with the input data you provide.

 

For more details please refer to official link

Permanent link to this article: https://www.sfdcpoint.com/salesforce/lightning-record-edit-form-lwc/

Lightning Spinner in LWC (Lightning Web Component)

Lightning Spinner in LWC (Lightning Web Component)

What is Lightning Spinner in LWC?

Lightning Spinners are CSS loading indicators that should be shown when retrieving data or performing slow computations. lightning-spinner displays an animated spinner image to indicate that a request is loading. This component can be used when retrieving data or performing an operation that takes time to complete. In some cases, the first time a parent component loads, a stencil is preferred to indicate network activity.

lightning-spinner LWC example

Let’s first see a very simple example to show or hide lightning spinner using a toggle button

lightningSpinnerLWCSimpleExample.html

<template>
    <lightning-button label="Toggle" variant="brand" onclick={handleClick}>
    </lightning-button>
    <div class="slds-m-around_large">
        <p if:true={isLoaded}>Content has been loaded.</p>
         <div if:false={isLoaded} class="slds-is-relative">
            <lightning-spinner
                alternative-text="Loading..." variant="brand">
            </lightning-spinner>
        </div>
    </div>
</template>

lightningSpinnerLWCSimpleExample.js

import { LightningElement, api } from 'lwc';
export default class LightningSpinnerLWCSimpleExample extends LightningElement {
    @api isLoaded = false;
    // change isLoaded to the opposite of its current value
    handleClick() {
        this.isLoaded = !this.isLoaded;
    }
}

lightningSpinnerLWCSimpleExample.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <targets> 
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Now we can add this LWC component on the home page.

  • Go to Home page
  • Click Setup (Gear Icon) and select Edit Page.
  • Under Custom Components, find your lightningSpinnerLWCSimpleExample component and drag it on right-hand side top.
  • Click Save and activate.

 

We will see the following output.  If the user will click on the toggle button then the spinner will toggle on or off.

Lightning Spinner in LWC Toggle Example

 

 

lightning-spinner example with Apex

Let’s see one more  real-life example where the user will click on the button to load account and during apex request lightning spinner loading image

AccountHelper class

public with sharing class AccountHelper {
    @AuraEnabled(cacheable=true)
    public static List<Account> getAccountList() {
        return [SELECT Id, Name, Type, Rating,
                Phone, Website, AnnualRevenue
            FROM Account];
    }
}

lightningSpinnerLWCExample.html

<template>
    <div class="spinner">
        <template if:true={isLoading}>
             <lightning-spinner alternative-text="Loading" variant="brand" size="large">
             </lightning-spinner>
        </template>
    </div>
    <lightning-card title="Account List lightning-spinner LWC" icon-name="custom:custom63">
        <div class="slds-m-around_medium">
            <p class="slds-m-bottom_small">
                <lightning-button label="Load Accounts" onclick={handleLoad}></lightning-button>
            </p>
            <template if:true={accounts}>
                <template for:each={accounts} for:item="acc">
                    <p key={acc.Id}>{acc.Name}</p>
                </template>
            </template>
            <template if:true={error}>
                {error}
            </template>
        </div>
    </lightning-card>
</template>

lightningSpinnerLWCExample.js

import { LightningElement, track } from 'lwc';
import getAccountList from '@salesforce/apex/AccountHelper.getAccountList';
export default class LightningSpinnerLWCExample extends LightningElement {
    @track accounts;
    @track error;
    @track isLoading = false;
    handleLoad() {
        this.isLoading = true;
        getAccountList()
            .then(result =&gt; {
                this.accounts = result;
                this.isLoading = false;
            })
            .catch(error =&gt; {
                this.error = error;
                this.isLoading = false;
            });
    }
}

lightningSpinnerLWCExample.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <targets> 
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Now we can add this LWC component on the home page.

  • Go to Home page
  • Click Setup (Gear Icon) and select Edit Page.
  • Under Custom Components, find your lightningSpinnerLWCExample component and drag it on right-hand side top.
  • Click Save and activate.

We will see the following output when the user will click on the Load Accounts button. When loading will finish, the user will see the account list.

 

Lightning Spinner in LWC

 

Users will see the following account list when loading completes.

 

Lightning Spinner in LWC Loading finish

 

 

For more details please refer to official link

Permanent link to this article: https://www.sfdcpoint.com/salesforce/lightning-spinner-in-lwc-lightning-web-component/

Lightning Web Component(LWC) Toast Messages

Lightning Web Component(LWC) Toast Messages

LWC Toast Messages

Lightning Web component(LWC) can send a toast notification that pops up to alert users of success, error or warning. A toast can also simply provide information. To display a toast notification in Lightning Experience or Lightning communities, import ShowToastEvent from the lightning/platformShowToastEvent module. We can dispatch this toast on some event like click of button.

 

How to add toast message in Lightning Web component(LWC)

Import Toast Message

import { ShowToastEvent } from 'lightning/platformShowToastEvent';

Dispatch toast Message

showToast() {
    const event = new ShowToastEvent({
        title: 'Toast message',
        message: 'Toast Message',
        variant: 'success',
        mode: 'dismissable'
    });
    this.dispatchEvent(event);
}

 

Here are some point about toast message:

  • We can style toast to provide error, success, warning and information message using mode parameter.
  • We can also configure the visibility of the toast using variant. It can remain visible for three seconds, until the user clicks to dismiss it, or a combination of both.
  • To trigger a toast from a Lightning web component, in the component’s JavaScript class, import ShowToastEventfrom lightning/platformShowToastEvent.
  • Create a ShowToastEvent with a few parameters, and dispatch it.

Types of toast messages Lightning Web Component(LWC)

Error Toast

showErrorToast() {
    const evt = new ShowToastEvent({
        title: 'Toast Error',
        message: 'Some unexpected error',
        variant: 'error',
        mode: 'dismissable'
    });
    this.dispatchEvent(evt);
}

Success Toast

showSuccessToast() {
    const evt = new ShowToastEvent({
        title: 'Toast Success',
        message: 'Opearion sucessful',
        variant: 'success',
        mode: 'dismissable'
    });
    this.dispatchEvent(evt);
}

Warning Toast

showWarningToast() {
    const evt = new ShowToastEvent({
        title: 'Toast Warning',
        message: 'Some problem',
        variant: 'warning',
        mode: 'dismissable'
    });
    this.dispatchEvent(evt);
}

Info Toast

showInfoToast() {
    const evt = new ShowToastEvent({
        title: 'Toast Info',
        message: 'Operation will run in background',
        variant: 'info',
        mode: 'dismissable'
    });
    this.dispatchEvent(evt);
}

LWC Toast Messages Example

toastNotificationExampleLWC.html

<template>
    <lightning-card title="Notification" icon-name="custom:custom19">
        <lightning-button label="Show Error" onclick={showErrorToast}></lightning-button>
        <lightning-button label="Show Success" onclick={showSuccessToast}></lightning-button>
        <lightning-button label="Show Warning" onclick={showWarningToast}></lightning-button>
        <lightning-button label="Show Info" onclick={showInfoToast}></lightning-button>
    </lightning-card>
</template>

toastNotificationExampleLWC.js

import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
export default class ToastNotificationExampleLWC extends LightningElement {
    showErrorToast() {
        const evt = new ShowToastEvent({
            title: 'Toast Error',
            message: 'Some unexpected error',
            variant: 'error',
            mode: 'dismissable'
        });
        this.dispatchEvent(evt);
    }
    showSuccessToast() {
        const evt = new ShowToastEvent({
            title: 'Toast Success',
            message: 'Opearion sucessful',
            variant: 'success',
            mode: 'dismissable'
        });
        this.dispatchEvent(evt);
    }
    showWarningToast() {
        const evt = new ShowToastEvent({
            title: 'Toast Warning',
            message: 'Some problem',
            variant: 'warning',
            mode: 'dismissable'
        });
        this.dispatchEvent(evt);
    }
    showInfoToast() {
        const evt = new ShowToastEvent({
            title: 'Toast Info',
            message: 'Operation will run in background',
            variant: 'info',
            mode: 'dismissable'
        });
        this.dispatchEvent(evt);
    }
}

toastNotificationExampleLWC.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <targets> 
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Now we can add this LWC component on the home page.

  • Go to Home page
  • Click Setup (Gear Icon) and select Edit Page.
  • Under Custom Components, find your toastNotificationExampleLWC component and drag it on right-hand side top.
  • Click Save and activate.

 

We will get the following output

Lightning Web component(LWC) Toast Messages

 

Here is list of Toast Event Parameters:

PARAMETERTYPEDESCRIPTION
titleStringThe title of the toast, displayed as a heading.
messageStringA string containing a message for the user.
messageDataString[] or Objecturl and label values that replace the {index} placeholders in the message string.
variantStringThe theme and icon displayed in the toast. Valid values are:

info—(Default) A gray box with an info icon.
success—A green box with a checkmark icon.
warning—A yellow box with a warning icon.
error—A red box with an error icon.
modeStringDetermines how persistent the toast is. Valid values are:

dismissable—(Default) Remains visible until the user clicks the close button or 3 seconds has elapsed, whichever comes first.
pester—Remains visible for 3 seconds.
sticky—Remains visible until the user clicks the close button.

For more details please refer to official link.

Permanent link to this article: https://www.sfdcpoint.com/salesforce/lightning-web-component-lwc-toast-messages/

Custom Labels In Lightning Aura Component

Custom Labels In Lightning Aura Component

Custom Labels In Lightning Aura Component

Custom labels are custom text values that can be accessed from  Aura Component, LWC Component, Apex classes, Visualforce pages. The values can be translated into any language Salesforce supports. Custom labels enable developers to create multilingual applications by automatically presenting information (for example, help text or error messages) in a user’s native language.

To access custom labels in Aura components, use the $Label global value provider. In this post we will see how to use custom label in lightning aura component. If you want to add custom label in lwc please refer Custom Labels In Lightning Web Component(LWC)

Create Custom Labels

Go To Setup — Create — Custom Labels. Click on New Custom Labels. Enter value for name, value and description. We can use custom label name to access custom label value in apex code using System.Label.labelName

The advantage of using a custom label is that label will be displayed to user depending on their language automatically. We need to specify translation for label using translation workbench.

Use Custom Labels in Lightning Aura Component

Use the following syntax to access custom labels in Aura components.

  • $Label.c.labelName for the default namespace
  • $Label.namespace.labelName if your org has a namespace, or to access a label in a managed package

 

Use Custom Labels in Lightning Aura Component javascript controller

Use the following syntax to access custom labels in Aura components.

  • $A.get(“$Label.c.labelName”) for the default namespace
  • $A.get(“$Label.namespace.labelName”) if your org has a namespace, or to access a label in a managed package

 

Custom Label in Lightning Aura Component Example

First, let’s create 3 labels from Setup — Create — Custom Labels. Click on New Custom Labels. Enter value for name, value and description.

  • WelcomeNoteLabel: Welcome to SFDCPOINT
  • HomePageNewsLabel: Your home page news
  • NewCaseLabel: New Case

 

We will add two custom labels value in aura component and 3rd custom label value will be added in aura component by setting value to attribute using javascript controller on click of button.

Now create new lightning web component with name customLabelExampleLWC. Here is code

customLabelExampleAura.cmp

<aura:component implements="flexipage:availableForAllPageTypes">
    <aura:attribute name="homePageNews" type="String" />
    <lightning:card title="{!$Label.c.WelcomeNoteLabel}">
        <p>
            <lightning:button variant="brand" label="{!$Label.c.NewCaseLabel}" onclick="{!c.newCaseAction}"/>
        </p>
        <p>{!v.homePageNews}</p>
    </lightning:card>
</aura:component>

customLabelExampleAuraController.js

({
    newCaseAction : function(component, event, helper) {
        var homePageNewslabel = $A.get("$Label.c.HomePageNewsLabel");
        component.set('v.homePageNews', homePageNewslabel);
    }
})

Now we can add this lightning aura component on the home page.

  • Go to Home page
  • Click Setup (Gear Icon) and select Edit Page.
  • Under Custom Components, find your customLabelExampleAura component and drag it on right-hand side top.
  • Click Save and activate.

 

User will see custom label values in aura component. When user will click on the New Case button then one more custom label value will be retrieved from aura component controller using attribute. We will get the following output

Custom Labels In Lightning Aura Component

 

For more details please refer to official link.

Permanent link to this article: https://www.sfdcpoint.com/salesforce/custom-label-in-lightning-aura-component/

Custom Labels In Lightning Web Component(LWC)

Custom Labels In Lightning Web Component(LWC)

Custom Labels In Lightning Web Component(LWC)

Custom labels are custom text values that can be accessed from LWC Component, Aura Component, Apex classes, Visualforce pages. The values can be translated into any language Salesforce supports. Custom labels enable developers to create multilingual applications by automatically presenting information (for example, help text or error messages) in a user’s native language.

In this post we will see how to use custom label in LWC component. If you want to add custom label in aura component please refer Custom Labels In Lightning Aura Component

Create Custom Labels

Go To Setup — Create — Custom Labels. Click on New Custom Labels. Enter value for name, value and description. We can use custom label name to access custom label value in apex code using System.Label.labelName

The advantage of using a custom label is that label will be displayed to user depending on their language automatically. We need to specify translation for label using translation workbench.

Use Custom Labels in LWC

Using custom label in LWC is easy. To import a label in a Lightning Web Component JavaScript file, use @salesforce/label in an import statement.

import labelName from '@salesforce/label/label-reference';
  • labelName: It is name that refers to the label in LWC.
  • labelReference: The name of the label in your org in the format namespace.labelName. If there is no namespace then simply use labelName.

Custom Labels In Lightning Web Component(LWC) Example

First, let’s create 3 labels from Setup — Create — Custom Labels. Click on New Custom Labels. Enter value for name, value and description.

  • WelcomeNoteLabel: Welcome to SFDCPOINT
  • HomePageNewsLabel: Your home page news
  • NewCaseLabel: New Case

Now create new lightning web component with name customLabelExampleLWC. Here is code

customLabelExampleLWC.html

<template>
    <lightning-card  title={label.WelcomeLabel} variant="narrow">
        <p>
            <lightning-button label={label.NewCaseLabel}></lightning-button>
        </p>
        <p>{label.HomePageLabel}</p>
    </lightning-card>
</template>

customLabelExampleLWC.js

import { LightningElement } from 'lwc';
// importing Custom Label
import WelcomeLabel from '@salesforce/label/c.WelcomeNoteLabel';
import HomePageLabel from '@salesforce/label/c.HomePageNewsLabel';
import NewCaseLabel from '@salesforce/label/c.NewCaseLabel';
export default class CustomLabelExampleLWC extends LightningElement {
    label = {
        WelcomeLabel,
        HomePageLabel,
        NewCaseLabel
    };
}

customLabelExampleLWC.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <targets> 
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Now we can add this lwc component on home page.

  • Go to Home page
  • Click Setup (Gear Icon) and select Edit Page.
  • Under Custom Components, find your modalPopupLWC component and drag it on right-hand side top.
  • Click Save and activate.

 

We will get the following output

Custom Labels In Lightning Web Component(LWC)

For more details please refer to official link

Permanent link to this article: https://www.sfdcpoint.com/salesforce/custom-labels-in-lightning-web-component-lwc/

Modal/Popup Lightning Web Component(LWC)

Modal/Popup Lightning Web Component(LWC)

Modal/Popup Lightning Web Component(LWC) Salesforce

In this post, We will simply create a custom Modal/Popup Box in the lightning web component(LWC).

What is Modal in Salesforce Lightning Experience?

Modals/Popup Box are used to display content in a layer above the app. This paradigm is used in cases such as the creation or editing of a record, as well as various types of messaging and wizards.

Modal/Popup Lightning Web Component(LWC) Salesforce looks like following image

Modal:Popup Lightning Web Component(LWC)

 

This post is about creating Modal/Popup in Lightning Web Component(LWC). If you want to know how to create Modal/Popup in Lightning aura component, please refer to Modal/Popup Lightning Component Salesforce

ModalPopup Example Lightning Web component(LWC)

In this code we are first declaring ‘isModalOpen’ attribute and setting its default value as false. Then using template if:true we are conditionally displaying modal/popup on click of button.

Also code has following three main part

  • section
  • header
  • footer

Details are explained in code comment.

Following is expected markup

Expected markup in in modal/popup

  • Modal has role="dialog"
  • When the modal is open, everything behind it has HTML attribute aria-hidden="true", so assistive technology won’t read out the underlying page. The best way to do this is to give the modal and the page separate wrapper elements and toggle aria-hidden="true"/aria-hidden="false" on the main page’s wrapper depending on whether or not the modal is open.
  • Modal contains an HTML heading
  • Modal has an aria-labelledby attribute whose value is the id of the modal’s heading

 

modalPopupLWC.html

<template>
    <!-- lightning button for open modal window -->
    <lightning-button variant="brand"
       label="What is Modal/PopUp in LWC?"
       title="What is Modal/PopUp in LWC?"
       onclick={openModal}
       class="slds-m-left_x-small">
    </lightning-button>
    <!--Use template if:true to display/hide popup based on isModalOpen value-->  
    <template if:true={isModalOpen}>
        <!-- Modal/Popup Box LWC starts here -->
        <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
            <div class="slds-modal__container">
                <!-- Modal/Popup Box LWC header here -->
                <header class="slds-modal__header">
                    <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={closeModal}>
                        <lightning-icon icon-name="utility:close"
                            alternative-text="close"
                            variant="inverse"
                            size="small" ></lightning-icon>
                        <span class="slds-assistive-text">Close</span>
                    </button>
                    <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Modal/PopUp Box header LWC</h2>
                </header>
                <!-- Modal/Popup Box LWC body starts here -->
                <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                    <p><b>Modals/Popup Box are used to display content in a layer above the app.
                    </b></p>
                    <p><b>This paradigm is used in cases such as the creation or editing of a record, as well as various types of messaging and wizards.
                    </b></p>
                </div>
                <!-- Modal/Popup Box LWC footer starts here -->
                <footer class="slds-modal__footer">
                    <button class="slds-button slds-button_neutral" onclick={closeModal} title="Cancel">Cancel</button>
                    <button class="slds-button slds-button_brand" onclick={submitDetails} title="OK">OK</button>
                </footer>
            </div>
        </section>
        <div class="slds-backdrop slds-backdrop_open"></div>
    </template>
 </template>

 

modalPopupLWC.js

import { LightningElement,track } from 'lwc';
export default class ModalPopupLWC extends LightningElement {
    //Boolean tracked variable to indicate if modal is open or not default value is false as modal is closed when page is loaded 
    @track isModalOpen = false;
    openModal() {
        // to open modal set isModalOpen tarck value as true
        this.isModalOpen = true;
    }
    closeModal() {
        // to close modal set isModalOpen tarck value as false
        this.isModalOpen = false;
    }
    submitDetails() {
        // to close modal set isModalOpen tarck value as false
        //Add your code to call apex method or do some processing
        this.isModalOpen = false;
    }
}

 

modalPopupLWC.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <targets> 
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Now we can add this lwc component on home page.

  • Go to Home page
  • Click Setup (Gear Icon) and select Edit Page.
  • Under Custom Components, find your modalPopupLWC component and drag it on right-hand side top.
  • Click Save and activate.

 

User will see button in home page. After clicking the button user will see popup as shown in image above.

More details about lightning modal/popup

Modals always have an equal amount of space at the top and bottom to account for the height of the close button.

Modals grow according to how much content is within, but once the modal reaches full height (including the previously mentioned space on top and bottom), the content area will begin to scroll. (This scrolling is currently not available in Salesforce1 Mobile.)

For more details about modal in lightning, please refer to modal lightning

Permanent link to this article: https://www.sfdcpoint.com/salesforce/modal-popup-lightning-web-component-lwc/

What Is Salesforce

What is Salesforce

What is Salesforce?

Salesforce is the world’s #1 customer relationship management (CRM) platform. Salesforce provides cloud-based, CRM applications for sales, service, marketing, and more.

What is Salesforce

Salesforce has essentially changed how enterprise software is delivered and used. Its software is cloud-based and hence doesn’t need IT experts to set up anything. Salesforce has defined the ideal way as how to connect with customers. Building meaningful and lasting bond with the customers, identifying their needs, address problems faster and deploy apps that are customer focused is all possible through Salesforce.

Salesforce Technologies is one of the leading and very hot Technology in IT industry. Through Salesforce.com Technology thousands of Job opportunity are created for Salesforce developers and Salesforce Administration Job Seekers. As per Forbes magazine, nearly 55% of enterprises predict cloud computing will enable new business model in three years. So Salesforce is one of the Cloud Computing Technology which have bright future in the upcoming years. Salesforce provides different enterprise cloud computing applications to all size industries and businesses.

Salesforce applications are provided on subscription basis primarily through direct sales effort and indirectly through partners.

Salesforce Cloud Products:

Salesforce Sales Cloud

Salesforce Sales Cloud is a customer relationship management (CRM) platform designed to support sales, marketing and customer support in both business-to-business (B2B) and business-to-customer (B2C) contexts. Sales Cloud is the most popular salesforce cloud product.

Sales Cloud puts all your customer information in one place, gives you insight into your customers, and even gives you intelligent alerts about the best leads. You can see real-time reports of how the business is doing, and the intuitive workspace helps you be productive.

Sales Cloud is a fully customizable product that brings all the customer information together in an integrated platform that incorporates marketing, lead generation, sales, customer service and business analytics and provides access to thousands of applications through the AppExchange. The platform is provided as Software as a Service (SaaS) for browser-based access; a mobile app is also available. A real-time social feed for collaboration allows users to share information or ask questions of the user community.

Salesforce Marketing Cloud

Salesforce Marketing Cloud is a provider of digital marketing automation and analytics software and services. It was founded in 2000 under the name ExactTarget. ExactTarget was renamed to Salesforce Marketing Cloud in 2014 after the acquisition by Salesforce.

Salesforce Marketing Cloud develops marketing automation and analytics software for email, mobile, social and online marketing. It also offers consulting and implementation services.[27] The software is sold primarily on a multi-year subscription basis. The price of the subscription is based on what features are enabled, number of users and level of customer service.

Salesforce Service Cloud

Service Cloud is a customer service and support application. It helps keep your customers happy and your support team sane, whether your customers reach out to you by email, phone, social media, online communities, or real-time Web chat. These different ways of reaching out are called channels, and they help you help your customers through their preferred communication tool. Giving your customers a choice in how they communicate with your company is the first step towards delivering extraordinary service.

Salesforce Einstein

Salesforce Einstein is a set of best-in-class platform services that bring advanced AI capabilities into the core of the Customer Success Platform, making Salesforce the world’s smartest CRM.

Powered by advanced machine learning, deep learning, predictive analytics, natural language processing and smart data discovery, Einstein’s models will be automatically customized for every single customer, and it will learn, self-tune, and get smarter with every interaction and additional piece of data. Most importantly, Einstein’s intelligence will be embedded within the context of business, automatically discovering relevant insights, predicting future behavior, proactively recommending best next actions and even automating tasks. With Einstein, the world’s #1 CRM is now the world’s smartest CRM and we’re bringing intelligence to all of our clouds. But don’t take my word for it. See below to hear from our Cloud GMs about what Einstein means for all our clouds.

Community Cloud

Community cloud you create an online community  to connect with the important folks in your life (you know, customers, partners, and employees) in a new and different way.

Here are some common use cases of community

Customer Service and Account Portals
Empower your customers to find solutions to their customer-service issues on their own with access to your knowledge base, your service agents, and peer-to-peer support. In addition, give customers access to their data in a member portal.
Partner Relationship Management and Channel Sales
Increase your (and your partners’) revenue stream by collaborating on opportunities and deals. Onboard partners quickly by sharing content and training materials.
Employee Relationships
Retain happier employees by providing a space for them to easily complete their onboarding, learn about benefits, and resolve HR issues.

Commerce Cloud

Commerce Cloud is a cloud-based online business stage that can oversee items giving a wide scope of offices. It conveys a complete computerized involvement to its clients. It upgrades clients’ shopping background. It associates the clients or customers with the correct item at the opportune time. It is utilized for associating merchandisers with the correct data they need so as to settle on the correct business choices with Artificial Intelligence.

 

Technologies in Salesforce

Apex

Apex is a programming language that empowers designers to execute stream and trade control enunciations on the Force.com organize. As a tech lingo, Apex is composed, easy to use, data connected with, careful, encouraged, multitenant careful, normally upgradeable, easy to test, and shaped. For more details about apex please refer What is Apex

Visualforce

Visualforce is a structure that enables the creation of dynamic, reusable interfaces that can be encouraged locally on the Force.com. It might be used to make entire custom pages inside a Salesforce affiliation, or planners can interface their own one of a kind method of reasoning with a controller class written in Apex. Creators can use Visualforce pages to override standard gets, revoke tab audit pages, describe custom tabs, embed parts in detail page designs, make dashboard portions, re-try sidebars in the Salesforce support, and incorporate menu things.

Salesforce Lightning

Salesforce Lightning is the collection of tools and technologies behind a significant upgrade to the Salesforce platform. Lightning includes:

  • Experience: A set of modern user interfaces optimized for speed. This includes the Lightning Experience, Salesforce1 Mobile app and template-based communities.
  • Lightning Component Framework: A JavaScript framework and set of standard components that allow you to build reusable components to customize the Lightning Experience, Salesforce1 Mobile app and template-based communities and build your own standalone apps.
  • Visual Building Tools: Drag-and-drop technologies for fast and easy app building & customizations. Use the Lightning App Builder to customize the Lightning Experience and Salesforce1 Mobile app. Use the Community Builder to customize template-based communities.
  • Lightning Exchange: A section of the AppExchange where you can find 70+ partner components to jumpstart your development.
  • Lightning Design System: Style guides and modern enterprise UX best practices to build pixel perfect apps that match the look and feel of the Lightning Experience and Salesforce1 Mobile app.

For more details about lightning please refer Salesforce Lightning

Permanent link to this article: https://www.sfdcpoint.com/salesforce/what-is-salesforce/

API Full Form? What is API?

API Full Form? What is API?

What is the full form of API?

API full form is Application Programming Interface. API is an interface or communication protocol that allows two applications to talk to each other. API is an interface or communication protocol between different parts of a computer program intended to simplify the implementation and maintenance of software. API is a set of routines, protocols and tools for building software and applications.

API Full Form

 

API stands for Application Programming Interface.  API allows two applications to talk to each other. A programmer writing an application program can make a request to other System using API (using graphical user interface or command interface). It is a set of routines, protocols and tools for building software and applications.

An API may be for a web-based system, operating system, database system, computer hardware, or software library.

APIs let your product or service communicate with other products and services without having to know how they’re implemented. This can simplify app development, saving time and money. When you’re designing new tools and products—or managing existing ones—APIs give you flexibility; simplify design, administration, and use; and provide opportunities for innovation.

APIs by use cases

APIs can be classified according to the systems for which they are designed.

Database APIs. Database APIs enable communication between an application and a database management system. Developers work with databases by writing queries to access data, change tables, etc. The Drupal 7 Database API, for example, allows users to write unified queries for different databases, both proprietary and open source (Oracle, MongoDB, PostgreSQL, MySQL, CouchDB, and MSSQL).

Another example is ORDS database API, which is embedded into Oracle REST Data Services.

Operating systems APIs. This group of APIs defines how applications use the resources and services of operating systems. Every OS has its set of APIs, for instance, Windows API or Linux API (kernel–user space API and kernel internal API).

Apple provides API reference for macOS and iOS in its developer documentation. APIs for building applications for Apple’s macOS desktop operating system are included in the Cocoa set of developer tools. Those building apps for the iOS mobile operating system use Cocoa Touch – a modified version of Cocoa.

Remote APIs. Remote APIs define standards of interaction for applications running on different machines. In other words, one software product accesses resources located outside the device that requests them, which explains the name. Since two remotely located applications are connected over a communications network, particularly the internet, most remote APIs are written based on web standards. Java Database Connectivity API and Java Remote Method Invocation API are two examples of remote application programming interfaces.

Web APIs. This API class is the most common. Web APIs provide machine-readable data and functionality transfer between web-based systems which represent client-server architecture. These APIs mainly deliver requests from web applications and responses from servers using Hypertext Transfer Protocol (HTTP).

Developers can use web APIs to extend the functionality of their apps or sites. For instance, the Pinterest API comes with tools for adding users’ Pinterest data like boards or Pins to a website. Google Maps API enables the addition of a map with an organization’s location.

In today’s modern era, Web API is most popular API. Web API is used in our day to day use of mobile phone, laptop and other smart devices.

A Web API is an application programming interface for either a web server or a web browser. It is a web development concept, usually limited to a web application’s client-side (including any web frameworks being used)

API Release policies

APIs are one of the more common ways technology companies integrate with each other. Those that provide and use APIs are considered as being members of a business ecosystem.

The main policies for releasing an API are:

  • Private: The API is for internal company use only.
  • Partner: Only specific business partners can use the API. For example, transportation network companies such as Uber and Lyft allow approved third-party developers to directly order rides from within their apps. This allows the companies to exercise quality control by curating which apps have access to the API, and provides them with an additional revenue stream.[31]
  • Public: The API is available for use by the public. For example, Microsoft makes the Microsoft Windows API public, and Apple releases its APIs Carbon and Cocoa, so that software can be written for their platforms.

Example of an API

Most common example of using API is using google map. When we are using google map, we perform different type of requests like finding route between two points. Apps like Uber also use google API in background in their app.

REST API(Representational state transfer)

Representational state transfer (REST) is a software architectural style that defines a set of constraints to be used for creating Web services. Web services that conform to the REST architectural style, called RESTful Web services, provide interoperability between computer systems on the Internet. RESTful Web services allow the requesting systems to access and manipulate textual representations of Web resources by using a uniform and predefined set of stateless operations. Other kinds of Web services, such as SOAP Web services, expose their own arbitrary sets of operations.

REST API provides a powerful, convenient, and simple REST-based web services interface for interacting with Salesforce. Its advantages include ease of integration and development, and it’s an excellent choice of technology for use with mobile applications and web projects. For certain projects, you may want to use REST API with other Salesforce REST APIs. To build UI for creating, reading, updating, and deleting records, including building UI for list views, actions, and dependent picklists, use User Interface API. To build UI for Chatter, communities, or recommendations, use Chatter REST API. If you have many records to process, consider using Bulk API, which is based on REST principles and optimized for large sets of data.

What are methods in REST

  • GET : Retrieve data identified by a URL.
  • POST : Create a resource or post data to the server.
  • DELETE : Delete a resource identified by a URL.
  • PUT : Create or replace the resource sent in the request body.
  • PATCH : Update all the representations of the member resources of the collection resource using the instructions in the request body, or may create the collection resource if it does not exist.

 

SOAP API(Simple Object Access Protocol)

SOAP (abbreviation for Simple Object Access Protocol) is a messaging protocol specification for exchanging structured information in the implementation of web services in computer networks. Its purpose is to provide extensibility, neutrality, verbosity and independence. It uses XML Information Set for its message format, and relies on application layer protocols, most often Hypertext Transfer Protocol (HTTP), although some legacy systems communicate over Simple Mail Transfer Protocol (SMTP), for message negotiation and transmission.

SOAP allows developers to invoke processes running on disparate operating systems (such as Windows, macOS, and Linux) to authenticate, authorize, and communicate using Extensible Markup Language (XML). Since Web protocols like HTTP are installed and running on all operating systems, SOAP allows clients to invoke web services and receive responses independent of language and platforms.

 

What is difference between SOAP and REST?

SOAP API: The Simple Object Access Protocol (SOAP) is an attempt to define a standard for creating web service APIs. It is a pattern, a web service architecture, which specifies the basic rules to be considered while designing web service platforms. It typically uses HTTP as a layer 7 protocol, although this is not mandatory.

The SOAP message itself consists of an envelope, inside of which are the SOAP headers and body, the actual information we want to send. It is based on the standard XML format, designed especially to transport and store structured data. SOAP may also refer to the format of the XML that the envelope uses. SOAP is a mature standard and is heavily used in many systems, but it does not use many of the functionality build in HTTP. While some consider it slow, it provides a heavy set of functionality which is a necessity in many cases. It might now be the best solution for browser-based clients, due to its custom format.

  • Supports data in the form of XML only and not JSON.
  • Requires WSDL for the integration
  • Use SOAP API in any language that supports Web services.

 

REST API: The Representational State Transfer (REST) is another architectural pattern (resource-oriented), an alternative to SOAP. Unlike SOAP, RESTful applications use the HTTP build-in headers (with a variety of media-types) to carry meta information and use the GET, POST, PUT and DELETE verbs to perform CRUD operations. REST is resource-oriented and uses clean URLs (or RESTful URLs).

  • Supports both XML and JSON format
  • Preferred for mobile and web apps since JSON being Lighter the app runs smoother and faster

 

For more detail about API, refer to wikipedia page.

For more details about integration and API in salesforce please refer Salesforce Integration Interview questions and answers

Permanent link to this article: https://www.sfdcpoint.com/salesforce/api-full-form/

Salesforce Web to Lead

Salesforce Web to Lead

What is Salesforce Web to Lead

Salesforce web to lead is used to capture the leads from your website and save in Salesforce. This is built in functionality in Salesforce.  A web-to-lead form is an essential component of marketing and sales automation. Its purpose is to capture data submitted by website visitors, such as contact information and product interest, and store it as a “Lead” record in  Salesforce.

How to setup web to lead Salesforce

  • Salesforce Classic : Go to Setup -> Customize -> Leads -> Web-to-lead
  • Salesforce lightning: Go to Setup -> Feature Settings -> Marketing -> Web-to LeadWeb To Lead Salesforce setup
  • Click on Create Web -to-Lead Form
  • Select the fields you want on the form, give the redirect URL,
  • Uncheck checkbox Include reCAPTCHA in HTML. Or if you want to enter recaptcha , enter the API Key Pair information. For more details please refer Salesforce Web to lead form with reCAPTCHA
  • Click on Generate
    Web To Lead Salesforce setup details
  • Following html code is generated
    <!--  ----------------------------------------------------------------------  -->
    <!--  NOTE: Please add the following <META> element to your page <HEAD>.      -->
    <!--  If necessary, please modify the charset parameter to specify the        -->
    <!--  character set of your HTML page.                                        -->
    <!--  ----------------------------------------------------------------------  -->
    
    <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8">
    
    <!--  ----------------------------------------------------------------------  -->
    <!--  NOTE: Please add the following <FORM> element to your page.             -->
    <!--  ----------------------------------------------------------------------  -->
    
    <form action="https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">
    
    <input type=hidden name="oid" value="00D1t000000sTJD">
    <input type=hidden name="retURL" value="http://www.sfdcpoint.com/Thank_you.html">
    
    <!--  ----------------------------------------------------------------------  -->
    <!--  NOTE: These fields are optional debugging elements. Please uncomment    -->
    <!--  these lines if you wish to test in debug mode.                          -->
    <!--  <input type="hidden" name="debug" value=1>                              -->
    <!--  <input type="hidden" name="debugEmail"                                  -->
    <!--  value="dureja.ankush90@gmail.com">                                      -->
    <!--  ----------------------------------------------------------------------  -->
    
    <label for="first_name">First Name</label><input  id="first_name" maxlength="40" name="first_name" size="20" type="text" /><br>
    
    <label for="last_name">Last Name</label><input  id="last_name" maxlength="80" name="last_name" size="20" type="text" /><br>
    
    <label for="email">Email</label><input  id="email" maxlength="80" name="email" size="20" type="text" /><br>
    
    <label for="company">Company</label><input  id="company" maxlength="40" name="company" size="20" type="text" /><br>
    
    <label for="city">City</label><input  id="city" maxlength="40" name="city" size="20" type="text" /><br>
    
    <label for="state">State/Province</label><input  id="state" maxlength="20" name="state" size="20" type="text" /><br>
    
    <input type="submit" name="submit">
    
    </form>
    
  • Copy and Paste the above HTML code in your website. In the generated code, you can edit the CSS as per requirement so that it should look as per the theme of website.
  • User will submit details from your website. Lead record will be created in salesforce.

 

Enable Web- to-lead

We have ‘Edit button’ with ‘Generate Web to lead button. We can use it enable web to lead. Here are some setting in this page

Web-to-Lead Enabled: Enable web to lead form in your org.

Require reCAPTCHA Verification : To reduce spam, require reCAPTCHA verification for customers’ requests. When enabled, requests without verification don’t generate leads. After enabling, confirm that your HTML includes the reCAPTCHA information.

Default Record Creator – The user who will be listed as Creator when a Lead is created online. In most cases this will be the Lead Record Owner, but if configured, Lead Auto-Assignment rules may change the ownership. Also this will be the User that will send out the Default email response template (see below) unless Auto-Response Rules are configured – keep reading!

Default Response Template –Use Lead Auto-Response Rules to select different email response templates based on attributes of the leads submitted online. Leads not matching any of the rules will be sent the default response template selected below.

For more details refer to salesforce web to lead official link

Permanent link to this article: https://www.sfdcpoint.com/salesforce/salesforce-web-to-lead/