ui5_easy_use/dist/ez5/templates/components/form/ex_Form.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/form/FinalValidation",
        "${ez5.appName}/${ez5.packgName}/components/Helper",
        "${ez5.appName}/${ez5.packgName}/api/DummyBackend",
        "sap/ui/model/json/JSONModel",
    ],
    function (FinalValidation, HelperComponents, DummyBackend, JSONModel) {
        "use strict";

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

            // Edit getFormFields() to change generated fields, validation rules, and Select options.
            initialForm: function () {
                this._initializeFormIds();
                this._initializeFormBackend();

                // Keep this direct assignment: EZ5 reads it to generate the XML form fields.
                this.autoG = [
                    { fieldName: "EmployeeId", value: "", type: "Input", rules: "number", visible: true, editable: false },
                    { fieldName: "EmployeeName", value: "", type: "Input", rules: "required|text|min-3|max-25", visible: true, editable: true },
                    {
                        fieldName: "Country",
                        value: "",
                        type: "Select",
                        rules: "required",
                        visible: true,
                        editable: true,
                        options: [
                            { key: "Saudi Arabia", text: "Saudi Arabia" },
                            { key: "Egypt", text: "Egypt" },
                            { key: "Jordan", text: "Jordan" }
                        ]
                    },
                    { fieldName: "Email", value: "", type: "Input", rules: "required|email", visible: true, editable: true },
                    { fieldName: "Time", value: "", type: "TimePicker", rules: "required", visible: true, editable: true },
                    {
                        fieldName: "Status",
                        value: "None",
                        type: "Select",
                        rules: "required",
                        visible: true,
                        editable: true,
                        options: [
                            { key: "Success", text: "Success" },
                            { key: "Information", text: "Information" },
                            { key: "Warning", text: "Warning" },
                            { key: "None", text: "None" }
                        ]
                    }
                ];

                this._initializeFormModels();
                this._initializeFormValidation();
            },

            _initializeFormIds: function () {
                this.formId = "${ez5.controllerName}FormId";
                this.formModel = "${ez5.controllerName}FormModel";
                this.helperFormModel = "${ez5.controllerName}HelperFormModel";
                this.buttonErrMesgId = "${ez5.controllerName}messagePopoverBtnId_";
            },

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

            _initializeFormModels: function () {
                this.helperComponents = new HelperComponents(this, this.autoG);
                this.formValues = this.helperComponents.getValuesFromAutoG();
                this.helperFormValues = this.helperComponents.extractVisibilityAndEditability();

                this.getView().setModel(new JSONModel(this.formValues), this.formModel);
                this.getView().setModel(new JSONModel(this.helperFormValues), this.helperFormModel);
            },

            _initializeFormValidation: function () {
                this.finalValidation = new FinalValidation(
                    this,
                    this.formModel,
                    this.pageId,
                    this.autoG,
                    this.buttonErrMesgId
                );
            },

            handleMessagePopoverPress: function (oEvent) {
                this.finalValidation.handleMessagePopoverPress(oEvent);
            },

            onSubmit_: async function () {
                const data = this.getView().getModel(this.formModel).getData();

                if (this.finalValidation.onSave(data)) {
                    return false;
                }

                this.setBusy(this.formId, true);

                try {
                    const savedRecord = await this.dummyBackend.create(data);
                    this._publishDummyBackendChange(savedRecord);
                    this._showSubmitSuccess();
                    this.initialForm();
                    return true;
                } finally {
                    this.setBusy(this.formId, false);
                }
            },

            _publishDummyBackendChange: function (savedRecord) {
                sap.ui.getCore().getEventBus().publish(
                    this.dummyBackendChannel,
                    this.dummyBackendChangedEvent,
                    { record: savedRecord }
                );
            },

            _showSubmitSuccess: function () {
                sap.m.MessageBox.success("Your submission was successful!", {
                    title: "Success"
                });
            },

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

        });
    }
);