cancel
Showing results for 
Search instead for 
Did you mean: 

Beginners guide to SapUI5

Hello experts,

I would like to start developing mobile applications with sapui5, but before going into coding i would like learn some general info,

- What are the ways to develop a mobile application for sap and how can i decide which is the best for me ?

- Where should i start to learn sapUI5 ? I have been through SDN Forum but could not find a topic for a beginner..

- Which technologies do i need to use or install in order to develop a sapui5 app ?

I know this is quite basic for most people but i should start from scratch,

Kindest Regards,

Yasin,

Accepted Solutions (1)

Accepted Solutions (1)

former_member182874
Active Contributor

Below answers to your query :

  1. Where should i start to learn sapUI5 ?

  • UI5 Development Kit for UI5 :

2.  Which technologies do i need to use or install in order to develop a sapui5 app ?

Installation :
Tools required :

Please let me know, if you need any other details
former_member182874
Active Contributor
0 Kudos

Further You will have to integrate, UI5 toolkit to your eclipse and Tomcat Apache as well to your eclipse.

Former Member
0 Kudos

Hi Tejas,

         Can we use this to build a web app that uses an RFC from the SAP backend?

Regards,

Ravi

former_member182874
Active Contributor
0 Kudos

Hi Ravi,

UI5 can run on many different platforms. You might need Gateway installed, as Gateway makes it a lot easier to consume services from ECC and build UI5 applications on top.

Normally we are creating an OData service through Gateway which is interacting between SAP backend and Front end (UI5)

Regards,

Tejas

Former Member
0 Kudos

Hi Tejas,

       I was curious to know why should one prefer SAPUI5 instead of  Sybase Unwired Platform which provides an easier way to connect to SAP back-end or the gateway (the scenario being developing a web app which can be opened through a web browser and NOT a mobile app).

Regards,

Ravi Chaudhary

former_member182874
Active Contributor

I think UI5 has far more better look and feel . Many advantages in terms of User interface. Application is written in javascript, which is highly in demand in web application programming.

  • SAP UI5 is an open source which supports technologies such as OpenAJAX, LESS, ARIA etc.
  • The layout of the app is prepared with the use of HTML5 and CSS3, which provides flexible solutions dedicated to many devices and screen resolutions
  • . Support of jQuery means SAPUI5 has no constraints concerning the
    development of animations and effects
  • Open source libraries delivered by SAP allow developers to extend
    existing UI controls (dialogue windows, charts, tables, buttons, combo-boxes,
    data pickers, accordions) as well as to create new ones from scratch. To edit
    UI controls a developer can use the ECLIPSE editor
  • The SAPUI5 technology supports the MVC (model–view–controller)
    architecture pattern, which enables every programmer get well-structured and
    understandable code
  • The prepared SAPUI5 application can be stored directly on a built-in SAP
    web server or on open source platforms like Apache and Tomcat. It also runs on
    various platforms such as SAP NetWeaver AS ABAP/Java, Sybase (SAP Unwired
    Platform) and SAP Hana XS
  • SAPUI5 can work with the newest version of Sybase Unwired Platform
  • Communication between a SAPUI5 app and the
    SAP system is done through secure oData services - the newest standard prepared
    by Microsoft. OData is proven secure technology which is currently used by
    Facebook, eBay, Netflix and Stack Overflow.
  • SAPUI5 helps to increase your security
    thanks to its cross-domain policy and indirect connection to the SAP server
    through SAP NetWeawer Gateway, OData and the latest SUP (Sybase Unwired
    Platform)
  • SAPUI5 enables the combination of multiple data sources such as oData services,
    databases and external systems, as well as the data from multiple SAP systems,
    all in one app

I hope these points will be helpful

BR

Tejas

Former Member
0 Kudos

Hi Tejas,

          That was very helpful. Thanks for sharing. I have SUP2.2 SP02 version and I am not sure if that would allow me to develop a web app that can be accessed through tablets and mobile web browser. If I can , could give me some details on how to go ahead with that? Also, isn't the SUP connecting to the SAP servers using the OData protocol?

Regards,

Ravi Chaudhary

former_member182874
Active Contributor
0 Kudos

No Gateway will connect you with OData Service which connects with Frontend ..No idea on SUP2.2..

Usha
Advisor
Advisor
0 Kudos

Hi Tejas,

As per your reply

2.  Which technologies do i need to use or install in order to develop a sapui5 app ?

Installation :

Tools required :

i have completed the above steps --what is the next step  to proceed?

Can you share the information on how to integrate, UI5 toolkit to eclipse and Tomcat Apache as well to eclipse?

Regards,

Usha

former_member182874
Active Contributor
0 Kudos

Hi Usha,

Please find the detailed procedure for setting up UI5 via Eclipse

1. You have to Integrate UI5 :

  • First download UI5 plugin :

http://www.sdn.sap.com/irj/sdn/go/portal/prtroot/docs/webcontent/uuid/c08465d5-b833-2f10-e59d-f67a5c...

2. Integrate SAP UI5 in Eclipse :

  • Open eclipse
  • Click Help > Install new software

3. Provide path for the UI5 folder

4. Download JDK 6 (Not jre)

5. Goto Windows > Preferences > Java > Installed JREs > Once JDK is installed , check on Jdk 1.6.0, which should appear in window like this below

6 .Click Ok


7. Now add local server (Apache tomcat 7 latest)


8. Goto Windows >preferences> servers> Runtime Environments >Add >Next


9. Select Jdk 1.6 from drop down  as below :


10. Finish


For Sample app creation :

  1. https://sapui5.netweaver.ondemand.com/sdk/#docs/guide/HelloWorld.html

Follow this thread :

  1. http://scn.sap.com/thread/3297804
  2. https://sapui5.netweaver.ondemand.com/sdk/#test-resources/sap/m/demokit/demokit-home/index.html
  3. https://sapui5.netweaver.ondemand.com/sdk/#docs/guide/HelloWorld.html
  4. https://sapui5.netweaver.ondemand.com/sdk/#docs/guide/ApplicationSkel.html

Let me know if still facing problem with Installation.

Usha
Advisor
Advisor
0 Kudos

Hi Tejas,

Thanks for the explanation and time.

I was able to setup the environment and started working on it.

Regards,

Usha

former_member182874
Active Contributor
0 Kudos

Great !!

Former Member
0 Kudos

Hi Tejas,

Our company is studying the Pro and Cons of UI5.  Some very fundamental questions that need your help :

1. Regarding the development environment,  are there any libraries that are availble for UI5 programs to call for common modules/functions?  We are worrying that additional libraries (such as that from Fiori) need to be installed so that common functions need not to be developed from scratch.

2. The learning curve for UI5.

    How would you compare the learning curve for UI5 against for example, ABAP WDP?

Thanks

Ivan

former_member182874
Active Contributor
0 Kudos

Hi Ivan,

I would like you to share your discussion in a new thread, such that people across the community can answer your query and you are satisfied, and people who are new to UI5 can get relevant answers.

Request you to create new thread for the same and tag it with #Fiori #UI5 #Fiori_ui5 (whichever relates your question)

Regards,

Tejas

0 Kudos

Hey Jejas,

             How we can connect ABAP (Business logic) and UI5 (Presentation logic website base for end user)?

Thanks.

former_member182874
Active Contributor
0 Kudos

Hi Darshan,

BY connection do you mean getting data from ABAP systems and populate it in UI ?

If yes, then you can introduce Gateway system in middle of ABAP and frontend. You have to connect abap and gateway system with trusted RFC and create one gateway service which will get the data from backend system,


Once you have the service, you can create a UI5 application and consume this service to populate data in the UI.

Let me know if my response is not clear.

Regards,

Tejas

0 Kudos


Hey Tejas,

  

   BY connection do you mean getting data from ABAP systems and populate it in UI ?

   Yes, That is what i mean (as well vice-versa i mean UI to ABAP too)


   If yes, then you can introduce Gateway system in middle of ABAP and frontend. You have to connect      abap and gateway system with trusted RFC and create one gateway service which will get the data from    backend system.

  Tejas,Can you please explain with screenshot or any link to understand verywell?


Thank you,

Darshan

former_member182874
Active Contributor
0 Kudos

You should find very easily in SCN ..Still you can check this links for architecture options for SAP Fiori applications or UI5 applications should also follow same paradigm.

You should follow this presentation Fiori apps are UI5 apps only, so you can take this example.

Regards,

Tejas

0 Kudos

Hey Tejas,

First of all Thanks for lovely information. I learn so many things from your reference.

Basically i need Gateway service access in Netweaver to run UI5.

Thing is that SAP has also introduced SAPWebIDE.

So a question comes in my mind that what are the basic difference (adv/disadv) to develop UI5 application in SAP WebIDE and Eclipse(Kepler,Luna)?


Thanks,

DARSHAN

former_member182874
Active Contributor
0 Kudos

Hi Darshan,

Please open a new discussion so that people across SCN can search similiar queries.

Regards,

Tejas

Venkymachineni
Participant
0 Kudos

Hi Tejas,

Do we need SAP ABAP knowledge for SAPUI 5 development, I mean writing oData services for SAP backend interaction?

former_member182874
Active Contributor
0 Kudos

Sap ui5: html5/javascript/css/jquery

Sap gateway: advanced abap/ooabap(Services will be created here and will be xonsumed in UI5)

Answers (2)

Answers (2)

0 Kudos

Got the following links from search , that may be useful for you

For installation part you can refer this

http://help.sap.com/hana_one/SAP_UI5_Reference_for_SAP_HANA_en.pdf

For using ( developer guide ) http://help.sap.com/hana/SAP_UI5_Developer_Guide_for_SAP_HANA_en.pdf

AndreasKunz
Advisor
Advisor
0 Kudos

Hi Yasin,

skipping the first question and directly going to SAPUI5, I would recommend

https://sapui5.netweaver.ondemand.com/sdk/

as starting point, in particular the "Developer Guide" section.

SAPUI5 development is very much normal web development like with any other JavaScript UI library. If you know HTML and CSS well, you can start right away, otherwise you should google for some JS tutorials first.

A very first step in UI5 could be to understand how to write a very simple Hello World application. From there you could continue browsing the controls and adding them to the application, or look at other topics from the guide.

The UI5 Mobile section has a similar simple example and explains some specifics, but basically when you know UI5, you can do both mobile and desktop applications. It's ONE toolkit.

Actually you do not need to install ANYTHING to try UI5, at least for the very first steps you can just go to jsbin and modify the Hello World example there:

http://jsbin.com/aku_SAPUI5_HelloWorld/1/edit

It loads SAPUI5 from the NetWeaver Cloud (but this does not work in IE8 and IE9, so use Chrome, Firefox or IE10).

If you want to go deeper (e.g. using several files), you can do the same in Eclipse or other IDEs, deploy on your local web server and still reference UI5 from that central server, or also deploy UI5 on your local Tomcat server and reference that one. It's just one WAR file. (And it makes loading times faster.)

Regards and have fun

Andreas

0 Kudos

Thanks Andreas, very helpful...

Former Member
0 Kudos

Thank you Andreas. This was really helpful.