ui5_easy_use/dist/ez5/templates/components/table/ex_Table.js

CLI tool for SAP ui5 and SAPUI5 projects to initialize apps, generate pages, insert form and table components, manage routing, and automate i18n bindings

sap.ui.define(
  [
    "${ez5.appName}/${ez5.packgName}/components/table/TableHelper_",
    "${ez5.appName}/${ez5.packgName}/components/Helper",
    "${ez5.appName}/${ez5.packgName}/api/DummyBackend",
    "sap/ui/model/json/JSONModel",
    "sap/m/MessageToast",
  ],
  function (TableHelper_, HelperComponents, DummyBackend, JSONModel, MessageToast) {
    "use strict";

    return BaseController.extend("${ez5.appName}.controller.${ez5.controllerName}", {
      onInit: function () {
        this.initialTable();
      },

      // Keep this method as the table entry point used by EZ5 when inserting the component.
      initialTable: async function () {
        this._initializeTableIds();
        this._initializeTableBackend();
        this._initializeTableHelper();
        this._subscribeDummyBackendChanges();

        await this.setTableData();

        // Keep this direct assignment: EZ5 reads it to generate the XML table columns.
        this.autoG = [
          { fieldName: "EmployeeId", value: "", type: "Text", rules: "", visible: true, editable: true },
          { fieldName: "EmployeeName", value: "", type: "Text", rules: "", visible: true, editable: true },
          { fieldName: "Country", value: "", type: "Text", rules: "", visible: true, editable: true },
          { fieldName: "Email", value: "", type: "Text", rules: "", visible: true, editable: true },
          { fieldName: "Time", value: "", type: "Text", rules: "", visible: true, editable: true }
        ];

        this._initializeTableModels();
      },

      _initializeTableIds: function () {
        this.tableModel = "${ez5.controllerName}TableModel";
        this.tableId = "${ez5.controllerName}TableId";
        this.helperTableModel = "${ez5.controllerName}HelperTableModel";
      },

      _initializeTableBackend: function () {
        this.dummyBackend = this.dummyBackend || new DummyBackend();
        this.dummyBackendChannel = "ez5DummyBackend";
        this.dummyBackendChangedEvent = "changed";
      },

      _initializeTableHelper: function () {
        this.tableHelper_ = new TableHelper_(this);
        this.tableHelper_.setTableId(this.tableId);
      },

      _initializeTableModels: function () {
        this.helperComponents = new HelperComponents(this, this.autoG);
        this.helperTableValues = this.helperComponents.extractVisibilityAndEditability();
        this.getView().setModel(new JSONModel(this.helperTableValues), this.helperTableModel);
      },

      setTableData: async function () {
        this.setBusy(this.tableId, true);

        try {
          this.tableData = await this.dummyBackend.list();
          this._setTableModel(this.tableData);
        } finally {
          this.setBusy(this.tableId, false);
        }
      },

      _setTableModel: function (tableData) {
        const tableModel = new JSONModel(tableData);
        this.getView().setModel(tableModel, this.tableModel);
        this.getOwnerComponent().setModel(tableModel, this.tableModel);
      },

      onRefreshTable: async function () {
        await this.setTableData();
        MessageToast.show("Refreshed successfully!");
      },

      _subscribeDummyBackendChanges: function () {
        if (this._dummyBackendSubscribed) {
          return;
        }

        sap.ui.getCore().getEventBus().subscribe(
          this.dummyBackendChannel,
          this.dummyBackendChangedEvent,
          this._onDummyBackendChanged,
          this
        );
        this._dummyBackendSubscribed = true;
      },

      _onDummyBackendChanged: async function () {
        await this.setTableData();
      },

      onExit: function () {
        if (!this._dummyBackendSubscribed) {
          return;
        }

        sap.ui.getCore().getEventBus().unsubscribe(
          this.dummyBackendChannel,
          this.dummyBackendChangedEvent,
          this._onDummyBackendChanged,
          this
        );
        this._dummyBackendSubscribed = false;
      },

      getDataXkeysAItems: function (oEvent) {
        const changeTextAItems = [{ key: "Name", text: "Name 2" }];
        return this.tableHelper_.getDataXkeysAItems(oEvent, this.tableModel, changeTextAItems);
      },

      handleSortButtonPressed: function (oEvent) {
        this.tableHelper_.handleSortButtonPressed(oEvent);
      },

      handleFilterButtonPressed: function (oEvent) {
        this.tableHelper_.handleFilterButtonPressed(oEvent);
      },

      handleGroupButtonPressed: function (oEvent) {
        this.tableHelper_.handleGroupButtonPressed(oEvent);
      },

      onSearch: function (oEvent) {
        this.tableHelper_.onSearch(oEvent);
      },

      handleActionPress: function (oEvent) {
        const row = oEvent.getParameter("row");
        const context = row?.getBindingContext(this.tableModel);
        const employeeId = context?.getProperty("EmployeeId");
        const employeeName = context?.getProperty("EmployeeName");

        MessageToast.show(`You Clicked on Employee Id: ${employeeId} - Employee Name: ${employeeName}`);
      },

      setBusy: function (id, status) {
        this.getView()?.byId(id)?.setBusy(status);
      },

    });
  }
);