function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Dwayne JacksonDwayne Jackson 

Dynamic rendering of multiple custom LWCs on a single lightning page?

Hello,
 
Reaching out to ask if there are suggestions/guidance on how to approach implementing a lightning app page with custom LWCs (using LDS) and conditional rendering based on the below structure? The child LWCs displayed will be dependent on the selections made in a multi-select picklist in LWC A. The goal of this is render the essential fields based on the options selected as there are over 300+ fields. Need to CRU all from one action on the page.  Any guidance is much appreciated. Thanks in advance.
 
LWC A -> parent object A
  • LWC 1 -> child object 1
  • LWC 2 -> child object 2
  • LWC 3 -> child object 3
  • LWC 4 -> child object 4
  • LWC n -> child object n
Best Answer chosen by Dwayne Jackson
PriyaPriya (Salesforce Developers) 

Hi Dwayne,

Here you can use the IF condition before rendering child component in parent component. here in IF condition you will check, is name of upcoming child component available in selected list or not. 

Please refer below pseudo code :- 

LWC A controller{
//Array to hold Selected component
const visibleComps = [];


//set all Selected component in this array
visibleComps = getMultiPicklistValue();

isChildCompAvailable(compName){
	isExist = visibleComps.contains(compName);
	return isExist;
}

}


<template>

	//if visibleComps contain LWC 1 then show LWC 1
	<template if:true={isChildCompAvailable('LWC 1')}	>
		<c-lwc-1>
	</template>	

	<template if:true={isChildCompAvailable('LWC 2')}	>
		<c-lwc-2>
	</template>	
</template>

If the above information helps you, please mark it as the best answer.

Regards,

Priya Ranjan

All Answers

PriyaPriya (Salesforce Developers) 

Hi Dwayne,

Here you can use the IF condition before rendering child component in parent component. here in IF condition you will check, is name of upcoming child component available in selected list or not. 

Please refer below pseudo code :- 

LWC A controller{
//Array to hold Selected component
const visibleComps = [];


//set all Selected component in this array
visibleComps = getMultiPicklistValue();

isChildCompAvailable(compName){
	isExist = visibleComps.contains(compName);
	return isExist;
}

}


<template>

	//if visibleComps contain LWC 1 then show LWC 1
	<template if:true={isChildCompAvailable('LWC 1')}	>
		<c-lwc-1>
	</template>	

	<template if:true={isChildCompAvailable('LWC 2')}	>
		<c-lwc-2>
	</template>	
</template>

If the above information helps you, please mark it as the best answer.

Regards,

Priya Ranjan

This was selected as the best answer
Dwayne JacksonDwayne Jackson
@Priya Ranjan, thank you, this was very helpful!
PriyaPriya (Salesforce Developers) 
Glad to Help!!
Dinesh Kumar 405Dinesh Kumar 405
I tired the above logic  but it is throwing a syntax error . can you please provide sample syntax for reference @priya ranjan