ui5_easy_use/README.md

A utility package for UI5 projects

# ui5_easy_use: Supercharge Your SAP UI5 Development 🚀

Accelerate your SAP UI5 development with **ui5_easy_use**! This powerful tool allows you to effortlessly generate and expand your app structure, streamline navigation, enable dark mode, quickly create pages, insert essential components like forms and tables, and leverage a full suite of built-in utilities—all accessible via an intuitive CLI.

## Key Features ✨

* **Auto-Code Generation:** Instantly set up your app structure, navigation, and UI components.
* **Built-in Utilities:** Form validation, table sorting, grouping, search, and more.
* **Multi-Language Support:** Seamlessly switch between languages.
* **Dark Theme:** Enhance the UI with a modern dark mode.

## Installation 🔧

**Prerequisite:** Ensure you have an existing SAPUI5/OpenUI5 project.

1. **Install:** 📥
   ```bash
   npm install ui5_easy_use
   ```

2. **Enable CLI:** ⚙️
   ```bash
   node node_modules/ui5_easy_use/auto_add_json.js
   ```

## Usage 🛠️

Run `npm run ez5` to access the interactive menu:

```bash
npm run ez5
```

This will present you with the following options:

* **Create Init App 🌟:** Initialize a new UI5 app.
* **Add Page 📄:** Add a new page to your app.
* **Insert Components 📝:** Insert forms, tables, charts, and more.
* **Translate_i18n 🌐:** Automate i18n bindings.
* **Exit ❌:** Close the menu.


### Create Init App 🌟

* **Description:** Scaffolds a new UI5 app with essential features.
* **Benefits:**
    * Intuitive navigation (side & header)
    * Built-in dark theme
    * REST-based authentication
    * Multilingual support
    * Ready-to-use components (form, table)
    * Essential utilities
    * Developer-friendly tools
* **Important:** Overwrites `App`, `Home`, `Component`, and `manifest`. Use for new projects only.
---

---


### Add Page 📄

* **Description:** Adds a new page with view, controller, navigation, and routing.
* **Benefits:**
    * Automatic generation of view and controller.
    * Seamless integration with side navigation.
    * Configurable access roles.
* **Requirement:** App must be initialized with `Create Init App`.
---

---


### Insert Components 📝

This feature simplifies the insertion of forms and tables with built-in validation and data handling into your UI5 pages.

* **Insert Form with validation to -> PageName.controller.js:** Inserts the necessary data structure (`this.autoG`) into your controller to define form fields and validation rules. You will be prompted to customize the `this.autoG` array.
* **Insert Form with validation to -> PageName.view.xml:** Inserts a fully functional form with validation into the selected view. This option requires the controller to have the `this.autoG` data structure already defined.
* **Insert Table with data to -> PageName.controller.js:** Inserts the necessary data structure (`this.autoG`) into your controller to define table columns and data handling options. You will be prompted to customize the `this.autoG` array.
* **Insert Table with data to -> PageName.view.xml:** Inserts a fully functional table with data binding into the selected view. This option requires the controller to have the `this.autoG` data structure already defined.
* **Back:** Returns to the main menu.
* **Exit:** Exits the interactive menu.

**Workflow:**

**Form Insertion:**

1.  **Controller Setup:** Use "Insert Form with validation to -> PageName.controller.js" to populate the `this.autoG` array in your controller.
2.  **View Insertion:** Use "Insert Form with validation to -> PageName.view.xml" to insert the form into your view.

**Table Insertion:**

1.  **Controller Setup:** Use "Insert Table with data to -> PageName.controller.js" to populate the `this.autoG` array in your controller.
2.  **View Insertion:** Use "Insert Table with data to -> PageName.view.xml" to insert the table into your view.

**Example `this.autoG` Structure (Form):**

```javascript
this.autoG = [
    { fieldName: "EmployeeId", value: "", type: "Input", rules: "required|number", visible: true, editable: true },
    { 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 },
    { fieldName: "Email", value: "", type: "TextArea", rules: "required|email", visible: true, editable: true },
    { fieldName: "Time", value: "", type: "DatePicker", rules: "required", visible: true, editable: true }
];
```

**Example `this.autoG` Structure (Table):**

```javascript
this.autoG = {
    columns: [
        { fieldName: "EmployeeId", header: "ID", type: "Text", visible: true },
        { fieldName: "EmployeeName", header: "Name", type: "Text", visible: true },
        { fieldName: "Country", header: "Country", type: "Text", visible: true },
        { fieldName: "Email", header: "Email", type: "Text", visible: true },
        { fieldName: "Time", header: "Time", type: "Date", visible: true }
    ],
    data: [
        // Your data will be populated here, or via a model.
    ],
    options: {
        // Optional table options (e.g., sorting, filtering).
    }
};
```

---

---


### Translate_i18n 🌐

* **Description:** Automates binding text, titles, and tiles to the i18n model.
* **Benefit:** Simplifies internationalization.
---

---


### Exit ❌

* **Description:** Exits the interactive menu.
---

---

---

---


## Command Summary 📋

| Command                                              | Description                                                  |
|-----------------------------------------------------|--------------------------------------------------------------|
| `npm install ui5_easy_use` 📥                       | Installs the package.                                       |
| `node node_modules/ui5_easy_use/auto_add_json.js` ⚙️  | Adds the `ez5` command to `package.json`.                  |
| `npm run ez5` 🛠️                                    | Opens the interactive menu.                                 |

## Key Benefits ✨

* **Rapid App Setup:** Initialize UI5 apps with core functionality.
* **Modular Page Creation:** Add pages with ease.
* **CLI Convenience:** Manage your app with simple commands.
* **Automated i18n:** Simplify localization.


## Keywords 🔍

UI5, SAP Fiori, app generator, CLI, MVC, page creation, navigation, routing, theming, localization, i18n, dark theme, authentication, modular app, utilities, side navigation, header navigation, table, form.

## Legacy Commands 📜

* **Initialize App:** `npm run c-mvc init FOW-HLP` (Overwrites `App` and `Home`).
* **Add Page:** `npm run c-mvc <PageName> r` (Adds a new page with routing).

## Changes 🔄

* Interactive menu for easier navigation.
* Clearer, more concise descriptions.
* Unified command naming (`ez5`).
```

**Improvements:**

* **Clearer Structure:** Improved heading hierarchy and formatting for better readability.
* **Concise Descriptions:** More focused and to-the-point explanations.
* **Enhanced Visual Appeal:** Used emojis and formatting to make the document more engaging.
* **Streamlined Information:** Removed redundant information and reorganized content.
* **Table for Commands:** Provides a quick reference for all available commands.
* **Keywords Section:** Helps users find relevant information quickly.


This revised README provides a more professional and user-friendly introduction to your `ui5_easy_use` tool.