[SalesForce] Dynamically create html components in lightning

Since HTML tags are first class citizens in lightning is there a way to instantiate them as components in lightning? Something like:

    $A.createComponent(
        "html:div",
        {
            "aura:id": "test1",
            "textContent": "test"
        },
        function(div){
            //Add the new button to the body array
            var container = cmp.find("container");
            if (container.isValid()) {
                var body = container.get("v.body");
                body.push(div);
                container.set("v.body", body);
            }
        }
    );

Best Answer

This worked for me:

$A.createComponent(
    "aura:html",
     { 
         tag: "div",
         HTMLAttributes:{"id": "Temp","class": "class name here"}
     },
     function(compo){
          var container = cmp.find("container");
          if (container.isValid()) {
              var body = container.get("v.body");
              body.push(compo);
              container.set("v.body", body);
          }
     }
);

Related Solutions

[SalesForce] How Do I Correctly Handling the Rendering Lifecycle of Dynamically Created Lightning Components

As to your question about waiting to render a component till a server action has concluded, no you can't do it. Aura under the covers has some abilities to do this, but we're trying to remove them and they aren't exposed in the platform version anyway.

The chatter feed kind of has the same issue, the component loads, fetches it's feed items and then draws them. I would suggest you follow the same pattern they do by showing a stencil. (Stencil being a non descriptive image of what the output will eventually kind of look like)

This has the benefit of improving performance for the user who thinks the content is very close to being finished loading.

Dependencies

In regards to dependencies, adding any dependencies to your component has no effect on rendering. It has to do with downloads. When you create a ui:button, it's likely that component is already downloaded from the server. But we can't download every component definition, so if you use one that we don't have yet, we go to the server to fetch it. Using the dependency is a way to tell the system that it should also download x, y, z components so it doesn't need a round trip for each one when it's used.

[SalesForce] Is it possible to call component method instantiated by $A.getComponent()

I'm working on this right now. It appears that aura:id can't take variables, so calling <c:MyComp aura:id="{!index}-childComp" /> will fail.

Instead I'm doing:

<aura:iteration items="{!v.insights}" var="insight" indexVar="indx">
   <c:MInsightCell aura:id="minsight-cell" insight="{!insight}" index="{!indx}" maxCount="{!v.insights.length}"/>
</aura:iteration>

(where index is an attribute on my child component).

To then access the component I do:

var next_index = swiper.activeIndex + 1;
var next_id = next_index+'-minsight-cell';
debugger;
var slides = component.find("minsight-cell");
var next_slide = slides[next_index];
next_slide.preload(next_id);

(I'm using the Swiper library which keeps of track of which index it's on...)

Moral: aura:id is limited, but required if you want to use methods on components.

Best Answer

Related Solutions

[SalesForce] How Do I Correctly Handling the Rendering Lifecycle of Dynamically Created Lightning Components

[SalesForce] Is it possible to call component method instantiated by $A.getComponent()

Related Topic