Skip to Content
Technical Articles

Create a Fiori Application using Yeoman Generators and consume OData services exposed by a SAP Gateway Demo System

In this blog post you’ll learn how to quickly develop a Fiori App using a preconfigured template “Master Detail” capitalizing Yeoman generators and consume data from a back-end demo system.

Prerequisites:

  • You’ll need to sign up in the SAP Gateway Demo System, you can follow this tutorial.
  • You’ll need a SAP Cloud Platform trial account (with SAP Business Application Studio enabled)
  • You’ll need to register a new destination into your SAP Cloud Platform trial account in order to consume the OData services exposed in this SAP Gateway demo system, you can follow this tutorial.

After you have access, you can see in this URL, the OData services we are going to consume in this Fiori application. We’re going to develop a Sales Orders app, using the SalesOrderSet and its LineItems:

https://sapes5.sapdevcenter.com/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/SalesOrderSet

Now create a Fiori Dev Space in your SAP Business Application Studio:

 

Open the Workspace, select your project’s folder and let’s start building the application:

Let’s use the yo command, capitalizing the Yeoman generators SAP Business Application Studio includes to make it easier and faster to develop Fiori Applications (and of course taking advantage of the Fiori Apps templates).

You can install external generators from the npm registry to SAP Business Application Studio to improve developer’s experience by building applications so much faster. For more information, see the documentation.

Open a new terminal:

And type the following commands, capitalizing Yeoman features:

As you can see you are specifying the project name, the name space, the data providing system (that in this case is the ES5 from the SAP Gateway Demo System) and also you are specifying the template you want to use, in this case a Master Detail Application to see all the Sales Orders and which Products they contain.

After the project is generated, you can start “playing” a little bit with the code if you want, like previsualizing how is the layout of the app (inside the webapp and views folders) or by running it with the Run Configuration feature.

For now, let’s go to Build the Multi-Target Application first. Right click on the .mta file and click Build MTA.

Now, let’s deploy it. Right click on the .mtar file and deploy it (in this case as I haven’t set up my Cloud Foundry environment where the application is going to be deployed, I’ll need to do it):

I confirm my Cloud Foundry API Endpoint and proceed to enter my SAP Cloud Platform credentials (email and password) plus the CF organization and space.

When the deployment is finished, I’ll be able to see in which route the app is available in the terminal:

Keep in mind that as this application is a stand-alone application, it is required to add the namespace and project name to the URL like this:

<URL_from_terminal>/<mynamespace><project_name>/index.html

In my case it is <URL_from_terminal>/nssalesOrders/index.html, like this:

 

You can continue exploring the application code in order to improve it including its design. I hope you’d enjoyed this exercise 🙂

Be the first to leave a comment
You must be Logged on to comment or reply to a post.