How to implement Label for AbstractSinglePropertyField

Flow
1

I am extending AbstractSinglePropertyField to wrap a Web Component with Java API. How do you implement a Label (caption) for this component?

Code is available at [Github]
(https://github.com/syampillai/IronAutogrowTextArea)

2

Hi Syam, Here is a link for the [tutorial]
(https://github.com/vaadin/flow-and-components-documentation/blob/master/documentation/binding-data/tutorial-flow-field.asciidoc) on how to use the AbstractSinglePropertyField

i hope this one will help you. comment more if you still have any doubt about it.

3

Hi Zhe Sun,
Thank you for your response (Sorry, I was away for the last couple of days).
I had read that article before but that doesn’t say anything about adding a ‘label’ to a component.
I could make my component Composite and add a ‘div’ element to create a label.

I can see that labels in components like TextField, ComboBox etc. are not interpreted properly in FormLayout (FormLayout requires FormItem to be added if labels have to be rendered).

I was thinking about a HasLabel interface (like HasValue).

public interface HasLabel {
	public void setLabel(String label);
	public String getLabel();
}

Layouts such as FormLayout can check if the component getting added has this interface implemented or not and renders the label accordingly.

4

Hi Syam,

There is one thing i am not really sure about the label for the webcomponent [iron-autogrow-textarea]
(https://www.webcomponents.org/element/PolymerElements/iron-autogrow-textarea/demo/demo/index.html) itself. I have tried to add a label to the webcomponent via using dev-tool on chrome, but even i have put the label attribute in, it is still no label shown. Then i found an issue in the github repo, which is [Added aria label to element]
(https://github.com/PolymerElements/iron-autogrow-textarea/pull/97)

i am not sure if it is related to your issue or not.

BR.
Zhe

5

Hi Zhe,
If we set the label attribute in iron-autogrow-textarea, it’s set as aria-label and is useful for assistive technology (e.g. screen reader) only. What I want is to use setLabel(...) to behave like setLabel in TextField.

6

Hi Syam,

if i understand your issue properly, the problem at the moment is after you have used setLabel(), the label is not shown in the UI, right?

So, in this case, what i mean/suppose is the webcomponent itself wont show the label, but it works only as an attribute. i have checked your code and the demo, as we can see there, the getter can properly get the label properly, which means the property has been set correctly.

there is one easy way to test: open the demo of iron-autogrow-textarea, pick up one component demo and try to add label to the dom structure. That is why i have mentioned the component in the last message. Maybe the issue one kinda confuse you.

BR

Zhe

7

Hi Zhe,

Yes, you are right, setting label doesn’t set the real label. I can see that it’s not there in the #shadow-root of that element. So, we need to wrap it with some container to have the label.