UI5 Easy Use (EZ5) ✨

EZ5 is a CLI tool that helps UI5 developers build faster by generating common app structure, pages, components, routing updates, and i18n bindings.

What’s New in EZ5

• Supports JavaScript and TypeScript UI5 projects.
• Imports editable templates into your project.

Table Of Contents

• UI5 Easy Use (EZ5) ✨
  • Table Of Contents
  • What Is EZ5
  • Why Use EZ5 And What Is The Benefit
  • Installation + Run
  • Need a UI5 Project First?
    • SAP Fiori Generator
    • Easy UI5
  • Features
    • Init App
    • Create Pages
    • Insert Components
    • Translate i18n
    • Import Templates
    • Standard Routing
    • Flexible Layout Routing
  • More Details
    • Init App
    • Create Pages
    • Insert Components
    • Translate i18n
    • Import Templates
  • What Is Updated
  • What Is Coming Soon

What Is EZ5

EZ5 is a powerful SAPUI5 helper tool designed to streamline and accelerate repetitive project tasks. It enables developers to quickly initialize application structures, generate pages, and seamlessly integrate ready-made form, table, and chart components.

In addition, EZ5 provides a set of out-of-the-box utilities—such as validation handling, visibility control, and more—helping reduce boilerplate code and improving consistency across the application. It also supports automatic updates to i18n files, ensuring efficient management of multilingual content.

EZ5 is built specifically for UI5 developers who want to move faster without sacrificing control—keeping all generated code clean, fully editable, and easy to understand and maintain.

↑ Back to contents

Why Use EZ5 And What Is The Benefit

EZ5 helps when you want to move faster without manually repeating the same controller, view, routing, and i18n work.

Benefits:

• faster UI5 project setup
• faster page creation
• automatic route and target updates
• reusable form, table, and chart generation
• automatic i18n binding for XML text
• support for standard and flexible layout routing
• generated code that can still be edited by the developer

↑ Back to contents

Installation + Run

Requirements:

• Node.js >=22
• npm

Install EZ5 inside your UI5 project:

npm install ui5_easy_use
node node_modules/ui5_easy_use/auto_add_json.js
npm run ez5

If your project is missing required UI5 libraries, install them first:

npm install -g @ui5/cli
ui5 add sap.ui.table sap.tnt sap.f sap.uxap sap.suite.ui.commons sap.viz

↑ Back to contents

Need a UI5 Project First?

If you do not already have a UI5 project, create one using one of the following generators:

SAP Fiori Generator

npm install -g yo @sap/generator-fiori
yo @sap/fiori

Easy UI5

npm install -g yo generator-easy-ui5
yo easy-ui5

↑ Back to contents

Features

Init App

• Use it to prepare the project base.
• Creates the base app setup and adds the required EZ5 support files to the current UI5 project.

Create Pages

• Use it to add new UI5 pages faster (by adding View + Controller).
• Creates new UI5 pages and registers them in routing/navigation files.

Insert Components

• Use it to add reusable UI blocks.
• Adds ready form, table, or chart logic into selected controllers and views.

Translate i18n

• Use it to convert UI text into translation keys.
• Converts static XML text into i18n bindings and updates the i18n properties file.

Import Templates

• Use it to copy editable EZ5 templates into your project.
• Lets you customize supported page, component, API, and i18n templates without editing node_modules.

Standard Routing

• Use it for normal app page navigation.
• Supports normal page routing with sap.m.routing.Router.

Flexible Layout Routing

• Use it for multi-column page flow.
• Supports sap.f.routing.Router with list, details, and more-details page flow.

↑ Back to contents

More Details

Init App

Use this feature when you start using EZ5 in a UI5 project.

What it generates:

• base app controller/view templates
• support files under webapp/ez5
• environment/config helper files such as webapp/ez5/helper/Env.js
• i18n bundle files
• navigation and routing support files

What it updates:

• webapp/manifest.json
• app routing configuration
• base app structure files

How it affects the project:

• prepares the app for EZ5 page, component, routing, and i18n workflows
• may overwrite initialization assets after confirmation

How to use:

1. Run npm run ez5.
2. Select Create Init App.
3. Select router mode.
4. Confirm the initialization step.
5. Run and test the UI5 app.

Important options:

• sap.m.routing.Router for normal routing
• sap.f.routing.Router for flexible column layout routing

Configuration note:

• webapp/ez5/helper/Env.js is used for current user configuration.
• It can hold values such as user ID, user name, and user roles.
• EZ5 access logic uses these roles to decide which pages the current logged-in user can access.
• Use the same role names here that you will assign to pages in rulesNavList.json.
• Review this file after initialization and adjust it to match your user/access setup.

Example:

this.user = {
  id: "EMP001",
  name: "Ali",
  roles: ["normal", "admin"]
};

Use this file to define the current logged-in user data that your page-access logic depends on.

Create Pages

Use this feature when you want to add a new page without manually creating every route, target, controller, and view.

What it generates:

• controller file under webapp/controller
• XML view file under webapp/view
• route and target entries
• navigation metadata where needed
• page rule metadata such as webapp/model/rulesNavList.json

What it updates:

• webapp/manifest.json
• navigation metadata files
• route-role metadata where needed

How it affects the project:

• the new page becomes registered in the app routing
• for flexible layout pages, parent navigation can be prepared automatically
• page-related rule metadata can be extended so navigation and page access stay aligned with the created pages

How to use:

1. Select Create Pages.
2. Select the page type.
3. Enter the page name.
4. If you select Details, EZ5 will ask for the parent List page.
5. If you select Details_details, EZ5 will ask first for parent 1: List, then for parent 2: Details.
6. Review the generated controller, view, and route.

Important options:

• Normal for normal pages
• List for flexible layout list pages
• Details for second-column pages
• Details_details for third-column pages

Configuration note:

• webapp/model/rulesNavList.json is used to assign rules to pages.
• These rules decide whether the current logged-in user can see or access a page.
• The check is based on the user roles defined in Env.js.
• Use the same direct role names from Env.js, such as normal or admin.
• After creating pages, review this file and adjust the page rules to match your project access logic.

Example:

{
  "RouteHome": ["normal", "admin"],
  "RouteAdminDashboard": ["admin"],
  "RouteOrdersDetails": ["normal", "admin"]
}

Simple meaning:

• each page has allowed roles
• the current user roles come from Env.js
• if the user has a matching role, the page can be shown/accessed

Flexible layout behavior:

• List is the first layout level
• Details shows selected record information
• Details_details shows deeper selected record information
• EZ5 can wire list-to-details and details-to-more-details navigation
• back navigation is prepared for details and more-details pages

Insert Components

Use this feature when you want to add a reusable form, table, or chart into an existing UI5 page.

What it generates:

• controller helper methods
• required controller dependencies
• generated XML structure for the selected component

What it updates:

• selected controller file
• selected XML view file

How it affects the project:

• inserts form/table/chart logic into the selected controller
• inserts the generated XML into the selected position in the target view
• keeps the developer in control of where the component is inserted

How to use:

1. Select Insert Components.
2. Select Form, Table, or Chart.
3. Select the target controller.
4. Choose how to target the view.
5. Select the insertion position from the XML hierarchy.
6. Review and test the generated component.

Important options:

• Form generates form setup and XML.
• Table generates table setup, row action logic, and XML.
• Chart generates chart setup, shared data loading, chart type switching, and XML.
• Select Position uses the matching view for the selected controller.
• Change View lets you select another view from the project.

Configuration notes:

• this.autoG is the configuration array used by the generated form/table logic.
• Update it inside initialForm() or initialTable().
• EZ5 uses it to determine field names, initial values, types, validation rules, visibility, editability, and generated component behavior.
• After inserting a component, review this.autoG first, because it controls how the generated UI behaves.
• For charts, getChartSettings() is the main configuration function.
• The default chart example shows Employees by Country from the shared dummy backend data.

Real structure:

this.autoG = [
  {
    fieldName: "EmployeeId",
    value: "",
    type: "Input",
    rules: "required|number",
    visible: true,
    editable: true
  }
];

Form example:

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: "JoinDate", value: "", type: "DatePicker", rules: "required|zDate", visible: true, editable: true }
];

Table example:

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 }
];

Chart example:

getChartSettings: function () {
  return {
    chartType: "column",
    dataSource: { type: "dummyBackend" },
    dimensionKey: "Country",
    dimensionLabel: "Country",
    measureKey: "Employees",
    measureLabel: "Employees",
    aggregation: "count",
    title: "Employees by Country",
    containerTitle: "Employee Chart",
    sortBy: "dimension",
    sortDirection: "asc",
    limit: 0
  };
}

Common field types:

• Input
• Text
• DatePicker
• Select
• TextArea
• CheckBox
• RadioButtonGroup
• TimePicker

Common validation usage:

• required
• number
• text
• email
• min-3
• max-25
• lang-en
• lang-ar
• percentage
• zDate
• zDate-<from>-<to>

Advanced grouped rules:

• atLessG1-2
• atMaxG1-3

Practical meaning:

• for forms, this.autoG controls generated fields and input behavior
• for tables, this.autoG controls generated columns and displayed data structure
• for charts, getChartSettings() controls dimension, measure, title, chart type, sorting, limit, and aggregation
• visible controls whether the field is shown
• editable controls whether the field can be edited
• chart aggregation supports count, sum, avg, min, and max
• after changing this.autoG, test the generated UI and adjust rules/types as needed
• after changing getChartSettings(), test the generated chart and chart type selector

Translate i18n

Use this feature when you want to convert XML static text into i18n bindings.

What it generates:

• i18n keys
• i18n property entries for missing keys

What it updates:

• selected XML files
• active i18n properties file

How it affects the project:

• static supported XML text becomes {i18n>key} bindings
• existing UI5 model bindings are skipped and kept unchanged

How to use:

1. Select Translate_i18n.
2. Select Auto Binding.
3. Select the target folder or files.
4. Review the changed XML and i18n properties file.

Configuration notes:

• EZ5 writes keys to the active English i18n bundle when available
• existing bindings like {model>FieldName} are not changed

Import Templates

Use this feature when you want full control over the templates EZ5 uses for generation.

What it generates:

• editable template copies under webapp/ez5/custom-templates

What it updates:

• only the selected custom template folders

How it affects the project:

• EZ5 reads custom project templates first
• if a custom template is missing, EZ5 falls back to the built-in package template
• init-app templates are not imported in this step

How to use:

1. Select Import Templates.
2. Select one or more template groups.
3. Confirm overwrite if custom templates already exist.
4. Edit the copied files under webapp/ez5/custom-templates.
5. Run the normal EZ5 workflow that uses those templates.

Supported groups:

• page-management
• components
• api
• i18n

↑ Back to contents

What Is Updated

• Cleaner new EZ5 runtime structure
• Form now saves to shared dummy backend data
• Table now reads from the same dummy backend data
• Form and table examples now work together
• Chart now supports reusable config with the same employee example
• Better form validation message handling
• Added chart component template support
• Node.js requirement upgraded to >=22
• Removed unused glob dependency warning
• Clean and improve template content and code quality.
• Clean and improve Utilities.
• EZ5 now supports TypeScript UI5 projects
• EZ5 can import editable custom templates into the target project

↑ Back to contents

What Is Coming Soon

• More template customization options

↑ Back to contents