[SalesForce] Question about lightning icon and button

I'm trying to create a button in a lightning component, the purpose of this button is to delete a record (in a list of records).

So for now the easiest way to do that is like that :

<button class="slds-button" onclick="{!c.deleteContact}" data-data="{!contact.Id}">delete</button>

because in this kind of button I can put the attibute data that help me to get the id of the record in the javascript, so I can delete the record selected.

But I'd like to replace the word delete in the button with an icon like that :

<button class="slds-button" onclick="{!c.deleteContact}" data-data="{!contact.Id}">
    <lightning:icon iconName="utility:delete" size="small" class="icon" />
</button>

But then when I try to click the delete button I got an error :

[event.target.getAttribute is not a function]

But I only try to add an icon, for me the way the button works is not changed ?

Here is the javascript function in case there is something wrong in it, but that method work when there is no icon in the button (the record is corectly deleted) :

deleteContact : function (component, event, helper) { 
    var id = event.target.getAttribute("data-data") || event.target.parentNode.getAttribute("data-data")
    var action = component.get("c.deleteCon");
    action.setParams({
        "idContact": id
    });
    action.setCallback(this, function(actionResult) {
        component.set("v.contacts", actionResult.getReturnValue());  
        helper.getContacts(component);          
    });
    $A.enqueueAction(action);   
},

Best Answer

The problem is that by adding an icon in the button, the element that is the origin of the event is now the icon. The target property of the event is linked to the originator of the event.

To resolve this, you can use the event.currentTarget property instead of event.target. The currentTarget property will linked to the element attached to the event listener (i.e. your button).

Related Solutions

[SalesForce] Lightning component: Child rows in data table

Is it possible to achieve this without using JQuery?

Yes. If you can do something with JQuery, you can do it without JQuery. It's all JavaScript. As an addendum, anything you can do in JQuery you can do without JQuery and get better performance.

In the interest of keeping things brief, I'm not going to write out a full copy of your code with modifications, but a smaller, more generalized example that demonstrates how to do what you're trying to do.

<aura:application >
    <aura:attribute name="rows" type="Object[]" />
    <aura:handler name="init" value="{!this}" action="{!c.init}" />

    <table>
        <tbody>
            <aura:iteration items="{!v.rows}" var="row" indexVar="rowIndex">
                <tr>
                    <td data-index="{!rowIndex}" onclick="{!c.toggle}">
                        {!row.Name}
                    </td>
                </tr>
                <aura:if isTrue="{!row.expanded}">
                    <aura:iteration items="{!row.children}" var="child">
                        <tr>
                            {!child.Name}
                        </tr>
                    </aura:iteration>
                </aura:if>
            </aura:iteration>
        </tbody>
    </table>
</aura:application>

({
    init: function(cmp, evt) {
        cmp.set("v.rows", [
            {Name: "A",
            expanded: false,
            children: [
            { Name: "A1" },
            { Name: "A2" }
            ]},
            {Name: "B",
            expanded: false,
            children: [
            { Name: "B1" },
            { Name: "B2" }
            ]},
            {Name: "C",
            expanded: false,
            children: [
            { Name: "C1" },
            { Name: "C2" }
            ]}
                ]);
    },
    toggle: function(cmp, evt) {
        var rows = cmp.get("v.rows");
        rows[evt.target.dataset.index].expanded = !rows[evt.target.dataset.index].expanded;
        cmp.set("v.rows", rows);
    }
})

As you can see from this code, it's a trivial matter to simply render the extra rows when the "expanded" attribute has been toggled. You should be able to modify this example to suit your needs.

I've purposefully left out all styling and fluff to get to the heart of the matter, which I think this app demonstrates easily. Most likely, you'll just need to add an "expanded" attribute to your data's information, and then toggle it as appropriate.

There's lots of other things you could do with this as well, such as querying the database, making a callout, or whatever else it is you want/need to do to get the data.

[SalesForce] Line breaks in Lightning component HTML source code put space around the element

All Lightning Design System components presume that you do not include any extra space before or after text/elements. HTML collapses multiple white space into a single white space if any are present. The following are rendered the same:

<a> Link Text </a>

<a>         Link        Text      </a>

<a>
  Link            Text
</a>

This is a problem with HTML in general, not specific to Lightning Components. When in doubt, do not introduce new white space, but instead use the appropriate padding CSS elements provided to you by SLDS.

Specific to Lightning Tabs, it is recommended that there be a space between the text, as demonstrated in the documentation:

 <aura:component>
    <lightning:tabset>
        <lightning:tab>
            <aura:set attribute="label">
                Item One
                <lightning:icon iconName="utility:connected_apps" />
            </aura:set>
        </lightning:tab>
    </lightning:tabset>
</aura:component>

Best Answer

Related Solutions

[SalesForce] Lightning component: Child rows in data table

[SalesForce] Line breaks in Lightning component HTML source code put space around the element

Related Topic