4

Lightning gives us the scope of creating aura components dynamically from the controller/helper using $A.createComponent/createComponents. However, I was wondering if there is a way to create HTML markups like <div> <fieldset> <button> <input> dynamically from the client side controller.

Any suggestions in this aspect?

2 Answers 2

1

While directly $A.createComponent wont support HTML inside it but you can wrap all the HTML inside a lightning component and use $A.createComponent to inject the DOM

<!--c:dynamicHTML-->
<aura:component>
  <div> 
   <fieldset/> 
    <button/> 
     <input/>
 </aura:component>


<!--c:createComponent-->
<aura:component>
  <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
   <p>Dynamically created button</p>
{!v.body}
</aura:component>

/*createComponentController.js*/
({
doInit : function(cmp) {
    $A.createComponent(
        "c:dynamicHTML",
        {
        },
        function(newCmp){
            //Add the new button to the body array
            if (cmp.isValid()) {
                var body = cmp.get("v.body");
                body.push(newCmp);
                cmp.set("v.body", body);
            }
        }
    );
   },

})
5
  • Thanks a lot for the answer Mohith. But that works when the HTML markup is static. What if I want it to be dynamic for different situations or may be based on picklist selection. Some rows might have 1 element, some 2 and some 4 and so on. It is a fully dynamic form I am trying to generate which will basically load a field set based on a picklist selection. Hence I need to keep the HTML markup dynamic. Is there a way to do that? Commented Jun 21, 2016 at 13:07
  • You can use jquery to create DOM elements ,there is nothing stopping you.As long as you are in your component,you can create your own DOM .You can also use plain old JavaScript to do that Commented Jun 21, 2016 at 13:10
  • I haven't used Jqeury with lightning yet. But I read that lightning restricts the editing of DOM from the helper or controller. It can only be done using the renderer. And that supposedly happens automatically when the value of an underlying attribute is changed. So if i do use Jquery in my helper, will I be able to change the DOM directly? Commented Jun 21, 2016 at 13:12
  • salesforce.stackexchange.com/questions/121948/… check this answer.you are free to manipulate Dom you create Commented Jun 21, 2016 at 13:20
  • 1
    Hi mohith. I have been successful in creating the DOM from the helper using javascript. However I want to dynamically insert components inside specific parts of this markup. Lightning is not allowing me to use appendChild for lightning components. How do I inject a component in my dyamically created markup in that case? Commented Jun 24, 2016 at 6:12
1

Why not go old school and use document.createElement in your controller/helper to create your DOM elements and then push them to the DOM via appendChild or similar?

Edit (6/22/2016):

If you really want you can also dynamically create aura:html components via $A.createComponent, but most often this adds an unnecessary amount of complexity and should be avoided if its possible to directly create the DOM elements. Here's an example:

$A.createComponent("aura:html", {"tag":"li", "body":"Some Text", "HTMLAttributes":{"id":"myLi"}},
            function(newCmp, status) {
                // Push newCmp to v.body of existing component
            }
    );
3
  • Thanks Trevor for the suggestion. I was actually wondering if there is a way to do this using aura features itself. Obviously we have JavaScript and JQuery to get it done as a last resort. And I am guessing I am gonna opt for that. Commented Jun 22, 2016 at 5:50
  • I've added an example of how you can use Aura, though I don't recommend using that approach if you can directly create the DOM elements or create a new Aura component, as Mohith suggested. Commented Jun 22, 2016 at 16:46
  • Hi Trevor. I used the old school way of creating DOM elements using JavaScript as Mohith suggested. However, the new challenge I am facing is to insert lightning component from the helper inside this dynamically created DOM. $A.createComponent allows me to push components from helper on predeclared attributes inside the markup. However, in my case, since i am creating the markup dynamically, I do not have an option of pre-defining attributes on the component body. Any suggestions? Commented Jun 24, 2016 at 6:30

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .