Filter checkboxes appear blank in Fiori's ViewSettingsDialogs

Question

I am following the tutorials from UI5 Web Components playground and I'm having some issues with the ViewSettingsDialog component. I have set up a simple local hosted web app (following the introductory tutorial) and copy-pasted the code from the playground.

Here's how my main.js file looks like:

import "@ui5/webcomponents-fiori/dist/ViewSettingsDialog";
import "@ui5/webcomponents-fiori/dist/SortItem";
import "@ui5/webcomponents-fiori/dist/FilterItem";

document.querySelector('#app').innerHTML = `  
  <ui5-button id="btnOpenDialog1">Open ViewSettingsDialog</ui5-button>
  <ui5-view-settings-dialog id="vsd1" sort-descending="true">
    <ui5-sort-item slot="sortItems" text="Name" data-key="name" selected=""></ui5-sort-item>
    <ui5-sort-item slot="sortItems" text="Position" data-key="position"></ui5-sort-item>
    <ui5-sort-item slot="sortItems" text="Company" data-key="company"></ui5-sort-item>
    <ui5-sort-item slot="sortItems" text="Department" data-key="department"></ui5-sort-item>
    <ui5-filter-item slot="filterItems" text="Position">
        <ui5-filter-item-option slot="values" text="CTO"></ui5-filter-item-option>
        <ui5-filter-item-option slot="values" text="CPO"></ui5-filter-item-option>
        <ui5-filter-item-option slot="values" text="VP"></ui5-filter-item-option>
    </ui5-filter-item>
    <ui5-filter-item slot="filterItems" text="Department">
        <ui5-filter-item-option slot="values" text="Sales"></ui5-filter-item-option>
        <ui5-filter-item-option slot="values" text="Management"></ui5-filter-item-option>
        <ui5-filter-item-option slot="values" text="PR"></ui5-filter-item-option>
    </ui5-filter-item>
    <ui5-filter-item slot="filterItems" text="Location">
        <ui5-filter-item-option slot="values" text="Walldorf"></ui5-filter-item-option>
        <ui5-filter-item-option slot="values" text="New York"></ui5-filter-item-option>
        <ui5-filter-item-option slot="values" text="London"></ui5-filter-item-option>
    </ui5-filter-item>
    <ui5-filter-item slot="filterItems" text="Reports to">
        <ui5-filter-item-option slot="values" text="CTO"></ui5-filter-item-option>
        <ui5-filter-item-option slot="values" text="CPO"></ui5-filter-item-option>
        <ui5-filter-item-option slot="values" text="VP"></ui5-filter-item-option>
    </ui5-filter-item>
  </ui5-view-settings-dialog>
  <br />
  <br />
  <div id="vsdResults"></div>  
`;

var vsdResults = document.getElementById("vsdResults");

btnOpenDialog1.addEventListener("click", function () {
    vsdResults.innerHTML = "";
    vsd1.show();
});

vsd1.addEventListener("confirm", function(evt) {
    vsdResults.innerHTML = JSON.stringify(evt.detail);
    vsdResults.innerHTML += "<br><br>order by key:" + evt.detail.sortByItem.dataset.key;
});

The application looks good. After clicking the button btnOpenDialog1 the settings dialog is shown. The sorting tab works like a charm, but when I try to set a filter, the options are displayed blank:

However, in the example usage on UI5 Web Components site, the filter options are correctly displayed:

Am I missing anything? I just copy-pasted the code from the example usage but I'm unable to make it work.

Answer 1

In order to use any component you have to import its class in order to define it as tag. In your case you need to call

import "@ui5/webcomponents-fiori/dist/FilterItemOption"; in your js file so ui5-filter-item-option tag is defined and could later be used within your html / template.