English | 中文

Although the traditional SAP Fiori framework provides users with an intuitive and modern user interface, it also faces some challenges:

• Complex Development: The development process of the traditional Fiori framework is relatively complex, requiring a significant amount of code to be written to implement specific functionalities, leading to longer development cycles.

• Limited Functionality: The UI components of the traditional Fiori framework are limited by its existing component library, posing certain limitations for customized application development.

• Poor Performance: When dealing with large and complex applications, the performance of the traditional Fiori framework may be affected, resulting in longer loading times and slower response speeds.

In recent years, with the development of front-end technologies, modern front-end frameworks such as Angular and Vue have gradually become mainstream. They have the following advantages compared to the traditional Fiori framework:

• Component-Based Development: Angular/Vue frameworks adopt a component-based development model, allowing developers to break down applications into multiple independent components, making the code structure clearer and more maintainable.

• Robust Ecosystem: Angular/Vue have large and active development communities, providing rich plugins, tools, and solutions. Developers can solve problems more quickly and share and learn from others' experiences.

• Flexible UI Customization: Angular/Vue frameworks provide rich UI component libraries and customization options. Developers can easily customize UI styles and layouts according to project requirements.

• Performance Optimization: Modern front-end frameworks employ techniques such as asynchronous rendering and lazy loading, significantly improving application performance, reducing loading times, and page rendering times.

• Rich Component Templates: The new framework provides a large number of predefined feature component templates covering various types of application requirements, including workflows, analytics, transactions, and AI applications, greatly improving development efficiency.

• Seamless Integration with Existing Fiori Applications: The new framework seamlessly integrates with existing Fiori applications without the need to modify existing code, achieving smooth upgrades and extensions.

• Embedded Analytics Framework: The new framework provides an embedded analytics framework for quickly building embedded analytics applications, supporting AI-assisted analysis to provide users with more intelligent data analysis capabilities.

• AI Copilot Feature: The new framework integrates the AI Copilot feature, which assists in embedded analytics functionality, providing intelligent data analysis and operations.

By adopting the SAP Fiori NGen new framework based on modern front-end frameworks such as Angular/Vue, customers can realize the following value:

• Improved Development Efficiency: NGen simplifies the development process and provides rich component templates, enabling developers to build feature-rich SAP Fiori applications more quickly.

• Enhanced User Experience: NGen utilizes modern front-end technologies to achieve more flexible and aesthetically pleasing user interfaces, enhancing user experience and satisfaction.

• Intelligent Analytics Functionality: NGen provides embedded analytics framework and AI Copilot functionality, offering intelligent data analysis and operation functions to help users better understand and utilize data.

• Reduced Maintenance Costs: NGen seamlessly integrates with existing Fiori applications, achieving smooth upgrades and extensions, reducing the cost of system maintenance and management.

In summary, by adopting the SAP Fiori NGen new framework based on modern front-end frameworks, customers can benefit from more efficient, intelligent, and competitive SAP application solutions.

NGen is a SAP Fiori framework developed based on modern front-end frameworks such as Angular/Vue, aiming to provide users with more efficient, intelligent, and competitive SAP application solutions.

This project is a complete basic framework that can be used to quickly build SAP Fiori applications and deploy them to SAP systems with one click. The project includes templates for Vue, Angular, and React frameworks, with complete functional templates currently focused on the Angular framework.

This project provides a large number of predefined feature component templates that can be used to create various types of applications, including workflows, analytics, transactions, and AI applications. There are also various functional demos such as dashboards, workbenches, message prompts, pop-up windows, graphics, rich text, tables, etc.

This project can integrate existing Fiori applications seamlessly without modifying the original Fiori application code, achieving seamless integration and upgrades. The framework automatically retrieves existing Fiori applications in the system to load them as application menus, and opens multiple applications in the form of multiple tabs on the same page.

This framework provides an embedded analytics framework for quickly building embedded analytics applications. The embedded analytics framework can read and analyze all Cube models (BW or CDS) in the system, drag and drop them into the required analysis graphics, edit them into the final analysis dashboard page. During this process, AI Copilot can be used to assist analysis.

This project provides the AI Copilot feature, which can be used to quickly build AI applications. Use AI Copilot to assist in embedded analytics functionality and create data analysis graphics. Custom Copilot commands can also be used to let AI operate specific action functions to implement specific extensions of AI capabilities in ERP systems.

This project provides an OData client framework for quickly building client applications that consume OData services. This OData client framework consumes OData services quickly in a functional programming manner, with strong type checking capabilities using the TypeScript language.

The NGen project follows the design principles of modern front-end frameworks Ant Design, adopts a component-based development model, making the code structure clearer and more maintainable.

Leveraging Ant Design principles, the SAP Fiori NGen framework not only provides a beautiful and modern user interface but also offers a rich component library and flexible layout schemes, providing users with a more pleasant and efficient user experience.

• Ant Design Principles: Ant Design is an enterprise-level UI design language and front-end component library known for its elegant and concise design principles. The SAP Fiori NGen framework fully draws on Ant Design's design philosophy, including unified design style, rich component library, and flexible layout schemes, thus providing users with a more beautiful, modern user interface, and enjoyable user experience.

• Unified Design Style: Ant Design's design style is concise, clear, and easy to understand. The SAP Fiori NGen framework follows this design style, ensuring the consistency and unity of the entire application, allowing users to use various functions and components more smoothly.

• Rich Component Library: Ant Design provides a rich UI component library covering various common business scenarios and needs. The SAP Fiori NGen framework integrates the Ant Design component library, allowing developers to build feature-rich and stylistically consistent applications more conveniently.

• Flexible Layout Schemes: Ant Design offers

flexible layout schemes, including grid systems and responsive design. The SAP Fiori NGen framework fully utilizes these layout schemes, ensuring that the application can adapt to different screen sizes and devices, improving user accessibility and usability.

Based on unified design principles, the NGen framework provides a wealth of customization options, allowing developers to customize UI styles and layouts easily according to project requirements.

• Light/Dark Theme Switching
• Menu Bar Theme
• Custom Primary Colors
• Fiori Application Themes
• Navigation Menu Bar Mode
• Fixed Sidebar
• Fixed Header Bar
• Display Tabbed Page Bar
• Fixed Tabbed Page Bar
• WebGUI Page Opening Mode

The NGen project can be deployed to the following two platforms.

See how to Getting Started on S4H platform.

This project can also be deployed to the SAP BTP platform with one click, making it a good choice as a customized microservices platform for SAP S4H public cloud systems.

TODO