💃 An immensely needed base LWC 🕺

Good morning, Salesforce Nerds! Today the ChaCha has some extra pep in our step! ⚡️💃🕺⚡️ 

Some news that I’ve personally been waiting for years ⌛️ to arrive just hit the Developer Blog the other day! 🥳 

And my inner programming geek couldn’t be more stoked! 🤘😍 

Despite a handful of my legacy solutions now needing a refactor … 😲 

Today let’s spotlight 🔦 the addition of the Record Picker Component to the base LWC library!

Finally! 🙏 

Agenda for today includes

• An immensely needed base LWC

• Daily Principle

• All the Memes

An immensely needed base LWC

Today we will discuss -

💃 What is it? 🕺

💃 Why should you care?🕺

💃 Let’s see the code!🕺

Job Board | 💃 Click Here 🕺

Socials | 💃 Linkedin | Instagram | Twitter!🕺

🤔 What is it?

First things first -

We gotta give it up 👏 for the Salesforce team building out the base Lightning Web Components!

The more this team churns out 🔄, the more streamlined and powerful our front-end solutions can be! 🤖 

So kudos and a huge THANK YOU for your hard work. 💯 

Okay, so what is the Record Picker Component and why is my nerdy dev heart 💓 going pitter patter over it?

Basically it’s this: 👇️ 

Think about the control that gets added to the Page when you drag a Lookup field 👀 onto the Layout.

It looks like this:

When the user clicks 🖱️ the control it displays a list of records from configured SObject type and allows for various ways of searching. 🔍️ 

We’re all familiar with this. 👍️ 

But, did you know 🤔 that despite there being scores of base LWC’s available to Salesforce devs - this was not one of them! ⁉️ 

Effectively, that means if your solution required a custom LWC that contained a Lookup field like the one above ☝️ then your dev team needs to build one from scratch or come up with an alternative. 🔀 

Through the years many of these “custom, reusable Lookups in LWC” surfaced and hit github. 🌍️ 

They did the trick, but usually required a decent amount of development, testing, tweaking, etc.. 🙄 

🤷 Why should you care?

With the addition ➕ of a new base component your dev team won’t need to spend any time -

• Hashing out requirements related to building one of these

• Actually developing one

• Tweaking an existing one

• Cursing LOUDLY when they need to update one - AGAIN

Take it from me.

While it was kinda cool to make one of these, that only lasted a little while. 🤏 

These got squirrely 🐿️ real quick!

We all know the only constant is change. 🫠 

And that dude Russ from your payroll team is definitely going to break your implementation and then come to you with 7 change requests that don’t make any sense whatsoever. 😆 

… Russ. Why is it always Russ?! 😠 

I digress.

Bottom line - you should care for two main reasons:

1. 🕛️ Time - You and your devs are freed up to focus on important features for the business. Not boilerplate code to populate a simple Lookup field. ❌ 

2. 💪 Reliability - Salesforce provides base LWC’s so we can use them as the building blocks of our custom apps. 📦️ They give users a consistent look & feel, are matured/well-tested, simplify development effort, and are built using core Web Component standards. 🤤 

💻️ Let’s see the code! 

Like Linus Torvalds said -

Talk is cheap. Show me the code. 🤓 

It’s hard to outline the code necessary to create one of these from scratch. 🤷‍♂️ 

But, we can check out a popular repo and get an idea 💡 of what the LOE is to implement one.

Specifically - dig through the README file a bit and you’ll see what I mean …

This just gets you the core of what you need:

1. A way to run a SOQL query

2. Select a record

3. Pull the Id off the record

Now, tweak 🔃 this so you can get all of Russ’s stupid requests into it … 🙄 

All of the sudden,💥 BOOM💥, you now support a piece of 💩 implementation.

Congratulations! 🎉

Better days 🌞🕶️🌴 are ahead, my friends.

All that will be required of your devs?

❌ No Apex

❌ No custom LWC’s

The following bit of code will get you up and running! 🔥 

Examples taken off the intro blog post!

recordPickerWithFilter.html

<template>
    <lightning-record-picker
        label="Select a record"
        placeholder="Search..."
        object-api-name="Contact"
        onchange={handleChange}
        matching-info={matchingInfo}
        display-info={displayInfo}
        filter={filter}
    ></lightning-record-picker>
</template>

recordPickerWithFilter.js

import { LightningElement } from "lwc";

export default class RecordPickerWithFilter extends LightningElement {
  matchingInfo = {
    primaryField: { fieldPath: "Name" },
    additionalFields: [{ fieldPath: "Title" }],
  };
  displayInfo = {
    additionalFields: ["Title"],
  };
  // filter Contacts having Accounts starting with "Madison"
  filter = {
    criteria: [
      {
        fieldPath: "Account.Name",
        operator: "like",
        value: "Madison%",
      },
    ],
  };

  handleChange(event) {
    console.log(`Selected record: ${event.detail.recordId}`);
  }
}

Trust me, from a developer perspective this is a big win! 😉 

Check out the blog post and tech specs!

Then let your friendly Salesforce devs know this is happening! 💃🕺 

Daily Principle

and now....Your Daily Memes