Custom Metadata Types vs Custom Settings vs Custom Labels 💬 In plain words: Three lookalikes: Custom Metadata = configuration that DEPLOYS with your code (best for app settings). Custom Settings = org/user-specific values, changeable at runtime (hierarchy type is great for bypass switches). Custom Labels = translatable text for the UI. 📌 Example: API endpoint URLs per environment → Custom Metadata (deploys with code, sandbox vs prod values). A 'Bypass_Automation__c' checkbox an admin flips during data load → hierarchy Custom Setting. The word 'Submit' translated to Hindi → Custom Label. 🎬 Real-Life Example: The Fee Table Trapped Inside Code Skyline charges a different delivery fee per city. Apex needs those rates on every booking. The Old/Bad Way: if (city == 'Delhi') fee = 50. Else if (city == 'Mumbai') fee = 65. … Every rate change is a code change, a test run, and a deployment. Why this is bad: Business data is trappe...
Introduction:
Welcome to Part 4 of our series on Useful JavaScript Methods in LWC (Lightning Web Components). In this blog post, we will continue exploring some powerful JavaScript methods that can enhance your LWC development. We'll provide detailed explanations and working code examples to demonstrate their usage and how they can be leveraged in your Lightning Web Components projects. So, let's dive right in!
Method 1: Array.prototype.filter()
The filter() method creates a new array with all the elements that pass a provided test implemented by a callback function. It allows you to filter elements based on specific conditions.
// Example Usage in LWC
// HTML:
<template>
<lightning-card title="Filtered List">
<ul>
<template for:each={filteredItems} for:item="item">
<li key={item}>{item}</li>
</template>
</ul>
</lightning-card>
</template>
// JavaScript:
import { LightningElement, track } from 'lwc';
export default class FilteredList extends LightningElement {
@track items = ['Apple', 'Banana', 'Cherry', 'Date'];
@track filterTerm = 'a';
get filteredItems() {
return this.items.filter((item) =>
item.toLowerCase().includes(this.filterTerm.toLowerCase())
);
}
}
```
Explanation:
In the example above, we have an array of items and a filter term. The filteredItems getter uses the filter() method to create a new array containing only the elements that include the filter term (case-insensitive). The resulting array is then iterated over using the template for:each directive to display the filtered items in a list.
Method 2: Object.keys()
The Object.keys() method returns an array of a given object's own enumerable property names.
// Example Usage in LWC
// HTML:
<template>
<lightning-card title="Object Properties">
<ul>
<template for:each={objectProperties} for:item="property">
<li key={property}>{property}</li>
</template>
</ul>
</lightning-card>
</template>
// JavaScript:
import { LightningElement, track } from 'lwc';
export default class ObjectProperties extends LightningElement {
@track person = {
name: 'John Doe',
age: 30,
city: 'San Francisco',
};
get objectProperties() {
return Object.keys(this.person);
}
}
Explanation:
In this example, we have an object person with properties like name, age, and city. The objectProperties getter uses Object.keys() to obtain an array of the object's property names. The resulting array is then iterated over to display each property name in a list.
Conclusion:
In this blog post, we explored two more useful JavaScript methods - Array.prototype.filter() and Object.keys() - and demonstrated their implementation in Lightning Web Components (LWC). The filter() method allowed us to create a filtered list based on specific conditions, while Object.keys() helped us retrieve an object's property names for further processing. Incorporating these methods in your LWC projects can significantly enhance your development capabilities.
(Note: The code examples provided are for illustration purposes and may require additional setup or modifications to work correctly in your specific LWC project.)