ez5 🚀 – UI5 App Generator

ez5 is an auto-generating UI5 package that helps you build UI5 applications faster and smarter by automating tedious setup processes and providing out-of-the-box utilities.

---

✨ Features

🔧 Init App

• Main Structure: Defines the overall app layout and routing logic.
• Side Navigation + Home Page: Built-in navigation with a tail section on the home page.
• i18n + Dark Mode Toggle: Easily switch languages and toggle between dark/light themes.
• Restricted Page Access: Control user access to pages based on their roles.

➕ Add Page

• Add new pages easily.
• Automatically registers new pages into manifest.json and navList.json.
• Instantly available in the side navigation menu.

📦 Insert Components

Component	Description
Form	Generates a form with validation, error display, and data binding.
Table	Adds a searchable, filterable, sortable table.
Chart	(Coming Soon) Interactive charts for your dashboards.

🌐 Translate (i18n)

• Binds text for multi-language support.
• Includes a language switcher with simple configuration.

---

📥 Installation

Run the CLI tool to configure the package:

1npm install ui5_easy_use
2node node_modules/ui5_easy_use/auto_add_json.js
3npm run ez5

You will see the following menu:

## Init App 🌟
## Add Page 📄
## Insert Components 🧩
## Translate_i18n 🌐
## Exit ❌

---

🚀 Usage Guide

1️⃣ Init App

Defines base setup and enables routing and page access control.

• Routing Options:

  • f.route: Flexible column layout (3-layout structure)
  • m.route: Standard routing

• Access Control:

  • Define User Roles in webapp/ez5/helper/Env.js

  • Assign Page Roles in webapp/model/rulesNavList.json

  • Classes Involved:

    • UserModel.js
    • AuthService.js
    • AccessControl.js
    • PagesAccess.js

• Overwritten Files:

  • Component.js, App.view.xml, App.controller.js, etc.

• New Files Added:

  • SideNavigation.fragment.xml, navList.json, rulesNavList.json, etc.

2️⃣ Add Page

Quickly add new pages with proper routing.

• Templates:

  • Located at: webapp/ez5/pagemt/
  • Supports: Normal, Details, Details_details layouts

• Routing Type:

  • m.route: Basic single-page setup
  • f.route: Supports nested views (List, Details, Sub-details)

3️⃣ Insert Components

📄 Form

• Location: webapp/ez5/Components/form

• Steps:

  1. Select Controller → Update this.autoG inside initialForm
  2. Select View → Form auto-generated

📊 Table

• Location: webapp/ez5/Components/table

• Steps:

  1. Select Controller → Update this.autoG inside initialTable
  2. Select View → Table auto-generated

4️⃣ Translate i18n

• Instructions:

  • Use spacebar to select, a to toggle all, i to invert, and Enter to proceed.
  • Select target folder → i18n bindings added automatically.

---

📂 Folder Structure Highlights

1webapp/
2├── ez5/
3│   ├── initapp/
4│   ├── Components/
5│   │   ├── form/
6│   │   └── table/
7│   ├── auth/
8│   └── pagemt/
9├── model/
10│   ├── navList.json
11│   └── rulesNavList.json

---

🔐 Role-Based Access Sample

1// webapp/ez5/auth/AccessControl.js
2roleMatrix = {
3  normalAccess: ["normal", "admin"],
4  adminAccess: ["admin"]
5}
6
7// webapp/ez5/helper/Env.js
8roles = ["normal", "admin"]
9
10// webapp/model/rulesNavList.json
11{
12  "AdminPage": ["adminAccess"],
13  "UserDashboard": ["normalAccess", "adminAccess"]
14}
15

---

🧠 Notes

• Fully extensible and customizable.
• Works great for enterprise-ready Fiori apps.
• Ideal for both small projects and large-scale systems.

---

🛠 Maintainers

Developed and maintained with ❤️ by the ez5 contributors.

---

📃 License

This project is licensed under the MIT License. See the LICENSE file for more info.