ABAP on Cloud – 10 – First Fiori Project on Cloud – 1

2
5501
First Fiori Project on Cloud

New shoots in the plant keep emerging when hope is lost, or just seemed to have been lost. But, nothing is never lost for ever. It is just a pause to emerge more stronger than ever before and more determined to stay growing. What is the relevance of this to our article? We just wanted to write something motivating. 😛

With that we now head to the most anticipated part of this series, i.e. Fiori. Scary for some, hope for others. We leave it to the reading mind to decide after next, hmmm, 4 following tutorials may be. 🙂

Well in the preceding article we saw how the Fiori App looks in the preview. In the next few days and weeks the concept of actual implementation of Fiori App will be crystal clear to all of you diligent readers.

In the following few steps we shall begin our journey towards deploying an app in SAP Cloud Platform utilizing the OData service built in Article 9.

STEP 1:

Open the link for logging in into the SAP Cloud Platform.

STEP 2:

Click on “Trial Home” and then a colorful screen is seen.

STEP 3:

Click on “Launch SAP Web IDE”.

Wait until the Web IDE opens in New Tab. I said wait. Not sure how long. 🙂 Depends which part of the world you are !

I mean near the north pole, it would be rare to get this loaded in your computer screen. You know why? North Pole is fast changing its place very fran·ti·cal·ly.

STEP 4:

Once the Web IDE loads, look for the “</>” icon. What is the significance. Is it a warning sign. It tells the user:

“You are only the zone of TAGS !!! Beware no use of ABAP” 🙂

The icon “</>” is used to direct the user to the workspace. If you are logging for the very first time, it should look like:

STEP 5:

Right click on Workspace. Click on “New”. Choose “Project from Template” and click again.

STEP 6:

Make sure to select “Cloud Foundry” and SAP Innovation (1.78 ) or any latest SAPUI5 Version.

STEP 7:

Select the Multi-Target Application and click on “Next”.

Remember the shorthand notation, MTA. It is often used and to be qualified as a Full Stack Developer, you need to recall it and use it. 🙂

STEP 8:

Provide a meaningful project name and click on Next.

STEP 9:

Again an IMPORTANT step here: Never forget to CHECK the “Use HTML5 Application Repository”.

Click on Next.

STEP 10:

Click on Finish. Proud Moment as the very first of MANY UI5 Projects has been created successfully. Hurray !!!!

STEP 11:

You must be able to see the below screen. If not then refer next step.

*STEP 11:

Click on the eye opener and you must be able to see the details as seen above. Even if this is not helping, go back to STEP 1 and check again if anything is missing.

That’s all we have for this article!!! Hope you enjoyed and are feeling excited. It is an amazing journey of creating a SAPUI5 application. In the coming tutorials in this series, we will create some cool Fiori Applications on Cloud and actually see them in action. So, please join us in those articles as well.

We stop at this and in the next article we shall have a deep look at integrating the service from back end ABAP on Cloud environment.

Sl. No.ArticleLinkArtifact/Summary
1ABAP on Cloud – 1 – IntroductionClick Here 
2ABAP on Cloud – 2 – ABAP Trial Instance on CloudClick HereTrial Account 
3ABAP on Cloud – 3 – Eclipse Set-up for ABAP CloudClick HereEclipse with ADT
4ABAP on Cloud – 4 – Your First ABAP Cloud ProjectClick HereABAP Cloud Project
ABAP Cloud Package
5ABAP on Cloud – 5 – Introduction to RESTFul ABAP ProgrammingClick HereCDS and Introduction
6ABAP on Cloud – 6 – DB Creation and Root View in ABAP CloudClick HereDB Table with Fields
Domain / Data Element
Root Interface View
7ABAP on Cloud – 7 – Insert Records through Class and Create Metadata ExtensionClick HereNew ABAP Class in Cloud
Metadata Extension
8ABAP on Cloud – 8 – Behavior Definition and Service Definition and Binding & OutputClick HereBehavior Definition
Service Definition
Service Binding
Service Preview
 9ABAP on Cloud – 9 – Experimenting with Metadata Extension and CRUD OperationsClick HereExplanation of CDS Types
 10ABAP on Cloud – 10 – Fiori Application – 1This ArticleFirst MTA Project in Web IDE
 PENDING How to Create a Fiori App
 PENDING Extending Fiori App
 PENDING Unmanaged Behavior Definition

Comment Please!!

Please follow our LinkedIn Page,LinkedIn Group, Facebook Page, Twitter and Instagram.

Do not forget to SUBSCRIBE to our YouTube Channel for Free Courses and Unconventional Interesting Videos.

Save our number +1-646-727-9273 and send us a Whatsapp message ‘LEARN’ to be part of our Learning Community.

All ABAP on Cloud Tutorials

Also, Check ABAP Programming for SAP Fiori Tutorials

2 COMMENTS

  1. Hello Ruthvik,

    Good explanation. But just need to understand, what you have said here is only to create a project work space.

    1. But is there any relation comparing with the previous blog on Fiori App preview.

    2. Also we have seen SD, SB and service preview. What we are going to do with that CDS. Can we deploy some where like in launchpad to use it as an application?

LEAVE A REPLY

Please enter your comment!
Please enter your name here