S4H.GettingStarted

English | 中文

• 🛠️ NGen Introdunction

🔧 Getting Started

📋 Prerequisites

• Node.js (version 18 or higher)
• Yarn (optional)

📦 Installation

1. Download the project source code: git clone https://github.com/meta-d/sap-fiori-templates.git
2. Enter the project directory: cd sap-fiori-templates/btp-cap-monorepo
3. Install the dependencies: npm install --legacy-peer-deps or yarn install
4. Change the attribute platform in the apps/launchpad/src/environments/environment.development.ts (and apps/launchpad/src/environments/environment.ts) file to value S4H to match your environment.
5. Start webapp npm run start:mock or yarn start:mock
6. Open the webapp in your browser: http://localhost:4200

Tip: Network Error

If you encounter a network error during the installation, you can use different npm registry to install the dependencies. For example,

npm install --legacy-peer-deps --registry=http://registry.npmmirror.com

📡 Live Server

If you want to connect to a S4H live server, you need to configure the proxy to forward the request to the ABAP server.

The proxy file apps/launchpad/proxy.conf.json:

{
  ...,
  "/sap/": {
    "target": "<your sap abap server url>",
    "secure": false,
    "changeOrigin": true,
    "auth": "<SAP Username>:<SAP Password>"
  }
}

Then running npm run start:s4h:live or yarn start:s4h:live to start the local development application and it will call the live OData service, all the requests starting with /sap/ are forwarded to the target server, and the account information in auth is used authorization.

🌱 Environments

There is various environment variables that can be set to control the behavior of the application. See Environments

🔒 Authorizations

Menu authorization refers to displaying different menu app items based on the user's permissions after logging into the system. See Authorization for more details.

🏚️ Fiori Legacy Applications

If the NGen platform is deployed on an S4H system and there are existing traditional Fiori applications within the S4H system, you can learn how to automatically integrate traditional Fiori applications in NGen and configure custom Fiori application routing within the NGen platform.

For more detailed information, please refer to Integrating Fiori Legacy Applications.

🔌 Calling OData Services

In NGen, we provide a comprehensive solution for calling OData services in your projects.

For more detailed information, please refer to How to Call OData Services.

🔖 Page Components

The primary task in real projects is to develop page applications for each requirement. Learn how to quickly create page components in your project.

For more detailed information, please refer to Creating Page Components.

🚀 Deployment

Once the program is ready, the next step is to deploy the project to the SAP S4H platform.

For more detailed information, please refer to Deploy.

📁 Git Push

After the project development is complete, the team needs to effectively manage the project source code. Learn how to use Git repositories for version control of your project.

For more detailed information, please refer to Git Repository.

📨 Notifications

The NGen platform supports the notification mechanism within SAP S4H systems. Once the notification service is enabled in the S4H system, the NGen platform will automatically retrieve server notifications.

For more detailed information on configuring Fiori notifications in NGen, please refer to Notifications.