Custom HTML Attributes on Visualforce and usage of its for Dynamic Id

Although this is one of the old feature which Salesforce released a while ago but I think less explored one. As explained in this link, now we can use standard VF components E.g outPutpanel, inputText, selectList and use the custom attributes with them whenever needed. They are mostly useful when we use some external Jquery or angular libraries to have the expected behavior.

However, I used this to solve one of the common issue we faced when we are in  and we can't assign a dynamic Id to standard VF components because of known error:

Literal value is required for attribute id.

This is the VF page code with example of it,



I intentionally didn't make it complex so we can see the usage of custom attributes. Many a time situation comes where we are bind to use VF tags in and want to track the interaction with individual element and do some action based on which element we have interacted with. The most important part of it would be to get the Id. This example shows, how we can fetch the panel Id when we click on it using simple JS which works in all browser.

element.getAttribute(attrName);

with this custom attribute usage, we were able to assign the dynamic Id on {{did}} attribute and were able to fetch it.

The most common use case for this could be, multi edit page in salesforce. Where in each row, which are related to Saleforce record, one or other column need to be shown based on calculation of other columns. E.g total price of quote = quantity * Unit price.