Additional Blogs by SAP
cancel
Showing results for 
Search instead for 
Did you mean: 
jens_glander
Participant

Experienced Java Developers (Eclipse, EGit and Maven) could simply execute the Short Installation Guide of Extension-001 to run the sample web application described in this blog.

This blog describes how you get the Extension-001 code sample "Ui5 OData CRUD Sample Web Application" running on your development Environment.

  1. Check Prerequisites in below section 1
  2. Get a short overview of the Extension-001 OData CRUD Sample in below section 2
  3. Download Extension-001 code sample, import projects and run application in below section 3


1. Prerequisites

  1. You have read before SAP HANA Cloud Code Samples - Extensions of PersonsList Web Application
  2. You have executed the HANA Cloud Platform (HCP) Getting Started tutorial Building your first end-to-end SAP HANA Cloud "PersonsList" Web Application Scenario before, so that you can run your developed PersonsList Web Application on your HCP Development Environment.

        Make sure you have

    • Downloaded the newest available version of this tutorial (currently this is v-1.4.2)

2. PersonsList Extension-001 - OData CRUD Sample Web Application

The PersonsList Extension-001 sample demonstrates how an HCP developer could implement the PersonsList Web Application which uses create, read, update and delete (CRUD) by means of the PersonsList OData service.

1. PersonsList Extension-001 - Application UI

The simple PersonsList UI from the Getting Started tutorial was changed and a panel area was added with which a user can create, read, update and delete personslist entities as shown in the the following screenshot

2. PersonsList Extension-001 - Changed Code

The CRUD example is mainly implemented in personslist.view.js and personslist.controller.js:

a) The UI, i.e. the sapui5 controls are implemented in personslist.view.js:

You find the corresponding controls like table, panel, buttons, etc. easily by looking at the comments marked with green arrows in the following screenshot.

b) The CRUD logic of calling the PersonsList OData service and implementing the corresponding create, read, update and delete actions by using the sapui5 OData model is located in personslist.controller.js:

You find the methods of the corresponding CRUD actions easily by looking at the comments marked with green arrows in the following screenshot.

c) Changed theme in index.html

Compared to the Getting Started application the sap_goldreflection theme has been exchanged by the more appealing sap_bluecrystal


3. PersonsList Extension-001 - Which files were changed?

If you want to know exactly which files were changed in Extension-001 compared to the original PersonsList then you can look at SCN blog PersonsList Extension 002 - Preload Data Sample Web Application and find there in section 2B how to do this

You might ask, why I havn't put this into this blog? I would, if there where not a restriction on the amount of screenshots I could used in my blog 😉

3. Download Extension-001 Code Sample, Import Projects, Run Application...

To make sure that everything works smooth the first time you download and run your first "Extension-001" code sample

I provide here a additional detailed step-by-step screenshot-based instructions, so that you will know

3.1 How to get the newest PersonsList sources (which includes the available extension code samples)

3.2 How to import the corresponding projects of "Extension-001"

3.3 How to run "Extension-001" sample application on your local Java Web Server in Eclipse

Execute the following steps of sections 3.1, 3.2 and 3.3 to get the Extension-001 code sample running on your development environment

Note, the below screenshots assume that have executed the Getting Started tutorial. Depending on how you have executed the tutorial your IDE might look slightly different (e.g. which projects are visible in the Project Explorer view or you have more or less Local Git branches in Git Repository view, etc.).

Ignore these differences and just execute exactly the described instructions.

3.1 How to get the newest PersonsList sources (which includes the available extension code samples)

1. In Git Repository view

a) Select cloud-personslist-scenario root node.

b) Open context menu and choose Fetch from Upstream

2. Confirm the opened Fetch Results dialog with OK

Note, there might be more entries in your Fetch Results dialog depending on the version of your downloaded cloud-personslist-scenario Git repository.

3. In Git Repository view

a) Expand Remote Tracking node

b) Confirm that it contains the node origin/Extension-001.

With these 3 steps you have downloaded the sources of the "Extension-001" code sample.

3.2 How to import the corresponding projects

1. In Project Explorer view remove all personslist projects which names contain the string ”-repo

(if imported otherwise skip this)

a) Select all personslist-repo projects

b) Open context menu on the selected projects and choose Delete

c) On the Delete Resource dialog make sure that the Delete project contents ... option is not selected and then choose OK.

2. If an optional Delete Resources with "resources not in sync" warnings appears then confirm it with Continue

Finally the personslist-repo projects are removed from Project Explorer view

3. In Git Repository view

a) Expand Working Directory node

b) Select the personslist folder node and open context menu on the selected node

c) Choose Delete to remove this folder and it contents from file system

4. In Git Repository view

a) Expand Local branches node

b) Select the currently checked out branch

    (the node which is decorated with the checked icon; in the following screenshot this is the master branch node).

c) Open context menu on the selected node

d) Choose Reset...

5. In the opened Reset dialog

a) Make sure that you select the Hard (index ...) option

b) Then choose Finish

6. Then confirm the opened Confirm Reset dialog with Yes

After this the personslist folder in Working Directory has been recovered according to the checked out branch.

7. In Git Repository view

a) Expand Remote Tracking branches node

b) Select the node with name origin/Extension-001 and open context menu on the selected node

c) Choose Create Branch...

8. On the opened Create Branch dialog

a) Make sure that you select the Checkout new branch option

b) Change the proposed Branch name "Extension-001" to "Extension-001-v1-4-0"

    (where v-1-4-0 corresponds to the current version of the check-out Extension sources as shown in the next screenshot; changing the default branch name and adding the version is not absolutely necessary but best practice and avoids conflict if new updates are downloaded)

c) Choose Finish to create the new "Extension-001-v1-4-0" as Local branch

9. In the Eclipse main menu

a) Choose File > Import...

b) In the opened Import dialog choose Maven > Existing Maven Projects

c) Then choose Next

d) On the next wizard page choose Browse... and navigate to location C:\dev\git\cloud-personslist-scenario\

    (default location of the downloaded repository according to the Getting Started tutorial)

e) Choose Finish to import the 3 personslist projects which contain the Extension-001 sample code.

After this the three imported personslist repo projects are visible in Project Explorer.

3.3 How to run "Extension-001" sample application on your local Java Web Server in Eclipse

To run now the imported projects you just select the personslist-repo-web project and run it on the local Java Web Server.

Note, if you don't remember exactly how to do run the web project, then open the Getting Started tutorial Building your first end-to-end SAP HANA Cloud "PersonsList" Web Application Scenario and open Appendix A1: There execute the First Step: Maven Build of PersonsList Project and then the steps of section A1.1 "Publish and Run PersonsList application on Java Web Server"

As result you will see the Extension-001 CRUD example application for PersonsList OData service running on your local Java Web Server

4. Feedback

I really appreciate your feedback regarding this code sample.

Please add your comments below.

Thanks,

Jens

3 Comments