Change Icon Color in Lightning Web Component

Why fill css property not working for LWC Icon

Lightning Web Component provides hundreds of standard icon to choose from this list. And Lightning Web Components like lightning-icon or button-icon can be used to choose these icons.

If we want to change background color of these icons then only colors we have are green, yellow, red or gray as per their variant success, warning , error or inverse.

If you ever try to change color of these icons using fill property, you would be disappointed. Lightning Web Component used shadow DOM to encapsulate components from outer world, same principal here restricts us changing icon background color.

Try yourself [Not Working]

Continue reading “Change Icon Color in Lightning Web Component”

Solve for Common Errors in Unlocked Packages

How to solve most frequent and common errors in unlocked packages

Error 1 : Language not supported in translation workbench. fr_CA Not available for deploy for this organization.

Solution : This error could be thrown from Salesforce DX while create unlocked package version. To solve this, we need to provide of scratch org configuration file informing that package needs translation. It seems little off that why would unlocked package need path to scratch org , however this is how it is. Example file project-scratch-def.json

{
    "orgName": "DemoScratch",
    "edition": "Developer",
    "features": [],
    "settings": { 
        "chatterSettings": {
            "enableChatter": true
        },
        "lightningExperienceSettings": {
            "enableS1DesktopEnabled": true
        },
        "languageSettings": {
            "enableTranslationWorkbench": true,
            "enableEndUserLanguages": true,
            "enablePlatformLanguages" : true
          }
    }
}

Also, note that edition is developer.

If you use edition enterprise and your unlocked package using some manage package component, it will start throwing various errors.

chances of getting error in enterprise edition lot higher compared to developer edition

Now, Sample command to create unlocked package version

sfdx force:package:version:create -p <package name> -d force-app -k <password> -w 10 -v <dev_hub_user_alias> -f config/project-scratch-def.json

You can refer this blog post for list of all frequently used SFDX commands.

Implement Infinite Scrolling for lightning:datatable

When to use wire vs Imperative approach to call Apex in Lightning Web Component

If you are thinking this post is about implementing infinite scrolling behavior for lightning-datatable component, then you only got half part right. Main purpose of this blog post is to compare side by side @wire vs Imperative way of calling Apex and decide which one to use when?

If you are looking for basics of LWC or how to use LWC in flow, Lightning Message Service, how to call Apex then follow this link.

In this post, you would learn

  • How to call Apex in LWC using @wire
  • How to call Apex in LWC by Imperative approach
  • How to call Apex on component load event equivalent to init in Aura
  • Why would you choose to call Apex either by @wire or Imperative Apex approach
  • How to bind wrapper class in Lightning-datatable component
  • How to enable infinite scrolling in Lightning-datatable by making server call
Continue reading “Implement Infinite Scrolling for lightning:datatable”

Shell Script – Read all file names in Git Pull Request

Shell script to read all files part of Pull Request & iterate through them

In your CI / CD process, it could be very common scenario that you need to know name of all files thats part of any pull request. Example- in Salesforce you want to perform delta deployment with only components that are part of user story.

Below shell script demonstrates how we can read all file names and iterate through it. For Demo purpose, I’m just adding white space at end of each file however you can do anything as per you continuous integration pipeline requirement.

# File name - AddWhitespace.sh 
# Read list of all unique file and store as array - 231327
echo "Provide Pull Request Number"
read prNumber
echo "Your entered $prNumber"
#Read all files that are part of Git
fileNames=$(  git log origin/remoteBranchName --grep "$prNumber"  --pretty=format: --name-only | grep -v -e "^$" | sort | uniq )
#convert variable to array
IFS=$'\n' array=($fileNames) 
echo "------ Printing file names"
for element in "${array[@]}"
do   
    echo "Trying to add White space in $element"
    printf " " >> $element  
done

To run above file just use command

bash AddWhitespace.sh

Share JavaScript Code in Lightning Web Component to Read URL Parameters

Building Reusable LWC Component to read query string from URL

In this post, we would create a Lightning Web Component that can be shared across other LWC as a JavaScript library.

We are going to create LWC Component to acts as a utility method to read query parameter , as shown below

Continue reading “Share JavaScript Code in Lightning Web Component to Read URL Parameters”

Gravatar – Reusable Lightning Web Component

Author posted by Jitendra on Posted on under category Categories Salesforce and tagged as Tags , with Leave a comment on Gravatar – Reusable Lightning Web Component

Avoid asking your users to upload pictures – Use Globally Recognized Avatar , Reusable Lightning Web Component

Wouldn’t it would be great if we can use existing avatar of user on basis of email id instead of asking user to upload their profile pic ?

Gravatar is Globally recognized avatar used by millions of user and many websites like WordPress, github, stackoverflow etc.

Click here for Live Demo – Gravatar Component on public community

In this post, we would create a reusable lightning component which would receive below three parameters to construct avatar

  1. Email address to render avatar
  2. Size of avatar
  3. Should image be rendered as rounded corner

Gravatar would need MD5 equivalent of email address. There is no native Javascript library to compute MD5 hash, either we have to use Javascript library or we can use Apex to compute MD5 using crypto class. I preferred Apex class instead of any other library a shown below

Continue reading “Gravatar – Reusable Lightning Web Component”

Salesforce Load Testing using SOAPUI

Previously, I have added multiple posts in this blog on how you would face governor limit errors on each step of Salesforce implementation and how we can leverage selenium to perform load testing of Salesforce to some extent.

SOAP UI is powerful tool and in this post we will see how it can be used to perform load testing of Salesforce API.

Step 1 : Download PartnerWSDL from your Salesforce instance and create SOAP UI Project.

Step 2 : Create a Test Suite in SOAP UI

Continue reading “Salesforce Load Testing using SOAPUI”

Limitations of LWC

Author posted by Jitendra on Posted on under category Categories Salesforce and tagged as Tags with 3 Comments on Limitations of LWC

Considerations & Limitations of Lightning Web Component in Salesforce

Almost all of us started using LWC instead of Aura or Visualforce however there are multiple occasion where we need to come back to either Aura or Visualforce.

I was not able to find single consolidated list of limitations of LWC and therefore thought to post this blog.

Feel free to comment on this blog post and help me keep this updated.

Unsupported features of Lightning Web Components

Using Custom Label in Lightning Web Components – LWC

Quick Code Snippet on how to use custom label in Lightning Web Components – LWC

Below is code snippet on using custom labels in Lightning Web Components.

Assume, we have custom label named welcomeText and exitText

In Javascript file of LWC, we have to follow below syntax

// CustomlabelExample.js
import { LightningElement } from 'lwc';
 
// Import custom labels
import welcomeText from '@salesforce/label/c.welcomeText';
import exitText from '@salesforce/label/c.exitText';


export default class CustomLabelExample extends LightningElement { 

    // Expose the labels to use in the template.
    label = {
        welcomeText,
        exitText
    };
}

Notice, how we imported label and used c. if there is no namespace.

import welcomeText from '@salesforce/label/c.welcomeText';
<!-- CustomlabelExample.html -->
<template>
    Hi , {label.welcomeText} !!! 
   <!-- some more code --> 
   Sorry to see you going, {label.exitText}
</template>

Reference :

Sharing records in partner community from different Accounts

As we know there are limited options to share records between community users.

For Customer Community , we can use Sharing set or Sharing Group.

For Customer Community Plus & Partner Community we can use role & Sharing rule. Maximum role that community can have is 3 per account and thats limitation there as well.

Now , lets assume below scenario

Continue reading “Sharing records in partner community from different Accounts”