Reusing Lightning Components in Aura: Is It Possible?

Question:

I need to create a form in an Aura component that allows users to select 3 out of 5 products. This functionality is similar to the “Order > Add Product” modal in Salesforce. Is there a way to reuse that built-in Lightning UI component within my Aura component markup? Additionally, I want to filter the products shown in the selection to meet specific criteria.
for example:

<lightning:listView objectApiName="Products2" listName="productsView" 
    showActionBar="true" enableInlineEdit="true" showRowLevelActions="true"/>

However, the Product2 object is not supported for the <lightning:listView> component. I also noticed attributes like forceMultiAddUsingLVM and forceListViewManager in the browser inspector, which are data-aura-class attributes of the rendered components.

Is it possible to leverage any of these built-in Lightning components for this purpose? If not, what is the best alternative to achieve this functionality?

CRS Info Solutions offers industry-leading Salesforce training with real-time projects, certification guidance, interview coaching, and a practical approach to make you job-ready.

Answer:

In Salesforce, built-in Lightning components and standard UI elements, such as the “Order > Add Product” modal, are part of the core platform functionality and are not exposed to developers for customization or direct reuse in custom components. These components are integral to Salesforce’s product architecture and cannot be directly included in Aura or Lightning Web Components unless Salesforce explicitly documents such functionality.

If your use case is not supported by components like <lightning:listView>, you will need to build a custom Lightning component. Here’s how you can approach it:

Custom Component Solution:

1. Use a Custom Aura Component or Lightning Web Component:
   Create a custom component that fetches the Product2 records using Apex or JavaScript and displays them in a table or list. Include selection logic to allow users to pick up to three products.
2. Implement Filtering Logic:
   Use custom Apex methods or JavaScript to apply the desired filters to the list of products based on your criteria.
3. Example Aura Component:

Here is an example Aura component to achieve this:
Markup (CMP File):

<aura:component controller="ProductController">
    <aura:attribute name="products" type="List" />
    <aura:attribute name="selectedProducts" type="List" default="[]" />
    
    <lightning:button label="Load Products" onclick="{!c.loadProducts}" />
    <lightning:datatable 
        data="{!v.products}" 
        columns="{!v.columns}" 
        keyField="Id"
        onrowaction="{!c.handleRowAction}" />
</aura:component>

Controller (JS File):

({
    loadProducts: function(component, event, helper) {
        var action = component.get("c.getFilteredProducts");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                component.set("v.products", response.getReturnValue());
            }
        });
        $A.enqueueAction(action);
    },

    handleRowAction: function(component, event, helper) {
        var selectedRows = event.getParam("selectedRows");
        component.set("v.selectedProducts", selectedRows);
    }
})

Apex Controller:

public with sharing class ProductController {
    @AuraEnabled
    public static List<Product2> getFilteredProducts() {
        return [SELECT Id, Name, Pricebook2Id 
                FROM Product2 
                WHERE Active__c = true 
                LIMIT 5];
    }
}

See also: Salesforce training in India

Conclusion:

In summary, while it may initially seem appealing to reuse Salesforce’s built-in Lightning components, these standard UI elements are not designed for direct integration into custom components unless explicitly documented by Salesforce. Their primary purpose is to serve as foundational elements of Salesforce’s internal architecture, not as customizable building blocks for developers.

However, Salesforce’s robust Lightning Component Framework empowers developers to create custom components that replicate or even enhance the functionality of standard components. By leveraging tools like Apex for data retrieval, Lightning Data Table for dynamic rendering, and custom filtering logic, you can design a flexible and scalable solution tailored to your specific use case.

Accelerate Your Career with Salesforce Training in India

Ready to take your career to the next level with Salesforce? CRS Info Solutions offers top-tier Salesforce training in India, tailored to help you master the skills essential for success in the fast-paced Salesforce ecosystem. Led by experienced professionals, our comprehensive courses cover Salesforce Admin, Developer, and AI modules. With a strong focus on real-world project scenarios, we provide you with hands-on experience that prepares you to tackle industry challenges head-on. Whether you’re just starting out or looking to enhance your skills, our structured approach ensures you’re equipped to thrive.

Our Salesforce training in India goes beyond theoretical knowledge by emphasizing practical learning. With personalized guidance, detailed study materials, and expert certification preparation, we ensure you’re fully ready to face interviews and excel in your Salesforce career. Don’t miss the opportunity to gain valuable insights and practical skills—join our free demo class today and embark on your Salesforce journey with confidence! Enroll today for Free demo!