Conditional Rendering Standard New Page and LWC

 Hello everyone,

In this post, we will see how to conditionally render an LWC component & a Standard New Page from a ListView.

In this example, we will render an LWC & Standard Page based on Logged In User Profile.

Now let's jump into the steps.

• Click on the Gear icon and navigate to Salesforce Setup.
• Select the Object you want to customize the standard button.
• Now click on the Buttons, Links & Actions.
• Select New Button & Link.
• Select the Display type as List Button (i.e Button which is for ListView) along with content Source as URL.
• Now use the formula given below

{!
IF( $Profile.Name !='System Administrator',
URLFOR("/lightning/cmp/c__SampleLWC", null, null),
URLFOR($Action.Account.New))
}

• In the above Formula, we are checking for the User Profile When he is not System Administrator. Then we are going to load an LWC component(SampleLwc).
• If the User is not the administrator then we are going to display the normal standard Salesforce Page.

• And that's it we are all set to go.

Thanks.

Check Mark animation component in salesforce

Hi,

In this post let's build the typical CHECKMARK we see in Swiggy, PhonePe etc using Lightning Web Components.

Let's use some animation in this post to grab some User attention.

Now let's deep dive into some features we are going to use in this post.

Now let's list down the properties that are used in this post.

HTML Properties:

Scalabe Vector Graphics (svg): This property is used to define the graphics in an XML format. Advantage of using this property is every attribute & element inside the svg tag can be animated.

Circle: This tag is used to create a circle. Few attributes used in creating a circle are cx & cy that defines the x & y co-ordinates of the circle, and r indicates the radius of the circle. stroke-width defines the width of the circle. Fill defines the color to be filled with.

Polyline: A polyline element is tag that is used inside an SVG tag which is used to create points and create a lines between all the points.

CSS Properties:

stroke-dasharray: This is an feature in CSS for creating dashes for an SVG tag. Increasing the number decreases the number of strokes and increasing the space between them.

stroke-dashoffset: This feature in CSS which defines where the dash of an Stroke will begin. 

HTML Code

 <template>  
   <svg>  
     <circle class="path circle" fill="none" stroke="#73AF55" stroke-width="6" stroke-miterlimit="10" cx="65.1"  
       cy="65.1" r="62.1" />  
     <polyline class="path check" fill="none" stroke="#73AF55" stroke-width="6" stroke-linecap="round"  
       stroke-miterlimit="10" points="100.2,40.2 51.5,88.8 29.8,67.5 "></polyline>  
   </svg>  
 </template>  

CSS Code

 .path {  
   stroke-dasharray: 1000;  
   stroke-dashoffset: 100;  
   animation: dash 5s linear alternate infinite;  
 }  
 @keyframes dash {  
   from {  
     stroke-dashoffset: 100;  
   }  
   to {  
     stroke-dashoffset: 2500;  
   }  
 }  

Custom Multi-Select Picklist using LWC

Hello everyone,

In this blog we will see how to create a Generic Multi Select picklist which is better than standard Multi Select Picklist.

Lets create two Components here

1. passMultiSelectValues

2. multiPickListGenericComponent

Where passMultiSelectValues is Parent Component and multiPickListGenericComponent is Child Component.

PreRequisities :

1. Picklist field API Name

2. Picklist selected value to highlight the record.

3. Picklist Values.

Now create Child Component multiPickListGenericComponent and replace the HTML and JS replace the code given below respectively

HTML Code

<template>
  <div class="slds-box slds-col slds-scrollable" style="height: 7rem; padding: initial; background-color: white;">
    <ul role="menu" style="min-width: 100%; width: fit-content;">
      <template for:each={pickListValues} for:item="eachPickList" for:index="index">
        <div key={eachPickList}>
          <li onclick={handleSelection} data-value={eachPickList} data-selected={eachPickList} class="highlightRow">
            <div role="option">
              <span class="slds-media__figure" style="margin-right: 0.25rem;">
                <lightning-icon name="checkIcon" variant="inverse" icon-name="utility:check" size="xx-small"
                  class="addOrRemoveCheck slds-p-left_xx-small"></lightning-icon>
              </span>

              <span class="slds-media__body">
                <span class="slds-truncate" title={eachPickList}>{eachPickList}</span>
              </span>
            </div>
          </li>
        </div>
      </template>
    </ul>
  </div>
</template>

JS Code

import { LightningElement, api, track } from 'lwc';

export default class MultiPickListGenericComponent extends LightningElement {

    @api receivedPickListValues; //Picklist values sent by parent component
    @api selectedValues; //Values that has been selected
    @api fieldApiName; //API Name which makes component to be generic
    @track pickListValues = [];
    @track fieldName;

    selectedPickListValues = [];

    connectedCallback() {
        var i;
        let pickListValues = [];
        if (this.receivedPickListValues !== undefined) {
            this.receivedPickListValues.forEach(eachPicklistValue => {
                if(eachPicklistValue.hasOwnProperty('value')){
                    pickListValues.push(eachPicklistValue.value);
                    this.pickListValues = [...pickListValues];
                }
            });
        }
    }

    renderedCallback() {
        var i;
        if (this.receivedPickListValues !== null && this.receivedPickListValues !== undefined) {
            for (i = 0; i < this.receivedPickListValues.length; i++) {
                if(this.selectedValues !== undefined && this.selectedValues.includes(this.receivedPickListValues[i].value)) {
                    if (this.template.querySelectorAll('.highlightRow')[i].style !== undefined) {
                        this.template.querySelectorAll('.highlightRow')[i].style = 'background-color: rgba(9, 106, 189, 0.85); color : white;cursor: pointer;';
                        this.selectedPickListValues.push(this.receivedPickListValues[i].value);
                    }
                } else {
                    if (this.template.querySelectorAll('.highlightRow')[i].style !== undefined) {
                        this.template.querySelectorAll('.highlightRow')[i].style = 'background-color: white; cursor: pointer;';
                        this.template.querySelectorAll('.addOrRemoveCheck')[i].style = 'opacity :0;';
                    }
                }
            }
        }
    }

    handleSelection(event) {
        var item = event.currentTarget;
        var valueChoosen;
        var options;
        var i, j, k;
        let pickListValues = [];
        let selectedPickListValues1 = [];
        let found = false;
        if (item && item.dataset) {
            valueChoosen = item.dataset.value;
            pickListValues = this.selectedPickListValues;
            options = pickListValues;

            for (i = 0; i < options.length; i++) {
                if (options[i] === valueChoosen) {
                    found = true;
                    for (k = 0; k < this.receivedPickListValues.length; k++) {
                        if (this.receivedPickListValues[k].hasOwnProperty('value')) {
                            if (this.receivedPickListValues[k].value.indexOf(valueChoosen) > -1) {
                                this.template.querySelectorAll('.highlightRow')[k].style = 'background-color: white; cursor: pointer;';
                                this.template.querySelectorAll('.addOrRemoveCheck')[k].style = 'opacity :0;';
                            }
                        }
                    }
                    delete pickListValues[i];
                }
            }

            if (!found) {
                pickListValues.push(valueChoosen);
                for (i = 0; i < this.receivedPickListValues.length; i++) {
                    if (this.receivedPickListValues[i].hasOwnProperty('value')) {
                        if (this.receivedPickListValues[i].value.indexOf(valueChoosen) > -1) {
                            this.template.querySelectorAll('.highlightRow')[i].style = 'background-color: rgba(9, 106, 189, 0.85); color : white; cursor: pointer;';
                            this.template.querySelectorAll('.addOrRemoveCheck')[i].style = 'opacity :1;';
                        }
                    }
                }
            }
        }
        this.selectedPickListValues = pickListValues;
        
        const picklistEvent = new CustomEvent("multipicklistgenericevent", {
            detail: {fieldName: this.fieldApiName, value : this.selectedPickListValues}

        });

        this.dispatchEvent(picklistEvent);
    }

}

Now create a parent component and pass the values that are required to child component passMultiSelectValues

Now replace the code of passMultiSelectValues HTML and JS with the code given below

HTML code

<template>
    <template if:true={pickListValues}>
        <c-multi-pick-list-generic-component received-pick-list-values={pickListValues}
            onmultipicklistgenericevent={multipicklistgenericevent}
            selected-values={fieldValue} field-api-name="Company_Category__c">
        </c-multi-pick-list-generic-component>
    </template>
    <p> Selected Values:  {fieldValue}</p>
</template>

JS Code

import { LightningElement } from 'lwc';

export default class PassMultiSelectValues extends LightningElement {
    fieldValue = 'eCommerce,Retailer,Investor';

    get pickListValues(){
        return[
            {label: 'eCommerce', value: 'eCommerce'},
            {label: 'Health Care', value: 'Health Care'},
            {label: 'Education', value: 'Education'},
            {label: 'Retailer', value: 'Retailer'},
            {label: 'Manufacturer', value: 'Manufacturer'},
            {label: 'Food Service', value: 'Food Service'},
            {label: 'Investor', value: 'Investor'},
        ]
    }

    multipicklistgenericevent(event){
        this.fieldValue = event.detail.value;
    }
}

Callback Methods in Lightning Web Components(LWC)

Callback methods are triggered at a specific phase of a component instance lifecycle.

Callback Methods in Lighting Web Components(lwc)

1. constructor()
2. connectedCallback()
3. disconnectedCallback()
4. render()
5. renderedCallback()
6. errorCallback(error, stack)

constructor()

• This callback method called when the component created.
• This method lifecycle flows from Parent to Child component.
• You can access the host element with this.template.
• we can’t access child elements in the component body because they don’t exist yet.

connectedCallback()

• This callback method called when the element is inserted into a document.
• This method lifecycle flows from Parent to Child Component.
• we can’t access child elements in the component body because they don’t exist yet.
• You can access the host element with this.template.

disconnectedCallback()

• This callback method called when the element is removed from a document.
• This method lifecycle flows from Parent to Child Component.

render()

• This callback method used to conditionally rendering a template or importing a custom one, use render() to override standard rendering functionality. 
• This function gets invoked after connectedCallback() and must return a valid HTML template.

renderedCallback()

• This Method called after every render of the component.
• This callback method is specific to Lightning Web Components, it isn’t from the HTML custom elements specification.
• This method flows from child to parent.

 errorCallback(error, stack)

• This method called when a descendant component throws an error in one of its callback.
•  The error argument is a JavaScript native error object, and the stack argument is a string.
•  This callback method is specific to Lightning Web Components, it isn’t from the HTML custom elements specification.

Apex Data Types and Variables

 Apex uses data types, variables, and related language constructs such as enums, constants, expressions, operators, and assignment statements.

1. Data Types

2. Primitive Data Types

3. Collections

4. Enums

5. Variables

6. Constants

7. Expressions and Operators

8. Assignment Statements

9. Rules of Conversion