Welcome to the Fifth episode of the Series: SAP CAPM Full Stack UI5 Application with CRUD Operations. Till now we have created Development Space in BAS, set up a project structure for development, created entities and exposed the same as Odata services. In this episode, we will create a FreeStyle UI5 Application for the project.

Assumption(OR Must Have to Start):

• You have followed our previous episode where we create entities and exposed the same.

Your project structure should look like below if you carefully followed all our previous episodes.

We will be using Template Wizard to create the UI5 application.

So lets start,  choose the app folder

Click on View & Choose Find Command from the list.

You will get the below screen with list of commands.

Type command

Open Template Wizard

You will see the Template Wizard Screen like below.

Choose SAP Fiori Application from the available list of templates & click start.

This will start the Wizard Flow, First it will show the Floor plans. We have 2 Application types here

• SAP Fiori Elements
• SAPUI5 Freestyle

We will choose SAPUI5 Freestyle as we want to create things from scratch. Secondly, we will choose SAPUI5 Application as the floor Plan & click next.

Now, we will get the option to choose the Data Source for the application. We get the below list of options which include various types of Data Sources.

Here in our case we will use Local CAP Project that we created in our previous episodes. As we want to consume the Entities that we created in our CAP project.

Next it will ask to browse the project folder of the Local CAP Project , so click on browse to map our created project.

It will show all the available projects in your workspace.

Click on the created project & click on Open.

Now , it will show the available Odata services , we will choose Catalog Service that we created in our previous episodes.

Now click on Next to proceed to Entity Selection.

Here it will ask to choose a View Name for your Application.

We are naming it as Home, then click next.

Now we will be asked for Project Attributes.

Kindly follow and use as per the below screenshot.

We want to Deploy the App on Fiori Launchpad so will set FLP Radio button to Yes & click on Next.

Now we will be requested for FLP Configuration.

You can refer to the Below screenshot for the details & click on Finish.

You will see the Application Details like below finally.

Your Final Project structure should look like below:

Now, just to npm install in the terminal to download all required node modules.

npm install

Feel free to drop your comments in the comment section.

In this blog post we have learnt how to create Free Style Application for CAP Based Project

In the next blog post we will see how to set add data to our databse entity.

Further reading – https://cap.cloud.sap/docs/guides/

Next Episode:  Create UI & Integrate OData in UI5 Application on BAS for CAPM Full Stack UI5 Development.