Display the list of components and create a dynamic component based on the button click.

Scenario: Display the list of lightning components as buttons and display the component in action on respective button click.

Step 1: Creating individual lightning components as required and storing the component names in an object.

Step 2:Create a Apex Controller Class “DisplayMyLtngComponentsController” which does the query from the object where we are storing the list of lightning component names

public class DisplayMyLtngComponentsController {
@AuraEnabled
public static List<Lightning_Component__c> getLightningComponents(){
return [Select id, name, Component_Name__c from Lightning_Component__c Order By CreatedDate];
}
}

Step 3: Create a Component called “DisplayComponents” as below:

<aura:component controller="DisplayMyLtngComponentsController" implements="forceCommunity:availableForAllPageTypes" access="global">
<aura:handler name="init" action="{!c.fetchComponents}"  value="{!this}" />
<aura:attribute name="lightningComponents" type="Lightning_Component__c[]" />
<aura:attribute name="dynamicComponent" type="String" />
<aura:attribute name="btnValue" type="String" />
<div>
<tr>
<td style="padding-right: 20px">
<div>
<ul>
<aura:iteration items="{!v.lightningComponents}" var="ltngComp">
	<li>
	<lightning:button onclick="{!c.createDynmicComponent}"
label="{!ltngComp.Name}" value="{!ltngComp.singhforce__Component_Name__c}"/></li>
</aura:iteration></ul>
</div></td>
<td>
<div>
<div aura:id="body">
</div>
</div></td>
</tr>
</div>
</aura:component>

 

  • To display the lightning component in the community builder – implement the “forceCommunity:availableForAllPageTypes” interface
  • aura:id=”body” div tag is used to display as a placeholder to display the dynamic component in it.
  • “value” property of <lightning:button> is used to pass the component name to the controller which user has clicked.

Step 4: Below code is for the Component Controller:

({
fetchComponents : function(component, event, helper) {
var action = component.get("c.getLightningComponents");
action.setCallback(this, function(result) {
component.set("v.lightningComponents", result.getReturnValue());
});
$A.enqueueAction(action);
},

createDynmicComponent : function(component, event, helper) {
var dynCompname = "<strong>singhforce</strong>:" + event.target.value;
$A.createComponent(
dynCompname,
{
},
function(newComp) {
var content = component.find("body");
content.set("v.body", newComp);
}
);
}
})

 

  • fetchComponents – used to get all the available lightning components by calling the apex method which was created earlier in Step 2, using the “c” annotation.
  • createDynamicComponent – used to display the component for the respective button (component) value clicked
  • singhforce is the namespace
  • event.target.value will give you the component name on which button was clicked.
  • $A.createcomponent() method is used to create component dynamically in client-side javascript code

You can view this in action here:

Note: You will be getting error while creating account record because the create permission is not provided to the Guest User Profile.

Advertisements

One thought on “Turn On – Lightning Part 2 (Dynamic Creating Component)

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s