From scratch: Creating a new SAPUI5 project with destinations, datasources, and models.

What is SAPUI5?  How do you use it?

SAPUI5 is the user  inferface,where we can develope Web Applications for Mobile,Desktop,Tablet.

Developers will develope the Web Application on the base of  sapui5 javaScript tool kit and html5 Web Development standards.

The SAPUI5 toolkit can replace previous technologies, such as Web Dynpro.

Currently we might decide to use SAPUI5 combined with something on the back end that serves a Web service like SAP’s NetWeaver Gateway platform .

Prerequisites to learn sapui5

javaScript

html5

css

jquery

json.

Q) How do we create Web Applications in sapui5?

Ans: The following steps from now will explain everything from scratch.

In general, for everything in software there are some set of rules.here also some set of rules to be followed in the developing of Web Application by using  SAP WEB IDE.

STEP1:

First we need to register in SAP WEB IDE.

Here in this first step you will learn how to register .The following link will help you to take you to the register page.

URL:https://account.hanatrial.ondemand.com/#/home/welcome

STEP2:

Follow the pictures.

STEP3:

Now we need to select the SAP WEB ID from the sevices(Go to Expand Navigation Button—>Services—>Select SAP WEB IDE)

for better understanding follow the pictures.

STEP4:

Create New Project by the following.

1. After the above step you will be seeing a screen.where you can see workspace provided by default in the left side.

2. Now go to WorkSpace Right click on it  New—>Project from template.

follow the pictures based on the above steps.

STEP5:

After selecting the project from template.you will be going to a screen called NEW SAPUI5 APPLICATION ,Template Selection.

In that screen we need to select SAPUI5 Application tile.

As shown below

STEP6:

After selecting the SAPUI5 APPLICATION you will be going to next tab called NEW SAPUI5 APPLICATION,Basic Information.

There you need to pass the Project Name which you want to create (example Demo).

In the same page you will be seeing App Descriptor Data in the Namespace field you need to pass the

STEP7:

Now we will move to another tab called Template customization there we need to pass the View type, view name .

In the view type drop down box you will be seeing XML , HTML, javaScript, JSON.

**its better to choose XML to make work easy.

In the view name you can pass the view name by your  own which is related to you project.

Here i am passing view name as Demo

After passing the two field values Now click on Finish.

you will see your project folder below the workspace folder.

Once you enhance the folder you will see many other folders and files.

Finally,this is the way to create a New Project.

Note: Till now we see how to create a project.From now you will understand about each folder which is the part of your project folder.

Here you can see the Folder or File and its use.

CONTROLLER: SAPUI5 uses the controller to seperate the view logic from model logic.

CSS: CSS is used for presentation purposes; i.e. how the elements rendered on to the screen.

These CSS can be done by three ways .

chrome tools

Internal Style Sheet

External Style Sheet.

I18n: The i18n file contains mainly keys and values,keys are language independent and values are lanuage dependent texts.

These keys of i18n files are used by the application to identify and access the corresponding values.

MODEL: Data Binding is used to bind the two Data sources or Information sources together and to keep them to sych.

Model instances holds the data and provides the method required to set data or to retrive the data from a server. 

VIEW: View are used for coding Functions and Application logic.UI Elements are created in view.xml files and controller.js files

SAPUI5 concentrating more on XML because it is very easy to understand and code for developers.

Component.js: Components are Independent and  resuable parts used in sapui5          Application.

An application can use components from different locations from where the application is running.

components cant be developed by different developments teams and used in different projects.

components also support the encapsulation of closely related parts of an application in to a particular component.

it is easy to code and understand.

INDEX.HTML: It contains references for the libraries the theme ( eg:sap_bluecrystal).

information for the SCRIPT TYPE and SCRIPT ID .This file also refers to the Project Name,View type and name.

Default location for placing the controls on the UI later on in the HTML body.

MANIFEST.JSON: This file is used as a descriptor. It replaces the Application configuration file. It was written in javaScript Object Notation(JSON) format.

The existence of manifest.json file must be declared in the component metadata.

.PROJECT.JSON: Project related settings are stored in a .project.json file.

this file is located directly within the root folder of a project.

Neo.app.json ( configuration file): An SAPUI5 application may contain a configuration file which tells the Hana Cloud Proxy how dedicated URLs have to be served by the Proxy.

This file named as neo.app.json must be located in the root folder of the repository.

 

Until now we have discussed on new project creation.

Now we will discuss on creating a Destination, Datasource, Model.

1.Why do we need to create Destination?

Ans: Destination are basically required for communication.in software world destinations are used for communication of your application to a remote system that is a cloud or on-premise system.

we will create a destination by giving it a Name and Url of the remote system or service,the authentication type, and some other configuration.

2.How to create a Destination??

Here are the following steps to create Destination.

STEP1:

Go to Expand Navigation Button—>Connectivity—>Destinations.

After expanding the connectivity Select Destinations.

Destinations page will open there you can see three tabs New Destinations, Import Destinations, Certificates.Now you need to select New Destination.

After selecting New Destination we will see a Destination Configuration.There we need to fill by the following way.

Name:NorthWind

Type:HTTP

Description: Eg: Northwind OData Services.

Url:http://services.odata.org

Proxy Type:Internet

Authentication:NoAuthentication

After filling the Destination Configuration we need to fill Additional Properties,by clicking a New Property Button.

In the Additional Properties, we need to pass the following values.

WebIDEENABLED: True

WebIDEUsage:odata_gen

WebIDESystem:Northwind_Data then save the Additional Properties.

After saving the Additional Properties Check the Connection.

you will see a Check Connection Success Message.

By this way, we can create Destinations.

Now we will see how to create Data Source.

Q) What is a Data Source?

Ans: Data Source is a set of logical files which is used in business scenarios.

Q) How to create a Data Source?

Ans: The following are the steps to create a Data Source.

Step1: Go to manifest.json and double click on it.

Step2: Go to Data sources tab

Step3: click + icon to add OData Services

After pressing the + icon it will take you to the next screen.

The above screen which you are seeing there we need to select Service URL.After selecting the Service Url you will be seeing Choose a system to connect to the required service.

Once you click on to it you will see Northwind OData Services.Select that like shown in the below picture.

After passing the Northwind OData Services there will be on the more empty field.There you need to pass the URL as shown in the below picture.

Once you pass the URL then test it by pressing the test button.

After pressing the test button if the Data you entered is correct you will see the following the screen.

Now Click Next.

After pressing the Next button you will see a confirmation Screen.There is check where you should not check it for now.

Then click on Finish.

Now Successfully we have created Destinations & Data Source.

Now we are going to create a Model.

Q) What is a Model?Why?

Ans: Model in SAPUI5 means that binding the Data from many Data Sources.That Data will be maintained in Model instances, provides the methods which are required for our Business logic.

for a better understanding, we can simply say it as an Alternative Data source where Developers will Create for their easy access purpose.Gathering the data from different sources putting into a virtual place called Model.

Q) How to create a Model?

Ans: Model can be created from many different ways some of them are the below two ways.

A) javaScript

B) Manifest.json file.

Now we are going to see how a model can be created using Manifest.JSON file.

Step1:

Open a Manifest.JSON file and select the models link at the top of the screen.

Step2:

Click the ” + “ Button to create a new model.

Step3:

In the new model dialog box select the following

ModelName:       (leave it as blank)

ModelSource:       select the Radio button (Default)

In the Drop down Box select Northwind.svc.

Check the check box and Press “OK”  as shown in the picture.

After pressing the “OK” button you will be seeing some fields as shown in below picture.

Change the Binding Mode property as ” Default ” by clicking on it.

As shown in the below picture.

Finally, click on “Save”. As shown in the below screen.

Thus we saw how to create “Destinations” ” Data source ” ” Model” why to create? How to create? and also I gave the description for each and every file in a Project & uses.

 

 

                                                  I hope the content in this blog is useful for all beginners.

Thank you…