npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2025 – Pkg Stats / Ryan Hefner

ui5_easy_use

v2.2.5

Published

A utility package for UI5 projects

Downloads

3,050

Readme

ui5_easy_use 🚀

A streamlined tool to quickly set up and expand SAP UI5 applications with navigation, theming, modular page generation, and localization support.


Installation 🔧

To install and initialize ui5_easy_use, follow these steps:

Note:
The ui5_easy_use package requires an existing SAPUI5/OpenUI5 project as a prerequisite. Ensure that you have a UI5 project set up before proceeding with the installation.


  1. Install the package 📥
    npm install ui5_easy_use
  2. Enable custom CLI commands ⚙️
    Run the following command to add the ez5 script to your package.json:
    node node_modules/ui5_easy_use/auto_add_json.js

Usage 🛠️

After installation, use the npm run ez5 command to interactively select your desired action:

View Old Features
npm run ez5

This will display the following options:

Select your main action: (Use arrow keys)
❯ ## Create Init App 🌟
  ## Add Page 📄
  ## Translate_i18n 🌐
  ## Exit ❌

1. Create Init App 🌟

## Create Init App 🌟 ##
  • Description: Initializes a fresh SAP UI5 application with essential features and utilities for rapid development.
  • Features:
    • Navigation 🗺️:
      • Side Navigation for intuitive app structure.
      • Header Navigation for quick access to key sections.
      • Pre-configured routing for seamless navigation between pages.
    • Theme Support 🎨:
      • Built-in Dark Theme support for enhanced user experience.
    • Authentication 🔒:
      • REST-based access control with customizable rules (default roles: ['normal', 'admin']) configured in Component.js and extended in webapp/model/rulesNavList.json.

        Explain the usage`: in rulesNavList.json

        {
          "RouteSample": ["admin"] // only the user have admin in roles can access to this, we have ['normal', 'admin'] in Component.js.
        }
    • Localization 🌍:
      • Language-switching functionality to support multilingual applications.
    • Sample Components 🧩:
      • Form: A simple form with built-in validation.
      • Table: A feature-rich table with sorting, grouping, filtering, and search capabilities out of the box.
    • Utilities 🛠️:
      • Pre-packaged utility files included in webapp/ez5 for streamlined development.
      • Includes all files from this package for easy integration.
    • Developer Tools 💻:
      • Tailored tools for simplified navigation and efficient app management.
  • Important: This option is intended for fresh projects only. It will overwrite the following files:
    • App - View and Controller
    • Home - View and Controller
    • Component - The file itself.
    • manifest - Route and Target configurations.
  • Usage: Select this option to set up the initial structure of your SAP UI5 application.

2. Add Page 📄

## Add Page 📄 ##
  • Description: Adds a new page to an existing SAP UI5 application.
  • Features:
    • Generates the View and Controller for the new page.
    • Adds the new page to the Side Navigation.
    • Sets up Routing for the page.
    • Allows setting roles for the page (default: normal). Customize roles in rulesNavList.json.
  • Important: This option requires the application to be initialized using ## Create Init App 🌟 ##.
  • Usage: Select this option to create a new page in your application.

3. Translate_i18n 🌐

## Translate_i18n 🌐 ##
  • Description: Automates the process of binding text, titles, and tiles to the i18n model for localization support.
  • Features:
    • Simplifies internationalization by integrating i18n across the application.
    • Ensures consistent localization for text, titles, and tiles.
  • Usage: Select this option to bind text and titles to the i18n model for easy translation.

4. Exit

## Exit ❌ ##
  • Description: Exits the interactive menu.

Command Summary 📋

| Command | Description | |---------------------------------------------------|-----------------------------------------------------------------------------------------------| | npm install ui5_easy_use 📥 | Installs the ui5_easy_use package. | | node node_modules/ui5_easy_use/auto_add_json.js ⚙️ | Adds the ez5 command to package.json for easier command-line usage. | | npm run ez5 🛠️ | Displays an interactive menu to select actions like initializing the app, adding pages, etc. |


Key Features

  • Effortless App Initialization 🌟: Sets up a UI5 app with essential navigation, theming, and structure.
  • Modular Page Creation 📄: Quickly add new pages with View, Controller, navigation, routing, and i18n binding in place.
  • CLI Convenience ⚡: Use straightforward commands to manage the app structure without manual setup.
  • i18n Integration 🌐: Automatically binds text, titles, and tiles to the i18n model for localization support.

With ui5_easy_use, creating a fully-featured UI5 application has never been simpler!


Keywords 🔍

SAP UI5 app generator, SAP Fiori development tool, UI5 application scaffolding, SAP UI5 CLI commands, UI5 MVC generator, SAP UI5 page creation, SAP UI5 navigation setup, SAP UI5 routing configuration, SAP UI5 theming support, SAP UI5 localization, SAP UI5 i18n integration, SAP UI5 dark theme, SAP UI5 authentication, SAP UI5 modular app, SAP UI5 quick start, SAP UI5 developer tools, SAP UI5 automation, SAP UI5 utility library, SAP UI5 side navigation, SAP UI5 header navigation, SAP UI5 routing and navigation, SAP UI5 sample components, SAP UI5 table features, SAP UI5 form validation, SAP UI5 REST API integration, SAP UI5 role-based access, SAP UI5 multilingual support, SAP UI5 webapp utilities




Old Features Documentation {#old-features} 📜

Here’s the documentation for the old features of ui5_easy_use, focusing on the two commands (init and creating a new page):


Initialize the Application 🌟

npm run c-mvc init FOW-HLP
  • Description: Initializes the application structure with essential features.
  • Includes:
    • Side Navigation 🗺️
    • Header Navigation 🗂️
    • Dark Theme Support 🎨
    • Initial Routing for seamless navigation between pages 🛣️
    • And much more!

Important: The following files will be overwritten (Force Overwrite - FOW):

  • App - View and Controller
  • Home - View and Controller

Create a New Page Named "Home" 📄

npm run c-mvc Home r
  • Description: Creates a new page in the application.
  • Features:
    • Generates the View and Controller for the new page.
    • Adds the new page to the Side Navigation.
    • Sets up Routing for the page. You can replace "Home" with any page name of your choice. The "r" flag specifies that the page should be included in the routing.

This version retains only the old features and their descriptions, as requested.


Explanation of Changes 🔄

  1. Interactive Menu 🛠️:
    • Added an interactive menu (npm run ez5) for users to select their desired action.
    • Options include Create Init App 🌟, Add Page 📄, Translate_i18n 🌐, and Exit ❌.
  2. Clear Descriptions 📝:
    • Each option in the menu includes a clear description of its purpose and features.
    • Important notes are highlighted to ensure users understand when and how to use each option.
  3. Improved User Experience 😊:
    • The interactive menu makes it easier for users to navigate and choose the appropriate action without memorizing commands.
  4. Consistency 🔗:
    • Unified the naming convention (ez5) for all commands to make them easier to remember and use.

Icons Used 🎨

  • 🌟: Create Init App
  • 📄: Add Page
  • 🌐: Translate_i18n
  • ❌: Exit
  • 🛠️: Usage / CLI Commands
  • 📥: Install
  • ⚙️: Configuration / Setup
  • 📋: Summary
  • ✨: Key Features
  • 🔍: Keywords
  • 📜: Old Features Documentation
  • 🔄: Explanation of Changes