May 27, 2021

Dynamic Tab Set with record detail in Salesforce

Sample Code:
 
Apex Class:
public class SampleAuraController {
    
    @AuraEnabled
    public static List < Knowledge__kav > fetchArticles() {
            
        return [ SELECT Id, Title FROM Knowledge__kav LIMIT 5 ];
    
    }
}


Component:
<aura:component implements="force:appHostable" controller="SampleAuraController">
    <aura:handler name = "init" value = "{!this}" action = "{!c.onInit}"/>
    <aura:attribute type="Knowledge__kav[]" name="articleList"/>
    <lightning:card>
        <lightning:tabset>
            <aura:iteration items="{!v.articleList}" var="item">
                <lightning:tab label="{!item.Title}" id="{!item.Id}">
                    <lightning:recordForm
                        recordId="{!item.Id}"
                        objectApiName="Knowledge__kav"
                        layoutType="Full"
                        mode="view" />
                </lightning:tab>
            </aura:iteration>
        </lightning:tabset>
    </lightning:card>
</aura:component>

JavaScript:
({
    
    onInit : function( component, event, helper ) {    
        
        let action = component.get( "c.fetchArticles" );  
        action.setCallback(this, function(response) {  
            let state = response.getState();  
            if ( state === "SUCCESS" ) {  
               
                console.log( "Returned value is " + JSON.stringify( response.getReturnValue() ) );
                component.set( "v.articleList", response.getReturnValue() );
                
            }  else {
                
                let showToast = $A.get( "e.force:showToast" );
                showToast.setParams({
                    title : 'Error',
                    type : 'error',
                    mode : 'sticky',
                    message : 'Some error occured'
                });
                showToast.fire();
                
            }
        });  
        $A.enqueueAction( action );         
        
    }
    
})

Output:


2 comments:

  1. I've tried to mirror your code for my use case but I'm getting error message when I try to save in the Developer Console:Failed to save tabset_rhonda.cmp: Invalid definition for tabset_rhondaController: ApexService.getType() return null with currentNamespace: c, namespace: null, name: tabset_rhondaController: Source

    Here's my component:














    Controller:
    ({onInit : function( component, event, helper ) {

    let action = component.get( "c.tabset_rhondaController" );
    action.setCallback(this, function(response) {
    let state = response.getState();
    if ( state === "SUCCESS" ) {

    console.log( "Returned value is " + JSON.stringify( response.getReturnValue() ) );
    component.set( "v.articleList", response.getReturnValue() );

    } else {

    let showToast = $A.get( "e.force:showToast" );
    showToast.setParams({
    title : 'Error',
    type : 'error',
    mode : 'sticky',
    message : 'Some error occured'
    });
    showToast.fire();

    }
    });
    $A.enqueueAction( action );

    }

    })


    ReplyDelete
    Replies
    1. In my Case, fetchArticles is a method and SampleAuraController is an Apex Class. I will update the post with my Apex Class.

      Delete