FormLayout.FormItem hidding items

Flow
1

using : <vaadin.version>14.0.0.rc6</vaadin.version>

what’s the best way to hide items inside FormLayout.FormItem

2

Hi Andrew,

If you want to hide the entire form item, you can do formItem.setVisible. If you want to hide one or more components in the firm item, you’ll have to set their visibility individually.

Note that the form item is still visible even if all components inside of it are hidden.

3

The form-item i am trying to hide “searchValueFormItem”

Done as Marting said
searchValueFormItem.setVisible(false);

but still showing when i view the page.(fullpage2.png)

not sure what i am doing wrong

@Tag("form-search")
@JsModule("./src/form-search.js")
public class FormSearch extends PolymerTemplate<FormSearch.FormSearchModel> {
    /**
     * Creates a new FormSearch.
     */
    @Id("searchValue")
    private TextField searchValue;
    @Id("searchType")
    private ComboBox searchType;
    @Id("serviceType")
    private ComboBox serviceType;
    @Id("searchValueLabel")
    private Label searchValueLabel;
    @Id("searchValueFormItem")
    private FormLayout.FormItem searchValueFormItem;

    public FormSearch() {
        searchValueFormItem.setVisible(false);
    }

form-search.js

import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
import '@vaadin/vaadin-form-layout/src/vaadin-form-layout.js';
import '@vaadin/vaadin-select/src/vaadin-select.js';
import '@vaadin/vaadin-combo-box/src/vaadin-combo-box.js';
import '@vaadin/vaadin-form-layout/src/vaadin-form-item.js';
import '@vaadin/vaadin-text-field/src/vaadin-text-field.js';

class FormSearch extends PolymerElement {

    static get template() {
        return html`
<style include="shared-styles">
                :host {
                    display: block;
                }
                  .headerbackground{
                        background-color: #b5d592;
                        padding-left: 10px;
                 }
                 
                 .testHidden{ display:none}
            </style>
<h1 class="headerbackground">Search</h1>
<vaadin-form-layout style="width: 100%; height: 100%;">
 <vaadin-form-item colspan="2">
  <label slot="label">Search Type</label>
  <vaadin-combo-box class="full-width" id="searchType" on-change="searchTypeChange"></vaadin-combo-box>
 </vaadin-form-item>
 <vaadin-form-item id="searchValueFormItem">
  <label slot="label" id="searchValueLabel">Identification</label>
  <vaadin-text-field class="full-width" id="searchValue" value="" minlength="" maxlength="" tabindex="0" autofocus required prevent-invalid-input="" has-value=""></vaadin-text-field>
 </vaadin-form-item>
 <vaadin-form-item colspan="2">
  <label slot="label">Service Type</label>
  <vaadin-combo-box class="full-width" id="serviceType"></vaadin-combo-box>
 </vaadin-form-item>
</vaadin-form-layout>
`;
    }

    static get is() {
        return 'form-search';
    }

    static get properties() {
        return {
            // Declare your properties here.
        };
    }
}

customElements.define(FormSearch.is, FormSearch);

17793332.png