Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Nic EdwardsNic Edwards 

HTML5 Data Attributes on Lightning Components

Hey,

In VisualForce you can specify a HTML5 data attribute by adding a html tag to the front - e.g.
<apex:input html-data-attribute-name="some data"/>

We are looking at trying a lightning implementation, but similar functionality is cruitial if we are to proceed.  Is there a way to append a HTML5 data attribute to a lightning component - e.g.
<ui:inputText data-attribute-name="some data"/>

Cheers!
Andy BoettcherAndy Boettcher
There are examples of the HTML5 data attributes all over the Lightning developer documentation - I'd say YUP!

https://resources.docs.salesforce.com/sfdc/pdf/lightning.pdf
Nic EdwardsNic Edwards
Hey, thanks for that.  So, which of the 317 pages describes this.  I've tried searching for data, attribute, and completing all the trailheads so I must have just missed it.

Thanks.
Andy BoettcherAndy Boettcher
You have to read between the lines a bit - look at the bottom of page 152 and 216 and you'll see them using the HTML5 data attributes themselves.
ajithMajithM
Here is an example using pass through variable in lightning components. ....
Test.cmp
***************************************

<aura:iteration items="{!v.SearchResults}" var="sr"  indexvar="index">
              <tr onclick="{!c.selected}" data-record="{!sr.Id}">   
               <td><ui:outputText value="{!sr.Id}"/></td>   


___________________________________
TestController.js

selected: function(cmp,event,helper){
        
  
          var selectedItem = event.currentTarget;
          var recId = selectedItem.dataset.record;
Vitalii Kaigorodtsev 7Vitalii Kaigorodtsev 7
ajithM, your answer is helpfull over the years! Thanks!
Miroslav MatovićMiroslav Matović
@ajithM that is setting a dataset attribute on a HTML element, not a component, like ui:inputText. If you try to add a dataset attribute on those, you get errors like: The attribute "data-id" was not found on the COMPONENT markup