A quick note for myself (and readers who are interested) regarding the latest development in the ABAP langauge, namley  ABAP RESTful Programming Model (RAP): https://blogs.sap.com/2018/10/11/abap-is-evolving/

Part II: Let’s Play with Development Tools, SAP Demo Data, CDSs, oData Services, and SAP Fiori Apps

In Part I, we deployed our own SAP S/4HANA 1709 instance from SAP CAL onto GCP. In Part II, we will build on the previous part, and play with development tools and ABAP Programming Model.

We will download and set up two SAP development tools: ABAP Development Tool (ADT) and Web IDE (Personal Edition). We will then connect them to your instance of SAP S/4HANA 1709 on GCP, and create a very simple Fiori app based on the ABAP Programming Model. We will be covering the following steps (the number continues from Part I of this blog tutorial series):

4. Playing with ABAP Development Tool (ADT)

a. Setting up Java on Your Windows PC
b. Dealing with Eclipse and ADT Plug-in
b. Setting up connection from ADT to Your S/4HANA Instance via Transaction SMGW
c. Generating Flight Demo Data
d. Creating a Custom CDS View
e. Publishing and Testing Your oData Service

5. Playing with Web IDE (Personal Edition)

a. 7-zip
b. Setting Up Web IDE
c. Creating your own Fiori App Using a Template on Web IDE

Part II would be a little more “technical*” than Part I. You do not need to be a command prompt guru, but expect some level of command prompt and configuration directly in text files.

* What does “technical” mean anyway?

Time You Need Spend

• I would have to guess: 60-90 minutes of your time actively facing and typing in your computer, if you want to just go through the steps
• Time to download JRE, Eclipse, Web IDE, and 7-Zip. You may need to check your Windows being 64-bit or 32-bit. You may want to take a bit of time to be careful and accurate here to avoid potential rework. So… 60-120 minutes, perhaps.
• Additionally, 60-120 minutes to wait for zip files for Eclipse and Web IDE to unzip. You could run the unarchiving process and have a lunch, snack, beer, or dinner. I think this would also depend on your machine performance. I remember that Web IDE took longer than my lunch break (sorry, I did not log the duration of time it took); Eclipse was quicker to unzip but it is also rather large an archive file (my screen shot shows estimate time of 10 minutes)

 

 

---

 

 

Step 4. Let’s Set Up ABAP Development Tool (ADT)

If you are skimming through this tutorial, and are familiar with Eclipse and Java, you will not need to read all of Step 4. For these people, I’ll note one thing: Go to transaction SMGW and set up RFC for ADT.
(Detail is explained in 4.c. Setting up connection from ADT to Your S/4HANA Instance via Transaction SMGW).

Otherwise, follow this way, please.

You could still use transaction SE80 via SAP GUI for your ABAP development. Why not we try using ADT? Probably you have seen it in action. Let’s play with this newer tool for ABAP development in person.

Here is the documentation on prerequisites and the procedure to install it: https://tools.hana.ondemand.com/#abap.

Note: I did not have to install DLLs VS2010 (listed in the bottom of the table above). It is possible that my Windows had come with it already installed (I am using my company PC). If you have any trouble with this, I’m pretty sure Google can help you find what to do.

ADT is a plug-in to Eclipse. Eclipse is an integrated development environment (IDE) written (mostly) in Java. If you are familiar with Eclipse, the procedure to install ADT is simple. If you haven’t dealt with Java on your Windows, then it could be a little confusing at first. Windows normally does not come with a Java environment, so you will need to get an installer execution file and install a runtime by yourself.

Note: It is possible that there are a newer version of Eclipse and JRE are available when you are reading this. In this case, I will leave it to you to decide which version to go with. I used Oxygen, the latest at the time I played with ADT (around May 2018).

Note 2: As I took a bit of time to finish this blog, a new release of Eclipse (Photon) has arrived. I will stick to Eclipse Oxygen as it is the one I used.

 

 

4.a. Setting Up Java on Your Windows PC

Pay particular attention to 32-bit or 64-bit version throughout the installation process. If you are not careful, like me, your Eclipse will fail to launch, even though it looks like you have installed it correctly.

I do not hesitate to use Google to find out how I can confirm that I have 64-bit Windows (or 32-bit).

Next, check whether your PC already has a Java Runtime, or JRE (Java Runtime Environment), and its version.

Open Start menu, and type cmd to start the command prompt.

Type the following command:

java -version

If your PC already has a JRE, then it will return the JRE version like in the screen shot. My JRE is version 1.8.0 and it’s for 64-bit Windows. If your PC has an older version, I think it best to uninstall it and install a new version. I did not have to do this. Googling should tell you how; from memory, you can do this via Control Panel of Windows (or Settings).

To obtain JRE, I used this site to download the 64-bit version (I used version 8). My knowledge of Java is not very much. version 8 seems to be a bit old. But it works. Version 10 is the latest as at the time of writing this. I believe you could choose to use the latest version just fine.

http://www.oracle.com/technetwork/java/javase/downloads/jre8-downloads-2133155.html

Select the radio button to accept license agreement. It’s highlighted with a red box in the screen shot below; yes, I always miss it and get an error message.

From my experience, try to avoid using the download from this site:

https://java.com/en/download/

I ended up having a 32-bit version (I am not sure if you can choose 64-bit version in this site). I ended up repeating the installation process from the Oracle hosts (the screen shot above).

 

 

4.b. Dealing with Eclipse and ADT Plug-in

You can get Eclipse www.eclipse.org; however, for us, let’s use the link provided in the ADT site (see the screen shot below and where my cursor is).

There are so many variants that come with additional tools. All we need is a baseline for ABAP developers. “Eclipse IDE for Java Developers” is perfectly fine for us.

I am not too sure if this big “Download” button (top of the screen) is smart enough to detect which variant of Windows my machine is.  As I know I have Windows 64-bit and have installed JRE for 64-bit, I will get Eclipse for Windows 64-bit. If you are not familiar with Java, try not to be smart here. Stick to 64-bit in all the layers, or 32-bit in all the layers. I think I have seen a table in Eclipse site to show you possible combinations. Forge different combinations. My initial attempt to launch Eclipse failed because I was not careful enough to get the correct bit version in one of the layers (JRE).

You download a zip file, and then extract it. For this, you can use the standard unzipping tool that comes with Windows, like I did.

You can choose the location where you want to install your Eclipse. Unlike many other pieces of Windows software which are installed via an installer, this is just an archive file (as far as I know). Please comment if I am wrong, but I believe you can even move the entire location after you unzipped the archive file – if you don’t need Eclipse any longer, you just delete the entire folder. Hmm, to me it was a culture shock.

After the unzipping process, go into the eclipse folder (as shown). Double-clicking exlipse.exe will launch Eclipse.

The first you do launch Eclipse, you will get this prompt. Specify a workspace folder. This is the folder where your programming artefacts and other things are saved.

If your installation is successful, you will see this Welcome page. Hooray! This does not understand SAP or ABAP yet.

You then need to install the ADP plug-in for ABAP development. To do this, you need to specify where Eclipse can find ADT via a URL, so that it can download necessary components for you.

Press Add.

Specify the URL as shown in this screen shot (or documentation https://tools.hana.ondemand.com/#abap).

Note: If you are using a version of Eclipse other than Oxygen, the URL will likely be different. Follow the documentation.

You don’t need all of these I that I checked – the documentation mentions only the top one (ADT). I just thought “Why not?” and included the other ones.

Click “Next”.

Accept Software User Agreement, and click on Finish.

The installation process will start automatically.

When the installation finishes, you will get this prompt. Restart Eclipse.

After restart, you will see that Welcome page shows this overview page. It lists all the new features for ABAP Development (and others like SAP Cloud Platform; I believe this is because I installed the other plu-ins on top of ADT).

There are a lot of documentation and tutorials available for ADT. Feel free to go off this blog and explore the vast materials.

One thing you will want to do here is to set a perspective designed for ABAP development. A perspective is (in my own term) a default layout of windows within Eclipse designed for a certain programming language or a development task. ADT comes with a perspective for ABAP. To use it, follow the menu tree as shown and choose ABAP.

When you first select the ABAP perspective, it looks a bit too crowded. This is because the Welcome page is still shown. Go back to the overview and close it.

Close the Overview (Welcome) page.

­­

The ABAP perspective will look something like this.

To start ABAP development, you will need to create an ABAP project like shown. However…

If you haven’t set up SAP GUI on your PC, you may get an error like this. You should not see it if you have already connected to your S/4HANA system, you can select one of your systems and proceed to a logon prompt.

You need to log on to your S/4HANA system with your user.

If you are using your own S/4HANA system that we set up in Part I of this blog series, then you will get an error message saying that the connection has been rejected.

We will fix this in the next step.

 

 

4.c. Setting up connection from ADT to Your S/4HANA Instance via Transaction SMGW

So now you have ADT, but the connection to your S/4HANA system has been “rejected”.  I could not find this mentioned in the documentation in CAL.

The solution for this can be found in this blog: https://blogs.sap.com/2017/12/14/sap-s4hana-1709-fully-activated-appliance-hints-known-issues/

OK. Let’s do this in our S/4HANA system. Here I am using SAP GUI.

Go to transaction SMGW, and follow the menu tree.

Now you see the source is restricted to “local” – whatever that means, I am not too certain.

Change this to accept any sources as instructed.

Press the save button above.

Save globally.

Now you can connect to your S/4HANA system from ADT!

 

 

4.d. Generating Flight Demo Data

If you are already familiar with SAP ERP and S/4HANA, you would have seen SAP flight sample programs and data. You can create your own sample data and examples in anyway you wish in your DIY system, of course. But there is an easy way to generate sample data for the flight examples.

Initially in the CAL instance, you don’t have the sample data. Let’s see an example here.

Press CTRL+SHIFT+A, and display a CDS view named S_BOOKINGS.

You can run this to see the data – it returns no data.

Go to transaction SE38 (or SA38, SE80, etc. you should be able to run this within ADT, too). Run program SAPBC_DATA_GENERATOR.

Specify an option (I chose the “Standard Data Record” option), and execute the program.

Now you can see the data in the CDS view, S_BOOKINGS.

 

 

4.e. Creating a CDS view

Let’s create a consumption view to expose some data from S_BOOKINGS as an OData service.

I’ll create a new CDS view.

Give a view name for the ABAP dictionary (for me “NO” is my initial, nothing else), and specify the source.

Press Shift+Space, and insert all elements from S_BOOKINGS.

I commented out some fields for the sake of demo.

Add the tag to let the system know that you want to publish CDS view as an OData service:

@OData.publish: true

The entire source of ZNO_C_BOOKINGS looks like this below.

@AbapCatalog.sqlViewName: 'ZNOBOOKINGS'

@AbapCatalog.compiler.compareFilter: true

@AccessControl.authorizationCheck: #CHECK

@EndUserText.label: 'Consumptin View for S_BOOKINGS'

@OData.publish: true

define view ZNO_C_BOOKINGS as select from S_Bookings {

//S_BOOKINGS

key CarrierId,

key ConnectionId,

key FlightDate,

key BookId,

CustomerId,

CustomerType,

//Smoker,

//LuggageWeight,

//WeightUnit,

InvoiceId,

Class,

//ForeignCurrencyAmount,

//ForeignCurrencyCode,

//LocalCurrencyAmount,

//LocalCurrencyCode,

OrderDate,

//Counter,

//AgencyNumber,

Cancelled,

Reserved,

//passname,

//passform,

//passbirth,

/* Associations */

//S_BOOKINGS

_Customer,

_Flight

//_ForeignCurrency,

//_LocalCurrency,

//_WeightUnit

   

}

 

Press the button second from left to activate my new CDS view.

As the system knows that you intend to publish your CDS as an OData service, it will give you an warning message saying that you still have to do something.

 

 

4.f. Activate Your OData Service in SAPGUI via transaction /IWFND/MAINT_SERVICE

ADT has automatically generated an OData service for you. You need to manually activate it.

Go to /IWFND/MAINT_SERVICE (type “/n/IWFND/MAINT_SERVICE” in SAP GUI).

Press Add Service button.

Specify “LOCAL” as System Alias. The external service name should correspond to the name of your CDS view name. In my case, I filtered the list by ZNO*.

Select your service, and press “Add Selected Services” button.

For our purpose, make it a local object. You do not need to change anything else.

Now your oData service is published and active. Let’s test it.

Press “SAP Gateway Client” button to navigate to a client tool to test your OData service.

 

Execute. You should see a response that looks like this.

You can also test this via your browser. I used Google Chrome here.

Great! Now you have your own OData service based on a CDS view.

Next we will put a user interface on top this to complete our sample Fiori application. To do this, we will set up Web IDE Personal Edition on your PC.

 

 

---

 

 

Step 5. Let’s Set Up Web IDE (Personal Edition)

For those who are skimming through this tutorial to see if it has an answer to your problem, here are quick glance at the tips from my own experience. For others, follow along for step-by-step details.

1. Use 7-zip to unarchive Wed IDE. Window’s native unarchive tool will NOT work (probably due to the deep folder structure)
2. Browser cache may be a problem when launching in Chrome. Try the incognito mode, or different browser such as Firefox if you encounter problem with launching
3. config_master folder does not exist immediately after unzipping Web IDE. It gets generated only when you first open Web IDE successfully in your browser (therefore, you need to solve the cache issue first, if you are unlucky to encounter it like I did)
4. In the config file for connection, use https; DO NOT use http, (URL=https://vhcals4hci.dummy.nodomain:44301) to connect to your S/4HANA system. If you used http (like I did initially), you will be unable to test your Fiori apps. I had many CSRF token problems, and $batch operations do not work because it uses the POST method of HTTP protocol

 

 

5.a. 7-zip

Do not use Windows’s standard unzipping tool to unzip Web IDE archive file. The unzipping process completes, but it will not launch.

I’m sure you could use a unarchiving tool other than 7-zip. It worked for me, and you don’t have to worry about the license to use it (free and open source; most code under the GNU LGPL license).

You can get it here: https://www.7-zip.org/

This downloads an executable file. Execute it to run the installer.

Yes, I got the 64-bit version.

 

 

5.b. Setting Up Web IDE Personal Edition

For our DIY purposes, I used Personal Edition. You can download the zip file from here: https://tools.eu1.hana.ondemand.com/#sapui5

Use 7-Zip to unarchive the zip file. I chose the option of Extract… to choose the location.
In my case, I created a folder WebIDE directly under C:\

This takes quite bit of time. In my case, from memory, it was longer than my lunch time.

The application will be located in a folder named “eclipse” – don’t be confused with ADT. It is not the same, of course.

Double click on orion.exe will open a new window and automatically start a server.

Open your browser, and go to http://localhost:8080.

Create a new account for Web IDE and login.

Successfully launching Web IDE will automatically create config_master folder and its subfolders.

Note: The first time you have just unarchived the zip, there is no config_master folder included. It is only after you have first launched Web IDE that you will find it (generated by the system). I spent an aweful lot of time looking for the folder.

 

Create the config file as specified in the documentation.

Mine look like this. I did not add all the usages. This worked for me. Save the config file.

Note: Make sure that your URL is https://, not http://. I spent a few days and nearly gave up writing this blug because of the issues associated with http://. Fiori apps won’t work properly in the next step if you use it. Make sure to use the correct https and port.

And… I think you will need to shut down the server (just close the window for orion.exe that looks like a command prompt), and restart it (sorry, I was in a bit of rush here and did not record all the fine details).

 

 

5.c. Create a Fiori app using the OData service

Start Web IDE server, and log on via browser.

Now you will create an Fiori list report application that consumes your OData service.

The process is straight forward and there are many great and detailed tutorials available. Here I will just let the pictures talk.

Click on the big green “play” button to test the app.

It is a full-fledge app — try the filter function, for instance.

You can see the filter for “J” worked.

Yes, this is it!

Congratulations! You have just created your own Fiori app.

 

 

---

 

 

Related Blogs

• Carine Tchoutouo Djomo, Be prepared for the new ABAP programming model in SAP S/4HANA.

There are a plenty of good tutorials on how to develop Fiori apps, etc.

If you are just starting out, perhaps this Q&A will be useful. Refer to Jocelyn Dart‘s response to a question of “Where do I start”?” (and perhaps many of her educational blogs on Fiori development).

• https://answers.sap.com/questions/410546/where-to-start-fiori-for-s4-hana-as-an-abab-hana-d.html

 

---

 

 

Closing

I’ll admit; I envied full-stack developers in other development environment. They can (and perhaps need to) build their own server and stack up all the tools they need; almost self-sufficient. Yes, I think the lawn next door looks greener; however, this was one of the biggest sources of motivation of writing this blog series… Some so-called “negative” emotions (such as envy and jealousy) can be channelled into a rather positive feat.

There are a great amount of good tutorials available for ABAP and Fiori development. But I felt that it might be a little challenging for people who are just starting out, or who have other priorities but would benefit from even a short period of hands-on exposure to development in the new SAP environment (I had project managers and experienced functional consultants in mind). What seems to be missing to me was a quick travel guide to prepare for the journey — setting up the environment for ABAP and Fiori development. I have been exposed to some philosophy of DIY — if a tool is not available, think if you can make it.

So I did. Here is a travel guide to (I hope) help you prepare for a fun journey ahead. Hope there have been some useful pieces for you. Your journey has not even begun. Hope you will have a lot of fun along the way.