Docs

Docs

Component Visibility

How component visibility works in Vaadin.

Invisible components are no longer displayed in the UI, nor do they receive updates from the client side. You make a component invisible by calling Component.setVisible(false). Transmission of server-side updates resumes when you make the component visible again.

Tip
 When visibility follows application state — for example, showing a Done button only while a row is being edited — bind it to a signal with Component.bindVisible() rather than calling setVisible() from listeners. See Binding Visibility to a Signal.
Example 1. Making a component invisible, and visible again
Source code
Java
Span label = new Span("My label");
label.setVisible(false);
// this isn't transmitted to the client side
label.setText("Changed my label");

Button makeVisible = new Button("Make visible", evt -> {
    // makes the label visible - only now is the
    // "Changed my label" text transmitted
    label.setVisible(true);
});

If you make a container with child components invisible (e.g., a Div or Vertical/HorizontalLayout), the child components are also made invisible. No server-side updates are sent to them, and no client updates are received from them. When the container becomes visible again, updates to the children also resume.

Hiding before Rendering

If you make a component invisible before it’s rendered for the first time, the corresponding element in the DOM won’t be created. However, the component still exists on the server-side. When you make the component visible again, the corresponding DOM element is created.

Example 2. Making a component invisible before it’s rendered
Source code
Java
Span label = new Span("My label");
label.setVisible(false);

Div container = new Div();
// the label isn't transmitted to the client side.
// The corresponding element is created in the
// DOM only when it becomes visible.
container.add(label);

// prints 1 - the server-side structure is preserved
// regardless of whether the component is visible or not
System.out.println("Number of children: " + container.getChildCount());

Hiding after Rendering

If you make an already rendered component invisible, the corresponding element is not removed from the DOM. Instead, it is marked with the hidden attribute. Furthermore, the element won’t receive any updates from the server. Likewise, the server will ignore any RPCs (Remote Procedure Calls) made from the element.

Binding Visibility to a Signal

Calling setVisible() from event listeners works, but every place that changes the underlying state has to remember to update the component. When visibility follows a piece of application state, bind the component to a signal with Component.bindVisible() and let the framework keep the two synchronized.

Example 3. Showing a button only while editing
Source code
Java
import com.vaadin.flow.signals.local.ValueSignal;

ValueSignal<Boolean> editing = new ValueSignal<>(false);

Button done = new Button("Done");
done.bindVisible(editing);
// The button is hidden until "editing" becomes true

Button edit = new Button("Edit", evt -> editing.set(true));
// Clicking Edit makes the Done button appear -
// no setVisible() call needed

The bound signal can also be a condition computed from other signals, which lets a component react to several pieces of state at once:

Example 4. Deriving visibility from several signals
Source code
Java
ValueSignal<Boolean> formDirty = new ValueSignal<>(false);
ValueSignal<Boolean> submitting = new ValueSignal<>(false);

Button save = new Button("Save");
save.bindVisible(() -> formDirty.get() && !submitting.get());
// Visible only while there are unsaved changes
// and no submission is in progress

While a signal is bound to a component’s visibility, calling setVisible() on that component throws a BindingActiveException. Pass null to bindVisible() to remove the binding if you need to control visibility manually again.

Bound components hide the same way as components hidden with setVisible(), so Hiding before Rendering and Hiding after Rendering apply to them as well.

For the full set of binding methods — text, enabled state, form field values, CSS class names, and more — see Binding Visibility in Component Bindings. For a worked progressive-disclosure form, see Conditional Visibility.

Updated –