The Easy Guide to Mapping Salesforce Object Fields to Apex and LWC JavaScript Data Types

Working with data types is a big part of being a Salesforce developer. You’ll often have to use different data types when writing code in Apex or Lightning Web Components (LWC) JavaScript. It’s super important to map Salesforce object fields to the right data types in Apex and JavaScript. This way, you can be sure your data is accurate and your app runs smoothly. Even though you don’t always need to set data types for JavaScript variables, knowing what data types you’re working with can save you from headaches and help you write better code.

In this blog post, we’re going to give you a handy table that shows you how to map Salesforce object fields data types to Apex and JavaScript data types. This table is perfect for a quick check when you’re coding and helps you understand how different data types work together. We’ll also go through some examples to show you why it’s a good idea to know the data types in JavaScript, even if you don’t always have to set them.

If you’re new to Salesforce Apex or want to dive deeper into Apex data types, we recommend checking out our “Beginner’s Guide to Salesforce Apex: Primitive Data Types and Methods” blog post. This post will help you understand the basics of Apex primitive data types and their methods. And if you want to learn more about working with collections in Apex, such as lists, sets, and maps, take a look at our “Beginner’s Guide to Salesforce Apex: An Introduction to Collections – Lists, Sets, and Maps” blog post.

By the end of this post, you’ll be a pro at working with Salesforce data types in both Apex and JavaScript, and you’ll be able to build more efficient and reliable apps.

Comparing Salesforce Object Fields Data Types in Apex and LWC JavaScript

Why understanding how to map Salesforce object fields to JavaScript data types is important in LWC Development?

You must be wondering why do we care about how to map Salesforce Object fields to Javascript data types if in Javascript we don’t explicitly specify variables data types.

You’re correct. In JavaScript, including Lightning Web Components (LWC), you do not explicitly define the data type of a variable when declaring it. JavaScript is a dynamically-typed language, which means that data types are determined automatically during runtime.

The table provided earlier is to help you understand how Salesforce object fields data types would map to JavaScript data types when you use them in your LWC code. Although you don’t explicitly define the data types in your JavaScript code, it’s essential to be aware of the appropriate data types when manipulating or processing the data within your LWC.

For example, when working with a Date field in LWC, you would typically use JavaScript’s built-in Date object to handle date-related operations. Knowing the data types helps you work effectively with the data and avoid potential issues caused by using inappropriate data types or data type conversions.

Example mapping Salesforce DateTime field to LWC Javascript Date object

Let’s take an example of working with an Account object in Salesforce and displaying its Name (Text), CreatedDate (DateTime) fields in a Lightning Web Component. We will focus on the CreatedDate field and how we can utilize several Javascript method to process the DateTime field in different ways.

<!-- accountDetails.html -->
<template>
    <lightning-card title="Account Details">
        <div class="slds-box">
            <p><b>Name:</b> {accountName}</p>
            <p><b>Created Date as is: </b>{createdDate}</p>
            <p><b>Created Date Formated Date:</b> {formattedCreatedDate}</p>
            <p><b>Created Date Formatted Date String: </b>{formattedCreateDateString}</p>
            <p><b>Full Year Value:</b> {fullYearValue}</p>
            <p><b>Day Value [Sunday - Saturday : 0 - 6] : </b>{dayValue}</p>
            <p><b>Today Date: </b>{todayDate}</p>
            <p><b>Account was Created </b>{daysDifference}<b> days ago!!</b></p>
        </div>
    </lightning-card>
</template>

// accountDetails.js
import { LightningElement, wire, track } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';

const ACCOUNT_FIELDS = ['Account.Name', 'Account.CreatedDate'];
const ACCOUNT_ID = '001XXXXXXXXXXXXXXX'; // Replace with a valid Account Id in Your Org

export default class AccountDetails extends LightningElement {
    @track accountName;
    @track createdDate;

    @wire(getRecord, { recordId: ACCOUNT_ID, fields: ACCOUNT_FIELDS })
    wiredAccount({ error, data }) {
        if (data) {
            this.accountName = data.fields.Name.value;
            
            //Javascript constructor for Date object
            this.createdDate = new Date(data.fields.CreatedDate.value);
        } else if (error) {console.error('Error fetching account data:', error);}
    }

    get formattedCreatedDate() {
      //Javascript method toLocaleDateString used to get the Date Only String 
      //in user Locale
      return this.createdDate ? this.createdDate.toLocaleDateString() : '';
    }
    
    get formattedCreateDateString(){
        //Javascript method toLocaleString used to get the Date and time String 
        //in user Locale
        return this.createdDate? this.createdDate.toLocaleString():'';
    }
    
    get fullYearValue(){
       //Javascript method getFullYear used to get the year value
       return this.createdDate?this.createdDate.getFullYear():'';
    }
    
    get dayValue(){
       //Javascript method getDay used to get the day index of the week
       return this.createdDate?this.createdDate.getDay():'';
    }
    
    get todayDate(){
       return new Date().toLocaleDateString();
    }

    //Used to get the number of days difference between today's date and the created
    //date value of the account
    get daysDifference(){
        if(this.createdDate){
            const today = new Date();
            const diffTime = Math.abs(today - this.createdDate);
            const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
            return diffDays;
        }
        return '';        
    }
}

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

The output when this component is added to the Account Lightning record page would look like:

• Created Date as is: This is using the merge field “{createdDate}”. This is how we are setting createdDate value using the new Date() javascript constructor and passing to it the Salesforce CreateDate field, if you pass a wrong field to the method, it will throw an exception

@wire(getRecord, { recordId: ACCOUNT_ID, fields: ACCOUNT_FIELDS })
    wiredAccount({ error, data }) {
        if (data) {
            this.accountName = data.fields.Name.value;
            this.createdDate = new Date(data.fields.CreatedDate.value);
        } else if (error) {console.error('Error fetching account data:', error);}
    }

• Created Date Formatted: this is using the merge field “{formattedCreatedDate}”. The below code demonstrate how we used the javascript method “toLocaleDateString()” to get the Date String in user local format

 get formattedCreatedDate() {
        return this.createdDate ? this.createdDate.toLocaleDateString() : '';
  }

More examples to illustrate the benefits of knowing the data types in LWC

Number (Currency) Example

Let’s assume you want to display the revenue of an opportunity in a formatted currency string. Knowing that the ‘Amount’ field in the Opportunity object is a Currency data type, which maps to a JavaScript Number, will allow you to use the Intl.NumberFormat object to format the value correctly.

// Assuming you have fetched the 'Amount' value from Salesforce and stored it in a variable
const opportunityAmount = 12345.67;

// Format the opportunityAmount as a currency string
const formattedAmount = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(opportunityAmount);

console.log(formattedAmount); // Output: $12,345.67

Multi-Select Picklist Example

Let’s assume you have a custom object with a Multi-Select Picklist field called ‘Interests__c’. Knowing that this field maps to a JavaScript Array of Strings, you can easily manipulate and process the values in your LWC.

// Assuming you have fetched the 'Interests__c' value from Salesforce and stored it in a variable
const interestsString = 'Reading;Cooking;Hiking;Coding';

// Convert the Multi-Select Picklist string value to an array of strings
const interestsArray = interestsString.split(';');

// Process the interestsArray in your LWC, e.g., displaying the values as a list
//interestsArray ==> ['Reading', 'Cooking', 'Hiking', 'Coding']

Picklist Example

Suppose you have a custom object with a Picklist field called ‘Priority__c’. Knowing that this field maps to a JavaScript String, you can easily compare and process the values in your LWC.

// Assuming you have fetched the 'Priority__c' value from Salesforce and stored it in a variable
const priority = 'High';

// Perform a comparison to take action based on the priority value
if (priority === 'High') {
    // Execute code for high priority cases
} else if (priority === 'Medium') {
    // Execute code for medium priority cases
} else {
    // Execute code for low priority cases
}

Checkbox Example

Let’s assume you have a custom object with a Checkbox field called ‘IsActive__c’. Knowing that this field maps to a JavaScript Boolean, you can easily use it in conditional statements in your LWC.

// Assuming you have fetched the 'IsActive__c' value from Salesforce and stored it in a variable
const isActive = true;

// Use the value in a conditional statement
if (isActive) {
    // Execute code when the record is Active
} else {
    // Execute code when the record is not Active
}

Conclusion

Handling data types effectively is essential for any Salesforce developer working with Apex or Lightning Web Components (LWC) JavaScript. In this blog post, we provided a helpful table for mapping Salesforce object fields data types to their corresponding Apex and JavaScript data types. This table serves as a quick reference and ensures that you can work with different data types confidently and accurately across both platforms.

We also discussed examples that demonstrate the importance of understanding the underlying data types in JavaScript, even when you don’t explicitly define them. By following the guidance provided in this post, you’ll be better equipped to build efficient and reliable Salesforce applications.

With this foundation, you can continue to grow your Salesforce development skills and create increasingly powerful and efficient applications. Happy coding!

Resources

1. Custom Fields: Quick Look
2. Customize a Salesforce Object
3. Custom Field Types
4. Data Modeling
5. Build Lightning Web Components
6. Javascript : Intl.NumberFormat
7. Javascript: Date Object and Methods
8. Rounding and truncating numbers in JavaScript