Accessing Specific UI Component

Hello fellow developers,

Here is my problem, I am trying to load different image depending which value is selected in the Select option. The Select option, among with other things, are created in a FormFactory. The form is in a VerticalLayout. The VerticalLayout is inside a top level HorizontalLayout. I’m trying change the image in the top level HorizontalLayoutdepending what is selected in the form. Is there a way to access specific components from a layout?

This is what I’m doing now but every time the option is changed, another image is added

select.addListener( new Property.ValueChangeListener() {

                @Override
                public void valueChange(ValueChangeEvent event) {
                 
                        Embedded tee_icon = new Embedded();
                        tee_icon.setSource( new ExternalResource ("..."));
                       Layout parentLayout = (Layout) form.getParent().getParent();
                       
                       parentLayout.addComponent(tee_icon);

                }
 });   

Thank you very much for your help.

Did I understand correctly that the problem is you’ll get multiple images instead of replaced image? Using replaceComponent(…) instead of addComponent(…) should help with that, although you will naturally need to maintain a reference to the previous image to know which component to replace. You could also implement that listener in the extended HorizontalLayout (so you would have direct access to its contents) and only pass the listener down the component hierarchy to be added to the select.

Thank you for you reply. I moved the code to the Window containing the image where I had direct access to the image. I was able to get the field by form.getField(“PropertyID”). I was unaware of such function and thus the confusion.