+ Start a Discussion
Prema -Prema - 

How to create a new lightning component when someone inputs in a field and click on Save button then it should create tthe component with the input made by User..

So whenever user enters any name inside the input field it should create a lightning component. Please help me on this.
Meghna Vijay 7Meghna Vijay 7
Hi Prema,

Use onchange event on the input field and use $A.createComponent to create lightning components dynamically in Javascript controller.

Here is the link to do it:-
https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/js_cb_dynamic_cmp_async.htm
https://salesforce.stackexchange.com/questions/231778/dynamically-create-a-lightning-component-and-put-it-into-a-custom-lightning-comp

Hope it helps, if it does mark it as solved.

Thanks
Prema -Prema -
Hi Meghna,

Thanks for your reply. Could you please let me know how to create it through Metadata API.
Prema -Prema -
I am really new to lightning, Could you please let me know how should i define the controller on the basis of my aura component, I mean how to pass the component id etc.
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<div class="InputField">
        <h2 class="header">Create New Component</h2>
       <lightning:input name="input3" label="" placeholder="Enter name here..."/>
    <lightning:button label="Create" 
                              class="slds-m-top--medium"
                              variant="brand"
                              onclick="{!c.clickCreate}"/>
</div>
    
</aura:component>




Controller.js:

/*createComponentController.js*/
({
    doInit : function(cmp) {
        $A.createComponent(
            "lightning:button",
            {
                "aura:id": "findableAuraId",
                "label": "Create",
                "onclick": cmp.getReference("c.handlePress")
            },
            function(newButton, status, errorMessage){
                //Add the new button to the body array
                if (status === "SUCCESS") {
                    var body = cmp.get("v.body");
                    body.push(newButton);
                    cmp.set("v.body", body);
                }
                else if (status === "INCOMPLETE") {
                    console.log("No response from server or client is offline.")
                    // Show offline error
                }
                else if (status === "ERROR") {
                    console.log("Error: " + errorMessage);
                    // Show error message
                }
            }
        );
    },

    handlePress : function(cmp) {
        // Find the button by the aura:id value
        console.log("button: " + cmp.find("findableAuraId"));
        console.log("button pressed");
    }
})
Meghna Vijay 7Meghna Vijay 7
Hi Prema,

Controller as in Apex Class or Controller.js?

1) For Apex Class <aura:component  class = "Your Class Name " implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction"access="global" >

2) For Controller.js
<aura:handler type="init" value="{!this}" action="{!c.doInit}"/> --> If you want to perform any action on page load
So in your case you have clickCreate which you can use as it is in your js like:-
 clickCreate : function(cmp) { // Find the button by the aura:id value console.log("button: " + cmp.find("findableAuraId")); console.log("button pressed"); }

Hope it helps, if it does mark it as solved.

Thanks
 
Prema -Prema -
Thanks for your reply Meghna. But do you think it'll create a lightning component ? Will it be searchable when we type the name of the component in quick find box or when we navigate to lightning components list.?