A few words of intro

Welcome to the first tutorial from the series of “SAPUI5 – from Zero to Hero”. The objective of the series is to give you an introduction to SAPUI5, show you how and where to develop using it and finally, extend your development skills by this additional frontend framework.

We will release one blog post a week. The overall agenda is still being planned and will be posted once finalised. If you already have some knowledge in the area of SAPUI5, you might find the initial couple of weeks boring. However, as time goes on, it will get more and more interesting for the advanced UI5 developers out there, I promise! Make sure you subscribe to the newsletter to stay up to date

First things first

SAPUI5 is a frontend framework designed and developed by SAP. Its objective is to provide a consistent and user-friendly interface with the help of reusable elements. UI5 is a MVC-based, JavaScript framework which is now widely used by developers worldwide. Its main purpose is business applications but some of the features it offers can be useful in other areas, including web development, even though the creators haven’t really meant it. Being JavaScript-based, it also means that it can be freely integrated with other existing JS frameworks, whatever the need!

Before you move on, take a look at some SAPUI5 Demo apps to get an idea of what you’ll be learning here

Facts

  • JavaScript based frontend framework
  • Utilises the MVC principle
  • Flexible View Types:
    • XML
    • JSON
    • JavaScript
    • HTML
  • Mainly built for business applications
  • Maintained and developed by SAP
  • Supports all major Browsers*
  • Doesn’t need a SAP system to run

* SAP plans to end support for IE at some stage in 2021, you should keep an eye on the official documentation to get more details.

Fio… what?

Fiori is a term that pops up a lot. If you are at all up to date with the newest SAP technologies and strategy, you have surely heard it too. What is it and how does it relate to SAPUI5? Well, there is a strong connection of the two.

SAPUI5 is a frontend development framework, Fiori is essentially a set of guidelines and elements that are built on top of SAPUI5 to provide the user with consistent experience. Additionally, Fiori now allows the user to build a frontend application without writing a single line of JavaScript. Instead, it bases the application on backend annotations. We will not go into Fiori for the time being as the objective of these tutorials is to learn the raw SAPUI5 framework.

One additional term that you’ll often see is the SAP Fiori Launchpad which is a Fiori application which groups other Fiori apps (ehhh…). In simple terms, it is a dashboard which collects links to other Fiori apps available on the system. The links are often accompanied by colour-coded KPIs to make the apps that require user’s attention stand out. I would highly recommend configuring and using the Fiori Launchpad if you end up building and actively using more than one UI5 app. More on that in the official documentation

Open or not Open, that is the question

If you’ve got so far and your desire to get going with some basics has got stronger, you are probably thinking to yourself, how much does it cost? Well, I have some good news for you here! Nothing! Well, almost nothing.

SAPUI5 is originally included with the following SAP licences:

  • SAP HANA
  • SAP Cloud Platform
  • SAP NetWeaver >7.4

So, if you have access to any of the above, ask your administrator to set you up with a development account. If you don’t, nothing to worry about, you can still get going, either with a free trial account on the SAP Cloud Platform or, with OpenUI5.

OpenUI5? what is this? You are probably asking yourself. It is essentially the free version of SAPUI5. SAPUI5 is a library of the most advanced, paid features and functionalities offered by SAP. OpenUI5 is the free, open-source subset of it. There are some limitations in the scope offered OpenUI5. However, the base is similar and we can freely use OpenUI5 to get started with our tutorials. For the complete list of differences, refer to the official SAP documentation.

Where and how to start?

Ok, we are more less done with the introduction, what’s next? We need to configure a development environment. There are multiple ways of developing in SAPUI5. You can install it as a npm dependency or bootstrap it to a framework of your choice – see more. Alternatively, as the “SAP-native”, preferred option, you can also use SAP WebIDE which doesn’t require any setting up. We will go with this option in our tutorials as it will help us skip the unnecessary prep work that many first-timers can get confused with. As you get better and better, you can try other options by yourself and decide which is the most optimal.

For the purpose of our tutorials, if you have no access to a licenced WebIDE, you can create a free trial account here. Do it now and comeback once you are done.

Ok, once your account is created and confirmed, go to HANA Trial cockpit and select the option “Launch SAP Web IDE”

Once SAP WebIDE launches, you will be presented with the home screen where links to the Learning center, workspace and creation of sample projects will be shown. SAP WebIDE is essentially an all-you-need tool to build, test and deploy UI5 applications. Additionally, it can integrate with git to help you collaborate with your team of developers. Feel free to click around and see what’s behind every corner of this tool. You will spend a lot of time looking at it in the upcoming weeks and maybe even months/years if you decide to pursue your career in UI5 development :)

Remember, it’s only a trial account so you can’t break anything.

Git ready to go!

I assume that you are already familiar with Git and its purpose. If not, I suggest you take some time to read Atlassian’s notes on git for beginners here.

Once you grasp the main concepts, we can proceed to configure our first project (exciting times, huh?)

Create the project

Good thing about SAP WebIDE is that it provides the user with template applications that they can generate and freely modify to meet their requirements. It saves us time on bootstrapping and configuring the project ourselves

  1. From the Home Page, select “New Project from Template”
  2. Search for “SAPUI5” and select “SAPUI5 Application”
  3. Give the project a name and a Namespace of your choice
  4. Select View Type = “XML” and leave View Name = “View1”
  5. Finish the project creation and wait a few moments while it loads

Wow! You have just created your first own little SAPUI5 project, you can now see it in the Project Explorer on the left hand side. Expand it and take a look at the folders inside it. We will go through them in just a second. First, let’s run it to see if it really works. Select the project and press “Run” on the toolbar:

While running the project for the first time, you need to select the file which should be executed. The template application comes with a pre-configured test suite for Unit and Opa Tests. We will take a look at them later on. For now, just select ‘index.html’ and press OK

A new window will open and you will see your own SAPUI5 application in action. Although not very exciting for now, it shows that our project is configured and the required libraries have been included successfully.

Create a git repository

I’m a strong believer of the theory that no project should ever be executed without Version Control (VC) in place. There are multiple options to choose from, however, for the purpose of our tutorials, we will focus on Git as it nicely integrates with the WebIDE and comes as part of the hana trial account.

Let’s now create the repository, link our newly-created project to it and make the first commit.

  1. Navigate to the SAP Cloud Platform Cockpit
  2. Go to “Services” and search for “git” using the search field on the right hand side
  3. Select the “Git Service” tile and make sure it is enabled, if not – click “enable”
  4. On the bottom of the page, press “Go to Service”
  5. Press “New Repository”
  6. Give the repository a name and an optional description. Deselect the option “Create empty commit” and press OK
  7. Your newly created repository should now appear just as below
  8. Select the repository by clicking on its name and copy the given Repository URL
  9. Now, go back to the SAP WebIDE Development view
  10. Right-click on the tutorial project and select Git -> Initialize Local Repository
  11. Confirm your e-mail address and user name (they should already be prefilled) and press “Save”
  12. Now, in the top right corner you will see the success message and an option to “Set Remote”, select that option
  13. Here, paste in the URL you’ve copied as part of point 8 and press OK
  14. You should now see a list of changes that were fetched, it should be empty as we haven’t pushed anything yet.
  15. Open the “Git Pane” from the right hand side menu
  16. Insert a commit message “Initial commit”, press commit and push and then select origin/master
  17. “Push has been completed” message should now appear in top right corner.

Super, we have created our sample project and linked it with a git repository. We are now ready to start!

SAPUI5 Project Structure

As promised, let’s get back to the project structure and a quick info about the folders and files contained within the project.

  • webapp – parent folder for our application, files contained outside of it are mainly used for the configuration and you will most likely not need to touch them
  • controller – This is where all of our controllers will be stored. If you are not familiar with the term, look up MVC
  • css – any custom stylesheets (although often not needed) can be added here
  • i18n – Internationalisation – the files contained within this folder consist of language-dependent strings
  • model – as is the case with the controller, this is where the M files of the MVC concept reside
  • test – all of the test-specific files & folders
  • view – this is where our xml views reside
  • Component.js – Think of it as a parent controller of the project controllers
  • index.html – as is the case in any webdev projects, first file that gets loaded when the URL is matched
  • manifest.json – Descriptor file for the application, defines static configuration of the app
  • neo-app.json – SAP WebIDE Project Settings – read by the WebIDE at runtime
  • package.json, package-lock.json – Node environment configuration files (For advanced use only)
  • ui5.yaml – UI5 Tooling config file (For advanced use only)

Wrap up

Although this relatively new SAP frontend framework has only got a small % of the framework market share, the available supports and resources are constantly evolving and most of the basic questions have already been answered. Here is a short list of must-haves when starting off on the UI5 journey.

  • AvoTechs – apparently one of the best SAPUI5 tutorials in the internet… ;)
  • SAPUI5 SDK – Every SAPUI5 developer’s best friend
  • OpenUI5 SDK – Same as above, but for the free version
  • OpenUI5.org – Official OpenUI5 website

If, at any stage of going through the tutorials you find anything unclear, feel free to either e-mail us or drop a comment under the post. We will do our best to further explain the content to make sure everybody is on the same page.

Next topic: UI5 Elements and Internationalisation

Thanks for reading!