Category Archives: Salesforce

Create Custom Object From Spreadsheet In Salesforce

Lightning Object Creator is a new tool to create custom object from spreadsheets with just a few clicks.

Step 1:
Go to Setup | Object Manager | Select Custom Object from Spreadsheet

Step 2:
Upload spreadsheets from Microsoft Excel, Google Sheets, or comma-separated value (CSV) files.

Sample Spreadsheet:

Step 3:
After uploading the spreadsheet, Salesforce will automatically detect the fields. You can customize the Salesforce field name and field data type and you also can add field to page layout.

Step 4:
Define object properties and click on Finish button.

Created new custom object from Spreadsheet:

Get Current User Id in Lightning Web Component

To get current user id in Lightning Web Component, we need to import the "@salesforce/user/Id" Salesforce scoped module.

LWC.html

<template>
    <div class="slds-text-heading_large slds-text-align_center">
        User Id : {currentUserId}
    </div>
</template>

LWC.js

import { LightningElement } from 'lwc';
import UserId from '@salesforce/user/Id';

export default class UserInformation extends LightningElement {
    currentUserId = UserId;
}

Output:

Salesforce Lightning Progress Bar With Conditional Theme

Lightning Component:

<aura:component>
    <!--declare handler for render the JS method for Progress bar-->
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <!--declare attributes for progress bar value-->
    <aura:attribute name="progress" type="Integer" default="0"/>
    <div class="slds-m-around_xx-large">
        <div class="slds-progress-bar slds-progress-bar_large" aria-valuemin="0" aria-valuemax="100" aria-valuenow="{!v.progress}" role="progressbar">
            <span aura:id="prgBar" class="slds-progress-bar__value" style="{!'width:'+v.progress+'%'}">
                <span class="slds-assistive-text">Progress: {!v.progress}%</span>
            </span>
        </div>
    </div>
</aura:component>

Lightning JS Controller:

({
    //Specifying progress === 100 ? clearInterval(interval) : progress + 5 increases
    //the progress value by 5% and stops the animation when the progress reaches 100%
    //The progress bar is updated every 1000 milliseconds.
    doInit:  function (component, event, helper) {
        var interval = setInterval($A.getCallback(function () {
            var progress = component.get('v.progress');
            var prgBar = component.find("prgBar");
            if(progress >= 0){
                $A.util.addClass(prgBar,'slds-is-low');
            }
            if(progress >= 25){
                $A.util.removeClass(prgBar,'slds-is-low');
                $A.util.addClass(prgBar,'slds-is-medium');
            }
            if(progress >= 50){
                $A.util.removeClass(prgBar,'slds-is-medium');
                $A.util.addClass(prgBar,'slds-is-high');
            }
            if(progress >= 75){
                $A.util.removeClass(prgBar,'slds-is-high');
                $A.util.addClass(prgBar,'slds-is-critical');
            }
            component.set('v.progress', progress === 100 ? clearInterval(interval) : progress + 5);
        }), 1000);
    }
})

Lightning Style:

.THIS .slds-is-low {
    background-color: green!important;
}
.THIS .slds-is-medium{
    background-color: yellow!important;
}
.THIS .slds-is-high{
    background-color: orange!important;
}
.THIS .slds-is-critical{
    background-color: red!important;
}

Output:

Progress Indicator in Lightning Web Component

LWCProgressIndicator.html

<template>
    <div class="slds-theme_default">
        <div class="slds-p-around_medium">
            <lightning-progress-indicator type="path" current-step={selectedStep}>
                <lightning-progress-step label="Step1" onstepfocus={selectStep1} value="Step1">
                </lightning-progress-step>
                <lightning-progress-step label="Step2" onstepfocus={selectStep2} value="Step2">
                </lightning-progress-step>
                <lightning-progress-step label="Step3" onstepfocus={selectStep3} value="Step3">
                </lightning-progress-step>
                <lightning-progress-step label="Step4" onstepfocus={selectStep4} value="Step4">
                </lightning-progress-step>
            </lightning-progress-indicator>
            
            <div class="slds-m-vertical_medium">
                <lightning-button label="Back" class="slds-m-left_x-small" onclick={handlePrev}></lightning-button>
                <template if:false={isSelectStep4}>
                    <lightning-button variant="brand" class="slds-m-left_x-small" label="Next" onclick={handleNext}></lightning-button>
                </template>
                <template if:true={isSelectStep4}>
                    <lightning-button variant="brand" class="slds-m-left_x-small" label="Finish" onclick={handleFinish}></lightning-button>
                </template>
            </div>
        </div>
    </div>
</template>

LWCProgressIndicator.js

import { LightningElement, track } from 'lwc';

export default class LWCProgressIndicator extends LightningElement {
    @track selectedStep = 'Step1';

    handleNext() {
        var getselectedStep = this.selectedStep;
        if(getselectedStep === 'Step1'){
            this.selectedStep = 'Step2';
        }
        else if(getselectedStep === 'Step2'){
            this.selectedStep = 'Step3';
        }
        else if(getselectedStep === 'Step3'){
            this.selectedStep = 'Step4';
        }
    }

    handlePrev() {
        var getselectedStep = this.selectedStep;
        if(getselectedStep === 'Step2'){
            this.selectedStep = 'Step1';
        }
        else if(getselectedStep === 'Step3'){
            this.selectedStep = 'Step2';
        }
        else if(getselectedStep === 'Step4'){
            this.selectedStep = 'Step3';
        }
    }
     
    handleFinish() {
        alert('Finished...');
        this.selectedStep = 'Step1';
    }
     
    selectStep1() {
        this.selectedStep = 'Step1';
    }

    selectStep2() {
        this.selectedStep = 'Step2';
    }

    selectStep3() {
        this.selectedStep = 'Step3';
    }

    selectStep4() {
        this.selectedStep = 'Step4';
    }

    get isSelectStep4() {
        return this.selectedStep === "Step4";
    }
}

LWCProgressIndicator.js-meta.xml

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

Output:

Lightning Web Component Progress Bar

LWCProgressBar.html

<template>
    <div class="slds-theme_default">
        <div class="slds-p-around_medium">
            <lightning-progress-bar value={progress}></lightning-progress-bar>
        </div>
    </div>
</template>

LWCProgressBar.js

import { LightningElement, track } from 'lwc';

export default class LWCProgressBar extends LightningElement {
    @track progress = 0;

    connectedCallback() {
        this._interval = setInterval(() => {
            this.progress = this.progress === 100 ? 0 : this.progress + 1;
        }, 200);
    }
}

LWCProgressBar.js-meta.xml

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

Output: