Вы находитесь на странице: 1из 10

16/01/2016 Beginners guide to SapUI5 | SCN

    Getting Started Newsletters Store

Hi, Guest Log On Join Us Search the Community

Products Services & Support About SCN Downloads


Activity Communications Actions
Industries Training & Education Partnership Developer Center

Lines of Business University Alliances Events & Webinars Innovation Browse

THIS DISCUSSION IS LOCKED

27 Replies  Latest reply: 18­Jun­2015 05:33 by Tejas Chouhan  

Share 2 0 Tweet Like 3

Yasin BEDER 24­Jan­2013 10:26

Beginners guide to SapUI5
This question has been Answered.

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,

Correct Answer 
by Tejas Chouhan  on Oct 10, 2013 10:43 AM

Below answers to your query :
 
1.  Where should i start to learn sapUI5 ?
 
UI5 Development Kit for UI5 :
https://sapui5.netweaver.ondemand.com/sdk/#docs/guide/Documentation.html
2.  Which technologies do i need to use or install in order to develop a sapui5 app ?
Installation :
Tools required :
Eclipse Juno Latest :
Tomcat Apache (Server) or Netweaver Portal CE 7.3 for deployment
SAP UI 5 Plug­in installed in SAP NetWeaver Developer Studio/Eclipse.
HTML5 browser support (Works best in Google Chrome)
Install UI5 Tool kit from this link :
http://www.sdn.sap.com/irj/sdn/go/portal/prtroot/docs/webcontent/uuid/c08465d5­b833­2f10­
e59d­f67a5cb54d2f
Please let me know, if you need any other details 

Helpful Answers by Andreas Kunz, Ben Wolf, Syam Ks 

91149 Views

https://scn.sap.com/thread/3297804 1/10
16/01/2016 Beginners guide to SapUI5 | SCN
Average User Rating

(8 ratings)

Andreas Kunz  24­Jan­2013 11:14  (in response to Yasin BEDER)

Helpful Answer Re: Beginners guide to SapUI5

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

Like (16)

Yasin BEDER  24­Jan­2013 12:20  (in response to Andreas Kunz)

Re: Beginners guide to SapUI5

Thanks Andreas, very helpful...

Like (0)

Shubham Agrawal  19­Jul­2013 08:22  (in response to Andreas Kunz)

Re: Beginners guide to SapUI5

Thank you Andreas. This was really helpful.

Like (0)

Tejas Chouhan  10­Oct­2013 10:43  (in response to Yasin BEDER)

Correct Answer Re: Beginners guide to SapUI5

Below answers to your query :
 
1.  Where should i start to learn sapUI5 ?
 
UI5 Development Kit for UI5 :
https://sapui5.netweaver.ondemand.com/sdk/#docs/guide/Documentation.html
2.  Which technologies do i need to use or install in order to develop a sapui5 app ?
Installation :

https://scn.sap.com/thread/3297804 2/10
16/01/2016 Beginners guide to SapUI5 | SCN
Tools required :
Eclipse Juno Latest :
Tomcat Apache (Server) or Netweaver Portal CE 7.3 for deployment
SAP UI 5 Plug­in installed in SAP NetWeaver Developer Studio/Eclipse.
HTML5 browser support (Works best in Google Chrome)
Install UI5 Tool kit from this link :
http://www.sdn.sap.com/irj/sdn/go/portal/prtroot/docs/webcontent/uuid/c08465d5­b833­2f10­
e59d­f67a5cb54d2f

Please let me know, if you need any other details 

Like (6)

Tejas Chouhan  10­Oct­2013 10:44  (in response to Tejas Chouhan)

Re: Beginners guide to SapUI5

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

Like (0)

Ravi Chaudhary  05­Jan­2014 22:49  (in response to Tejas Chouhan)

Re: Beginners guide to SapUI5

Hi Tejas,
         Can we use this to build a web app that uses an RFC from the SAP backend?
Regards,
Ravi

Like (0)

Tejas Chouhan  06­Jan­2014 13:37  (in response to Ravi Chaudhary)

Re: Beginners guide to SapUI5

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

Like (1)

Ravi Chaudhary  06­Jan­2014 17:44  (in response to Tejas Chouhan)

Re: Beginners guide to SapUI5

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

Like (0)

https://scn.sap.com/thread/3297804 3/10
16/01/2016 Beginners guide to SapUI5 | SCN
Tejas Chouhan  07­Jan­2014 06:50  (in response to Ravi Chaudhary)
Re: Beginners guide to SapUI5

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

Like (4)

Ravi Chaudhary  07­Jan­2014 15:34  (in response to Tejas Chouhan)

Re: Beginners guide to SapUI5

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?

https://scn.sap.com/thread/3297804 4/10
16/01/2016 Beginners guide to SapUI5 | SCN
Regards,
Ravi Chaudhary

Like (0)

Tejas Chouhan  09­Jan­2014 12:29  (in response to Ravi Chaudhary)

Re: Beginners guide to SapUI5

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

Like (0)

Venkatesh Machineni  17­Jun­2015 14:37  (in response to Tejas Chouhan)

Re: Beginners guide to SapUI5

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

Like (0)

Tejas Chouhan  18­Jun­2015 05:33  (in response to Venkatesh Machineni)

Re: Beginners guide to SapUI5

Sap ui5: html5/javascript/css/jquery
Sap gateway: advanced abap/ooabap(Services will be created here
and will be xonsumed in UI5)

Like (0)

Usha Krishnakumar  20­Feb­2014 23:55  (in response to Tejas Chouhan)

Re: Beginners guide to SapUI5

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 :
Eclipse Juno Latest :
Tomcat Apache (Server) or Netweaver Portal CE 7.3 for deployment
SAP UI 5 Plug­in installed in SAP NetWeaver Developer Studio/Eclipse.
HTML5 browser support (Works best in Google Chrome)
Install UI5 Tool kit from this link :
http://www.sdn.sap.com/irj/sdn/go/portal/prtroot/docs/webcontent/uuid/c08465d5­b833­
2f10­e59d­f67a5cb54d2f
 
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

Like (0)

https://scn.sap.com/thread/3297804 5/10
16/01/2016 Beginners guide to SapUI5 | SCN
Tejas Chouhan  21­Feb­2014 08:25  (in response to Usha Krishnakumar)

Re: Beginners guide to SapUI5

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­f67a5cb54d2f

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 : 

https://scn.sap.com/thread/3297804 6/10
16/01/2016 Beginners guide to SapUI5 | SCN

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.

Like (1)

Usha Krishnakumar  11­Mar­2014 15:27  (in response to Tejas Chouhan)

Re: Beginners guide to SapUI5

Hi Tejas,
 
Thanks for the explanation and time.
I was able to setup the environment and started working on it.
 
Regards,
Usha

Like (0)

Tejas Chouhan  11­Mar­2014 17:09  (in response to Usha Krishnakumar)

Re: Beginners guide to SapUI5

Great !! 

Like (0)

Ivan Shing On Hui  27­May­2014 09:55  (in response to Tejas Chouhan)

Re: Beginners guide to SapUI5

Hi Tejas,

https://scn.sap.com/thread/3297804 7/10
16/01/2016 Beginners guide to SapUI5 | SCN
 
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

Like (0)

Tejas Chouhan  29­May­2014 09:28  (in response to Ivan Shing On Hui)

Re: Beginners guide to SapUI5

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

Like (0)

Darshan Pithadiya  04­Nov­2014 09:50  (in response to Tejas Chouhan)

Re: Beginners guide to SapUI5

Hey Jejas,
 
             How we can connect ABAP (Business logic) and UI5
(Presentation logic website base for end user)?
 
Thanks.

Like (1)

Tejas Chouhan  04­Nov­2014 11:51  (in response to Darshan Pithadiya

Re: Beginners guide to SapUI5

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

https://scn.sap.com/thread/3297804 8/10
16/01/2016 Beginners guide to SapUI5 | SCN

Like (2)

Darshan Pithadiya  04­Nov­2014 16:33  (in response to Tejas Chouhan

Re: Beginners guide to SapUI5

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

Like (0)

Tejas Chouhan  05­Nov­2014 07:30  (in response to Darshan Pithadiya

Re: Beginners guide to SapUI5

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.
 
SAP Fiori ­ Architecture Overview
 
You should follow this presentation Fiori apps are UI5 apps
only, so you can take this example.
 
Regards,
Tejas

Like (1)

Darshan Pithadiya  29­Dec­2014 17:37  (in response to Tejas Chouhan

Re: Beginners guide to SapUI5

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

Like (0)

https://scn.sap.com/thread/3297804 9/10
16/01/2016 Beginners guide to SapUI5 | SCN
Tejas Chouhan  30­Dec­2014 05:14  (in response to Darshan Pithadiya

Re: Beginners guide to SapUI5

Hi Darshan,
 
Please open a new discussion so that people across SCN
can search similiar queries.
 
Regards,
Tejas

Like (1)

Ben Wolf  27­May­2014 11:10  (in response to Yasin BEDER)

Helpful Answer Re: Beginners guide to SapUI5

Hi Yasin,
 
I want to bring in the Boilerplate template.
It's a nice tutorial on how to set up an local development environment with eclipse and also shows a
good structured sample project with SplittApp approach.

Like (2)

Syam Ks  17­Dec­2014 13:40  (in response to Yasin BEDER)

Helpful Answer Re: Beginners guide to SapUI5

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
 
Refer SAPUI5 introduction and pdf collections from sapbrainsonline.com also

Like (0)

Share 2 0 Tweet Like 3

Site Index Contact Us SAP Help Portal


Follow SCN
Privacy Terms of Use Legal Disclosure Copyright

https://scn.sap.com/thread/3297804 10/10