Build Highly Flexible Lightning Components using Custom Metadata Types

Yes, you heard that right 🙂

You can build highly flexible lightning components (both Aura and LWC) using this Custom Metadata Types approach.  Now with no more storytelling, I’m going to jump right into the steps.

Before we move into steps, let’s take a look at some of the definition of the key features will be used in this approach.

Custom Metadata Type:

Custom metadata is customizable, deployable, packageable, and upgradeable application metadata. First, you create a custom metadata type, which defines the form of the application metadata. Then you build reusable functionality that determines the behavior based on metadata of that type. You use records to configure your app instead of settings. You can customize, deploy, package, and upgrade application metadata that you design. And you can do much of this work using declarative functionality.

 

Aura Components:

The Lightning Component framework is a UI framework for developing web apps for mobile and desktop devices. It’s a modern framework for building single-page applications with dynamic, responsive user interfaces for Lightning Platform apps. It uses JavaScript on the client side and Apex on the server side.

Lightning Web Components:

Modern browsers are based on web standards, and evolving standards are constantly improving what browsers can present to a user. We want you to be able to take advantage of these innovations.

Lightning Web Components uses core Web Components standards and provides only what’s necessary to perform well in browsers supported by Salesforce. Because it’s built on code that runs natively in browsers, Lightning Web Components is lightweight and delivers exceptional performance. Most of the code you write is standard JavaScript and HTML.

 

Flexible Lightning Components – Design Patterns

1. Leverage Custom metadata / Custom Settings / Custom Labels
2. Empower Admins mindset (use Design Tokens)
3. Avoid declaring metadata in code (Build only skeleton)
4. Highly configurable as possible
5. Build not more than 2 components for a requirement
6. Make it reusable and modular

 

The CMT approach: 

•  Traditional Approach:
  1. Aura/LWC communicates with the Apex controller
  2. Apex Controller communicates with Salesforce Objects (Std/Custom)

• CMT Approach:
  1. Aura/LWC communicates with the Apex controller
  2. Apex Controller communicates with Custom Metadata Types (which stores the data about the metadata for the component)
  3. Then, Apex Controller communicates with the SF object(fetched from the custom metadata type) to pull end-user data

 

Let’s pause here. Let’s dive into a detailed demo. Please click here to listen to a demo I made in the Apex Hours session. Hope this demo will be detailed enough to walk you through the granular steps of this whole approach.

Content Sources: Trailhead, Salesforce help topics