create-ui5-freestyle-lr 0.2.0

package/src/templates/webapp/controller/Worklist.controller.js.ejs

@@ -0,0 +1,1158 @@
+sap.ui.define([
+    "./BaseController",
+    "sap/ui/model/json/JSONModel",
+    "sap/ui/model/Filter",
+    "sap/ui/model/FilterOperator",
+    "sap/ui/model/Sorter",
+    "sap/ui/core/Fragment",
+    "sap/m/MessageToast",
+    "sap/m/Dialog",
+    "sap/m/VBox",
+    "sap/m/CheckBox",
+    "sap/m/Button",
+    "sap/m/Token",
+    "sap/m/SearchField",
+    "sap/ui/Device",
+    "sap/ui/core/routing/HashChanger",
+    "../model/formatter"
+], function (BaseController, JSONModel, Filter, FilterOperator, Sorter, Fragment,
+             MessageToast, Dialog, VBox, CheckBox, Button, Token, SearchField, Device, HashChanger, formatter) {
+    "use strict";
+
+    const PAGE_SIZE_MIN = 10;
+    const PAGE_SIZE_MAX = 100;
+    const DEFAULT_PAGE_SIZE = 20;
+    const AUTO_REFRESH_INTERVAL_MS = 30000;
+
+    return BaseController.extend("<%= appId %>.controller.Worklist", {
+
+        formatter: formatter,
+
+        onInit: function () {
+            const oRB = this.getResourceBundle();
+            const oViewModel = new JSONModel({
+                rows: [],
+                page: 1,
+                top: DEFAULT_PAGE_SIZE,
+                totalCount: 0,
+                totalPages: 1,
+                pageList: [{ key: "1", text: "1" }],
+                prevEnabled: false,
+                nextEnabled: false,
+                filterInfo: "",
+                sortInfo: "",
+                groupInfo: "",
+                searchInfo: "",
+                infoBarVisible: false,
+                infoBarText: "",
+                tableTitleCount: oRB.getText("tableTitleNoCount"),
+                noDataText: oRB.getText("noDataText"),
+                infoPopoverData: {},
+                isCompact: !sap.ui.Device.support.touch,
+                selectedCount: 0,
+                autoRefreshOn: false,
+                lastRefreshedText: ""
+<% if (filters.filter(function (f) { return f.valueHelp; }).length) { -%>
+                ,
+<% filters.filter(function (f) { return f.valueHelp; }).forEach(function (f, idx, arr) { -%>
+                "<%= f.valueHelp.entitySet %>": []<%= idx < arr.length - 1 ? "," : "" %>
+<% }) -%>
+<% } -%>
+            });
+            this.setModel(oViewModel, "worklistView");
+
+            this._rtState = { filters: [], sorter: null, groupSorter: null };
+
+<% if (defaultSortField) { -%>
+            this._rtState.sorter = new Sorter("<%= defaultSortField %>", <%= defaultSortDescending %>);
+<% } -%>
+
+<% if (searchFields.length) { -%>
+            // basicSearch is a hidden FilterBar aggregation — must be set programmatically
+            this.byId("filterbar").setBasicSearch(new SearchField({
+                id: this.createId("searchField"),
+                width: "18rem",
+                placeholder: oRB.getText("searchField.placeholder"),
+                search: this.onSearch.bind(this)
+            }));
+
+<% } -%>
+            this._applyDensityClass(oViewModel.getProperty("/isCompact"));
+
+            this._loadValueHelpData();
+            // Restore filter / sort / group / page from URL query (deep link, refresh-proof)
+            this._restoreStateFromUrl();
+            this._updateCount();
+            this._loadData();
+
+            this._wireVariantManagement();
+        },
+
+        // ============================================================
+        // VARIANT MANAGEMENT WIRING
+        // (1) On flex `initialized`, apply the currently selected
+        //     variant's state — covers the default-variant flow on page
+        //     reload (VM auto-selects the default but does not always
+        //     re-fire `select`). URL state takes precedence if present.
+        // (2) Capture-phase click listener forces the variant popover
+        //     to always anchor on the chevron button. Title text clicks
+        //     are routed to the button, so the popup origin is consistent.
+        // ============================================================
+
+        _wireVariantManagement: function () {
+            const oVMCtrl = this.byId("variantMgmt");
+            if (!oVMCtrl) return;
+
+            const fnApplyDefault = () => {
+                if (this._variantInitDone) return;
+                this._variantInitDone = true;
+                const oStore = this._readVariantStore();
+                // Prefer our own __default tracking over flex's auto-select,
+                // because flex's setDefault changes don't always survive a
+                // LocalStorageConnector round-trip cleanly across reloads.
+                // (URL state is intentionally NOT given precedence — the
+                // app writes routine sort/page state into the URL on every
+                // action, which would otherwise mask the real default.)
+                const sVMKey = oVMCtrl.getCurrentVariantKey();
+                const sKey = oStore.__default || sVMKey;
+                if (sKey && oStore[sKey]) {
+                    if (sVMKey !== sKey) {
+                        oVMCtrl.setCurrentVariantKey(sKey);
+                    }
+                    this._applyVariantState(oStore[sKey]);
+                }
+            };
+
+            oVMCtrl.attachInitialized(fnApplyDefault);
+            // Safety net in case `initialized` does not fire as expected
+            // (e.g. attached after the event has already happened).
+            setTimeout(fnApplyDefault, 1500);
+
+            oVMCtrl.addEventDelegate({
+                onAfterRendering: () => {
+                    const oDom = oVMCtrl.getDomRef();
+                    if (!oDom || oDom.dataset.lrAnchorPatched) return;
+                    oDom.dataset.lrAnchorPatched = "1";
+                    const oBtn = oDom.querySelector("button");
+                    if (!oBtn) return;
+                    oDom.addEventListener("click", (e) => {
+                        if (oBtn.contains(e.target)) return;
+                        e.stopPropagation();
+                        e.preventDefault();
+                        oBtn.click();
+                    }, true);
+                }
+            });
+        },
+
+        // ============================================================
+        // DATA LOADING
+        // ============================================================
+
+        _loadValueHelpData: function () {
+            const oModel = this.getOwnerComponent().getModel();
+            const oVM = this.getModel("worklistView");
+<% filters.filter(function (f) { return f.valueHelp; }).forEach(function (f) { -%>
+            oModel.read("/<%= f.valueHelp.entitySet %>", {
+                success: function (oData) { oVM.setProperty("/<%= f.valueHelp.entitySet %>", oData.results || []); },
+                error:   function () { oVM.setProperty("/<%= f.valueHelp.entitySet %>", []); }
+            });
+<% }) -%>
+        },
+
+        _loadData: function (bShowToast) {
+            const oView = this.getView();
+            const oVM = this.getModel("worklistView");
+            const oModel = this.getOwnerComponent().getModel();
+
+            const iTop = oVM.getProperty("/top");
+            const iPage = oVM.getProperty("/page") || 1;
+            const iSkip = (iPage - 1) * iTop;
+
+            oView.setBusy(true);
+            oModel.read("/<%= entitySet %>", {
+                filters: this._buildBackendFilters(),
+                urlParameters: { "$top": iTop, "$skip": iSkip },
+                success: (oData) => {
+                    oVM.setProperty("/rows", oData.results || []);
+                    oVM.setProperty("/lastRefreshedText",
+                        "<cite>" + new Date().toLocaleTimeString() + "</cite>");
+                    oView.setBusy(false);
+                    this._scrollTableToTop();
+                    if (bShowToast) MessageToast.show(this.getResourceBundle().getText("tableRefreshed"));
+                },
+                error: () => {
+                    oVM.setProperty("/rows", []);
+                    oView.setBusy(false);
+                }
+            });
+        },
+
+        _updateCount: function () {
+            const oVM = this.getModel("worklistView");
+            this.getOwnerComponent().getModel().read("/<%= entitySet %>/$count", {
+                filters: this._buildBackendFilters(),
+                success: (count) => {
+                    const iTotal = parseInt(count, 10) || 0;
+                    const iTop = oVM.getProperty("/top");
+                    const iTotalPages = Math.max(1, Math.ceil(iTotal / iTop));
+                    oVM.setProperty("/totalCount", iTotal);
+                    oVM.setProperty("/totalPages", iTotalPages);
+
+                    const aPages = [];
+                    for (let i = 1; i <= iTotalPages; i++) {
+                        aPages.push({ key: String(i), text: String(i) });
+                    }
+                    oVM.setProperty("/pageList", aPages);
+                    this._updatePaginationButtons();
+                }
+            });
+        },
+
+        _buildBackendFilters: function () {
+            const aFilters = [...this._rtState.filters];
+            const oSearchFilter = this._buildSearchFilter();
+            if (oSearchFilter) aFilters.push(oSearchFilter);
+            return aFilters;
+        },
+
+        _buildSearchFilter: function () {
+<% if (searchFields.length) { -%>
+            const oSearchField = this.byId("searchField");
+            if (!oSearchField) return null;
+            const sQuery = oSearchField.getValue();
+            if (!sQuery) return null;
+            return new Filter({
+                filters: [
+<% searchFields.forEach(function (f, i, arr) { -%>
+                    new Filter("<%= f %>", FilterOperator.Contains, sQuery)<%= i < arr.length - 1 ? "," : "" %>
+<% }) -%>
+                ],
+                and: false
+            });
+<% } else { -%>
+            return null;
+<% } -%>
+        },
+
+        // ============================================================
+        // FILTER BAR SEARCH
+        // ============================================================
+
+        onSearch: function () {
+            const aFilters = [];
+            const aLabels = [];
+            const oRB = this.getResourceBundle();
+
+<% filters.forEach(function (f) { -%>
+  <% if (f.inputType === 'dateRange') { -%>
+            {
+                const oDR = this.byId("<%= f.fieldName %>");
+                if (oDR && oDR.getDateValue() && oDR.getSecondDateValue()) {
+                    const start = new Date(oDR.getDateValue()); start.setHours(0, 0, 0, 0);
+                    const end = new Date(oDR.getSecondDateValue()); end.setHours(23, 59, 59, 999);
+                    aFilters.push(new Filter("<%= f.fieldName %>", FilterOperator.BT, start, end));
+                    aLabels.push(oRB.getText("filter.<%= f.fieldName %>"));
+                }
+            }
+  <% } else if (f.inputType === 'valueHelp') { -%>
+            {
+                const oMI = this.byId("<%= f.fieldName %>");
+                if (oMI && oMI.getTokens().length) {
+                    const aOr = oMI.getTokens().map(t => new Filter("<%= f.fieldName %>", FilterOperator.EQ, t.getKey()));
+                    aFilters.push(new Filter(aOr, false));
+                    aLabels.push(oRB.getText("filter.<%= f.fieldName %>"));
+                }
+            }
+  <% } else { -%>
+            {
+                const oMI = this.byId("<%= f.fieldName %>");
+                if (oMI && oMI.getTokens().length) {
+                    const aOr = oMI.getTokens().map(t => new Filter("<%= f.fieldName %>", FilterOperator.Contains, t.getText()));
+                    aFilters.push(new Filter(aOr, false));
+                    aLabels.push(oRB.getText("filter.<%= f.fieldName %>"));
+                }
+            }
+  <% } -%>
+<% }) -%>
+
+            this._rtState.filters = aFilters;
+            this.getModel("worklistView").setProperty("/filterInfo",
+                aLabels.length ? oRB.getText("info.filteredBy", [aLabels.join(", ")]) : "");
+            this._updateInfoBar();
+
+            this.getModel("worklistView").setProperty("/page", 1);
+            this._writeStateToUrl();
+            this._updateCount();
+            this._loadData();
+        },
+
+        // ============================================================
+        // PAGINATION
+        // ============================================================
+
+        onPrevPage: function () {
+            const oVM = this.getModel("worklistView");
+            const iPage = oVM.getProperty("/page");
+            if (iPage > 1) { oVM.setProperty("/page", iPage - 1); this._loadData(); this._writeStateToUrl(); }
+            this._updatePaginationButtons();
+        },
+        onNextPage: function () {
+            const oVM = this.getModel("worklistView");
+            const iPage = oVM.getProperty("/page");
+            if (iPage < oVM.getProperty("/totalPages")) { oVM.setProperty("/page", iPage + 1); this._loadData(); this._writeStateToUrl(); }
+            this._updatePaginationButtons();
+        },
+        onFirstPage: function () {
+            this.getModel("worklistView").setProperty("/page", 1);
+            this._loadData();
+            this._writeStateToUrl();
+            this._updatePaginationButtons();
+        },
+        onLastPage: function () {
+            const oVM = this.getModel("worklistView");
+            oVM.setProperty("/page", oVM.getProperty("/totalPages"));
+            this._loadData();
+            this._writeStateToUrl();
+            this._updatePaginationButtons();
+        },
+        onPageSelect: function (oEvt) {
+            const sKey = oEvt.getSource().getSelectedKey();
+            const iPage = parseInt(sKey, 10);
+            if (isNaN(iPage)) return;
+            const oVM = this.getModel("worklistView");
+            if (oVM.getProperty("/page") === iPage) return;
+            oVM.setProperty("/page", iPage);
+            this._loadData();
+            this._writeStateToUrl();
+            this._updatePaginationButtons();
+        },
+        onStepChange: function (oEvt) {
+            const iValue = parseInt(oEvt.getParameter("value"), 10);
+            if (isNaN(iValue) || iValue < PAGE_SIZE_MIN || iValue > PAGE_SIZE_MAX) return;
+            const oVM = this.getModel("worklistView");
+            oVM.setProperty("/top", iValue);
+            oVM.setProperty("/page", 1);
+            this._updateCount();
+            this._loadData();
+        },
+        _updatePaginationButtons: function () {
+            const oVM = this.getModel("worklistView");
+            const iPage = oVM.getProperty("/page") || 1;
+            const iTotalPages = oVM.getProperty("/totalPages") || 1;
+            oVM.setProperty("/prevEnabled", iPage > 1);
+            oVM.setProperty("/nextEnabled", iPage < iTotalPages);
+        },
+
+        // ============================================================
+        // SORT / GROUP DIALOGS
+        // ============================================================
+
+        onSortDialog: function () {
+            if (!this._pSortDialog) {
+                this._pSortDialog = Fragment.load({
+                    id: this.getView().getId(),
+                    name: "<%= appId %>.view.fragments.SortDialog",
+                    controller: this
+                }).then((oDialog) => {
+                    this.getView().addDependent(oDialog);
+                    return oDialog;
+                });
+            }
+            this._pSortDialog.then((oDialog) => oDialog.open());
+        },
+        onSortDialogConfirm: function (oEvt) {
+            const sKey = oEvt.getParameter("sortItem").getKey();
+            const bDesc = oEvt.getParameter("sortDescending");
+            this._rtState.sorter = new Sorter(sKey, bDesc);
+            this._applyRTState();
+            const oRB = this.getResourceBundle();
+            this.getModel("worklistView").setProperty("/sortInfo",
+                oRB.getText("info.sortedBy", [
+                    oRB.getText("col." + sKey) || sKey,
+                    oRB.getText(bDesc ? "sort.desc" : "sort.asc")
+                ]));
+            this._updateInfoBar();
+            this._writeStateToUrl();
+        },
+
+        onGroupDialog: function () {
+            if (!this._pGroupDialog) {
+                this._pGroupDialog = Fragment.load({
+                    id: this.getView().getId(),
+                    name: "<%= appId %>.view.fragments.GroupDialog",
+                    controller: this
+                }).then((oDialog) => {
+                    this.getView().addDependent(oDialog);
+                    return oDialog;
+                });
+            }
+            this._pGroupDialog.then((oDialog) => oDialog.open());
+        },
+        onGroupDialogConfirm: function (oEvt) {
+            const oGroupItem = oEvt.getParameter("groupItem");
+            const oRB = this.getResourceBundle();
+            const oVM = this.getModel("worklistView");
+
+            if (!oGroupItem) {
+                this._rtState.groupSorter = null;
+                oVM.setProperty("/groupInfo", "");
+            } else {
+                const sKey = oGroupItem.getKey();
+                const bDesc = oEvt.getParameter("groupDescending");
+                this._rtState.groupSorter = new Sorter(sKey, bDesc, (oCtx) => {
+                    const v = oCtx.getProperty(sKey);
+                    const t = v != null && v !== "" ? v : oRB.getText("group.empty");
+                    return { key: t, text: t };
+                });
+                oVM.setProperty("/groupInfo",
+                    oRB.getText("info.groupedBy", [oRB.getText("col." + sKey) || sKey]));
+            }
+            this._applyRTState();
+            this._updateInfoBar();
+            this._writeStateToUrl();
+        },
+        onGroupDialogReset: function () {
+            this._rtState.groupSorter = null;
+            this.getModel("worklistView").setProperty("/groupInfo", "");
+            this._applyRTState();
+            this._updateInfoBar();
+            this._writeStateToUrl();
+        },
+
+        _applyRTState: function () {
+            const oTable = this.byId("worklistTable");
+            const oBinding = oTable && oTable.getBinding("items");
+            if (!oBinding) return;
+            const aSorters = [this._rtState.groupSorter, this._rtState.sorter].filter(Boolean);
+            oBinding.sort(aSorters);
+        },
+
+        // ============================================================
+        // QUICK SORT MENU (column header click)
+        // ============================================================
+
+        onColumnMenuBeforeOpen: function (oEvt) {
+            const oColumn = oEvt.getParameter("openBy");
+            if (!oColumn) return;
+            const sFieldName = oColumn.data("fieldName");
+            if (!sFieldName) return;
+
+            const oMenu = this.byId("columnHeaderMenu");
+            const oQuickSort = oMenu.getQuickActions()[0];
+            const oSortItem = oQuickSort.getItems()[0];
+
+            oSortItem.setKey(sFieldName);
+            oSortItem.setLabel(oColumn.getHeader().getText());
+
+            // Reflect current sort state in the menu
+            const oCurrent = this._rtState.sorter;
+            if (oCurrent && oCurrent.sPath === sFieldName) {
+                oSortItem.setSortOrder(oCurrent.bDescending ? "Descending" : "Ascending");
+            } else {
+                oSortItem.setSortOrder("None");
+            }
+        },
+
+        onColumnQuickSort: function (oEvt) {
+            const oItem = oEvt.getParameter("item");
+            const sKey = oItem.getKey();
+            const sOrder = oItem.getSortOrder();
+
+            const oRB = this.getResourceBundle();
+            const oVM = this.getModel("worklistView");
+
+            if (sOrder === "None") {
+                this._rtState.sorter = null;
+                oVM.setProperty("/sortInfo", "");
+            } else {
+                const bDesc = sOrder === "Descending";
+                this._rtState.sorter = new Sorter(sKey, bDesc);
+                oVM.setProperty("/sortInfo",
+                    oRB.getText("info.sortedBy", [
+                        oRB.getText("col." + sKey) || sKey,
+                        oRB.getText(bDesc ? "sort.desc" : "sort.asc")
+                    ]));
+            }
+            this._applyRTState();
+            this._updateInfoBar();
+            this._writeStateToUrl();
+        },
+
+        // ============================================================
+        // DENSITY (compact on desktop, cozy on touch — set once at init)
+        // ============================================================
+
+        _applyDensityClass: function (bCompact) {
+            const oView = this.getView();
+            if (bCompact) {
+                oView.removeStyleClass("sapUiSizeCozy").addStyleClass("sapUiSizeCompact");
+            } else {
+                oView.removeStyleClass("sapUiSizeCompact").addStyleClass("sapUiSizeCozy");
+            }
+        },
+
+        // ============================================================
+        // COLUMN SETTINGS
+        // ============================================================
+
+        onColumnDialog: function () {
+            const oTable = this.byId("worklistTable");
+            const oRB = this.getResourceBundle();
+
+            const oDialog = new Dialog({
+                title: oRB.getText("columnSettings"),
+                contentWidth: "20rem",
+                draggable: false,
+                resizable: false
+            });
+            const oVBox = new VBox({ width: "100%" });
+            oTable.getColumns().forEach((oCol) => {
+                const oHeader = oCol.getHeader();
+                if (!oHeader || !oHeader.getText || !oHeader.getText()) return;
+                oVBox.addItem(new CheckBox({
+                    text: oHeader.getText(),
+                    selected: oCol.getVisible(),
+                    select: (e) => oCol.setVisible(e.getParameter("selected"))
+                }));
+            });
+            oDialog.addContent(oVBox);
+            oDialog.addButton(new Button({
+                text: oRB.getText("close"),
+                press: () => { oDialog.close(); oDialog.destroy(); }
+            }));
+            this.getView().addDependent(oDialog);
+            oDialog.open();
+        },
+
+        // ============================================================
+        // REFRESH / RESET
+        // ============================================================
+
+        onRefresh: function () {
+            const oVM = this.getModel("worklistView");
+            this._rtState = { filters: [], sorter: null, groupSorter: null };
+
+<% filters.forEach(function (f) { -%>
+            {
+                const ctrl = this.byId("<%= f.fieldName %>");
+                if (ctrl) {
+  <% if (f.inputType === 'dateRange') { -%>
+                    ctrl.setDateValue(null);
+                    ctrl.setSecondDateValue(null);
+                    ctrl.setValue("");
+  <% } else { -%>
+                    ctrl.removeAllTokens();
+                    ctrl.setValue("");
+  <% } -%>
+                }
+            }
+<% }) -%>
+<% if (searchFields.length) { -%>
+            const oSearchField = this.byId("searchField");
+            if (oSearchField) oSearchField.setValue("");
+<% } -%>
+
+            oVM.setProperty("/page", 1);
+            oVM.setProperty("/filterInfo", "");
+            oVM.setProperty("/sortInfo", "");
+            oVM.setProperty("/groupInfo", "");
+            oVM.setProperty("/searchInfo", "");
+            this._updateInfoBar();
+            this._writeStateToUrl();
+            this._updateCount();
+            this._loadData();
+            MessageToast.show(this.getResourceBundle().getText("tableRefreshed"));
+        },
+
+        // ============================================================
+        // INFO BAR
+        // ============================================================
+
+        _updateInfoBar: function () {
+            const oVM = this.getModel("worklistView");
+            const aParts = [
+                oVM.getProperty("/filterInfo"),
+                oVM.getProperty("/searchInfo"),
+                oVM.getProperty("/groupInfo"),
+                oVM.getProperty("/sortInfo")
+            ].filter(Boolean);
+            oVM.setProperty("/infoBarVisible", aParts.length > 0);
+            oVM.setProperty("/infoBarText", aParts.join(" • "));
+        },
+
+        onTableUpdateFinished: function () {
+            const oTable = this.byId("worklistTable");
+            const oBinding = oTable.getBinding("items");
+            const iVisible = oBinding ? oBinding.getLength() : 0;
+            const iTotal = this.getModel("worklistView").getProperty("/totalCount");
+            const oRB = this.getResourceBundle();
+            const sTitle = iVisible
+                ? oRB.getText("tableTitleCount", [iVisible, iTotal])
+                : oRB.getText("tableTitleNoCount");
+            this.getModel("worklistView").setProperty("/tableTitleCount", sTitle);
+        },
+
+        // ============================================================
+        // SCROLL-TO-TOP ANIMATION (nice touch after page change)
+        // ============================================================
+
+        _scrollTableToTop: function () {
+            setTimeout(() => {
+                const oTable = this.byId("worklistTable");
+                const oDom = oTable && oTable.getDomRef();
+                if (!oDom) return;
+                let oScroll = oDom.parentElement;
+                while (oScroll && oScroll !== document.body) {
+                    const oStyle = window.getComputedStyle(oScroll);
+                    const bScrollable = (oStyle.overflowY === "auto" || oStyle.overflowY === "scroll");
+                    if (bScrollable && oScroll.scrollHeight > oScroll.clientHeight) break;
+                    oScroll = oScroll.parentElement;
+                }
+                if (oScroll) this._animateScroll(oScroll, 0, 600);
+            }, 100);
+        },
+        _animateScroll: function (oEl, iTarget, iDuration) {
+            const iStart = oEl.scrollTop;
+            const iDiff = iTarget - iStart;
+            const iStartTime = performance.now();
+            const ease = (t) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
+            const step = (iNow) => {
+                const iProgress = Math.min((iNow - iStartTime) / iDuration, 1);
+                oEl.scrollTop = iStart + iDiff * ease(iProgress);
+                if (iProgress < 1) requestAnimationFrame(step);
+            };
+            requestAnimationFrame(step);
+        },
+
+        // ============================================================
+        // ROW PRESS / INFO POPOVER
+        // Whole-row click opens the InfoPopover with row details. There's
+        // no detail page in this template; if you need one, add a route
+        // and replace the body of onItemPress with router.navTo(...).
+        // ============================================================
+
+        onItemPress: function (oEvt) {
+            this._openInfoPopover(oEvt.getSource(), oEvt.getSource());
+        },
+        onInfoLinkPress: function (oEvt) {
+            // Cell-level link click. UI5 suppresses the parent row-press when an
+            // interactive child is clicked, so this fires alone. We anchor the
+            // popover on the link itself for a tighter visual.
+            const oLink = oEvt.getSource();
+            const oItem = oLink.getParent();   // cells are direct children of ColumnListItem
+            this._openInfoPopover(oItem, oLink);
+        },
+        _openInfoPopover: function (oItem, oOpener) {
+            const oRow = oItem.getBindingContext("worklistView").getObject();
+            const oVM = this.getModel("worklistView");
+
+            oVM.setProperty("/infoPopoverData", {
+                key: oRow.<%= primaryKey || columns[0].name %>,
+                detail: "Replace this with any field(s) from your row object.",
+                timestamp: new Date()
+            });
+
+            if (!this._pInfoPopover) {
+                this._pInfoPopover = Fragment.load({
+                    id: this.getView().getId(),
+                    name: "<%= appId %>.view.fragments.InfoPopover",
+                    controller: this
+                }).then((oPopover) => {
+                    this.getView().addDependent(oPopover);
+                    return oPopover;
+                });
+            }
+            this._pInfoPopover.then((oPopover) => oPopover.openBy(oOpener));
+        },
+        onInfoPopoverClose: function () {
+            if (this._pInfoPopover) {
+                this._pInfoPopover.then((oPopover) => oPopover.close());
+            }
+        },
+
+        // ============================================================
+        // MULTI-SELECT + BULK ACTION
+        // ============================================================
+
+        onSelectionChange: function () {
+            const oTable = this.byId("worklistTable");
+            this.getModel("worklistView").setProperty("/selectedCount", oTable.getSelectedItems().length);
+        },
+        onClearSelection: function () {
+            this.byId("worklistTable").removeSelections(true);
+            this.getModel("worklistView").setProperty("/selectedCount", 0);
+        },
+        onBulkAction: function () {
+            const aItems = this.byId("worklistTable").getSelectedItems();
+            const aRows = aItems.map((oItem) => oItem.getBindingContext("worklistView").getObject());
+            // Replace this body with your real bulk action — call an OData
+            // function import, MessageBox confirm, etc. The selected rows are
+            // in `aRows` (full row objects) and can be filtered by key field.
+            MessageToast.show(this.getResourceBundle().getText("bulkActionDemo", [aRows.length]));
+        },
+
+        // ============================================================
+        // AUTO-REFRESH
+        // ToggleButton drives a setInterval that calls _updateCount +
+        // _loadData on a fixed cadence. Manual refresh works alongside.
+        // The timer is cleared on toggle-off and on view destroy.
+        // ============================================================
+
+        onToggleAutoRefresh: function () {
+            const oRB = this.getResourceBundle();
+            const bOn = this.getModel("worklistView").getProperty("/autoRefreshOn");
+            if (bOn) {
+                // Immediate fetch so the user sees feedback instantly,
+                // then continue on the fixed cadence.
+                this._updateCount();
+                this._loadData();
+                this._iAutoRefreshTimer = setInterval(() => {
+                    this._updateCount();
+                    this._loadData(true);
+                }, AUTO_REFRESH_INTERVAL_MS);
+                MessageToast.show(oRB.getText("autoRefresh.on"));
+            } else if (this._iAutoRefreshTimer) {
+                clearInterval(this._iAutoRefreshTimer);
+                this._iAutoRefreshTimer = null;
+                MessageToast.show(oRB.getText("autoRefresh.off"));
+            }
+        },
+
+        onExit: function () {
+            if (this._iAutoRefreshTimer) clearInterval(this._iAutoRefreshTimer);
+        },
+
+        // ============================================================
+        // EXPORT TO EXCEL
+        // Uses sap.ui.export.Spreadsheet. Re-fetches all matching rows
+        // (current filters + sort) so the export matches what the user
+        // sees, not just the current page. A confirm dialog appears for
+        // large result sets to avoid accidental heavy backend calls.
+        // ============================================================
+
+        onExportToExcel: function () {
+            const oVM = this.getModel("worklistView");
+            const iTotal = oVM.getProperty("/totalCount") || 0;
+            const oRB = this.getResourceBundle();
+            if (iTotal === 0) {
+                MessageToast.show(oRB.getText("export.noData"));
+                return;
+            }
+            const LARGE_THRESHOLD = 1000;
+            if (iTotal > LARGE_THRESHOLD) {
+                sap.ui.require(["sap/m/MessageBox"], (MessageBox) => {
+                    MessageBox.confirm(oRB.getText("export.largeConfirm", [iTotal]), {
+                        onClose: (sAction) => {
+                            if (sAction === MessageBox.Action.OK) this._fetchAllAndExport();
+                        }
+                    });
+                });
+            } else {
+                this._fetchAllAndExport();
+            }
+        },
+
+        _fetchAllAndExport: function () {
+            const oView = this.getView();
+            const oVM = this.getModel("worklistView");
+            const oModel = this.getOwnerComponent().getModel();
+            const iTotal = oVM.getProperty("/totalCount") || 0;
+            const aSorters = [this._rtState.groupSorter, this._rtState.sorter].filter(Boolean);
+
+            oView.setBusy(true);
+            oModel.read("/<%= entitySet %>", {
+                filters: this._buildBackendFilters(),
+                sorters: aSorters,
+                urlParameters: { "$top": String(iTotal), "$skip": "0" },
+                success: (oData) => {
+                    oView.setBusy(false);
+                    this._doExport(oData.results || []);
+                },
+                error: () => {
+                    oView.setBusy(false);
+                    MessageToast.show(this.getResourceBundle().getText("export.error"));
+                }
+            });
+        },
+
+        _doExport: function (aRows) {
+            const oRB = this.getResourceBundle();
+            const aColumns = this._buildExportColumns();
+            sap.ui.require([
+                "sap/ui/export/Spreadsheet",
+                "sap/ui/export/library",
+                "sap/m/Dialog",
+                "sap/m/ProgressIndicator",
+                "sap/m/VBox",
+                "sap/m/Text"
+            ], (Spreadsheet, exportLib, Dialog, ProgressIndicator, VBox, Text) => {
+                const EdmType = exportLib.EdmType;
+                aColumns.forEach((c) => { c.type = EdmType[c.type] || EdmType.String; });
+                const sStamp = new Date().toISOString().slice(0, 10);
+
+                const oProgress = new ProgressIndicator({
+                    percentValue: 0,
+                    displayValue: "0%",
+                    showValue: true,
+                    state: "Success",
+                    width: "100%",
+                    height: "1.75rem"
+                });
+                const oDialog = new Dialog({
+                    title: oRB.getText("export.dialogTitle"),
+                    contentWidth: "24rem",
+                    draggable: false,
+                    resizable: false,
+                    content: new VBox({
+                        items: [
+                            new Text({ text: oRB.getText("export.dialogText") }).addStyleClass("sapUiSmallMarginBottom"),
+                            oProgress
+                        ]
+                    }).addStyleClass("sapUiMediumMargin")
+                });
+                this.getView().addDependent(oDialog);
+                oDialog.open();
+
+                const oSheet = new Spreadsheet({
+                    workbook: {
+                        columns: aColumns,
+                        context: {
+                            title: oRB.getText("appTitle"),
+                            sheetName: oRB.getText("appTitle")
+                        }
+                    },
+                    dataSource: aRows,
+                    fileName: oRB.getText("appTitle") + "_" + sStamp + ".xlsx",
+                    showProgress: false
+                });
+                const pBuild = oSheet.build();
+
+                // ProgressIndicator animates width via its own CSS transition
+                // when setPercentValue is called. We feed a few target values
+                // and the control fills smoothly between them — same pattern
+                // as SAP's own ProgressIndicator demo.
+                const setPct = (v) => { oProgress.setPercentValue(v); oProgress.setDisplayValue(v + "%"); };
+                const aTicks = [
+                    { v: 30, delay:   50 },
+                    { v: 65, delay:  550 },
+                    { v: 90, delay: 1100 }
+                ];
+                const aTimers = aTicks.map((t) => setTimeout(() => setPct(t.v), t.delay));
+                const pMinShow = new Promise((r) => setTimeout(r, 1500));
+
+                return Promise.all([pBuild, pMinShow])
+                    .then(() => {
+                        aTimers.forEach(clearTimeout);
+                        setPct(100);
+                        return new Promise((r) => setTimeout(r, 500));
+                    })
+                    .then(() => MessageToast.show(oRB.getText("export.success")))
+                    .catch(() => MessageToast.show(oRB.getText("export.error")))
+                    .finally(() => {
+                        aTimers.forEach(clearTimeout);
+                        oDialog.close();
+                        oDialog.destroy();
+                        oSheet.destroy();
+                    });
+            });
+        },
+
+        _buildExportColumns: function () {
+            const oRB = this.getResourceBundle();
+            const oTable = this.byId("worklistTable");
+            const aResult = [];
+            oTable.getColumns().forEach((oCol) => {
+                if (!oCol.getVisible()) return;
+                let sField = null, sType = "String";
+                oCol.getCustomData().forEach((d) => {
+                    if (d.getKey() === "fieldName") sField = d.getValue();
+                    else if (d.getKey() === "exportType") sType = d.getValue();
+                });
+                if (!sField) return;
+                aResult.push({
+                    label: oRB.getText("col." + sField) || sField,
+                    property: sField,
+                    type: sType
+                });
+            });
+            return aResult;
+        },
+
+        // ============================================================
+        // VARIANT MANAGEMENT
+        // sap.ui.fl.variants.VariantManagement renders the dropdown and
+        // persists variant METADATA (list + default flag) via the flex
+        // LocalStorageConnector configured in index.html. Our APP state
+        // (filters/sort/group/columns/top/search) is stored separately
+        // in localStorage, keyed by the variant key from the save event.
+        // Both stores live in localStorage and stay in sync via the key.
+        // ============================================================
+
+        _variantStoreKey: function () {
+            return "lrVariants_" + this.getView().getId();
+        },
+
+        _readVariantStore: function () {
+            try {
+                const sRaw = localStorage.getItem(this._variantStoreKey());
+                return sRaw ? JSON.parse(sRaw) : {};
+            } catch (e) { return {}; }
+        },
+
+        _writeVariantStore: function (oStore) {
+            try { localStorage.setItem(this._variantStoreKey(), JSON.stringify(oStore)); } catch (e) { /* quota */ }
+        },
+
+        onVariantSelect: function (oEvent) {
+            const sKey = oEvent.getParameter("key");
+            const oStore = this._readVariantStore();
+            this._applyVariantState(oStore[sKey] || null);
+        },
+
+        onVariantSave: function (oEvent) {
+            // Capture state synchronously (matches user intent at click time).
+            const oState = this._collectVariantState();
+            const sEventKey = oEvent.getParameter("key");
+            const bDefault = !!oEvent.getParameter("def");
+            const oRB = this.getResourceBundle();
+
+            // Write under the event's key first.
+            const oStore = this._readVariantStore();
+            if (sEventKey) {
+                oStore[sEventKey] = oState;
+                if (bDefault) oStore.__default = sEventKey;
+            }
+            this._writeVariantStore(oStore);
+
+            // The save event can fire BEFORE flex finalizes the variant's
+            // permanent key. Belt-and-suspenders: also write under the
+            // post-commit current key. Whichever key is later returned by
+            // VM on select / init, we have state under it.
+            setTimeout(() => {
+                const oVMCtrl = this.byId("variantMgmt");
+                const sCurrentKey = oVMCtrl.getCurrentVariantKey();
+                if (sCurrentKey) {
+                    const oStore2 = this._readVariantStore();
+                    oStore2[sCurrentKey] = oState;
+                    if (bDefault) oStore2.__default = sCurrentKey;
+                    this._writeVariantStore(oStore2);
+                }
+            }, 100);
+
+            MessageToast.show(oRB.getText("variant.saved"));
+        },
+
+        onVariantManage: function (oEvent) {
+            const aDeleted = oEvent.getParameter("deleted") || [];
+            const sNewDef = oEvent.getParameter("def");
+            const oStore = this._readVariantStore();
+            aDeleted.forEach((k) => {
+                delete oStore[k];
+                if (oStore.__default === k) delete oStore.__default;
+            });
+            if (sNewDef !== undefined) oStore.__default = sNewDef;
+            this._writeVariantStore(oStore);
+        },
+
+        _collectVariantState: function () {
+            const oVM = this.getModel("worklistView");
+            const oTable = this.byId("worklistTable");
+            const oState = {
+                filters: {}, sort: null, group: null, columns: {},
+                top: oVM.getProperty("/top"), search: ""
+            };
+
+<% filters.forEach(function (f) { -%>
+            {
+                const oCtrl = this.byId("<%= f.fieldName %>");
+                if (oCtrl) {
+  <% if (f.inputType === 'dateRange') { -%>
+                    if (oCtrl.getDateValue() && oCtrl.getSecondDateValue()) {
+                        oState.filters["<%= f.fieldName %>"] = {
+                            type: "dateRange",
+                            start: oCtrl.getDateValue().toISOString(),
+                            end: oCtrl.getSecondDateValue().toISOString()
+                        };
+                    }
+  <% } else { -%>
+                    const aTokens = oCtrl.getTokens().map((t) => ({ key: t.getKey(), text: t.getText() }));
+                    if (aTokens.length) oState.filters["<%= f.fieldName %>"] = { type: "tokens", tokens: aTokens };
+  <% } -%>
+                }
+            }
+<% }) -%>
+
+            if (this._rtState.sorter) oState.sort = { path: this._rtState.sorter.sPath, descending: this._rtState.sorter.bDescending };
+            if (this._rtState.groupSorter) oState.group = { path: this._rtState.groupSorter.sPath };
+
+            oTable.getColumns().forEach((oCol) => {
+                const oField = oCol.getCustomData().find((d) => d.getKey() === "fieldName");
+                if (oField) oState.columns[oField.getValue()] = oCol.getVisible();
+            });
+
+<% if (searchFields.length) { -%>
+            const oSF = this.byId("searchField");
+            oState.search = oSF ? oSF.getValue() : "";
+<% } -%>
+            return oState;
+        },
+
+        _applyVariantState: function (oState) {
+            oState = oState || {};
+            const oVM = this.getModel("worklistView");
+            const oRB = this.getResourceBundle();
+            const oTable = this.byId("worklistTable");
+
+            this._rtState = { filters: [], sorter: null, groupSorter: null };
+
+<% filters.forEach(function (f) { -%>
+            {
+                const oCtrl = this.byId("<%= f.fieldName %>");
+                if (oCtrl) {
+  <% if (f.inputType === 'dateRange') { -%>
+                    const fState = oState.filters && oState.filters["<%= f.fieldName %>"];
+                    if (fState && fState.start && fState.end) {
+                        oCtrl.setDateValue(new Date(fState.start));
+                        oCtrl.setSecondDateValue(new Date(fState.end));
+                    } else {
+                        oCtrl.setDateValue(null);
+                        oCtrl.setSecondDateValue(null);
+                        oCtrl.setValue("");
+                    }
+  <% } else { -%>
+                    oCtrl.removeAllTokens();
+                    const fState = oState.filters && oState.filters["<%= f.fieldName %>"];
+                    if (fState && fState.tokens) {
+                        fState.tokens.forEach((t) => oCtrl.addToken(new Token({ key: t.key, text: t.text })));
+                    }
+  <% } -%>
+                }
+            }
+<% }) -%>
+
+            if (oState.sort) this._rtState.sorter = new Sorter(oState.sort.path, oState.sort.descending);
+            if (oState.group) {
+                const sKey = oState.group.path;
+                this._rtState.groupSorter = new Sorter(sKey, false, (oCtx) => {
+                    const v = oCtx.getProperty(sKey);
+                    const t = v != null && v !== "" ? v : oRB.getText("group.empty");
+                    return { key: t, text: t };
+                });
+            }
+
+            oTable.getColumns().forEach((oCol) => {
+                const oField = oCol.getCustomData().find((d) => d.getKey() === "fieldName");
+                if (!oField) return;
+                const sName = oField.getValue();
+                const bVisible = oState.columns && oState.columns[sName] !== undefined ? oState.columns[sName] : true;
+                oCol.setVisible(bVisible);
+            });
+
+            oVM.setProperty("/top", oState.top || DEFAULT_PAGE_SIZE);
+            oVM.setProperty("/page", 1);
+
+<% if (searchFields.length) { -%>
+            const oSF = this.byId("searchField");
+            if (oSF) oSF.setValue(oState.search || "");
+<% } -%>
+
+            this.onSearch();
+            this._applyRTState();
+        },
+
+        // ============================================================
+        // URL STATE PERSISTENCE
+        // Filter / sort / group / page are mirrored into the URL hash so
+        // the page survives reload and the link is shareable.
+        // ============================================================
+
+        _writeStateToUrl: function () {
+            const oVM = this.getModel("worklistView");
+            const aParts = [];
+
+            const oSearchField = this.byId("searchField");
+            if (oSearchField && oSearchField.getValue()) {
+                aParts.push("q=" + encodeURIComponent(oSearchField.getValue()));
+            }
+            if (this._rtState.sorter) {
+                aParts.push("s=" + encodeURIComponent(this._rtState.sorter.sPath + ":" + (this._rtState.sorter.bDescending ? "desc" : "asc")));
+            }
+            if (this._rtState.groupSorter) {
+                aParts.push("g=" + encodeURIComponent(this._rtState.groupSorter.sPath));
+            }
+            const iPage = oVM.getProperty("/page");
+            if (iPage > 1) aParts.push("p=" + iPage);
+
+            HashChanger.getInstance().replaceHash(aParts.length ? "?" + aParts.join("&") : "");
+        },
+
+        _restoreStateFromUrl: function () {
+            const sHash = HashChanger.getInstance().getHash() || "";
+            const sQuery = sHash.replace(/^\?/, "");
+            if (!sQuery) return;
+            const oQuery = {};
+            sQuery.split("&").forEach((sPair) => {
+                const [sK, sV] = sPair.split("=");
+                if (sK && sV !== undefined) oQuery[sK] = decodeURIComponent(sV);
+            });
+
+            const oVM = this.getModel("worklistView");
+            if (oQuery.q) {
+                const oSearchField = this.byId("searchField");
+                if (oSearchField) oSearchField.setValue(oQuery.q);
+            }
+            if (oQuery.s) {
+                const [sPath, sDir] = oQuery.s.split(":");
+                this._rtState.sorter = new Sorter(sPath, sDir === "desc");
+            }
+            if (oQuery.g) {
+                this._rtState.groupSorter = new Sorter(oQuery.g, false);
+            }
+            if (oQuery.p) {
+                oVM.setProperty("/page", parseInt(oQuery.p, 10));
+            }
+        }<% if (filters.filter(function (f) { return f.valueHelp; }).length) { %>,
+
+        // ============================================================
+        // VALUE HELPS — one block per VH filter
+        // ============================================================
+<% filters.filter(function (f) { return f.valueHelp; }).forEach(function (f, idx, arr) { -%>
+
+        on<%= f.fieldName %>VH: function () {
+            if (!this._p<%= f.fieldName %>VH) {
+                this._p<%= f.fieldName %>VH = this.loadFragment({
+                    name: "<%= appId %>.view.fragments.<%= f.fieldName %>VH"
+                });
+            }
+            this._p<%= f.fieldName %>VH.then((oDialog) => oDialog.open());
+        },
+        on<%= f.fieldName %>VHOkPress: function (oEvt) {
+            const oMI = this.byId("<%= f.fieldName %>");
+            oMI.removeAllTokens();
+            (oEvt.getParameter("selectedItems") || []).forEach((oItem) => {
+                oMI.addToken(new Token({
+                    text: oItem.getTitle(),
+                    key: oItem.getDescription()
+                }));
+            });
+        },
+        on<%= f.fieldName %>VHCancelPress: function () { /* no-op */ },
+        on<%= f.fieldName %>VHSearch: function (oEvt) {
+            const sValue = oEvt.getParameter("value");
+            const oBinding = oEvt.getParameter("itemsBinding");
+            if (!oBinding) return;
+            if (!sValue) { oBinding.filter([]); return; }
+            oBinding.filter(new Filter({
+                filters: [
+                    new Filter("<%= f.valueHelp.keyField %>", FilterOperator.Contains, sValue),
+                    new Filter("<%= f.valueHelp.textField %>", FilterOperator.Contains, sValue)
+                ],
+                and: false
+            }));
+        }<%= idx < arr.length - 1 ? "," : "" %>
+<% }) -%>
+<% } %>
+
+    });
+});