0

I have a custom component which by the means of a button add a row to my table. Now my needs are to add a component to each entry (tr) of the table.

This is my controller:

        var tBody = document.getElementById("tableQuoteLinesBody");

    var row = document.createElement("tr");

    var detail = document.createElement("td");
    detail.appendChild(document.createTextNode("RFQ detail"));

    var product = document.createElement("td");
    product.appendChild(document.createTextNode("Product"));

    var scale = document.createElement("td");
    scale.appendChild(document.createTextNode("Scale"));

    var dDelete = document.createElement("td");
    dDelete.appendChild(document.createTextNode("delete"));

    row.appendChild(detail);
    row.appendChild(product);
    row.appendChild(scale);
    row.appendChild(dDelete);

    $A.createComponent(
        "c:strike_lookup",
        {
            "label":"Account",
            "object":"Account",
            "searchField":"Name",
            "placeholder":"Select an option",
            "iconName":"standard:account",
            "subtitleField":"Industry",
            "order":"Name",
            "limit":"5",
            "loadingMessage":"Loading...",
            "errorMessage":"Invalid input"
        },
        function(bn)
        {
            var bdy = cmp.get("v.body");
            bdy.push(bn);
            cmp.set("v.body",bdy);
        }
    );

While this is my component:

    <table id="tableQuoteLines">
    <thead>
        <tr>
            <th>
                RFQ Detail name
            </th>
            <th>
                Product
            </th>
            <th>
                Scale
            </th>
            <th>
                Delete
            </th>
        </tr>
    </thead>
    <tbody id="tableQuoteLinesBody">
        {!v.body}
    </tbody>
</table>

<lightning:button variant="brand" label="Add Product" title="Add Product" onclick="{! c.addProduct }" />

now obviously the v.body should be placed inside the tr, namely I would need 3 facet for each rows.

I have no idea how to programmatically add and remove facets or if this is the best way of doing this operation.

Any suggestion?

3

This is not the "Lightning" way. The only time you should be using document methods at all is when you're doing fancy stuff in a renderer. The standard method is to use automatic rendering. That's really simple:

<tbody id="tableQuoteLinesBody">
  <aura:iteration items="{!v.quotelines}" var="line">
    <tr>
      <td>{!line.rfqDetail}</td>
      <td>{!line.product}</td>
      <td>{!line.scale}</td>
      <td>{!line.deleteItem}</td>
    </tr>
  </aura:iteration>
</tbody>

To add a new row, it's now incredibly simple:

addProduct: function(component, event, helper) {
  var lines = component.get("v.quotelines");
  lines.push({ rfqDetail: "", product: "", scale: "", deleteItem: "" });
  component.set("v.quotelines", lines);
}

Obviously, this is simplified to get you started, but this is the standard Lightning design pattern. Note that you don't do any rendering of your own, you simply set the data attributes, and Lightning does all the heavy lifting for you.

  • Ok this seems much more clear! Nor my problem is that I get undefined when I do component.get("v.quotelines"), thus I cannot push new lines. Any idea? Anyway Thanks for now!! – Zeno Trevisan Nov 20 '18 at 8:58
  • @ZenoTrevisan You need to have a value to begin with. I usually start off like this: <aura:attribute name="quotelines" type="List" default="[]" /> so that my attribute will have a default value (an empty list). – sfdcfox Nov 20 '18 at 14:04

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.