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.