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.

CMT

 

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.

Again, looking at a very high level architecture

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.

lwc

 

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

DF19 - Flexible Lightning Components.pptx (1)

 

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

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.