0

I am trying to create components dynamically in a lightning component. However, the HTML markup or DOM inside which these components are being created are also not static. I am also creating the DOM from the JS controller using JavaScript based on back end conditions.

Hence I do not have the option of inserting the attribute inside the component as mentioned in all articles and given below.

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

({
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);
            }
        }
    );
   },

})

I need to create an attribute like {!v.form} directly from the controller/helper and include that in the mark up dynamically so that I can push my component on it. Any suggestions in this aspect?

Ayan Sengupta
  • 147
  • 1
  • 5
  • 15
  • As I understand you want to dynamically assign a component to an attribute right? Maybe just put that attribute in a
    so it's hidden, and make that visible while assigning your component to the attribute. That's the way we're doing it now.
    – Bagpiper001 Jun 24 '16 at 09:03
  • No I am creating the <div> dynamically hence i cannot declare the attribute from before hand. Hence, my question was is there a way to create this attribute dynamically from the controller/helper and inject it into the markup. – Ayan Sengupta Jun 24 '16 at 10:09
  • There may be cases where what you're suggesting makes sense (and there is an aura:unescapedHtml component you might want to read up on) but fundamentally Lightning is supposed to be more of a data-driven approach. Your view markup declaratively describes what to render for various values of data, and when you update the data it updates the view. Any deeper complexity would typically be handled by creating smaller components that have scripted behaviours, so that the parent component can do most of what it needs to declaratively. – Charles T Jun 24 '16 at 13:31
  • Hi Charles. I tried creating a viable component centric solution. However, the complexity I am facing here is that the layout of the forms(28 varieties in this case) I am trying to generate form the same component are random. Hence I am trying to store 2 parameters for each of these.
    1. row count
    2. element in row count

    Now I am generating the generic markup for each row using JavaScript. And then I plan to inject components in them based on the field type of fields which I am getting from a field set configured for that specific selection. Any suggestions as to how I can achieve the same?

     – Ayan Sengupta Jun 26 '16 at 12:14
  • I had a similar issue and one guy helped me with it. Reference to solution comment – ytiq Nov 21 '16 at 11:25

0 Answers0